feat: 인증 페이지 구현 (로그인/회원가입/이메일 인증) (#4) #6

seonkyu.kim · 2026-02-26T05:50:19Z

seonkyu.kim commented

2026-02-26 05:50:19 +00:00

📋 작업 요약

인증 관련 4개 페이지 구현. react-hook-form + zod 유효성 검사, Zustand 인증 상태 관리, 테스트 계정 기반 로그인/인증 플로우를 포함합니다.

Closes #4

🛠️ 작업 내용 (Changes)

LoginPage: react-hook-form + zod 유효성 검사, 비밀번호 토글, shake 애니메이션, 로그인 성공/실패 처리
SignupPage: 실시간 검증 (mode: onChange), 전화번호 자동 하이픈, 약관 동의 체크박스, 인증 메일 발송 모달
VerifyEmailPage: 6자리 코드 입력 (자동 포커스/백스페이스/붙여넣기), 인증 성공/실패, 재전송 60초 쿨다운
ResetPasswordModal: 이메일 유효성 검사 후 임시 비밀번호 발송 (sonner toast)
AuthLayout: absolute 풋터 → flex 기반 레이아웃 변경 (긴 페이지 대응)
라우터: VerifyEmailGuard 추가 (인증 완료 시 홈 리다이렉트)
index.css: fadeIn 키프레임 애니메이션 추가
auth types: SignupRequest에 phone 필드 추가

📢 리뷰어 참고 사항 (To Reviewers)

테스트 계정: admin@spms.com / 1234 (인증 완료 → 홈), test@spms.com / 1234 (미인증 → 인증 페이지)
인증 코드 테스트: 123456 입력 시 성공
Material Symbols 아이콘은 style={{ fontSize: "14px" }} 인라인 스타일로 통일
API 연동 미완료 (TODO 표시), 현재 하드코딩된 테스트 로직

✅ 체크리스트 (Self Checklist)

npm run build 성공
TypeScript 컴파일 에러 없음
로그인 → 홈 이동 플로우 정상
로그인 → 이메일 인증 → 홈 이동 플로우 정상
회원가입 폼 유효성 검사 정상
비밀번호 재설정 모달 동작 정상

📸 스크린샷 / 테스트 로그 (Screenshots/Logs)

빌드 성공 및 전체 플로우 수동 테스트 확인 완료

## 📋 작업 요약 인증 관련 4개 페이지 구현. react-hook-form + zod 유효성 검사, Zustand 인증 상태 관리, 테스트 계정 기반 로그인/인증 플로우를 포함합니다. ## 🔗 관련 이슈 (Related Issues) Closes #4 ## 🛠️ 작업 내용 (Changes) - LoginPage: react-hook-form + zod 유효성 검사, 비밀번호 토글, shake 애니메이션, 로그인 성공/실패 처리 - SignupPage: 실시간 검증 (mode: onChange), 전화번호 자동 하이픈, 약관 동의 체크박스, 인증 메일 발송 모달 - VerifyEmailPage: 6자리 코드 입력 (자동 포커스/백스페이스/붙여넣기), 인증 성공/실패, 재전송 60초 쿨다운 - ResetPasswordModal: 이메일 유효성 검사 후 임시 비밀번호 발송 (sonner toast) - AuthLayout: absolute 풋터 → flex 기반 레이아웃 변경 (긴 페이지 대응) - 라우터: VerifyEmailGuard 추가 (인증 완료 시 홈 리다이렉트) - index.css: fadeIn 키프레임 애니메이션 추가 - auth types: SignupRequest에 phone 필드 추가 ## 📢 리뷰어 참고 사항 (To Reviewers) - 테스트 계정: `admin@spms.com` / `1234` (인증 완료 → 홈), `test@spms.com` / `1234` (미인증 → 인증 페이지) - 인증 코드 테스트: `123456` 입력 시 성공 - Material Symbols 아이콘은 `style={{ fontSize: "14px" }}` 인라인 스타일로 통일 - API 연동 미완료 (TODO 표시), 현재 하드코딩된 테스트 로직 ## ✅ 체크리스트 (Self Checklist) - [x] npm run build 성공 - [x] TypeScript 컴파일 에러 없음 - [x] 로그인 → 홈 이동 플로우 정상 - [x] 로그인 → 이메일 인증 → 홈 이동 플로우 정상 - [x] 회원가입 폼 유효성 검사 정상 - [x] 비밀번호 재설정 모달 동작 정상 ## 📸 스크린샷 / 테스트 로그 (Screenshots/Logs) 빌드 성공 및 전체 플로우 수동 테스트 확인 완료

seonkyu.kim added 1 commit 2026-02-26 05:50:20 +00:00

feat: 인증 페이지 구현 (로그인/회원가입/이메일 인증) (#4 ) ccfda47b96

- LoginPage: react-hook-form + zod 유효성검사, 비밀번호 토글, shake 애니메이션,
  로그인 성공/실패 처리, 성공 오버레이
- SignupPage: 이메일/비밀번호/이름/전화번호 실시간 검증, 전화번호 자동 하이픈,
  약관 동의 체크박스, 인증 메일 전송 모달, 이용약관/개인정보 모달
- VerifyEmailPage: 6자리 코드 입력(자동 포커스/붙여넣기), 인증 성공/실패,
  재전송 60초 쿨다운, 인증 완료 모달 + 홈 이동 오버레이
- ResetPasswordModal: 비밀번호 재설정 이메일 발송, sonner 토스트
- AuthLayout: flex 기반 풋터 위치 수정 (콘텐츠 중앙 + 풋터 하단)
- 라우터: verify-email 가드 추가 (인증 완료 시 홈 리다이렉트)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

seonkyu.kim self-assigned this 2026-02-26 05:50:30 +00:00

seonkyu.kim added this to the Phase 1 - 프로젝트 초기 설정 milestone 2026-02-26 05:50:31 +00:00

seonkyu.kim added the

labels 2026-02-26 05:50:40 +00:00

seonkyu.kim merged commit e8edbb528c into develop

2026-02-26 05:51:15 +00:00