[Feature/#26] 이메일 전송 및 인증 API 연동 및 유틸리티 훅 구현

[Seojegyeong]

🚨 관련 이슈

#26

✨ 변경사항

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

✏️ 작업 내용

1. API 통신을 위한 기본 환경을 구축

• 인증(Auth) 관련 API 연동을 위한 기초 작업을 수행
• axios설치 및 공통 인스턴스를 생성, React Query와 함께 사용할 커스텀 훅을 구현

2. API 연동

(1) 인증번호 전송 (sendEmail)

• Endpoint: POST /api/users/email-send
• 기능: 사용자가 입력한 이메일 주소로 인증번호 전송을 요청

(2) 인증번호 검증 (verifyEmail)

• Endpoint: POST /api/users/email-verify
• 기능: 사용자가 입력한 인증번호가 유효한지 검증

(3) 데이터 타입 정의

• 요청 및 응답 데이터의 형식 정의하여 안정성 확보

3. 유틸리티 훅 구현

• 타이머(useTimer.ts): 인증번호 전송 후 타이머 기능 구현 (3분)
• formattedTime: 분:초(MM:SS) 형식의 문자열 반환 (메모이제이션 적용)

구현 상세

• 모든 API 응답은 Promise 기반의 비동기 함수로 처리됨
• 타입 정의해서 안정성 확보

스크린샷 예시

😅 미완성 작업

N/A

📢 논의 사항 및 참고 사항

N/A

💬 리뷰어 가이드 (P-Rules)
P1: 필수 반영 (Critical) - 버그 가능성, 컨벤션 위반. 해결 전 머지 불가.
P2: 적극 권장 (Recommended) - 더 나은 대안 제시. 가급적 반영 권장.
P3: 제안 (Suggestion) - 아이디어 공유. 반영 여부는 드라이버 자율.
P4: 단순 확인/칭찬 (Nit) - 사소한 오타, 칭찬 등 피드백.

[jjjsun]

P4: 전체적으로 코드가 간결하고 잘보입니다! 고생하셨어요!!

[YermIm]

P4: 잘 짜신 것 같습니다!
시간이 0초가 되었을 때 상단 알림이 동시에 두번 뜨는 현상이 있는데 혹시 의도하신 걸까요??