[8주차] Team STORIX 김윤성 & 이채연 과제 제출합니다.

[Tutankhannun]

배포링크
피그마

백엔드 선생님들의 api 명세서

구현 방식

• HTTP 클라이언트: Axios
• API 상태 관리: React Query (useMutation)
• 전역 상태 관리: Zustand
• Access Token 관리: Zustand + sessionStorage
• Refresh Token 관리: sessionStorage
• User ID 저장: localStorage
• 새로고침 상태 복구: sessionStorage → Zustand 초기화
• Authorization 헤더 처리: Axios Interceptor
• 로그인 / 로그아웃 처리: React Query Mutation
• 로그아웃 보안 처리: 서버 실패 시에도 클라이언트 토큰 강제 삭제
• API 응답 데이터 검증: Zod (Schema Validation)
• 라우팅 처리: Next.js useRouter

===============================

• 중복되는 ID로 회원가입 불가능
• 회원가입시에 설정한 파트만 투표 가능
• 이미 투표했으면 에러
• 로그아웃 후에 토큰 모두 삭제되어있음

2차 필수 구현 사항

1. 투표 기능: 후보 선택 후 POST /api/v1/votes 호출
2. 후보 목록 조회: 파트장/데모데이 후보 목록 GET 연동 (결과 화면에서 API 우선 사용 + fallback)
3. 투표 결과 조회: 득표수 기준 정렬하여 결과 UI 렌더링
4. 에러 처리: axios interceptor 기반 토큰 처리 + 각 화면 단 에러 메시지 처리

1. 투표 기능

• API
  [ POST ] /api/v1/votes
• 사용자 플로우
  후보 선택 → 제출하기 → useVote().mutate(candidateId)
  성공 시 alert 후 결과 페이지로 이동
  데모데이: /demoday/step3
  파트장: /partleader/step3

2. 후보 목록 조회

• API
  파트장 후보: [ GET ] /api/v1/votes/part-leader
  데모데이 후보: [ GET ] /api/v1/votes/demo-day

• 구현방식
  투표 화면(step2): 현재 UI는 로컬 후보 데이터로 렌더링
  결과 화면(step3): API 조회 결과를 우선 사용하고, 없으면 로컬 데이터로 fallback

3. 투표 결과 조회

• 구현 방식
  useQuery로 후보 목록(득표수 포함)을 가져와 득표수 내림차순 정렬 후 결과 UI 표시

4. 에러 처리
   (1) axios 레벨: 토큰 첨부 + 401 자동 갱신
   (2) 화면 단 에러 처리

프로젝트 구조

src/
├─ app/
│ ├─ login/ page.tsx
│ ├─ signup/ page.tsx
│ ├─ electionSelect/ page.tsx
│ ├─ demoday/
│ │ ├─ step1/ page.tsx
│ │ ├─ step2/ page.tsx, step2Client.tsx
│ │ └─ step3/ page.tsx, step3Client.tsx
│ └─ partleader/
│ ├─ step1/ page.tsx
│ ├─ step2/ page.tsx, Step2Client.tsx
│ └─ step3/ page.tsx, Step3Client.tsx
│
├─ components/
│ ├─ box/ (LargeBox, MiddleBox, SmallBox, ResultBox)
│ ├─ button/ Button.tsx
│ └─ common/ LogoutModal.tsx
│
├─ data/
│ ├─ demodayCandidates.ts
│ └─ partleaderCandidates.ts
│
├─ features/
│ ├─ auth/
│ │ ├─ api/auth.repository.ts
│ │ ├─ hooks/use-auth.ts
│ │ ├─ schemas/auth.schema.ts
│ │ └─ stores/auth-store.ts
│ └─ vote/
│ ├─ api/vote.repository.ts
│ ├─ hooks/use-vote.ts
│ └─ schemas/vote.schema.ts
│
├─ lib/
│ ├─ axios.ts
│ └─ react-query.tsx
│
└─ styles/globals.css

느낀점

👨‍🚀 김윤성

• 이번 과제 동안에 전반적으로 채연이가 많이 맡아서 세팅해주었다. 처음으로 axios도 도입해보고 상태 관리 라이브러리도 사용하면서 앞으로 실제 프로젝트에 사용할 기술들을 미리 체험해 볼 수 있었다.
• 다만 아직 오류가 모두 잡히지 않았고 백엔드와의 소통도 다소 어렵다;; 이번에는 최대한 api 통신에서 발생한 오류를 잡고 정리를 해보는게 실제 프로젝트에 도움 될 것 같다.

👩‍🚀 이채연

• 프로젝트 때 사용하려는 방법과 최대한 동일한 방법을 이용해보았다. 실제 유저 정보를 다룬다고 생각하니 더 조심하게 되었고, 여태까지 해보았던 API 연결보다 더 어려웠던 것 같다.
• 백엔드 팀원들이 api 명세서도 자세히 잘 써주었고 오류가 날 때마다 같이 도와줘서 너무 고마웠다.. 다채롭고 다양한 오류가 나서 여태 까지 했던 API 연결 중에 가장 어려웠던 것 같다. 프로젝트 하기 전에 연습 삼아 해볼 기회가 있어서 좋았다.