Skip to content

README.md

Latest commit

 

History

History
75 lines (59 loc) · 2.77 KB

README.md

File metadata and controls

75 lines (59 loc) · 2.77 KB

TODO App Frontend

백엔드 API와 연동되는 React 프론트엔드입니다. 백엔드 구현을 완료한 후 이 프론트엔드를 실행하면 실제 동작하는 TODO 앱을 확인할 수 있습니다.

이 프론트엔드는 이미 완성되어 있습니다. 별도의 구현 없이 백엔드만 완성하면 동작합니다.

기술 스택

기술 용도
React UI 라이브러리
TypeScript 타입 안전성
Vite 빌드 도구 + 개발 서버
Tailwind CSS 유틸리티 기반 CSS
TanStack Query 서버 상태 관리 (API 요청/캐싱)
Axios HTTP 클라이언트
React Router 클라이언트 사이드 라우팅

시작하기

npm install
npm run dev
# http://localhost:5173 에서 실행됩니다

백엔드(http://localhost:3000)가 실행 중이어야 합니다.

프로젝트 구조

frontend/src/
├── components/
│   ├── auth/           # 로그인/회원가입 폼
│   ├── layout/         # 헤더, 레이아웃
│   └── todos/          # Todo 카드, 목록, 필터, 통계, 폼
├── hooks/
│   └── use-todos.ts    # TanStack Query 기반 API 훅
├── lib/
│   ├── api.ts          # Axios 인스턴스 (인터셉터 포함)
│   └── auth.tsx        # 인증 Context (로그인/로그아웃 상태 관리)
├── pages/              # 라우트별 페이지 컴포넌트
├── types/              # TypeScript 타입 정의
└── App.tsx             # 라우터 + Provider 설정

페이지 구성

경로 페이지 설명
/ Home Todo 목록, 통계, 검색/필터/정렬
/login Login 로그인 폼
/register Register 회원가입 폼

백엔드 API 연동

프론트엔드는 http://localhost:3000/api 로 요청을 보냅니다 (lib/api.ts 참고).

인증 흐름

  1. 로그인/회원가입 → 백엔드에서 accessToken 반환
  2. localStorage에 토큰 저장
  3. 이후 모든 요청에 Authorization: Bearer <token> 헤더 자동 추가
  4. 401 응답 시 자동 로그아웃 후 로그인 페이지로 이동

사용하는 API 엔드포인트

Method Endpoint 사용처
POST /auth/register 회원가입 폼
POST /auth/login 로그인 폼
GET /todos Todo 목록 (검색, 필터, 정렬, 페이지네이션)
GET /todos/stats Todo 통계 대시보드
POST /todos Todo 생성 폼
PATCH /todos/:id Todo 수정 (인라인 편집)
DELETE /todos/:id Todo 삭제
⚡