UI 수정:화면 수정

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

@@ -86,12 +86,12 @@ export function FindIdForm({
   }
 
   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 === "email" && "가입 시 등록한 이름과 이메일을 입력해주세요"}
+            {step === "email" && "가입 시 등록한 정보를 입력해주세요"}
             {step === "verify" && "이메일로 전송된 인증번호를 입력해주세요"}
             {step === "result" && "아이디 찾기가 완료되었습니다"}
           </p>
@@ -104,30 +104,34 @@ export function FindIdForm({
               <Input
                 id="name"
                 type="text"
-                placeholder="홍길동"
+                placeholder="이름을 입력하세요"
                 value={userName}
                 onChange={(e) => setUserName(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="/findpw" 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>
@@ -143,6 +147,7 @@ export function FindIdForm({
                 type="email"
                 value={userEmail}
                 disabled
+                className="h-11"
               />
             </Field>
             <Field>
@@ -156,18 +161,19 @@ export function FindIdForm({
                 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("email")} disabled={isLoading}>
+              <Button type="button" variant="outline" onClick={() => setStep("email")} disabled={isLoading} className="w-full h-11">
                 이메일 다시 입력
               </Button>
             </Field>
@@ -184,29 +190,38 @@ export function FindIdForm({
               </div>
             </Field>
             <Field>
-              <Button type="button" onClick={() => router.push("/login")}>
+              <Button type="button" onClick={() => router.push("/login")} className="w-full h-11">
                 로그인하러 가기
               </Button>
             </Field>
             <Field>
-              <Button type="button" variant="outline" onClick={() => router.push("/findpw")}>
+              <Button type="button" variant="outline" onClick={() => router.push("/findpw")} 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 === "email" && (
+          <>
+            <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>
   )