[REFACTOR] 리액트 폴더 구조 개선 (pages/components)

[rbgksqkr]

Issue Number

276

As-Is

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

To-Be

• pages 디렉토리 내에 해당 페이지에 사용되는 컴포넌트 분리(pages > components)
  • 어느 페이지에서 사용되는 컴포넌트인지 파악하기 쉬워짐
  • 페이지 단위로 컴포넌트를 찾기 쉬워짐

Check List

• [x] 테스트가 전부 통과되었나요?
• [x] 모든 commit이 push 되었나요?
• [x] merge할 branch를 확인했나요?
• [x] Assignee를 지정했나요?
• [x] Label을 지정했나요?

Test Screenshot

이전 폴더 구조

276

현재 폴더 구조

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

(Optional) Additional Description

components 안에 나열 vs 컴포넌트 구조대로 디렉토리 구조 배치

컴포넌트가 큰 경우 파일 뎁스가 깊은 컴포넌트 때문에 고민하게 되었어요. 대표적으로 RoundVoteContainer 의 경우, 아래와 같은 뎁스를 갖게 됩니다.

RoundVoteContainer > TabContentContainer > OptionParticipantsContainer > OptionParticipants > NicknameItem

이게 가장 긴 경우긴 하지만, 호불호가 있을 것 같아서 다수결의 의견을 따르려고 합니다!

1. pages/components 에 해당 페이지에서 사용되는 컴포넌트 폴더를 모두 위치시킨다.
2. 컴포넌트 계층 구조대로, 하위 컴포넌트면 하위 디렉토리에 위치시킨다. (현재 구현 방식)

자유롭게 의견주세요~!~

🌸 Storybook 배포 주소

https://woowacourse-teams.github.io/2024-ddangkong/storybook/

[rbgksqkr]

디스코드에서 이야기나눈 것을 정리해보면 일단 2번으로 진행하고 불편하면 다시 바꾸는 것을 고려할게용

1번은 프로젝트를 처음 볼 때(훝어볼 때?) 어떤 컴포넌트가 있는지 보기 편할 것 같고, 2번은 이미 프로젝트에 익숙한 사람이 작업할 때 편할 것 같아요

작업할 때 컴포넌트가 많아지니까 찾기 불편했던 것을 개선하려던 목적이니까, 지금은 2번 방식으로 가는 게 적절하다고 생각합니다!