refactor(auth): unify oauth request and error handling

Author: kkhhmm3103

src/features/auth-dialog/model/use-signup-form.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-import { ApiError } from '@/shared/api/base-api'
+import { ApiError, baseApi } from '@/shared/api/base-api'
 
 import {
   initialSignupFormData,
@@ -12,47 +12,36 @@ import {
 } from './signup.schema'
 import { useSignupMutation } from './use-signup-mutation'
 
-/*
- 외부에서 성공 시 실행할 콜백 전달받음 
- */
 type UseSignupFormParams = {
   onSuccess: () => void
 }
 
 export function useSignupForm({ onSuccess }: UseSignupFormParams) {
-  /*
-   상태 관리 (UI 상태)
-   */
-
-  // 입력값 상태
+  // 폼 입력값 상태
   const [formData, setFormData] = useState<SignupFormData>(initialSignupFormData)
 
-  // 필드별 에러 메시지
+  // 필드별 에러 메시지 상태
   const [fieldErrors, setFieldErrors] = useState<SignupFieldErrors>({})
 
-  // 사용자가 입력을 건드렸는지 여부
+  // 사용자가 한 번이라도 건드린 필드 여부
   const [touchedFields, setTouchedFields] = useState<Partial<Record<SignupFieldName, boolean>>>({})
 
-  // 이메일 인증 여부 (현재 mock)
+  // 이메일 인증 여부
   const [isEmailVerified, setIsEmailVerified] = useState(false)
 
   // 공통 에러 메시지
   const [error, setError] = useState('')
 
-  // submit 로딩 상태
+  // 회원가입 요청 로딩 상태
   const [loading, setLoading] = useState(false)
 
   // 이메일 인증 버튼 로딩 상태
   const [isVerifying, setIsVerifying] = useState(false)
 
-  /*
-   React Query mutation
-   */
+  // 회원가입 mutation
   const { mutateAsync } = useSignupMutation()
 
-  /*
-   입력값 변경 핸들러 
-   */
+  // 입력값 변경 시 상태 갱신 및 실시간 검증
   const handleChange = (field: SignupFieldName) => (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value
 
@@ -62,26 +51,22 @@ export function useSignupForm({ onSuccess }: UseSignupFormParams) {
         [field]: value
       }
 
-      // 이메일 변경 시 인증 초기화
+      // 이메일이 바뀌면 기존 인증 상태 초기화
       if (field === 'email') {
         setIsEmailVerified(false)
       }
 
-      /*
-         실시간 검증 (이미 터치된 필드만)
-         */
       setFieldErrors((prevErrors) => {
         const nextErrors = { ...prevErrors }
 
+        // 이미 터치된 필드만 실시간 검증
         if (touchedFields[field]) {
           const message = validateSignupField(field, value, nextFormData)
           if (message) nextErrors[field] = message
           else delete nextErrors[field]
         }
 
-        /*
-           비밀번호 변경 시 confirmPassword도 재검증
-           */
+        // 비밀번호 변경 시 비밀번호 확인도 다시 검증
         if (field === 'password' && touchedFields.confirmPassword) {
           const confirmMessage = validateSignupField(
             'confirmPassword',
@@ -99,13 +84,11 @@ export function useSignupForm({ onSuccess }: UseSignupFormParams) {
       return nextFormData
     })
 
-    // 공통 에러 초기화
+    // 공통 에러 메시지 초기화
     if (error) setError('')
   }
 
-  /*
-   blur 시 검증 
-   */
+  // blur 시 해당 필드 검증
   const handleBlur = (field: SignupFieldName) => () => {
     setTouchedFields((prev) => ({
       ...prev,
@@ -122,9 +105,7 @@ export function useSignupForm({ onSuccess }: UseSignupFormParams) {
     })
   }
 
-  /*
-   이메일 인증 (현재 mock)
-   */
+  // 이메일 인증 처리
   const handleVerifyEmail = async () => {
     const emailError = validateSignupField('email', formData.email, formData)
 
@@ -133,7 +114,7 @@ export function useSignupForm({ onSuccess }: UseSignupFormParams) {
       email: true
     }))
 
-    // 이메일 형식이 틀리면 인증 진행 안 함
+    // 이메일 형식이 올바르지 않으면 인증 요청 중단
     if (emailError) {
       setFieldErrors((prev) => ({
         ...prev,
@@ -146,12 +127,12 @@ export function useSignupForm({ onSuccess }: UseSignupFormParams) {
     setError('')
 
     try {
-      // TODO: 실제 API로 교체
+      // TODO: 실제 이메일 인증 API로 교체
       await new Promise((resolve) => setTimeout(resolve, 1500))
 
       setIsEmailVerified(true)
 
-      // 이메일 에러 제거
+      // 인증 완료 시 이메일 에러 제거
       setFieldErrors((prev) => {
         const next = { ...prev }
         delete next.email
@@ -166,16 +147,12 @@ export function useSignupForm({ onSuccess }: UseSignupFormParams) {
     }
   }
 
-  /*
-   submit 처리
-   */
+  // 회원가입 submit 처리
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     setError('')
 
-    /*
-     모든 필드 touched 처리
-     */
+    // 제출 시 모든 필드를 touched 처리
     setTouchedFields({
       nickname: true,
       email: true,
@@ -184,30 +161,24 @@ export function useSignupForm({ onSuccess }: UseSignupFormParams) {
       inviteCode: true
     })
 
-    /*
-     전체 검증
-     */
+    // 전체 폼 검증
     const nextErrors = validateSignupForm(formData, isEmailVerified)
     setFieldErrors(nextErrors)
 
-    // 에러 있으면 submit 중단
+    // 검증 에러가 있으면 요청 중단
     if (Object.keys(nextErrors).length > 0) return
 
     setLoading(true)
 
     try {
-      /*
-       React Query mutation 실행
-       */
+      // 회원가입 요청
       await mutateAsync({
         email: formData.email.trim(),
         nickname: formData.nickname.trim(),
         password: formData.password
       })
 
-      /*
-       성공 처리
-       */
+      // 성공 시 폼 초기화
       setFormData(initialSignupFormData)
       setFieldErrors({})
       setTouchedFields({})
@@ -227,8 +198,9 @@ export function useSignupForm({ onSuccess }: UseSignupFormParams) {
           const serverErrors = error.data as Record<string, string>
           const mappedErrors: SignupFieldErrors = {}
 
+          // 서버 에러 키를 폼 필드 에러로 매핑
           Object.entries(serverErrors).forEach(([key, message]) => {
-            if (key in initialSignupFormData) {
+            if (Object.prototype.hasOwnProperty.call(initialSignupFormData, key)) {
               mappedErrors[key as SignupFieldName] = message
             }
           })
@@ -255,22 +227,13 @@ export function useSignupForm({ onSuccess }: UseSignupFormParams) {
     }
   }
 
-  /*
-   TODO: OAuth 로그인
-   */
+  // OAuth 로그인 URL 조회 및 팝업 열기
   const handleOAuth = async (provider: 'google' | 'kakao') => {
     try {
-      const response = await fetch(`/api/auth/${provider}/url`)
-
-      // 응답 상태 체크
-      if (!response.ok) {
-        throw new Error(`OAuth 로그인 URL 요청에 실패했습니다. (${response.status})`)
-      }
-
-      const result = await response.json()
-      const url = result?.url
+      // 공통 baseApi를 사용해 base URL 정책 통일
+      const response = await baseApi.get(`/auth/${provider}/url`)
+      const url = response.data?.url
 
-      // 에러 메세지
       if (!url) {
         throw new Error('OAuth 로그인 URL이 응답에 포함되어 있지 않습니다.')
       }
@@ -281,16 +244,14 @@ export function useSignupForm({ onSuccess }: UseSignupFormParams) {
     }
   }
 
+  // 입력 필드 스타일 계산
   const inputClassName = (field: SignupFieldName) =>
     `h-12 w-full rounded-xl border px-3 text-sm outline-none transition-colors ${
       fieldErrors[field]
         ? 'border-red-400 focus:border-red-500'
         : 'border-slate-200 focus:border-[#56c1c9]'
     }`
 
-  /*
-   외부 반환
-   */
   return {
     formData,
     fieldErrors,