# 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를 수정하시면 됩니다.