O2Sound_ver2_final/frontend/README.md

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                # 앱 진입점

🚀 실행 방법

로컬 개발 서버 실행

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