1. 설계 목표

1.1 디렉토리별 역할을 명확하게 분리

• 각 디렉토리와 파일이 명확한 역할을 가질 수 있도록 설계한다.
  • apis : API 호출 함수
  • assets : font, icon 등
  • components : UI 컴포넌트
  • constants : 상수 정의
  • hooks : 로직
  • stores : 상태 관리
  • styles : 글로벌 스타일 및 테마 정의
  • types : 타입 정의
  • utils : 유틸리티 함수

1.2 페이지가 더 복잡해질 경우 대비

• 확장성을 고려해, 페이지가 복잡해져도 디렉토리 구조를 변경하지 않고 확장되도록 설계한다.

• 중첩 경로를 대비한 구조를 설계해, 하위 페이지를 추가해도 기존 구조를 유지할 수 있다.

• 예시

  <aside> <img src="/icons/close_red.svg" alt="/icons/close_red.svg" width="40px" />

  문제 상황: pages에 index 폴더가 없을 경우

  • 초기 상태

    pages/trip/detail/
      components/
      hooks/
      utils/
      index.tsx
    

  • 확장 시 (하위에 SamplePage 추가)

    pages/trip/detail/
      components/
      hooks/
      utils/
      index.tsx
      **SamplePage.tsx**
    

    • 다른 레벨의 SamplePage 파일과 detail 페이지 관련 파일이 같은 디렉토리에 혼재
    • 디렉토리의 역할이 명확히 분리되지 않음
    • 확장 시에는 디렉토리 정리가 필요 → 추가 작업 발생 </aside>

  <aside> <img src="/icons/circle_blue.svg" alt="/icons/circle_blue.svg" width="40px" />

  현재 구조: pages에 index 폴더가 있을 경우

  • 초기 상태

    pages/trip/detail/
    	index/
    	  components/
    	  hooks/
    	  utils/
    	  index.tsx
    

  • 확장 시 (하위에 SamplePage 추가)

    pages/trip/detail/
      index/
        components/
        hooks/
        utils/
        index.tsx
      sample/
        components/
        hooks/
        utils/
        index.tsx
    

    • detail과 하위인 sample 페이지의 역할이 명확히 분리되어 구조적인 문제가 없음
    • 기존 구조를 유지하며, 새로운 페이지 추가 가능
    • 확장 시에도 일관성을 지킬 수 있고, 유지 보수가 간단 </aside>

1.3 UI와 로직을 분리하여 역할별 테스트 가능

• 디렉토리를 역할별로 분리, 테스트 코드 작성 및 유지보수가 쉽도록 설계한다.
• 관련된 파일(컴포넌트, 스타일, 테스트 등)은 같은 디렉토리에 두어, 빠르게 파일 탐색 가능하게 한다.

pages/trip/detail/index/
  components/
    TripDetailHeader.tsx
    TripDetailHeader.test.tsx
    TripDetailHeader.stories.tsx
    TripDetailFooter.tsx
    TripDetailFooter.test.tsx
  hooks/
    useTrip.ts
    useTrip.test.ts
  utils/
    formatTripDetail.ts
    formatTripDetail.test.ts
  index.tsx

1.4 프로젝트의 일관성 확보