feat: 투표 상세 페이지 구현

[numeru]

Summary

투표 상세 페이지(/votes/:voteId) 구현에 필요한 전체 스택을 추가합니다.
FSD 아키텍처 계층 순서대로 6개 커밋으로 구성했습니다.

Commit Structure

#	커밋	내용
1	docs	FSD 아키텍처 가이드, Auth/Vote API 명세, CLAUDE.md 문서 링크
2	base infra	Axios 클라이언트, Modal, Spinner 컴포넌트, Modal 애니메이션 CSS, lock 아이콘
3	auth feature	User 타입, GET /api/users/me TanStack Query 훅
4	votes model & API	VoteDetail 타입, useVoteDetail 훅, 투표 참여·취소·이모지 뮤테이션, 목업 데이터
5	votes UI	VoteDetailPage 및 하위 컴포넌트 9개, AgeBarChart isPrimary → isMyGroup 변경
6	routing	TanStack Router 파일 라우트에 HomePage, VoteDetailPage 연결

Key Changes

• 투표 상세 화면: 헤더(뒤로가기/공유), 본문, 옵션 선택, 이모지 반응, 남은 시간 표시
• 결과 인사이트: 투표 종료 후 성별/연령대 분포 시각화 (잠금 해제 UX 포함)
• 재사용 컴포넌트: Modal(포탈·포커스트랩·스크롤락), Spinner — 다른 feature에서 재사용 가능

Test plan

• /votes/:voteId 진입 시 투표 상세 데이터 정상 표시
• 옵션 선택 → 참여/취소 뮤테이션 동작
• 이모지 반응 버튼 동작
• 투표 종료 상태에서 인사이트 섹션 표시 (잠금/해제)
• Modal 컴포넌트 진입·퇴출 애니메이션
• pnpm build 빌드 성공
• pnpm lint Biome 통과

🤖 Generated with Claude Code

[numeru]

Code review

Found 1 issue:

1. voteUserType always resolves to "member-not-voted" for logged-in users on ONGOING votes because result (from voteResultQueryOptions) is only fetched when isEnded === true — so result?.myVote.voted is always undefined on a live vote. The voted state for ONGOING votes is available on data?.myVote.voted (the vote detail query), which the rest of the hook already uses correctly (e.g. handleOptionClick on line 121 checks data?.myVote.voted). Fix: use data?.myVote.voted as the source for voteUserType.

VS-4th-Client/src/features/votes/model/useVoteDetail.ts

Lines 47 to 51 in 7e78b48

	const participateMutation = useMutation({
	mutationFn: (optionId: number) => participateVote(voteId, optionId),
	onMutate: async (optionId) => {
	await queryClient.cancelQueries({ queryKey });

🤖 Generated with Claude Code

_{- If this code review was useful, please react with 👍. Otherwise, react with 👎.}