Project Directory Structure

예시

frontend/
│
├── .github/                           # GitHub 파일
│   ├── ISSUE_TEMPLATE/                # 이슈 템플릿
│   └── PULL_REQUEST_TEMPLATE.md       # PR 템플릿
│
├── public/                            # 정적 파일
│   ├── favicon.ico                    # 파비콘
│   ├── index.html                     # 진입점
│   └── robots.txt                     # 봇 접근제어
│
├── src/                               # 소스 코드
│   ├── apis/                          # API 호출 관련 코드
│   │   ├── instance.js                # axios 인스턴스
│   │   ├── interceptor.js             # axios 인터셉터
│   │   └── ...                        # API 호출 함수 (도메인별 파일 분리)
│   │
│   ├── assets/                        # 이미지 및 기타 리소스
│   │   ├── icons/                     # 아이콘 이미지
│   │   └── ...                        # 그외
│   │
│   ├── components/                    # UI 컴포넌트
│   │   ├── common/                    # 공통 컴포넌트
│   │   └── 도메인명/                   # 도메인별 컴포넌트
│   │
│   ├── hooks/                         # 커스텀 Hook
│   │
│   ├── pages/                         # 페이지 컴포넌트
│   │   └── .../                       # 페이지별 폴더 분리
│   │
│   ├── stores/                        # 전역 상태
│   │   ├── example.js                 # 전역 상태 Hook 예시
│   │   └── ...                        # 전역 상태 Hook (도메인별 파일 분리)
│   │
│   ├── styles/                        # 스타일
│   │   ├── reset.css                  # 기본 스타일 삭제
│   │   ├── global.js                  # 전역 스타일 설정
│   │   └── theme.js                   # 디자인 토큰 정의
│   │
│   ├── index.jsx                      # 전역 설정
│   └── Router.jsx                     # 라우팅
│
├── .env.example                       # 환경변수 목록
├── .gitignore                         # Git 제외 설정
├── .prettierrc.json                   # Prettier 설정
├── README.md                          # 레포지토리 리드미
├── netlify.toml                       # Netlify 설정
├── package-lock.json                  # 상세한 의존성 정보
└── package.json                       # 프로젝트 기본 정보 및 간략한 의존성 정보