[REFACTOR] 리액트 폴더 구조 개선

[rbgksqkr]

Description 💭

• 컴포넌트가 많아지면서 컴포넌트를 찾기 어려워짐
• 어느 페이지에서 사용되는 컴포넌트인지 파악하기 어려움
• FSD도 고려해봤지만 팀원 모두에게 익숙하면서 직관적인 디렉토리 구조 채택
• pages 디렉토리 내에 해당 페이지에 사용되는 컴포넌트 분리(pages > components + index.tsx)

TODO ✅

• 컴포넌트 분리

현재 폴더 구조

src
 ┣ apis
 ┣ assets
 ┃ ┣ images
 ┣ components
 ┃ ┣ GameResult
 ┃ ┣ GameResultItem
 ┃ ┣ NicknameItem
 ┃ ┣ OptionParticipants
 ┃ ┣ OptionParticipantsContainer
 ┃ ┣ ReadyMembersContainer
 ┃ ┣ RoomSetting
 ┃ ┣ RoundResultTab
 ┃ ┣ RoundVoteContainer
 ┃ ┣ SelectContainer
 ┃ ┃ ┣ Timer
 ┃ ┣ SelectOption
 ┃ ┣ StartButtonContainer
 ┃ ┃ ┣ Countdown
 ┃ ┃ ┣ StartButton
 ┃ ┣ TabContentContainer
 ┃ ┃ ┣ EmptyVoteContent
 ┃ ┃ ┣ StatisticBar
 ┃ ┃ ┣ VoteStatisticContent
 ┃ ┣ TopicContainer
 ┃ ┣ common
 ┃ ┃ ┣ AlertModal
 ┃ ┃ ┣ Button
 ┃ ┃ ┣ DeferredComponent
 ┃ ┃ ┣ Dropdown
 ┃ ┃ ┣ ErrorBoundary
 ┃ ┃ ┣ ErrorFallback
 ┃ ┃ ┃ ┣ AsyncErrorFallback
 ┃ ┃ ┃ ┣ RootErrorFallback
 ┃ ┃ ┃ ┣ RouterErrorFallback
 ┃ ┃ ┃ ┣ SpinnerErrorFallback
 ┃ ┃ ┣ FinalButton
 ┃ ┃ ┣ InviteModal
 ┃ ┃ ┣ Modal
 ┃ ┃ ┣ NextRoundButton
 ┃ ┃ ┣ PrevButton
 ┃ ┃ ┣ QueryClientDefaultOptionProvider
 ┃ ┃ ┣ RoomSettingModal
 ┃ ┃ ┃ ┣ CategoryDropdown
 ┃ ┃ ┃ ┣ RoomSettingContainer
 ┃ ┃ ┣ ScrollLock
 ┃ ┃ ┣ SelectButton
 ┃ ┃ ┣ Skeleton
 ┃ ┃ ┃ ┣ GameSkeleton
 ┃ ┃ ┃ ┗ ReadySkeleton
 ┃ ┃ ┣ Spinner
 ┃ ┃ ┣ Toast
 ┃ ┃ ┗ a11yOnly
 ┃ ┗ layout
 ┃ ┃ ┣ Content
 ┃ ┃ ┗ Header
 ┣ constants
 ┣ hooks
 ┣ mocks
 ┃ ┣ handlers
 ┣ pages
 ┃ ┣ GamePage
 ┃ ┣ GameResultPage
 ┃ ┣ MainPage
 ┃ ┣ NicknamePage
 ┃ ┃ ┣ NicknameInput
 ┃ ┣ ReadyPage
 ┃ ┗ RoundResultPage
 ┣ providers
 ┃ ┣ ModalProvider
 ┃ ┗ ToastProvider
 ┣ router
 ┣ styles
 ┃ ┣ utils
 ┣ types
 ┣ utils
 ┣ custom.d.ts
 ┗ index.tsx

Reference 🔎

https://www.robinwieruch.de/react-folder-structure/