프로젝트 개요

<aside>

• CEOS 구성원을 위한 인증 기반 투표 서비스
• App Router 기반 라우팅 구조 사용
• 기술 스택**:** Next.js 16, React 19, TypeScript, Tailwind CSS v4, SWR, clsx </aside>

파일 구조

<aside>

📁 src/app (Next.js App Router 페이지 구성)

• /login, /signup, /main, /vote, /about, /admin 라우트 관리

📁 **src/components/common (**공통 UI 컴포넌트)

• Button, TextOnlyButton, IconOnlyButton, LoginModal, SignupModal, LogoutModal

📁 src/components/vote (투표 도메인 컴포넌트)

• PartLeaderVoteView, DemodayVoteView, ResultView, PartLeaderProfileView

📁 **src/services (**백엔드 API 통신 계층)

• auth.ts: 로그인, 회원가입, 후보자 관리
• vote.ts: 파트장/데모데이 투표 제출 및 결과 조회

📁 **src/hooks (**화면 상태와 API 호출 흐름 분리)

• useVoteData.tsx에서 투표 데이터 동기화, 제출, 로딩 상태 관리

📁 src/types (인증, 후보자, 투표 관련 타입 정의)

• API 응답 구조를 TypeScript 타입으로 관리

📁 src/styles (디자인 토큰 관리)

• 색상, 타이포그래피, radius를 별도 CSS로 분리 </aside>

백엔드와의 협업 방식

• 백엔드에서 제공한 Swagger 문서를 기준으로 API 스펙을 확인하며 개발
• Swagger를 통해 요청 URL, HTTP method, request body, response 형식을 확인
• 프론트에서는 Swagger에 정의된 스펙에 맞춰 TypeScript 타입을 작성
• 후보자 ID, 파트 값, 팀 값, 득표 수 필드 등을 Swagger 기준으로 정리
• API 호출 로직은 services/auth.ts, services/vote.ts로 분리해 관리
• 인증이 필요한 API에는 로그인 후 받은 access token을 Authorization 헤더에 담아 요청
• 백엔드 에러 응답을 프론트에서 사용자에게 보여줄 수 있는 메시지로 변환

주요 기능

1. 진입 및 공통 화면

• 랜딩 페이지
  • 서비스 진입 시 CEOS VOTE 브랜드 화면을 먼저 보여줌
  • 3초 후 자동으로 메인 페이지로 이동
  • 투표 서비스에 진입했다는 느낌을 주는 스플래시 화면 역할
• 메인 페이지
  • 투표하기, ABOUT US 두 가지 메뉴 제공
  • 카드형 UI로 기능 진입점을 명확하게 분리
• 공통 헤더
  • 모든 주요 페이지에서 CEOS VOTE 로고와 네비게이션 제공
  • 로고 클릭 시 메인 페이지로 이동
  • 투표하기 버튼으로 투표 페이지 이동
  • 로그인 상태에 따라 로그인/로그아웃 버튼 표시
  • 관리자 권한 사용자는 ADMIN 버튼 추가 노출

2. 인증 및 접근 제어

• 로그인 기능
  • 사용자는 아이디와 비밀번호를 입력해 로그인
  • 로그인 성공 시 백엔드에서 받은 accessToken 저장
  • 토큰은 localStorage와 쿠키에 함께 저장
  • localStorage는 클라이언트 API 요청 시 사용
  • 쿠키는 페이지 접근 제어용으로 사용
  • 로그인 실패 시 에러 메시지 표시
• 회원가입 기능
  • 단계형 회원가입 UI로 구성
  • 이메일 입력 → 파트/이름 선택 → 팀 선택 → 아이디/비밀번호 입력 순서로 진행
  • 비밀번호와 비밀번호 확인이 일치하지 않으면 즉시 에러 표시
  • 중복 계정 등 회원가입 실패 상황도 에러 메시지로 처리