[REFACTOR]: 불필요한 파일 제거 및 라우팅 구조 개선 및 폴더 구조 개선 및 스타일 중복 커스텀

[Ki-Tak]

개요

Resolves: #171

불필요한 파일 제거 및 라우팅 구조 개선 및 폴더 구조 개선 및 스타일 중복 커스텀

PR 유형

어떤 변경 사항이 있나요?

• CSS 등 사용자 UI 디자인 변경
• 코드에 영향을 주지 않는 변경사항(오타 수정, 탭 사이즈 변경, 변수명 변경)
• 코드 리팩토링
• 파일 혹은 폴더명 수정
• 파일 혹은 폴더 삭제

작업 내용

1. 라우팅 구조 개선

• 기존의 명확하지 않고, 꼬여있던 라우팅 구조를 RootLayout, BottomLayout 등 레이아웃 기반의 중첩 라우팅 구조로 변경했습니다.
• 또한, 모든 페이지 컴포넌트에 React.lazy와 Suspense를 적용하여 초기 로딩 성능 최적화를 진행했습니다.

2. 폴더 구조 개선

• 기존 utils 폴더에 있던 throttle 함수를 hooks의 useThrottle 함수로 이동하면서 로직을 수정했습니다.
• clsx 라이브러리를 사용하는 cn 함수를 lib 폴더로 이동하였습니다.
• routes의 path 를 상수로 옮기면서 네이밍을 수정하였습니다. 라우팅 구조를 개선함에 따라 몇몇 구조도 함께 변경되었습니다.

3. 불필요한 파일 제거

• 현재 프로젝트 내에서 사용되지 않는 컴포넌트, 더미 데이터 등 불필요한 파일을 삭제하였습니다.

4. 페이지 스타일 중복 커스텀

• 페이지 단위의 최상위 태그에서 적용되는 스타일을 page라는 커스텀 스타일로 만들어서 재사용성을 높였습니다.

스크린샷

변경된 라우팅 구조

lazy 로딩 적용

AI 분석 토글 색상 변경