FE 폴더구조 설정

Description

src/├── assets/              # 정적 파일 (이미지, 아이콘 등)│   ├── images/│   └── icons/├── constants/           # 상수 정의 (API URLs, 설정값 등)│   ├── api.ts│   ├── routes.ts│   └── config.ts├── services/            # API 호출 및 외부 서비스 연동│   ├── api/│   │   ├── client.ts   # axios/fetch 인스턴스│   │   └── endpoints/  # API 엔드포인트별 함수│   └── storage/        # localStorage, sessionStorage 등├── routes/              # 라우팅 관련│   ├── index.tsx       # 라우트 정의│   ├── layouts/        # 레이아웃 컴포넌트│   │   ├── RootLayout.tsx│   │   ├── DashboardLayout.tsx│   │   └── AuthLayout.tsx│   └── pages/          # 페이지 컴포넌트│       ├── dashboard   # 경로 기반 폴더│       │   └── Page.tsx│       ├── my-interviews│       │   └── Page.tsx│       └── index.tsx   # DashboardPage, MyInterviewsPage 등 {폴더명}Page로 이름 설정├── features/            # 기능(도메인) 단위 모듈│   ├── auth/│   │   ├── components/ # 해당 기능 전용 컴포넌트│   │   ├── hooks/      # React Query hooks, custom hooks│   │   ├── utils/      # 유틸리티 함수│   │   └── types.ts    # 해당 기능의 타입│   ├── user/│   └── product/├── shared/              # 공통으로 사용되는 모듈│   ├── components/     # 재사용 가능한 UI 컴포넌트│   │   ├── Button/│   │   ├── Input/│   │   └── Modal/│   ├── hooks/          # 공통 커스텀 훅│   └── utils/          # 공통 유틸리티 함수│       ├── format.ts│       ├── validation.ts│       └── helpers.ts├── styles/              # 스타일 관련│   ├── global.css│   ├── typography.css│   └── color.css├── types/               # 전역 타입 정의│   ├── global.d.ts│   ├── models/         # 데이터 모델 타입│   └── api.ts          # API 응답 타입└── main.tsx