[8주차] Team Monde 정윤지&손주완 과제 제출합니다.

[Wannys26]

🔥팀 이름 Modelly -> Monde 로 변경되었습니다!!🔥

최종 배포 링크

2025 CEOS AWARD🥇

발표 자료 및 스크린샷

2차 필수 구현 사항

1. 투표 기능 - 로그인한 사용자는 투표에 참여할 수 있습니다

• 인증 의무화: useLoginGuard로 로그인하지 않은 사용자는 접근 불가
• 권한 제어: usePartGuard로 파트별 투표 카테고리 제한

2. 중복 투표 방지 - 사용자는 한 번만 투표할 수 있습니다

1. 클라이언트 측: hasVoted()로 UI에서 투표 버튼 숨김
2. 서버 측: 409 Conflict 응답으로 중복 투표 거부
3. 상태 관리: Zustand로 투표 완료 상태 영구 저장

3. 후보 목록 조회 - 모든 사용자는 후보자의 목록을 확인할 수 있습니다

인증 없이 후보 목록 조회 가능

4. 투표 결과 조회 - 득표 수와 득표율을 시각적으로 표현합니다

• 순위 표시: 이모지(🥇🥈🥉)로 1-3위 구분
• 득표수 표시: 각 후보의 투표 수 표시
• 비율 시각화: 프로그레스 바로 득표율 표시
• 색상 구분: 순위별 그라데이션 색상 적용
• 총 투표 수: 전체 투표 참여자 수 표시

5. 에러 처리 - 다양한 에러 상황에 대한 처리를 구현합니다

• 네트워크/서버 에러 처리 → 409 중복 투표 에러 처리
• 로딩 상태 처리 → Tanstack query : isPending

App Router 구조

src/app/
├── layout.tsx                    # 루트 레이아웃
├── page.tsx                      # 메인 화면 (/)
├── login/
│   └── page.tsx                  # 로그인 페이지 (/login)
├── signup/
│   └── page.tsx                  # 회원가입 페이지 (/signup)
├── members/
│   └── page.tsx                  # 멤버 목록 페이지 (/members)
└── voting/
    ├── page.tsx                  # 투표 카테고리 선택 (/voting)
    └── [category]/               # 동적 라우팅 폴더
        ├── page.tsx              # 투표 페이지 (/voting/[category])
        └── result/
            └── page.tsx          # 결과 페이지 (/voting/[category]/result)

동적 라우팅 - [catergory] → fe-leader, be-leader, demo-day

// /voting/[category]/page.tsx
export default function VotingPage() {
  const params = useParams();
  const category = params.category as VoteCategory;
  // category 값: 'fe-leader', 'be-leader', 'demo-day'
}

인증 플로우

1. 앱 시작
   ↓
2. AuthProvider → refreshToken() 호출
   ↓
3. 토큰 유효 → 자동 로그인
   ↓
4. 토큰 무효 → 로그인 필요 상태
   ↓
5. 로그인 페이지 접근
   ↓
6. 폼 제출 → login() 호출
   ↓
7. 성공 → 토큰/사용자정보 저장 → 홈 이동
   ↓
8. 페이지 접근 시 useLoginGuard 체크
   ↓
9. 인증된 경우 → 페이지 렌더링
   ↓
10. 인증되지 않은 경우 → 로그인 페이지 리다이렉트

usePartGuard - 파트별 접근 권한 제어

• 파트별 권한 제어: 사용자의 part(FRONTEND/BACKEND)에 따라 투표 카테고리 접근 제한
• FRONTEND 유저: be-leader 카테고리 접근 불가
• BACKEND 유저: fe-leader 카테고리 접근 불가
• 둘 다: demo-day 카테고리 접근 가능

메인 화면

로그인 화면

투표 카테고리 선택 페이지

파트 리더 투표 페이지

파트 리더 투표 결과 페이지

Demo Day 투표 페이지

Demo Day 투표 결과 페이지

멤버 페이지