[Feature/#1] Auth 공용 컴포넌트 UI 구현

[Seojegyeong]

🚨 관련 이슈

#1

✨ 변경사항

• 🐞 BugFix Something isn't working
• 💻 CrossBrowsing Browser compatibility
• 🌏 Deploy Deploy
• 🎨 Design Markup & styling
• 📃 Docs Documentation writing and editing (README.md, etc.)
• ✨ Feature Feature
• 🔨 Refactor Code refactoring
• ⚙️ Setting Development environment setup
• ✅ Test Test related (storybook, jest, etc.)

✏️ 작업 내용

회원가입 및 로그인에 사용될 공용 컴포넌트(Button, Input) UI를 구현하고, 프로젝트 전반의 디자인 시스템(index.css)을 정비했습니다.

공용 컴포넌트 구현

1. Button (Button.tsx)
   • isLoading, leftIcon, rightIcon, fullWidth 속성을 추가하여 다양한 버튼 상태 지원
   • size(Big/Small)와 variant(Dark/Custom) 스타일 체계 적용
2. SocialLoginButton (SocialLoginButton.tsx)
   • provider props 하나로 카카오, 네이버, 구글, 이메일 로그인을 관리
   • 모든 로고 아이콘 크기를 통일하고, 버튼 너비가 꽉 찼을 때 로고와 텍스트 정렬
3. CommonAuthInput (CommonAuthInput.tsx)
   • 라벨, 입력 필드, 에러 메시지, 비밀번호 숨김/보기 등의 기능을 포함한 공용 입력 컴포넌트 구현

유효성 검사 및 UX

• 오류 메시지 적용: 유효성 검사 결과에 따라 에러 메시지 노출
• 실시간 포맷팅: 전화번호 입력 시 자동으로 하이픈(-)이 연결되도록 적용 (formatPhoneNumber)

스타일링

• 디자인 시스템 (index.css)
  • 주요 폰트, 컬러 팔레트, Shadow 및 Border Radius 등을 변수화하여 일관성 유지
  • clsx 유틸리티 라이브러리 설치

---

소셜 로그인 버튼

AuthInput 예시

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

N/A

[YermIm]

P4: 전체적인 구조를 깔끔하게 잘 구현해주신 것 같습니다. 고생하셨습니다!

[jjjsun]

P4: 아직 설정이 잘 안돼서 화면으로 못 보고 코드로만 확인했는데요!
한눈에 알아보기 쉽게 정리되어있어서 깔끔하고 좋습니다!
폴더구조도 깔끔해서 좋았습니다!
고생하셨어요!!