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

253
frontend/src/app/demo/mobile-auth-v1/page.tsx
View File

@@ -1,253 +0,0 @@
'use client';
import { useState } from "react";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Field, FieldGroup, FieldLabel, FieldSeparator } from "@/components/ui/field";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Eye, EyeOff } from "lucide-react";
/**
* 모바일 로그인 디자인 시안 모음
* 원본 이미지 로고 기반으로 크기/배치/여백 조정한 변형들
*/
export default function MobileAuthDemoPage() {
const [showPassword, setShowPassword] = useState(false);
const [activeTab, setActiveTab] = useState<'v1' | 'v2' | 'v3' | 'v4'>('v1');
const descriptions: Record<string, { title: string; items: string[] }> = {
v1: {
title: '시안 1: 로고 축소',
items: ['로고 200px → 100px', '여백 최소화', '기존 레이아웃 유지']
},
v2: {
title: '시안 2: 가로 배치',
items: ['로고 + 타이틀 가로 정렬', '로고 60px', '공간 효율적 사용']
},
v3: {
title: '시안 3: 상단 바 형태',
items: ['로고를 상단 바에 배치', '로고 40px', '폼 영역 최대화']
},
v4: {
title: '시안 4: 배경 워터마크',
items: ['로고를 배경으로 사용', '반투명 처리', '폼에 집중']
}
};
// 공통 폼 컴포넌트
const LoginFormContent = ({ compact = false }: { compact?: boolean }) => (
<form className={`flex flex-col ${compact ? 'gap-3' : 'gap-4'}`}>
<FieldGroup>
<Field>
<FieldLabel htmlFor="userId" className={compact ? "text-sm" : ""}>아이디</FieldLabel>
<Input
id="userId"
type="text"
placeholder="아이디를 입력하세요"
className={compact ? "h-10" : "h-11"}
/>
</Field>
<Field>
<div className="flex items-center justify-between">
<FieldLabel htmlFor="password" className={compact ? "text-sm" : ""}>비밀번호</FieldLabel>
<a href="#" className="text-xs text-primary hover:underline">비밀번호 찾기</a>
</div>
<div className="relative">
<Input
id="password"
type={showPassword ? "text" : "password"}
placeholder="비밀번호를 입력하세요"
className={`${compact ? "h-10" : "h-11"} pr-10`}
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400"
>
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
</button>
</div>
</Field>
<label className="flex items-center gap-2 cursor-pointer">
<input type="checkbox" className="rounded border-gray-300" />
<span className={`${compact ? "text-xs" : "text-sm"} text-gray-600`}>아이디 저장</span>
</label>
<Field>
<Button type="button" className={`w-full ${compact ? "h-10" : "h-11"}`}>로그인</Button>
</Field>
<FieldSeparator>또는</FieldSeparator>
<Field>
<Button
variant="outline"
type="button"
className={`w-full ${compact ? "h-10" : "h-11"} border-2 border-primary text-primary`}
>
회원가입
</Button>
</Field>
<div className="text-center">
<a href="#" className={`${compact ? "text-xs" : "text-sm"} text-gray-500 hover:text-primary`}>
아이디를 잊으셨나요?
</a>
</div>
</FieldGroup>
</form>
);
return (
<div className="min-h-svh bg-gray-100">
{/* 상단 탭 */}
<div className="sticky top-0 z-20 bg-white border-b shadow-sm p-3">
<Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as 'v1' | 'v2' | 'v3' | 'v4')} className="w-full">
<TabsList className="grid w-full grid-cols-4 max-w-[450px] mx-auto">
<TabsTrigger value="v1" className="text-xs px-2">축소</TabsTrigger>
<TabsTrigger value="v2" className="text-xs px-2">가로</TabsTrigger>
<TabsTrigger value="v3" className="text-xs px-2">상단바</TabsTrigger>
<TabsTrigger value="v4" className="text-xs px-2">배경</TabsTrigger>
</TabsList>
</Tabs>
</div>
{/* 모바일 프리뷰 컨테이너 */}
<div
className="max-w-[375px] mx-auto bg-white border border-gray-300 shadow-xl my-4 rounded-2xl overflow-hidden"
style={{ height: 'calc(100svh - 180px)', maxHeight: '667px' }}
>
{/* 시안 1: 로고 크기만 축소 */}
{activeTab === 'v1' && (
<div className="flex flex-col p-4 h-full overflow-hidden">
{/* 로고 - 100px로 축소 */}
<div className="flex justify-center mt-1 mb-2 shrink-0">
<Image
src="/logo-graphic.svg"
alt="로고"
width={100}
height={100}
className="object-contain"
priority
/>
</div>
{/* 타이틀 */}
<div className="flex flex-col items-center gap-0.5 text-center mb-2 shrink-0">
<h1 className="text-lg font-bold">로그인</h1>
<p className="text-muted-foreground text-xs">한우 유전능력 컨설팅 서비스</p>
</div>
{/* 폼 영역 */}
<div className="flex-1 flex items-center justify-center overflow-hidden">
<div className="w-full max-w-[300px]">
<LoginFormContent compact />
</div>
</div>
</div>
)}
{/* 시안 2: 로고 + 타이틀 가로 배치 */}
{activeTab === 'v2' && (
<div className="flex flex-col p-5 h-full overflow-hidden">
{/* 로고 + 타이틀 가로 배치 */}
<div className="flex items-center gap-3 mb-4 shrink-0">
<Image
src="/logo-graphic.svg"
alt="로고"
width={60}
height={60}
className="object-contain shrink-0"
priority
/>
<div>
<h1 className="text-xl font-bold">로그인</h1>
<p className="text-muted-foreground text-xs">한우 유전능력 컨설팅 서비스</p>
</div>
</div>
{/* 폼 영역 */}
<div className="flex-1 flex items-start justify-center overflow-hidden">
<div className="w-full max-w-[320px]">
<LoginFormContent />
</div>
</div>
</div>
)}
{/* 시안 3: 상단 바 형태 */}
{activeTab === 'v3' && (
<div className="flex flex-col h-full overflow-hidden">
{/* 상단 헤더 바 */}
<div className="flex items-center justify-center gap-2 py-3 px-4 bg-primary/5 border-b shrink-0">
<Image
src="/logo-graphic.svg"
alt="로고"
width={36}
height={36}
className="object-contain"
priority
/>
<span className="font-semibold text-sm text-gray-700">한우 유전능력 컨설팅</span>
</div>
{/* 폼 영역 */}
<div className="flex-1 flex flex-col items-center justify-center p-5 overflow-hidden">
<div className="w-full max-w-[320px]">
<div className="text-center mb-4">
<h1 className="text-2xl font-bold">로그인</h1>
<p className="text-muted-foreground text-sm mt-1">계정에 로그인하세요</p>
</div>
<LoginFormContent />
</div>
</div>
</div>
)}
{/* 시안 4: 배경 워터마크 */}
{activeTab === 'v4' && (
<div className="relative flex flex-col h-full overflow-hidden">
{/* 배경 로고 (워터마크) */}
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
<Image
src="/logo-graphic.svg"
alt=""
width={280}
height={280}
className="object-contain opacity-[0.06]"
priority
/>
</div>
{/* 폼 영역 */}
<div className="relative z-10 flex-1 flex flex-col items-center justify-center p-6">
<div className="w-full max-w-[320px]">
<div className="text-center mb-5">
<h1 className="text-2xl font-bold">로그인</h1>
<p className="text-muted-foreground text-sm mt-1">한우 유전능력 컨설팅 서비스</p>
</div>
<LoginFormContent />
</div>
</div>
</div>
)}
</div>
{/* 시안 설명 (하단 고정) */}
<div className="fixed bottom-0 left-0 right-0 bg-gray-900 text-white p-4">
<div className="max-w-[400px] mx-auto">
<h3 className="font-bold text-sm">{descriptions[activeTab].title}</h3>
<ul className="text-xs text-gray-300 mt-1 space-y-0.5">
{descriptions[activeTab].items.map((item, i) => (
<li key={i}>• {item}</li>
))}
</ul>
</div>
</div>
</div>
);
}

29
frontend/src/app/findid/page.tsx
View File

@@ -24,21 +24,22 @@ export default function FindIdPage() {
</div> </div>
{/* 오른쪽 폼 영역 */} {/* 오른쪽 폼 영역 */}
<div className="flex flex-col p-6 md:p-10 bg-white"> <div className="flex flex-col p-4 md:p-10 bg-white">
{/* 모바일: 상단 로고 - 폼 바로 위에 배치 */} {/* 로고 + 폼을 하나로 묶어서 중앙 정렬 */}
<div className="lg:hidden flex justify-center mb-6 mt-4">
<Image
src="/logo-graphic.svg"
alt="한우 유전능력 컨설팅 로고"
width={200}
height={200}
className="object-contain"
priority
/>
</div>
<div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-16"> <div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-16">
<div className="w-full max-w-[320px] lg:max-w-sm"> <div className="w-full max-w-[300px] lg:max-w-sm">
{/* 모바일: 로고 - 폼 바로 위에 붙어있음 */}
<div className="lg:hidden flex justify-center mb-2">
<Image
src="/logo-graphic.svg"
alt="한우 유전능력 컨설팅 로고"
width={120}
height={120}
className="object-contain"
priority
/>
</div>
<FindIdForm /> <FindIdForm />
</div> </div>
</div> </div>

29
frontend/src/app/findpw/page.tsx
View File

@@ -18,21 +18,22 @@ export default function FindPwPage() {
</div> </div>
{/* 오른쪽 폼 영역 */} {/* 오른쪽 폼 영역 */}
<div className="flex flex-col p-6 md:p-10 bg-white"> <div className="flex flex-col p-4 md:p-10 bg-white">
{/* 모바일: 상단 로고 - 폼 바로 위에 배치 */} {/* 로고 + 폼을 하나로 묶어서 중앙 정렬 */}
<div className="lg:hidden flex justify-center mb-6 mt-4">
<Image
src="/logo-graphic.svg"
alt="한우 유전능력 컨설팅 로고"
width={200}
height={200}
className="object-contain"
priority
/>
</div>
<div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-16"> <div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-16">
<div className="w-full max-w-[320px] lg:max-w-sm"> <div className="w-full max-w-[300px] lg:max-w-sm">
{/* 모바일: 로고 - 폼 바로 위에 붙어있음 */}
<div className="lg:hidden flex justify-center mb-2">
<Image
src="/logo-graphic.svg"
alt="한우 유전능력 컨설팅 로고"
width={120}
height={120}
className="object-contain"
priority
/>
</div>
<FindPwForm /> <FindPwForm />
</div> </div>
</div> </div>

4
frontend/src/app/layout.tsx
View File

@@ -6,8 +6,8 @@ import { AnalysisYearProvider } from "@/contexts/AnalysisYearContext";
import { Toaster } from "@/components/ui/sonner"; import { Toaster } from "@/components/ui/sonner";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "한우 유전능력 컨설팅 서비스", title: "한우 유전체 컨설팅 서비스",
description: "한우 개체 유전능력 분석 및 KPN 추천 서비스", description: "한우 개체 유전체 분석 및 KPN 추천 서비스",
}; };
export default function RootLayout({ export default function RootLayout({

29
frontend/src/app/login/page.tsx
View File

@@ -78,21 +78,22 @@ export default function LoginPage() {
</div> </div>
{/* 오른쪽 폼 영역 */} {/* 오른쪽 폼 영역 */}
<div className="flex flex-col p-6 md:p-10 bg-white"> <div className="flex flex-col p-4 md:p-10 bg-white">
{/* 모바일: 상단 로고 - 폼 바로 위에 배치 */} {/* 로고 + 폼을 하나로 묶어서 중앙 정렬 */}
<div className="lg:hidden flex justify-center mb-6 mt-4">
<Image
src="/logo-graphic.svg"
alt="한우 유전능력 컨설팅 로고"
width={200}
height={200}
className="object-contain"
priority
/>
</div>
<div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-16"> <div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-16">
<div className="w-full max-w-[320px] lg:max-w-sm"> <div className="w-full max-w-[300px] lg:max-w-sm">
{/* 모바일: 로고 - 폼 바로 위에 붙어있음 */}
<div className="lg:hidden flex justify-center mb-2">
<Image
src="/logo-graphic.svg"
alt="한우 유전능력 컨설팅 로고"
width={120}
height={120}
className="object-contain"
priority
/>
</div>
<LoginForm <LoginForm
onSubmit={handleLogin} onSubmit={handleLogin}
userId={userId} userId={userId}

30
frontend/src/app/signup/page.tsx
View File

@@ -213,7 +213,7 @@ export default function SignupPage() {
<div className="bg-white relative hidden lg:flex items-center justify-center"> <div className="bg-white relative hidden lg:flex items-center justify-center">
<Image <Image
src="/logo-graphic.svg" src="/logo-graphic.svg"
alt="한우 유전능력 컨설팅 로고" alt="한우 유전체 컨설팅 로고"
fill fill
className="object-contain p-16 -translate-y-12 translate-x-24" className="object-contain p-16 -translate-y-12 translate-x-24"
priority priority
@@ -221,21 +221,21 @@ export default function SignupPage() {
</div> </div>
{/* 오른쪽 폼 영역 */} {/* 오른쪽 폼 영역 */}
<div className="flex flex-col p-6 md:p-10 bg-white"> <div className="flex flex-col p-4 md:p-10 bg-white">
{/* 모바일: 상단 로고 */} {/* 로고 + 폼을 하나로 묶어서 중앙 정렬 */}
<div className="lg:hidden flex justify-center mb-6 mt-4">
<Image
src="/logo-graphic.svg"
alt="한우 유전능력 컨설팅 로고"
width={200}
height={200}
className="object-contain"
priority
/>
</div>
<div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-16"> <div className="flex flex-1 items-center justify-center lg:justify-start lg:pl-16">
<div className="w-full max-w-[320px] lg:max-w-sm"> <div className="w-full max-w-[300px] lg:max-w-sm">
{/* 모바일: 로고 - 폼 바로 위에 붙어있음 */}
<div className="lg:hidden flex justify-center mb-2">
<Image
src="/logo-graphic.svg"
alt="한우 유전체 컨설팅 로고"
width={120}
height={120}
className="object-contain"
priority
/>
</div>
<SignupForm <SignupForm
onSubmit={handleSignup} onSubmit={handleSignup}
formData={formData} formData={formData}

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

@@ -86,11 +86,11 @@ export function FindIdForm({
} }
return ( 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> <FieldGroup>
<div className="flex flex-col items-center gap-1 text-center mb-2"> <div className="flex flex-col items-center gap-0.5 lg:gap-1 text-center mb-2">
<h1 className="text-2xl font-bold">아이디 찾기</h1> <h1 className="text-lg lg:text-2xl font-bold">아이디 찾기</h1>
<p className="text-muted-foreground text-sm text-balance"> <p className="text-muted-foreground text-xs lg:text-sm text-balance">
{step === "email" && "가입 시 등록한 정보를 입력해주세요"} {step === "email" && "가입 시 등록한 정보를 입력해주세요"}
{step === "verify" && "이메일로 전송된 인증번호를 입력해주세요"} {step === "verify" && "이메일로 전송된 인증번호를 입력해주세요"}
{step === "result" && "아이디 찾기가 완료되었습니다"} {step === "result" && "아이디 찾기가 완료되었습니다"}
@@ -100,7 +100,7 @@ export function FindIdForm({
{step === "email" && ( {step === "email" && (
<> <>
<Field> <Field>
<FieldLabel htmlFor="name">이름</FieldLabel> <FieldLabel htmlFor="name" className="text-sm lg:text-base">이름</FieldLabel>
<Input <Input
id="name" id="name"
type="text" type="text"
@@ -109,12 +109,12 @@ export function FindIdForm({
onChange={(e) => setUserName(e.target.value)} onChange={(e) => setUserName(e.target.value)}
required required
disabled={isLoading} disabled={isLoading}
className="h-11" className="h-10 lg:h-11"
/> />
</Field> </Field>
<Field> <Field>
<div className="flex items-center justify-between"> <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 href="/findpw" className="text-xs text-primary hover:underline">
비밀번호 찾기 비밀번호 찾기
</a> </a>
@@ -127,11 +127,11 @@ export function FindIdForm({
onChange={(e) => setUserEmail(e.target.value)} onChange={(e) => setUserEmail(e.target.value)}
required required
disabled={isLoading} disabled={isLoading}
className="h-11" className="h-10 lg:h-11"
/> />
</Field> </Field>
<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 ? "발송 중..." : "인증번호 발송"} {isLoading ? "발송 중..." : "인증번호 발송"}
</Button> </Button>
</Field> </Field>
@@ -141,17 +141,17 @@ export function FindIdForm({
{step === "verify" && ( {step === "verify" && (
<> <>
<Field> <Field>
<FieldLabel htmlFor="email">이메일</FieldLabel> <FieldLabel htmlFor="email" className="text-sm lg:text-base">이메일</FieldLabel>
<Input <Input
id="email" id="email"
type="email" type="email"
value={userEmail} value={userEmail}
disabled disabled
className="h-11" className="h-10 lg:h-11"
/> />
</Field> </Field>
<Field> <Field>
<FieldLabel htmlFor="code">인증번호</FieldLabel> <FieldLabel htmlFor="code" className="text-sm lg:text-base">인증번호</FieldLabel>
<Input <Input
id="code" id="code"
type="text" type="text"
@@ -161,19 +161,19 @@ export function FindIdForm({
maxLength={6} maxLength={6}
required required
disabled={isLoading} disabled={isLoading}
className="h-11" className="h-10 lg:h-11"
/> />
<FieldDescription> <FieldDescription>
{timer > 0 ? "남은 시간: " + formatTime(timer) : "인증번호가 만료되었습니다"} {timer > 0 ? "남은 시간: " + formatTime(timer) : "인증번호가 만료되었습니다"}
</FieldDescription> </FieldDescription>
</Field> </Field>
<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 ? "확인 중..." : "인증번호 확인"} {isLoading ? "확인 중..." : "인증번호 확인"}
</Button> </Button>
</Field> </Field>
<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> </Button>
</Field> </Field>
@@ -183,19 +183,19 @@ export function FindIdForm({
{step === "result" && ( {step === "result" && (
<> <>
<Field> <Field>
<div className="bg-muted rounded-lg p-6 text-center"> <div className="bg-muted rounded-lg p-4 lg:p-6 text-center">
<p className="text-sm text-muted-foreground mb-2">회원님의 아이디는</p> <p className="text-xs lg:text-sm text-muted-foreground mb-2">회원님의 아이디는</p>
<p className="text-2xl font-bold text-primary">{foundUserId}</p> <p className="text-xl lg:text-2xl font-bold text-primary">{foundUserId}</p>
<p className="text-sm text-muted-foreground mt-2">입니다</p> <p className="text-xs lg:text-sm text-muted-foreground mt-2">입니다</p>
</div> </div>
</Field> </Field>
<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> </Button>
</Field> </Field>
<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> </Button>
</Field> </Field>
@@ -210,13 +210,13 @@ export function FindIdForm({
variant="outline" variant="outline"
type="button" type="button"
onClick={() => router.push("/login")} 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> </Button>
</Field> </Field>
<div className="text-center"> <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> </a>
</div> </div>

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

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

28
frontend/src/components/auth/login-form.tsx
View File

@@ -38,16 +38,16 @@ export function LoginForm({
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
return ( return (
<form className={cn("flex flex-col gap-4", className)} onSubmit={onSubmit} {...props}> <form className={cn("flex flex-col gap-3 lg:gap-4", className)} onSubmit={onSubmit} {...props}>
<FieldGroup> <FieldGroup>
<div className="flex flex-col items-center gap-1 text-center mb-2"> <div className="flex flex-col items-center gap-0.5 lg:gap-1 text-center mb-2">
<h1 className="text-2xl font-bold">로그인</h1> <h1 className="text-lg lg:text-2xl font-bold">로그인</h1>
<p className="text-muted-foreground text-sm text-balance"> <p className="text-muted-foreground text-xs lg:text-sm text-balance">
한우 유전능력 컨설팅 서비스에 오신 것을 환영합니다 한우 유전체 컨설팅 서비스에 오신 것을 환영합니다
</p> </p>
</div> </div>
<Field> <Field>
<FieldLabel htmlFor="userId">아이디</FieldLabel> <FieldLabel htmlFor="userId" className="text-sm lg:text-base">아이디</FieldLabel>
<Input <Input
id="userId" id="userId"
type="text" type="text"
@@ -55,13 +55,13 @@ export function LoginForm({
onChange={(e) => setUserId(e.target.value)} onChange={(e) => setUserId(e.target.value)}
placeholder="아이디를 입력하세요" placeholder="아이디를 입력하세요"
disabled={isLoading} disabled={isLoading}
className="h-11" className="h-10 lg:h-11"
required required
/> />
</Field> </Field>
<Field> <Field>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<FieldLabel htmlFor="password">비밀번호</FieldLabel> <FieldLabel htmlFor="password" className="text-sm lg:text-base">비밀번호</FieldLabel>
<a href="/findpw" className="text-xs text-primary hover:underline"> <a href="/findpw" className="text-xs text-primary hover:underline">
비밀번호 찾기 비밀번호 찾기
</a> </a>
@@ -74,7 +74,7 @@ export function LoginForm({
onChange={(e) => setUserPassword(e.target.value)} onChange={(e) => setUserPassword(e.target.value)}
placeholder="비밀번호를 입력하세요" placeholder="비밀번호를 입력하세요"
disabled={isLoading} disabled={isLoading}
className="h-11 pr-10" className="h-10 lg:h-11 pr-10"
required required
/> />
<button <button
@@ -94,17 +94,17 @@ export function LoginForm({
onChange={(e) => setSaveId(e.target.checked)} onChange={(e) => setSaveId(e.target.checked)}
className="rounded border-gray-300 text-primary focus:ring-primary" className="rounded border-gray-300 text-primary focus:ring-primary"
/> />
<span className="text-sm text-gray-600">아이디 저장</span> <span className="text-xs lg:text-sm text-gray-600">아이디 저장</span>
</label> </label>
{error && ( {error && (
<div className="rounded-md bg-red-50 p-3 text-sm text-red-600"> <div className="rounded-md bg-red-50 p-2 lg:p-3 text-xs lg:text-sm text-red-600">
{error} {error}
</div> </div>
)} )}
<Field> <Field>
<Button <Button
type="submit" type="submit"
className="w-full h-11 bg-primary hover:bg-primary/90 text-white shadow-lg hover:shadow-xl transition-all duration-300" className="w-full h-10 lg:h-11 bg-primary hover:bg-primary/90 text-white shadow-lg hover:shadow-xl transition-all duration-300"
disabled={isLoading} disabled={isLoading}
> >
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
@@ -118,13 +118,13 @@ export function LoginForm({
type="button" type="button"
onClick={() => router.push('/signup')} onClick={() => router.push('/signup')}
disabled={isLoading} disabled={isLoading}
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> </Button>
</Field> </Field>
<div className="text-center"> <div className="text-center">
<a href="/findid" className="text-sm text-gray-500 hover:text-primary"> <a href="/findid" className="text-xs lg:text-sm text-gray-500 hover:text-primary">
아이디를 잊으셨나요? 아이디를 잊으셨나요?
</a> </a>
</div> </div>

60
frontend/src/components/auth/signup-form.tsx
View File

@@ -120,12 +120,12 @@ export function SignupForm({
}; };
return ( return (
<form className={cn("flex flex-col gap-4", className)} onSubmit={onSubmit} {...props}> <form className={cn("flex flex-col gap-3 lg:gap-4", className)} onSubmit={onSubmit} {...props}>
<FieldGroup> <FieldGroup>
{/* 헤더 */} {/* 헤더 */}
<div className="flex flex-col items-center gap-1 text-center mb-2"> <div className="flex flex-col items-center gap-0.5 lg:gap-1 text-center mb-2">
<h1 className="text-2xl font-bold">회원가입</h1> <h1 className="text-lg lg:text-2xl font-bold">회원가입</h1>
<p className="text-muted-foreground text-sm"> <p className="text-muted-foreground text-xs lg:text-sm">
{getStepTitle()} {getStepTitle()}
</p> </p>
</div> </div>
@@ -162,14 +162,14 @@ export function SignupForm({
{currentStep === 1 && ( {currentStep === 1 && (
<> <>
<Field> <Field>
<FieldLabel htmlFor="userSe">회원 유형 *</FieldLabel> <FieldLabel htmlFor="userSe" className="text-sm lg:text-base">회원 유형 *</FieldLabel>
<Select <Select
value={formData.userSe} value={formData.userSe}
onValueChange={(value) => handleChange('userSe', value)} onValueChange={(value) => handleChange('userSe', value)}
disabled={isLoading} disabled={isLoading}
required required
> >
<SelectTrigger className="h-11 w-full"> <SelectTrigger className="h-10 lg:h-11 w-full">
<SelectValue placeholder="회원 유형을 선택하세요" /> <SelectValue placeholder="회원 유형을 선택하세요" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -181,7 +181,7 @@ export function SignupForm({
</Field> </Field>
<Field> <Field>
<FieldLabel htmlFor="userId">아이디 *</FieldLabel> <FieldLabel htmlFor="userId" className="text-sm lg:text-base">아이디 *</FieldLabel>
<Input <Input
id="userId" id="userId"
type="text" type="text"
@@ -190,12 +190,12 @@ export function SignupForm({
placeholder="아이디를 입력하세요 (4자 이상)" placeholder="아이디를 입력하세요 (4자 이상)"
disabled={isLoading} disabled={isLoading}
required required
className="h-11" className="h-10 lg:h-11"
/> />
</Field> </Field>
<Field> <Field>
<FieldLabel htmlFor="userName">이름 *</FieldLabel> <FieldLabel htmlFor="userName" className="text-sm lg:text-base">이름 *</FieldLabel>
<Input <Input
id="userName" id="userName"
type="text" type="text"
@@ -204,7 +204,7 @@ export function SignupForm({
placeholder="이름을 입력하세요 (2자 이상)" placeholder="이름을 입력하세요 (2자 이상)"
disabled={isLoading} disabled={isLoading}
required required
className="h-11" className="h-10 lg:h-11"
/> />
</Field> </Field>
</> </>
@@ -214,7 +214,7 @@ export function SignupForm({
{currentStep === 2 && ( {currentStep === 2 && (
<> <>
<Field> <Field>
<FieldLabel htmlFor="userEmail">이메일 *</FieldLabel> <FieldLabel htmlFor="userEmail" className="text-sm lg:text-base">이메일 *</FieldLabel>
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
<Input <Input
id="emailId" id="emailId"
@@ -234,10 +234,10 @@ export function SignupForm({
placeholder="이메일" placeholder="이메일"
disabled={isLoading || isEmailVerified} disabled={isLoading || isEmailVerified}
required required
className="flex-1 h-11" className="flex-1 h-10 lg:h-11"
/> />
<span className="text-muted-foreground shrink-0">@</span> <span className="text-muted-foreground shrink-0">@</span>
<div className="flex items-center flex-1 h-11 border rounded-md focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"> <div className="flex items-center flex-1 h-10 lg:h-11 border rounded-md focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2">
{formData.emailDomain === '직접입력' ? ( {formData.emailDomain === '직접입력' ? (
<Input <Input
id="customDomain" id="customDomain"
@@ -307,7 +307,7 @@ export function SignupForm({
emailCheckStatus === 'checking' emailCheckStatus === 'checking'
} }
variant={isCodeSent || isEmailVerified ? "secondary" : "outline"} variant={isCodeSent || isEmailVerified ? "secondary" : "outline"}
className="w-full h-11" className="w-full h-10 lg:h-11"
> >
{isSendingCode && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} {isSendingCode && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{isEmailVerified ? '인증완료' : isSendingCode ? '발송중...' : isCodeSent ? '발송완료' : '인증번호 발송'} {isEmailVerified ? '인증완료' : isSendingCode ? '발송중...' : isCodeSent ? '발송완료' : '인증번호 발송'}
@@ -334,7 +334,7 @@ export function SignupForm({
{!isEmailVerified && isCodeSent && formData.userEmail && ( {!isEmailVerified && isCodeSent && formData.userEmail && (
<Field> <Field>
<FieldLabel htmlFor="verificationCode">인증번호</FieldLabel> <FieldLabel htmlFor="verificationCode" className="text-sm lg:text-base">인증번호</FieldLabel>
<div className="flex gap-2"> <div className="flex gap-2">
<Input <Input
id="verificationCode" id="verificationCode"
@@ -344,14 +344,14 @@ export function SignupForm({
placeholder="인증번호 6자리" placeholder="인증번호 6자리"
disabled={isLoading || isEmailVerified} disabled={isLoading || isEmailVerified}
maxLength={6} maxLength={6}
className="flex-1 h-11" className="flex-1 h-10 lg:h-11"
/> />
<Button <Button
type="button" type="button"
onClick={onVerifyCode} onClick={onVerifyCode}
disabled={!verificationCode || isLoading || isEmailVerified || isVerifyingCode} disabled={!verificationCode || isLoading || isEmailVerified || isVerifyingCode}
variant="outline" variant="outline"
className="h-11" className="h-10 lg:h-11"
> >
{isVerifyingCode && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} {isVerifyingCode && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{isVerifyingCode ? '확인중...' : '확인'} {isVerifyingCode ? '확인중...' : '확인'}
@@ -367,7 +367,7 @@ export function SignupForm({
{currentStep === 3 && ( {currentStep === 3 && (
<> <>
<Field> <Field>
<FieldLabel htmlFor="userPhone">휴대폰 번호 *</FieldLabel> <FieldLabel htmlFor="userPhone" className="text-sm lg:text-base">휴대폰 번호 *</FieldLabel>
<Input <Input
id="userPhone" id="userPhone"
type="tel" type="tel"
@@ -376,13 +376,13 @@ export function SignupForm({
placeholder="010-0000-0000" placeholder="010-0000-0000"
disabled={isLoading} disabled={isLoading}
required required
className="h-11" className="h-10 lg:h-11"
/> />
</Field> </Field>
{formData.userSe !== 'FARM' && formData.userSe && ( {formData.userSe !== 'FARM' && formData.userSe && (
<Field> <Field>
<FieldLabel htmlFor="userInstName">기관명 *</FieldLabel> <FieldLabel htmlFor="userInstName" className="text-sm lg:text-base">기관명 *</FieldLabel>
<Input <Input
id="userInstName" id="userInstName"
type="text" type="text"
@@ -391,13 +391,13 @@ export function SignupForm({
placeholder="소속 기관명을 입력하세요" placeholder="소속 기관명을 입력하세요"
disabled={isLoading} disabled={isLoading}
required={formData.userSe !== 'FARM'} required={formData.userSe !== 'FARM'}
className="h-11" className="h-10 lg:h-11"
/> />
</Field> </Field>
)} )}
<Field> <Field>
<FieldLabel htmlFor="userPassword">비밀번호 *</FieldLabel> <FieldLabel htmlFor="userPassword" className="text-sm lg:text-base">비밀번호 *</FieldLabel>
<div className="relative"> <div className="relative">
<Input <Input
id="userPassword" id="userPassword"
@@ -407,7 +407,7 @@ export function SignupForm({
placeholder="비밀번호를 입력하세요 (8자 이상)" placeholder="비밀번호를 입력하세요 (8자 이상)"
disabled={isLoading} disabled={isLoading}
required required
className="h-11 pr-10" className="h-10 lg:h-11 pr-10"
/> />
<button <button
type="button" type="button"
@@ -421,7 +421,7 @@ export function SignupForm({
</Field> </Field>
<Field> <Field>
<FieldLabel htmlFor="confirmPassword">비밀번호 확인 *</FieldLabel> <FieldLabel htmlFor="confirmPassword" className="text-sm lg:text-base">비밀번호 확인 *</FieldLabel>
<div className="relative"> <div className="relative">
<Input <Input
id="confirmPassword" id="confirmPassword"
@@ -431,7 +431,7 @@ export function SignupForm({
placeholder="비밀번호를 다시 입력하세요" placeholder="비밀번호를 다시 입력하세요"
disabled={isLoading} disabled={isLoading}
required required
className="h-11 pr-10" className="h-10 lg:h-11 pr-10"
/> />
<button <button
type="button" type="button"
@@ -452,7 +452,7 @@ export function SignupForm({
)} )}
{error && ( {error && (
<div className="rounded-md bg-red-50 p-3 text-sm text-red-600"> <div className="rounded-md bg-red-50 p-2 lg:p-3 text-xs lg:text-sm text-red-600">
{error} {error}
</div> </div>
)} )}
@@ -465,7 +465,7 @@ export function SignupForm({
variant="outline" variant="outline"
onClick={handlePrev} onClick={handlePrev}
disabled={isLoading} disabled={isLoading}
className="flex-1 h-11" className="flex-1 h-10 lg:h-11"
> >
<ChevronLeft className="mr-1 h-4 w-4" /> <ChevronLeft className="mr-1 h-4 w-4" />
이전 이전
@@ -477,7 +477,7 @@ export function SignupForm({
type="button" type="button"
onClick={handleNext} onClick={handleNext}
disabled={!canGoNext() || isLoading} disabled={!canGoNext() || isLoading}
className="flex-1 h-11" className="flex-1 h-10 lg:h-11"
> >
다음 다음
<ChevronRight className="ml-1 h-4 w-4" /> <ChevronRight className="ml-1 h-4 w-4" />
@@ -485,7 +485,7 @@ export function SignupForm({
) : ( ) : (
<Button <Button
type="submit" type="submit"
className="flex-1 h-11" className="flex-1 h-10 lg:h-11"
disabled={isLoading || !canGoNext()} disabled={isLoading || !canGoNext()}
> >
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
@@ -501,7 +501,7 @@ export function SignupForm({
type="button" type="button"
onClick={() => router.push('/login')} onClick={() => router.push('/login')}
disabled={isLoading} disabled={isLoading}
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> </Button>