79 lines
2.8 KiB
Markdown
79 lines
2.8 KiB
Markdown
# Frontend Documentation
|
|
|
|
Vite + React 기반의 프론트엔드 서비스입니다.
|
|
|
|
## 🔧 기술 스택
|
|
|
|
- **React** - UI 프레임워크
|
|
- **Vite** - 번들러 및 개발 서버
|
|
- **Recoil** - 상태 관리
|
|
- **TypeScript** - 정적 타입 언어
|
|
|
|
## 📁 디렉토리 구조
|
|
|
|
```
|
|
.
|
|
└── src/
|
|
├── api/ # API 호출 관련 모듈
|
|
│ └── auth/ # 인증 관련 API ( ENDPOINT )
|
|
│ ├── auth.ts # 실질적인 API 함수
|
|
│ └── auth.types.ts # API 요청/응답 타입 ( DTO )
|
|
│ └── index.ts # Axios 인스턴스 설정
|
|
├── assets/ # 이미지 등 정적 자산
|
|
│ └── images/
|
|
├── components/ # 공통 UI 컴포넌트
|
|
├── hooks/ # 커스텀 훅 모음
|
|
│ └── useSignUp.ts
|
|
├── pages/ # 페이지
|
|
├── recoil/ # Recoil 상태 관리
|
|
│ ├── Atoms/ # Atom 정의
|
|
│ └── Selectors/ # Selector 정의
|
|
└── main.tsx # 앱 진입점
|
|
```
|
|
|
|
## 🚀 실행 방법
|
|
|
|
### 로컬 개발 서버 실행
|
|
|
|
```bash
|
|
npm install
|
|
### cd src
|
|
npm run dev
|
|
```
|
|
|
|
## 📋 주요 디렉토리 설명
|
|
|
|
- **api**: Axios를 기반으로 API 요청을 처리하며, endpoint별로 디렉토리를 나누어 구성
|
|
- **assets**: 프로젝트에 사용되는 이미지 등의 정적 자산
|
|
- **components**: 재사용 가능한 UI 단위 컴포넌트
|
|
- **hooks**: 회원가입 등 비즈니스 로직을 처리하는 커스텀 훅
|
|
- **pages**: 각각의 라우트에 대응되는 페이지 컴포넌트
|
|
- **recoil**: 전역 상태를 관리하는 Recoil 관련 정의
|
|
- Atoms: 전역 상태 값 정의
|
|
- Selectors: 파생된 상태 계산 또는 비동기 요청 처리
|
|
|
|
## ⚙️ 개발 가이드
|
|
|
|
### 1. 상태 관리
|
|
|
|
- 모든 전역 상태는 `recoil/Atoms` 또는 `recoil/Selectors` 내에서 정의합니다.
|
|
- 페이지/컴포넌트에서는 `useRecoilState`, `useRecoilValue`, `useSetRecoilState`를 통해 접근합니다.
|
|
|
|
### 2. API 정의 및 호출
|
|
|
|
- API 요청 함수는 `api/endpoint/*.ts`에 정의합니다.
|
|
- 요청/응답 타입은 `api/endpoint/*.types.ts`에 정의합니다.
|
|
- `api/index.ts`에 공통 Axios 인스턴스를 구성하고, 토큰을 자동으로 헤더에 포함시킵니다.
|
|
|
|
### 3. 컴포넌트 개발
|
|
|
|
- UI 단위 컴포넌트는 모두 `components/` 디렉토리에 생성합니다.
|
|
- 각 컴포넌트는 독립적으로 `*.tsx`와 `*.module.css`로 구성됩니다.
|
|
|
|
## 📝 주의사항
|
|
|
|
### 1. port 번호
|
|
|
|
- 기본 포트번호는 5173이었지만, React 사용하시는 분들이 편하시도록 3000포트로 임의로 바꿔놓은 상태입니다.
|
|
- 포트번호를 변경하시려면 vite.config.ts안의 port를 수정하시면 됩니다.
|