UI 수정:화면 수정

frontend/src/components/auth/findpw-form.tsx

@@ -46,9 +46,8 @@ export function FindPwForm({
       const result = await authApi.sendResetPasswordCode(userId, userEmail)
       toast.success(result.message)
       setStep("verify")
-      setTimer(result.expiresIn) // 이미 초 단위로 전달됨 (180초 = 3분)
+      setTimer(result.expiresIn)
 
-      // 타이머 시작
       const interval = setInterval(() => {
         setTimer((prev) => {
           if (prev <= 1) {
@@ -117,12 +116,7 @@ export function FindPwForm({
     }
   }
 
-  // 로그인 페이지로 이동
-  const handleGoToLogin = () => {
-    router.push("/login")
-  }
-
-  // 타이머 포맷 (mm:ss)
+  // 타이머 포맷
   const formatTime = (seconds: number) => {
     const m = Math.floor(seconds / 60)
     const s = seconds % 60
@@ -130,12 +124,12 @@ export function FindPwForm({
   }
 
   return (
-    <form className={cn("flex flex-col", className)} {...props}>
+    <form className={cn("flex flex-col gap-4", className)} {...props}>
       <FieldGroup>
-        <div className="flex flex-col items-center gap-1 text-center">
+        <div className="flex flex-col items-center gap-1 text-center mb-2">
           <h1 className="text-2xl font-bold">비밀번호 찾기</h1>
           <p className="text-muted-foreground text-sm text-balance">
-            {step === "info" && "아이디와 이메일을 입력해주세요"}
+            {step === "info" && "등록된 정보를 입력해주세요"}
             {step === "verify" && "이메일로 전송된 인증번호를 입력해주세요"}
             {step === "reset" && "새로운 비밀번호를 설정해주세요"}
             {step === "complete" && "비밀번호 재설정이 완료되었습니다"}
@@ -154,25 +148,29 @@ export function FindPwForm({
                 onChange={(e) => setUserId(e.target.value)}
                 required
                 disabled={isLoading}
+                className="h-11"
               />
             </Field>
             <Field>
-              <FieldLabel htmlFor="email">이메일</FieldLabel>
+              <div className="flex items-center justify-between">
+                <FieldLabel htmlFor="email">이메일</FieldLabel>
+                <a href="/findid" className="text-xs text-primary hover:underline">
+                  아이디 찾기
+                </a>
+              </div>
               <Input
                 id="email"
                 type="email"
-                placeholder="example@email.com"
+                placeholder="이메일을 입력하세요"
                 value={userEmail}
                 onChange={(e) => setUserEmail(e.target.value)}
                 required
                 disabled={isLoading}
+                className="h-11"
               />
-              <FieldDescription>
-                가입 시 등록한 이메일 주소를 입력해주세요
-              </FieldDescription>
             </Field>
             <Field>
-              <Button type="submit" onClick={handleSendCode} disabled={isLoading}>
+              <Button type="submit" onClick={handleSendCode} disabled={isLoading} className="w-full h-11">
                 {isLoading ? "발송 중..." : "인증번호 발송"}
               </Button>
             </Field>
@@ -183,21 +181,11 @@ export function FindPwForm({
           <>
             <Field>
               <FieldLabel htmlFor="userId">아이디</FieldLabel>
-              <Input
-                id="userId"
-                type="text"
-                value={userId}
-                disabled
-              />
+              <Input id="userId" type="text" value={userId} disabled className="h-11" />
             </Field>
             <Field>
               <FieldLabel htmlFor="email">이메일</FieldLabel>
-              <Input
-                id="email"
-                type="email"
-                value={userEmail}
-                disabled
-              />
+              <Input id="email" type="email" value={userEmail} disabled className="h-11" />
             </Field>
             <Field>
               <FieldLabel htmlFor="code">인증번호</FieldLabel>
@@ -210,18 +198,19 @@ export function FindPwForm({
                 maxLength={6}
                 required
                 disabled={isLoading}
+                className="h-11"
               />
               <FieldDescription>
                 {timer > 0 ? `남은 시간: ${formatTime(timer)}` : "인증번호가 만료되었습니다"}
               </FieldDescription>
             </Field>
             <Field>
-              <Button type="submit" onClick={handleVerifyCode} disabled={isLoading || timer === 0}>
+              <Button type="submit" onClick={handleVerifyCode} disabled={isLoading || timer === 0} className="w-full h-11">
                 {isLoading ? "확인 중..." : "인증번호 확인"}
               </Button>
             </Field>
             <Field>
-              <Button type="button" variant="outline" onClick={() => setStep("info")} disabled={isLoading}>
+              <Button type="button" variant="outline" onClick={() => setStep("info")} disabled={isLoading} className="w-full h-11">
                 정보 다시 입력
               </Button>
             </Field>
@@ -241,18 +230,17 @@ export function FindPwForm({
                   onChange={(e) => setNewPassword(e.target.value)}
                   required
                   disabled={isLoading}
+                  className="h-11 pr-10"
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 -translate-y-1/2"
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                  tabIndex={-1}
                 >
                   {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                 </button>
               </div>
-              <FieldDescription>
-                비밀번호는 8자 이상이어야 합니다
-              </FieldDescription>
             </Field>
             <Field>
               <FieldLabel htmlFor="confirmPassword">비밀번호 확인</FieldLabel>
@@ -265,11 +253,13 @@ export function FindPwForm({
                   onChange={(e) => setConfirmPassword(e.target.value)}
                   required
                   disabled={isLoading}
+                  className="h-11 pr-10"
                 />
                 <button
                   type="button"
                   onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                  className="absolute right-3 top-1/2 -translate-y-1/2"
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                  tabIndex={-1}
                 >
                   {showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                 </button>
@@ -281,7 +271,7 @@ export function FindPwForm({
               )}
             </Field>
             <Field>
-              <Button type="submit" onClick={handleResetPassword} disabled={isLoading}>
+              <Button type="submit" onClick={handleResetPassword} disabled={isLoading} className="w-full h-11">
                 {isLoading ? "변경 중..." : "비밀번호 변경"}
               </Button>
             </Field>
@@ -299,24 +289,33 @@ export function FindPwForm({
               </div>
             </Field>
             <Field>
-              <Button type="button" onClick={handleGoToLogin}>
+              <Button type="button" onClick={() => router.push("/login")} className="w-full h-11">
                 로그인하러 가기
               </Button>
             </Field>
           </>
         )}
 
-        <Field className="-mt-5">
-          <Button variant="outline" type="button" onClick={() => router.push("/login")} className="w-full border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground hover:border-transparent transition-all duration-300">
-            로그인
-          </Button>
-        </Field>
-        <FieldSeparator>계정이 없으신가요?</FieldSeparator>
-        <Field>
-          <Button variant="outline" type="button" onClick={() => router.push("/signup")} className="w-full border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground hover:border-transparent transition-all duration-300">
-            회원가입
-          </Button>
-        </Field>
+        {step === "info" && (
+          <>
+            <FieldSeparator>또는</FieldSeparator>
+            <Field>
+              <Button
+                variant="outline"
+                type="button"
+                onClick={() => router.push("/login")}
+                className="w-full h-11 border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground hover:border-transparent transition-all duration-300"
+              >
+                로그인
+              </Button>
+            </Field>
+            <div className="text-center">
+              <a href="/signup" className="text-sm text-gray-500 hover:text-primary">
+                계정이 없으신가요? 회원가입
+              </a>
+            </div>
+          </>
+        )}
       </FieldGroup>
     </form>
   )