[Feature/#7] 회원가입/로그인 UI 구현

[Seojegyeong]

🚨 관련 이슈

#7

✨ 변경사항

• 🐞 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.)

✏️ 작업 내용

회원가입/ 로그인 페이지 UI 구현

1. 회원가입 (Signup) : 단계별 프로세스 (Step Logic) 구현

• Step 1 (이메일): 이메일 입력, 유효성 검사 및 인증 UI
• Step 2 (비밀번호): 비밀번호/확인 입력, 일치 여부 실시간 검사 및 UI 피드백
• Step 3 (프로필): 이름(한글 전용), 닉네임, 연락처 입력 폼
• 완료 처리: 회원가입 완료 시 로그인 페이지로 자동 리다이렉트

2. 로그인 (Login)

• UI 구현: 이메일/비밀번호 레이아웃 구성
• 이메일 형식 체크 및 비밀번호 에러 메시지 노출
• 비밀번호 토글: 눈 아이콘(Eye/EyeOff)을 통한 비밀번호 숨김/표시 기능

3. 온보딩 인트로 (Intro)

• IntroSlide 전반적인 Heading 텍스트 크기 축소
• IntroSlide3의 일부 요소를 제거하여 가시성 확보 및 레이아웃 단순화

4. 상태 관리 (Zustand)

• useAuthStore 생성: 로그인/회원가입 프로세스 전반의 상태(Form Data, Step 등) 관리

5. 토스트 알림 라이브러리 추가 - sonner 패키지

• App.tsx에 컴포넌트를 배치하여 전역에서 토스트 알림을 사용할 수 있도록 설정
• 로그인 성공 시 피드백을 위해 임시로 토스트 알림을 적용

📂 폴더 구조

src/
├── pages/
│   └── auth/
│       ├── Login.tsx          # 로그인 페이지
│       ├── Signup.tsx         # 회원가입 메인 페이지 (Step 관리)
│       └── FindPw.tsx         # 비밀번호 찾기 (임시!)
├── components/
│   └── auth/
│       ├── CommonAuthInput.tsx #공용 Input 컴포넌트
│       ├── OnboardingIntro.tsx # 온보딩 슬라이드 래퍼
│       ├── intro/
│       │   ├── IntroSlide1.tsx # 슬라이드 1
│       │   ├── IntroSlide2.tsx # 슬라이드 2 
│       │   └── IntroSlide3.tsx # 슬라이드 3
│       └── signupStep/
│           ├── Step01Email.tsx    # 회원가입 1단계
│           ├── Step02Password.tsx # 회원가입 2단계
│           └── Step03Profile.tsx  # 회원가입 3단계
└── store/
    └── useAuthStore.ts        # 인증 관련 전역 상태 관리

회원가입

로그인

😅 미완성 작업

• 이메일/비밀번호 찾기 기능 구현 예정
  로그인 관련 편의 기능으로 이메일 찾기 / 비밀번호 재설정 플로우를 추가 구현할 예정입니다.

📢 논의 사항 및 참고 사항

디자인 리팩토링 과정에서 피그마 시안과 일부 세부 UI가 달라진 부분이 있습니다.

• IntroSlide 가시성 개선을 위해 일부 요소를 추가
• Input 컴포넌트 상태를 명확히 구분할 수 있도록 기본/입력/호버 디자인을 추가
• 다음(회원가입) 버튼 활성화 조건을 반영

[YermIm]

P4: 회원가입 흐름이 매끄러워서 좋은 것 같아요!
이메일 인증 화면에서 [인증번호 받기] 버튼의 폰트 크기를 조금 키우는 것은 어떨까요?!
고생하셨습니다 :)