[8주차] Team 이어드림 김영서 & 이주희 미션 제출합니다.

[kkys00]

배포 링크 🗳️투표드림

1. 피그마
   

2. /home

   1. 로그인 유무에 따른 로그인/로그아웃 버튼
   2. 나의 투표 상태 표시
   3. 투표 여부에 따른 투표하기/결과보기 버튼

3. /auth/register
   1. 입력값의 유효성 확인 및 가입하기 버튼 disable/able
   2. 아이디/이메일 중복 처리
   3. • 중복 유저 처리 로직 추가

5. /auth/login
   1. 아이디 불일치 확인
   2. 비밀번호 불일치 확인

8. /vote, /demovote
   1. 파트장 투표
   2. 데모데이 투표

10. /vote/result, /demovote/result
    1. 1등 동점자 처리
    2. 득표 수, 득표율 표시
    6. 투표 완료된 경우 하단에 결과 보기로 이동 / 미완인 경우 투표하기로 이동

투표드림 팀

1. 프론트엔드
   1. 김영서 (@kkys00)
      1. 피그마 디자인
      2. 홈, 로그인, 회원가입 페이지 퍼블리싱
      3. 로그인, 회원가입 api 연결
      4. 투표 상태 보기 api 연결
   2. 이주희(@BeanMouse)
      1. 파트장 투표, 데모데이 투표, 투표 결과 페이지 퍼블리싱
      2. 투표하기, 투표 결과보기 api 연결
2. 백엔드
   1. 한혜수 - 로그인, 회원가입 api
   2. 오지현 - 투표 api

Key Question

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

1. Zod 스키마

Zod는 스키마 선언 및 유효성 검사 라이브러리이다. 스키마란 데이터의 형태 및 구조로 Zod를 통해 스키마를 선언하고 런타임에서 구조나 타입에 대한 유효성 검사를 실행할 수 있다.

2. 어떻게 활용할 수 있는가

1. 입력값 유효성 검사

import { z } from "zod";

const LoginSchema = z.object({
  email: z.string().email(),
  password: z.string().min(6),
});

// 예시: 유저 입력값 검증
const result = LoginSchema.safeParse({
  email: "[email protected]",
  password: "123456",
});

if (!result.success) {
  console.log(result.error.format());
}

2. API 응답 검증

const UserSchema = z.object({
  id: z.string(),
  name: z.string(),
});

fetch("/api/user")
  .then((res) => res.json())
  .then((data) => {
    const parsed = UserSchema.parse(data); // 유효하지 않으면 에러 throw
  });

3. 타입 추론

type LoginInput = z.infer<typeof LoginSchema>;

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

1. 토큰 관리 계획 => 쿠키에 보관

1. 로그인 시 서버에서 Access Token + Refresh Token 발급
2. Access Token은 zustand 저장
3. Refresh Token은 백엔드 httpOnly Cookie설정되어 보내짐

2. 왜 이런 방법을 선택했는가

1. 보안과 실용성
   • accessToken: 가볍고 빠르게 인증
   • refreshToken: 자동 로그인/세션 유지
2. 자동으로 브라우저가 요청 시 포함하고
3. httpOnly 쿠키는 서버에서만 접근 가능 (클라이언트 JS로 접근 불가)하기 때문
   • httpOnly 쿠키 덕분에 XSS 위험 없음