[JDDEV-30] 이메일 로그인 및 회원가입 화면 UI

[minnngo]

🔗 관련 이슈

• JDDEV-30

📝 작업 내용

• 회원가입 화면 UI 구현
• 이메일/비밀번호/비밀번호 확인 입력 필드 추가
• 비밀번호 확인 필드는 비밀번호 1차 입력 전까지 disabled 처리
• 회원가입 이메일 포맷 검증 추가
• 비밀번호 영문+숫자 포함 8~20자 검증 추가
• 특수문자는 허용되도록 비밀번호 검증 조건 수정
• 비밀번호 20자 초과 에러 문구 처리
• 비밀번호 확인 불일치 에러 UI 및 안내 문구 처리
• 회원가입 필수 입력값 및 유효성 통과 여부에 따른 CTA 활성화/비활성화 처리
• 로그인/회원가입 화면 전환 UI 처리
• 클릭 가능한 요소 전체에 cursor pointer 적용
• 안내 문구성 텍스트는 버튼이 아닌 일반 텍스트로 정리
• 이메일 인증번호 입력 화면 UI 구현
• 6자리 인증번호 입력 필드, 자동 포커스 이동, 붙여넣기 입력 처리 추가
• 인증번호 에러 상태 UI 구현
• 인증번호 에러 화면에서 입력 필드 포커스 시 초기 인증번호 화면으로 복귀 처리
• 인증 성공 화면 UI 구현
• 인증 성공 후 확인 버튼 클릭 시 로그인 화면으로 이동 처리
• pnpm 전환에 맞춰 패키지 매니저 및 실행 방식 정리
• 파일 구조 변경에 맞춰 common 컴포넌트 경로 및 import 정리

✅ 체크리스트

• /login 에서 로그인 화면 테스트
• /login 에서 회원가입 화면 전환 테스트
• 회원가입 입력값 유효성 및 에러 UI 테스트
• 이메일 인증번호 입력/에러/성공 화면 테스트

💡 코드 설명 및 참고사항

• 회원가입 클릭 시 실제 인증 메일 발송 대신 프론트 상태로 이메일 인증번호 입력 화면으로 이동합니다.
• 인증번호는 임시 테스트용으로 123456 입력 시 성공 화면으로 이동하고, 그 외 6자리 숫자는 인증번호 에러 상태로 처리했습니다.

📸 스크린샷 (UI 변경 시)

2026-05-11.191512.mp4