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

46
frontend/src/components/auth/findid-form.tsx
View File

@@ -86,11 +86,11 @@ export function FindIdForm({
}
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 === "email" && "가입 시 등록한 정보를 입력해주세요"}
{step === "verify" && "이메일로 전송된 인증번호를 입력해주세요"}
{step === "result" && "아이디 찾기가 완료되었습니다"}
@@ -100,7 +100,7 @@ export function FindIdForm({
{step === "email" && (
<>
<Field>
<FieldLabel htmlFor="name">이름</FieldLabel>
<FieldLabel htmlFor="name" className="text-sm lg:text-base">이름</FieldLabel>
<Input
id="name"
type="text"
@@ -109,12 +109,12 @@ export function FindIdForm({
onChange={(e) => setUserName(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="/findpw" className="text-xs text-primary hover:underline">
비밀번호 찾기
</a>
@@ -127,11 +127,11 @@ export function FindIdForm({
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>
@@ -141,17 +141,17 @@ export function FindIdForm({
{step === "verify" && (
<>
<Field>
<FieldLabel htmlFor="email">이메일</FieldLabel>
<FieldLabel htmlFor="email" className="text-sm lg:text-base">이메일</FieldLabel>
<Input
id="email"
type="email"
value={userEmail}
disabled
className="h-11"
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"
@@ -161,19 +161,19 @@ export function FindIdForm({
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("email")} disabled={isLoading} className="w-full h-11">
<Button type="button" variant="outline" onClick={() => setStep("email")} disabled={isLoading} className="w-full h-10 lg:h-11">
이메일 다시 입력
</Button>
</Field>
@@ -183,19 +183,19 @@ export function FindIdForm({
{step === "result" && (
<>
<Field>
<div className="bg-muted rounded-lg p-6 text-center">
<p className="text-sm text-muted-foreground mb-2">회원님의 아이디는</p>
<p className="text-2xl font-bold text-primary">{foundUserId}</p>
<p className="text-sm text-muted-foreground mt-2">입니다</p>
<div className="bg-muted rounded-lg p-4 lg:p-6 text-center">
<p className="text-xs lg:text-sm text-muted-foreground mb-2">회원님의 아이디는</p>
<p className="text-xl lg:text-2xl font-bold text-primary">{foundUserId}</p>
<p className="text-xs lg:text-sm text-muted-foreground mt-2">입니다</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>
<Field>
<Button type="button" variant="outline" onClick={() => router.push("/findpw")} className="w-full h-11">
<Button type="button" variant="outline" onClick={() => router.push("/findpw")} className="w-full h-10 lg:h-11">
비밀번호 찾기
</Button>
</Field>
@@ -210,13 +210,13 @@ export function FindIdForm({
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>