[8주차] Team Groupeat 과제 제출합니다.

[a-00-a]

🚀 배포 링크

배포 링크

🌐 스웨거

스웨거 링크

🎨 피그마

참고한 피그마 링크

📄 기능명세서

• 기능명세서 초본
• 기능명세서v2

📣 발표자료

프론트+백엔드 팀 발표자료 노션

---

🛠 기술 스택

• Next.js 16 (App Router)
• TypeScript
• Tailwind CSS
• Zustand + persist

통신

• Fetch API
  • 공통 fetchApi 함수로 에러 처리 통일
  • credentials: include로 쿠키 기반 인증

외부 라이브러리

• lucide-react - 아이콘
• jose - JWT 검증 (proxy.ts)
• DiceBear - 후보자 아바타 생성
• @lottiefiles/dotlottie-react - 랜딩 페이지 애니메이션

---

👤 이승연

1. 로그인 / 로그아웃

• 아이디/비밀번호 입력 후 JWT 인증 처리
• 로그인 실패 시 에러 메시지 표시
• proxy.ts 미들웨어로 페이지 접근 제어
• 세션 만료 토스트 알림
• 초대코드 기반 회원가입 방식 제안

2. 후보 목록 조회 (DiceBear 아바타)

• 파트장 후보 목록 조회
• 후보 상세 프로필 모달

3. 기능명세서 v2 작성

• 기능명세서v2
• 팀원이 작성한 기능명세서 초본을 기반으로 아래의 내용을 더 고민해보고 덕분에 좀더 수월하게 최종본을 작성할 수 있었습니다!
• 라우트 경로 확정 및 추가
• httpOnly 쿠키 인증 방식 반영
• 토큰 재발급 로직이 필요없다고 판단한 이유 정리

4. API 연동 및 인증

• SameSite 쿠키 문제 해결 (BFF 패턴)
  • Next.js API Route를 중간 레이어로 사용
  • 백엔드 쿠키를 프론트 도메인으로 재발급
• 서버 컴포넌트 인증 처리 (serverHeaders 패턴)
• 타입 정의 (types/auth, demoday, partLeader)
• 공통 fetchApi 함수 구현
  • HTTP 상태 코드별 에러 처리 (400, 401, 403, 404, 409, 500)
  • 401 시 자동 로그인 페이지 리다이렉트
  • 네트워크 오류 처리

🔧 시행착오 (승연)

SameSite 쿠키 문제 해결 (BFF 패턴)

• 문제: 프론트(localhost)와 백엔드(3.35.22.210)가 다른 도메인
• 해결: Next.js API Route를 중간 레이어로 사용
• 백엔드 쿠키를 프론트 도메인으로 재발급

서버 컴포넌트 인증

• 문제: 서버 컴포넌트에서 브라우저 쿠키 접근 불가
• 해결: cookies()로 토큰 읽어 serverHeaders로 API 요청 시 전달

Turbopack → Webpack 전환

• 문제: Next.js 16 Turbopack이 Windows/Mac 환경에서 메모리 과다 사용
• 해결: 개발 환경은 webpack 모드로 변경 (next dev --webpack)
• 빌드 환경은 Turbopack 유지 → next.config.ts에 webpack/turbopack SVG 설정 동시 지원

실시간 투표 현황

• 문제: router.refresh()로 인한 화면 깜빡임
• 해결: 팀원과 상의 후 클라이언트 폴링으로 개선 (3초마다 API 호출)

---

👤 황영준

1. UI 전면 리팩토링 및 반응형

-기존의 정리되지 않고 가시성이 좋지 않은 UI를 전면 리팩토링하였습니다. 또한, 반응형을 제대로 추가하여 데스크탑-모바일 환경 모두 각각의 환경에서 정상적으로 모든 페이지의 UI를 높은 가시성으로 확인할 수 있게 하였습니다.

2. 기능명세서 선제공

• 기능명세서 초본
• 프론트엔드 파트가 UI/UX를 설계하는 만큼, 설계 단계에서 보다 확실한 기능 정의가 필요함을 느꼈습니다. 따라서 백엔드와 협업 과정에서 기획/프론트 역할을 모두 담당하였고, 기능명세서 제작으로 이어졌습니다.
  이때 API 설계 사항도 선제적으로 전달하였습니다. 피그마 없이도 백엔드가 구현해야 할 사항을 명확하게 정의함으로써 작업 시간을 대폭 단축할 수 있도록 하였습니다.기능명세서의 요소는 다음과 같습니다.
  • 2-1. 페이지와 해당 페이지 내의 세부 기능
  • 2-2. 해당 페이지에서 필요한 API 요청 및 메서드
  • 2-3. 각 API 요청의 Request / Response body의 형식

3. 에러 및 예외처리

투표에서 '투표 결과 조회'기능을 구현하는 데에 있어, 모든 투표 참여자가 투표를 완료하지 않으면 결과를 확인하지 못하게 하는 예외처리가 필요했습니다. 이를 백엔드의 response body 내의 message요소와 error.tsx를 조합하여 사용자에게 직관적인 오류 대처 방안을 제공하였습니다.

4. API 연동

각 페이지 그리고 API별로 팀원이 구현한 연동 코드를 제공받았습니다. 따라서 UI 리팩토링 과정에서 기존에 팀원이 작성한 연동 코드를 이용하여 빠르게 API 연동 작업을 완료하였고, 팀 간 커뮤니케이션을 효율적으로 이어나갈 수 있었습니다.