<aside> 📍 프로젝트의 전반적인 구조 및 src 폴더 하위 구조, 컴포넌트 파일의 위치, 네이밍 규칙, 관련 스타일 및 테스트 파일의 규칙, 스타일 파일의 위치, 네이밍 규칙, CSS 전처리기 사용 여부, 유틸리티와 서비스 파일 등(필요 시 추가 혹은 제외 해주세요)의 위치와 네이밍 규칙을 정의해보세요.

</aside>

프로젝트 전반적인 구조

src 폴더 하위 구조

컴포넌트 구조 (공통 컴포넌트 및 일반 컴포넌트)

• 위치: src/

  • components/ : 공통 컴포넌트

    → 여러 페이지에서 공통으로 사용하는 재사용 UI 컴포넌트 (Button, Modal, Header 등)

  • features/ : 특정 페이지 전용 일반 컴포넌트

    → 각 페이지별 폴더(HomePage, MakeStudyPage, FocusPage 등)를 만들어 페이지에 종속된 컴포넌트 관리

  • pages/ : 실제 라우팅되는 페이지 단위 컴포넌트

    → /home 등 URL과 매칭되는 화면 구성

• 네이밍 규칙: PascalCase

파일명: PascalCase (예: StudyCard.jsx, FocusTimer.jsx)

CSS 파일: .module.css로 통일 (예: StudyCard.module.css)

src/
├─ components/
│   ├─ Button/
│   │   ├─ Button.jsx
│   │   └─ Button.module.css
│   ├─ Modal/
│   ├─ Header/
│   └─ Pagination/
│
├─ features/
│   ├─ HomePage/
│   │   ├─ StudyList.jsx
│   │   ├─ StudyCard.jsx
│   │   └─ HomeStats.jsx
│   ├─ MakeStudyPage/
│   │   ├─ StudyForm.jsx
│   │   └─ TagSelector.jsx
│   └─ FocusPage/
│       ├─ FocusTimer.jsx
│       └─ TimerSummary.jsx
│
└─ pages/
    ├─ home/
    │   ├─ index.jsx
    │   ├─ Homepage.jsx    
    │   └─ HomePage.module.css
    ├─ make-study/
    │   ├─ index.jsx
    │   ├─ MakeStudy.jsx
    │   └─ MakeStudyPage.module.css
    └─ study-detail/
        ├─ index.jsx
        ├─ StudyDetail.jsx
        └─ StudyDetail.module.css

스타일 파일 구조

유틸리티 및 서비스 파일 구조

커스텀 훅 파일 구조