feat: 비밀번호 재설정 페이지 및 토큰 재발급 기능 구현 (#39)

* feat: 로그아웃 API 연동 및 엑세스 토큰 자동 갱신 로직 추가

* feat: 비밀번호 변경 페이지 구현

* fix: 백엔드 요청 필드 추가

* refactor: useTimer 관련 경로 수정

* refactor: smsSent 로직 개선

* fix: 페이지 의존성 수정 및 경로 재구성

* fix: logoutSession 함수 독립성 강화

* refactor: refresh 폭주 방지 로직 설정

* fix: email 정규식 경로 수정

Author: dohy-eon

src/app/App.tsx

@@ -12,6 +12,7 @@ import { ManagerWorkerScheduleLegacyEntryRedirect } from '@/pages/manager/worker
 import { SocialPage } from '@/pages/manager/social'
 import { SocialChatPage } from '@/pages/manager/social-chat'
 import { LoginPage } from '@/pages/login'
+import { FindPasswordPage } from '@/pages/find-password'
 import { KakaoCallbackPage } from '@/pages/oauth/KakaoCallbackPage'
 import { JobLookupMapPage } from '@/pages/user/job-lookup-map'
 import { JobLookupMapApplyPage } from '@/pages/user/job-lookup-map-apply'
@@ -67,6 +68,10 @@ export function App() {
       <Routes>
         <Route element={<MobileRouteLayoutWithoutDocbar />}>
           <Route path={ROUTES.AUTH.LOGIN} element={<LoginPage />} />
+          <Route
+            path={ROUTES.AUTH.FIND_PASSWORD}
+            element={<FindPasswordPage />}
+          />
           <Route
             path={ROUTES.OAUTH.KAKAO_CALLBACK}
             element={<KakaoCallbackPage />}

src/features/auth/index.ts

@@ -1,2 +1,4 @@
 export { KakaoLoginButton } from './ui/KakaoLoginButton'
 export { AppleLoginButton } from './ui/AppleLoginButton'
+export { PhoneVerification } from './ui/PhoneVerification'
+export { VerifyActionButton } from './ui/VerifyActionButton'

…/signup/components/PhoneVerification.tsx …c/features/auth/ui/PhoneVerification.tsxsrc/pages/signup/components/PhoneVerification.tsx renamed to src/features/auth/ui/PhoneVerification.tsx src/pages/signup/components/PhoneVerification.tsx renamed to src/features/auth/ui/PhoneVerification.tsx

@@ -1,8 +1,22 @@
 import { AuthInput } from '@/shared/ui/common/AuthInput'
 import { VerifyActionButton } from './VerifyActionButton'
-import type { usePhoneVerification } from '../hooks/usePhoneVerification'
 
-type Props = ReturnType<typeof usePhoneVerification>
+type PhoneVerificationProps = {
+  phone: string
+  smsSent: boolean
+  smsCode: string
+  setSmsCode: (value: string) => void
+  verified: boolean
+  message: string
+  isSending: boolean
+  isVerifying: boolean
+  resendCooldown: number
+  handlePhoneChange: (value: string) => void
+  sendSms: () => void | Promise<void>
+  verifySms: () => void | Promise<void>
+}
+
+type Props = PhoneVerificationProps
 
 /**
  * 전화번호 SMS 인증 UI

…signup/components/VerifyActionButton.tsx …/features/auth/ui/VerifyActionButton.tsxsrc/pages/signup/components/VerifyActionButton.tsx renamed to src/features/auth/ui/VerifyActionButton.tsx src/pages/signup/components/VerifyActionButton.tsx renamed to src/features/auth/ui/VerifyActionButton.tsx

@@ -0,0 +1,134 @@
+import { useState, useRef, useEffect } from 'react'
+import type { ConfirmationResult } from 'firebase/auth'
+import { createPasswordResetSession } from '@/shared/api/auth'
+import {
+  sendPhoneVerification,
+  toInternationalPhone,
+  clearRecaptcha,
+  getFreshFirebaseIdToken,
+} from '@/shared/lib/firebase'
+import {
+  normalizePhone,
+  formatPhone,
+} from '@/shared/lib/utils/signupValidation'
+import { useTimer } from '@/shared/hooks/useTimer'
+
+export const FIND_PASSWORD_RECAPTCHA_ID = 'find-password-recaptcha-container'
+const RESEND_COOLDOWN = 30
+
+/**
+ * 비밀번호 찾기 2단계 — Firebase SMS 인증 후 재설정 세션 생성
+ */
+export function useFindPasswordPhoneVerification(email: string) {
+  const [phone, setPhone] = useState('')
+  const [smsSent, setSmsSent] = useState(false)
+  const [smsCode, setSmsCode] = useState('')
+  const [verified, setVerified] = useState(false)
+  const [message, setMessage] = useState('')
+  const [isSending, setIsSending] = useState(false)
+  const [isVerifying, setIsVerifying] = useState(false)
+  const [sessionId, setSessionId] = useState('')
+
+  const smsConfirmationRef = useRef<ConfirmationResult | null>(null)
+  const {
+    countdown: resendCooldown,
+    start: startCooldown,
+    clear: clearCooldown,
+  } = useTimer()
+
+  useEffect(() => {
+    return () => clearRecaptcha()
+  }, [])
+
+  const handlePhoneChange = (value: string) => {
+    setPhone(formatPhone(value))
+    smsConfirmationRef.current = null
+    setSmsSent(false)
+    setSmsCode('')
+    setVerified(false)
+    setSessionId('')
+    setMessage('')
+    clearCooldown()
+  }
+
+  const sendSms = async () => {
+    const normalized = normalizePhone(phone)
+    if (normalized.length !== 11 || isSending || resendCooldown > 0) {
+      if (normalized.length !== 11) {
+        setMessage('전화번호 11자리를 입력해주세요.')
+      }
+      return
+    }
+
+    try {
+      setIsSending(true)
+      setMessage('')
+      clearRecaptcha()
+      const intlPhone = toInternationalPhone(normalized)
+      const confirmation = await sendPhoneVerification(
+        intlPhone,
+        FIND_PASSWORD_RECAPTCHA_ID
+      )
+      smsConfirmationRef.current = confirmation
+      setSmsSent(true)
+      setMessage('인증번호가 발송됐어요. 문자를 확인해주세요.')
+      startCooldown(RESEND_COOLDOWN)
+    } catch (err) {
+      const e = err as { message?: string }
+      clearRecaptcha()
+      setMessage(
+        e.message || 'SMS 발송에 실패했습니다. 잠시 후 다시 시도해주세요.'
+      )
+    } finally {
+      setIsSending(false)
+    }
+  }
+
+  const verifySms = async () => {
+    const confirmation = smsConfirmationRef.current
+    if (!smsSent || !smsCode.trim() || isVerifying || !confirmation) return
+    try {
+      setIsVerifying(true)
+      setMessage('')
+      await confirmation.confirm(smsCode)
+      const firebaseIdToken = await getFreshFirebaseIdToken()
+      if (!firebaseIdToken) {
+        setMessage('전화번호 인증이 만료되었습니다. 다시 인증해 주세요.')
+        return
+      }
+      const newSessionId = await createPasswordResetSession(
+        email.trim(),
+        normalizePhone(phone),
+        firebaseIdToken
+      )
+      setSessionId(newSessionId)
+      setVerified(true)
+      setMessage('휴대폰 인증이 완료됐어요!')
+      clearCooldown()
+    } catch (error) {
+      setVerified(false)
+      const e = error as { message?: string }
+      setMessage(
+        e.message || '인증번호가 올바르지 않습니다. 다시 확인해주세요.'
+      )
+    } finally {
+      setIsVerifying(false)
+    }
+  }
+
+  return {
+    phone,
+    smsSent,
+    smsCode,
+    setSmsCode,
+    verified,
+    message,
+    isSending,
+    isVerifying,
+    resendCooldown,
+    sessionId,
+    handlePhoneChange,
+    sendSms,
+    verifySms,
+  }
+}