[7주차] Team 프로메사 권동욱 & 김서연 미션 제출합니다.

[2025314242]

마치며

👨‍💻 권동욱

• 다음 과제에서 로그인/회원가입 포함하여 과제 완성도를 올릴 예정입니다.
• 다음 과제에서 반응형 디자인을 적용할 예정입니다.

👩‍💻 김서연

• Zustand로 투표 유형(파트장/데모데이), 선택된 후보 등의 상태를 각 페이지에서 공유할 수 있도록 했습니다. 현재는 단순 라우팅 기준으로 페이지 흐름이 제어되지만, 추후 로그인 기능 도입 시 사용자 상태에 따라 접근을 제한하는 방식으로 개선할 계획입니다.
• 결과 페이지에서는 득표 수 데이터를 받아올 수 있도록 했고, 임시로 득표 수를 적용하여 정렬과 표시 형태를 구현해 놓았습니다.
• 투표 제출 시 간단한 애니메이션과, 하단 Indicator를 누르면 Logout 모달이 등장하는 구조도 함께 구현했습니다.

각종 모음

배포 링크

https://next-vote-21th-promesa.vercel.app

기본 설정

https://pickle-alarm-35a.notion.site/Frontend-Default-Setting-1f29c22f061f80cc960be21f2284505a?pvs=74

폴더 구조 및 디자인 초안

https://pickle-alarm-35a.notion.site/7-8-1f39c22f061f801db81ef32ba493e9f0

Key Questions

Zod 스키마가 무엇인지, 어떻게 활용할 수 있는지 알아봅시다.

• 입력 검증 로직을 중앙 집중화하여 중복 제거
• 스키마 자체가 타입 추론 가능하기 때문에, z.infer<typeof schema>로 타입 선언도 자동화
• 런타임 유효성 검사와 타입 안정성을 동시에 확보 가능
• loginSchema, signupSchema 등을 정의해 각 입력 폼의 유효성 조건을 선언
• react-hook-form의 zodResolver()와 함께 사용해 입력값을 실시간으로 검증
• 비밀번호 확인(confirmPassword)처럼 입력값 간 관계 검증도 가능

이번 프로젝트에서 토큰 관리를 어떻게 할 예정인지, 그리고 왜 그런 방법을 선택했는지에 대해 설명해 주세요.

클라이언트

• 로그인 요청
• Access Token은 메모리나 쿠키에 저장=
• Refresh Token은 쿠키로만 보관 (httpOnly)
• 모든 API 요청 시 Authorization: Bearer ... 사용

서버

• Access Token 검증 → 통과 시 응답
• 만료 시 Refresh Token 검증 → 새 Access Token 발급
• 로그아웃 시 Refresh Token 무효화 (DB/Redis 등)