feat: 로그인 / 회원가입 UI 구현

[dew102938]

💡 개요

• 로그인 / 회원가입 UI 구현

🔢 관련 이슈 링크

• Closes [feat] 로그인 / 회원가입 화면 UI 및 입력 폼 구현 #9

💻 작업내용

• 로그인/회원가입 화면 UI 구현
• 이메일 / 비밀번호 입력 폼 + validation 구현 (폼 관리는 react-hook-form + zod 기반으로 구현)
• 소셜 로그인 버튼 UI 구현
• shadcn/ui 컴포넌트 추가: Checkbox, Label, Separator

📌 변경사항PR

• FEAT: 새로운 기능 추가
• FIX: 버그/오류 수정
• CHORE: 코드/내부 파일/설정 수정
• DOCS: 문서 수정(README 등)
• REFACTOR: 코드 리팩토링 (기능 변경 없음)
• TEST: 테스트 코드 추가/수정
• STYLE: 스타일 변경(포맷, 세미콜론 등)

🤔 추가 논의하고 싶은 내용

현재 휴대폰 번호 validation을 010xxxxxxxx 형식으로 제한했는데
외국인/해외 번호도 고려해야할까요?

✅ 체크리스트

• 브랜치는 잘 맞게 올렸는지
• 관련 이슈를 맞게 연결했는지
• 로컬에서 정상 동작을 확있했는지
• 충돌이 없다(또는 브랜치에서 충돌 해결 후 PR 업데이트 완료)

[jjjsun]

지금처럼 010만 고려해도 괜찮은것 같아요!

SignupDialog.tsx에서 terms/privacy/marketing의 <Checkbox.... /> 에 cursor-pointer 추가하면 좋을것같아요

그리고 SignupDialog.tsx 맨 아래에 로그인 버튼이랑, LoginDialog.tsx 맨 아래에 회원가입 버튼에 조금더 bold 처리를 주고, 밝은 회색 백경으로 hover 됐을때 더 잘 보여주면 좋을것같습니다

회원가입이랑 로그인 둘다 우상단에 있는 닫기표시 X버튼이 조금더 크고 hover시에 더 잘보였으면 좋겠어요! 저는 react의 X아이콘을 사용해서 효과를 바꿔주었는데, 듀님은 DialogContent 내부에 기본 랜더링되어있는 DialogPrimitive.Close를 사용하신거라, src/components/ui/dialog.tsx 안에서 DialogContent 내부에 DialogPrimitive.Close 클래스에서 효과 추가해주시면 될것같아요!
고생하셨습니다!!

[dew102938]

1.mp4