turbosoft/genome2025
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

모바일 인증 화면 ui수정

Browse Source
This commit is contained in:
chu eun ju
2025-12-17 10:29:43 +09:00
parent f1fb7c868a
commit b3915808f2
10 changed files with 157 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/components/auth/findpw-form.tsx
View File

@@ -124,11 +124,11 @@ export function FindPwForm({
}
return (
<form className={cn("flex flex-col gap-4", className)} {...props}>
<form className={cn("flex flex-col gap-3 lg:gap-4", className)} {...props}>
<FieldGroup>
<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">
<div className="flex flex-col items-center gap-0.5 lg:gap-1 text-center mb-2">
<h1 className="text-lg lg:text-2xl font-bold">비밀번호 찾기</h1>
<p className="text-muted-foreground text-xs lg:text-sm text-balance">
{step === "info" && "등록된 정보를 입력해주세요"}
{step === "verify" && "이메일로 전송된 인증번호를 입력해주세요"}
{step === "reset" && "새로운 비밀번호를 설정해주세요"}
@@ -139,7 +139,7 @@ export function FindPwForm({
{step === "info" && (
<>
<Field>
<FieldLabel htmlFor="userId">아이디</FieldLabel>
<FieldLabel htmlFor="userId" className="text-sm lg:text-base">아이디</FieldLabel>
<Input
id="userId"
type="text"
@@ -148,12 +148,12 @@ export function FindPwForm({
onChange={(e) => setUserId(e.target.value)}
required
disabled={isLoading}
className="h-11"
className="h-10 lg:h-11"
/>
</Field>
<Field>
<div className="flex items-center justify-between">
<FieldLabel htmlFor="email">이메일</FieldLabel>
<FieldLabel htmlFor="email" className="text-sm lg:text-base">이메일</FieldLabel>
<a href="/findid" className="text-xs text-primary hover:underline">
아이디 찾기
</a>
@@ -166,11 +166,11 @@ export function FindPwForm({
onChange={(e) => setUserEmail(e.target.value)}
required
disabled={isLoading}
className="h-11"
className="h-10 lg:h-11"
/>
</Field>
<Field>
<Button type="submit" onClick={handleSendCode} disabled={isLoading} className="w-full h-11">
<Button type="submit" onClick={handleSendCode} disabled={isLoading} className="w-full h-10 lg:h-11">
{isLoading ? "발송 중..." : "인증번호 발송"}
</Button>
</Field>
@@ -180,15 +180,15 @@ export function FindPwForm({
{step === "verify" && (
<>
<Field>
<FieldLabel htmlFor="userId">아이디</FieldLabel>
<Input id="userId" type="text" value={userId} disabled className="h-11" />
<FieldLabel htmlFor="userId" className="text-sm lg:text-base">아이디</FieldLabel>
<Input id="userId" type="text" value={userId} disabled className="h-10 lg:h-11" />
</Field>
<Field>
<FieldLabel htmlFor="email">이메일</FieldLabel>
<Input id="email" type="email" value={userEmail} disabled className="h-11" />
<FieldLabel htmlFor="email" className="text-sm lg:text-base">이메일</FieldLabel>
<Input id="email" type="email" value={userEmail} disabled className="h-10 lg:h-11" />
</Field>
<Field>
<FieldLabel htmlFor="code">인증번호</FieldLabel>
<FieldLabel htmlFor="code" className="text-sm lg:text-base">인증번호</FieldLabel>
<Input
id="code"
type="text"
@@ -198,19 +198,19 @@ export function FindPwForm({
maxLength={6}
required
disabled={isLoading}
className="h-11"
className="h-10 lg:h-11"
/>
<FieldDescription>
{timer > 0 ? `남은 시간: ${formatTime(timer)}` : "인증번호가 만료되었습니다"}
</FieldDescription>
</Field>
<Field>
<Button type="submit" onClick={handleVerifyCode} disabled={isLoading || timer === 0} className="w-full h-11">
<Button type="submit" onClick={handleVerifyCode} disabled={isLoading || timer === 0} className="w-full h-10 lg:h-11">
{isLoading ? "확인 중..." : "인증번호 확인"}
</Button>
</Field>
<Field>
<Button type="button" variant="outline" onClick={() => setStep("info")} disabled={isLoading} className="w-full h-11">
<Button type="button" variant="outline" onClick={() => setStep("info")} disabled={isLoading} className="w-full h-10 lg:h-11">
정보 다시 입력
</Button>
</Field>
@@ -220,7 +220,7 @@ export function FindPwForm({
{step === "reset" && (
<>
<Field>
<FieldLabel htmlFor="newPassword">새 비밀번호</FieldLabel>
<FieldLabel htmlFor="newPassword" className="text-sm lg:text-base">새 비밀번호</FieldLabel>
<div className="relative">
<Input
id="newPassword"
@@ -230,7 +230,7 @@ export function FindPwForm({
onChange={(e) => setNewPassword(e.target.value)}
required
disabled={isLoading}
className="h-11 pr-10"
className="h-10 lg:h-11 pr-10"
/>
<button
type="button"
@@ -243,7 +243,7 @@ export function FindPwForm({
</div>
</Field>
<Field>
<FieldLabel htmlFor="confirmPassword">비밀번호 확인</FieldLabel>
<FieldLabel htmlFor="confirmPassword" className="text-sm lg:text-base">비밀번호 확인</FieldLabel>
<div className="relative">
<Input
id="confirmPassword"
@@ -253,7 +253,7 @@ export function FindPwForm({
onChange={(e) => setConfirmPassword(e.target.value)}
required
disabled={isLoading}
className="h-11 pr-10"
className="h-10 lg:h-11 pr-10"
/>
<button
type="button"
@@ -271,7 +271,7 @@ export function FindPwForm({
)}
</Field>
<Field>
<Button type="submit" onClick={handleResetPassword} disabled={isLoading} className="w-full h-11">
<Button type="submit" onClick={handleResetPassword} disabled={isLoading} className="w-full h-10 lg:h-11">
{isLoading ? "변경 중..." : "비밀번호 변경"}
</Button>
</Field>
@@ -281,15 +281,15 @@ export function FindPwForm({
{step === "complete" && (
<>
<Field>
<div className="bg-muted rounded-lg p-6 text-center">
<p className="text-lg font-semibold text-primary mb-2">비밀번호 재설정 완료</p>
<p className="text-sm text-muted-foreground">
<div className="bg-muted rounded-lg p-4 lg:p-6 text-center">
<p className="text-base lg:text-lg font-semibold text-primary mb-2">비밀번호 재설정 완료</p>
<p className="text-xs lg:text-sm text-muted-foreground">
새로운 비밀번호로 로그인해주세요
</p>
</div>
</Field>
<Field>
<Button type="button" onClick={() => router.push("/login")} className="w-full h-11">
<Button type="button" onClick={() => router.push("/login")} className="w-full h-10 lg:h-11">
로그인하러 가기
</Button>
</Field>
@@ -304,13 +304,13 @@ export function FindPwForm({
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"
className="w-full h-10 lg: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 href="/signup" className="text-xs lg:text-sm text-gray-500 hover:text-primary">
계정이 없으신가요? 회원가입
</a>
</div>