디렉토리 구조 변경

파일 타입 기반 디렉토리 구조를 사용했었습니다. 이렇게 분류를 하다보니 파일이 늘어날수록 한 폴더에 너무 많은 파일이 있어 찾기가 어려웠습니다.

그래서 리액트 폴더 구조의 best practice를 찾아보았고 feature-based directory에 관한 글을 보았습니다. 이 구조를 따르면 기능에 관련된 코드를 한 곳에 모아 관리하기가 쉽고, 추후 앱에 기능이 추가될 때 확장에 더 유연하게 대처할 수 있다는 것입니다.

// 리팩토링 이전
src\components
 ┣ Comment
 ┣ BottomSheetModal
 ┣ Button
 ┣ Carousel
 ┣ PostItem
 ┣ ProductItem
 ┣ Tabmenu
 ┣ TagBar
 ┣ TextActiveInput
 ┣ Top
 ┣ Transition
 ┣ User
 ┣ Modal
 ┣ PostList
 ┣ ProductList
 ┣ Profile
 ┗ Toast

---------

// 리팩토링 후
src\components
 ┣ Elements
 ┃ ┣ Button
 ┃ ┣ Carousel
 ┃ ┣ CircleImage
 ┃ ┣ ScrollToTop
 ┃ ┣ Skeleton
 ┃ ┣ TextInput
 ┃ ┗ Transition
 ┣ Layout
 ┃ ┣ BottomLayout
 ┃ ┗ MainLayout
 ┗ Modal

 features\posts\components
 ┣ Post
 ┣ PostEditor
 ┣ PostList
 ┣ PostListSkeleton
 ┣ PostSkeleton
 ┗ TagBar

위처럼 기존에는 재사용 가능한 공통 UI 컴포넌트와 기능과 더 관련있는 컴포넌트가 섞여있었지만 아래와 같이 공통 컴포넌트는 src/compoonents에, 기능과 관련있는 컴포넌트는 features/[기능명]/components에 분리했습니다.