From b3915808f277fc767f2881885c6947f1a68ac538 Mon Sep 17 00:00:00 2001 From: chu eun ju Date: Wed, 17 Dec 2025 10:29:43 +0900 Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=9D=B8?= =?UTF-8?q?=EC=A6=9D=20=ED=99=94=EB=A9=B4=20ui=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/app/demo/mobile-auth-v1/page.tsx | 253 ------------------ frontend/src/app/findid/page.tsx | 29 +- frontend/src/app/findpw/page.tsx | 29 +- frontend/src/app/layout.tsx | 4 +- frontend/src/app/login/page.tsx | 29 +- frontend/src/app/signup/page.tsx | 30 +-- frontend/src/components/auth/findid-form.tsx | 46 ++-- frontend/src/components/auth/findpw-form.tsx | 56 ++-- frontend/src/components/auth/login-form.tsx | 28 +- frontend/src/components/auth/signup-form.tsx | 60 ++--- 10 files changed, 157 insertions(+), 407 deletions(-) delete mode 100644 frontend/src/app/demo/mobile-auth-v1/page.tsx diff --git a/frontend/src/app/demo/mobile-auth-v1/page.tsx b/frontend/src/app/demo/mobile-auth-v1/page.tsx deleted file mode 100644 index 6389e4c..0000000 --- a/frontend/src/app/demo/mobile-auth-v1/page.tsx +++ /dev/null @@ -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 = { - 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 }) => ( -
- - - 아이디 - - - - -
- 비밀번호 - 비밀번호 찾기 -
-
- - -
- - - - - - - - - 또는 - - - - - -
- - 아이디를 잊으셨나요? - -
- -
- ); - - return ( -
- {/* 상단 탭 */} -
- setActiveTab(v as 'v1' | 'v2' | 'v3' | 'v4')} className="w-full"> - - 축소 - 가로 - 상단바 - 배경 - - -
- - {/* 모바일 프리뷰 컨테이너 */} -
- - {/* 시안 1: 로고 크기만 축소 */} - {activeTab === 'v1' && ( -
- {/* 로고 - 100px로 축소 */} -
- 로고 -
- - {/* 타이틀 */} -
-

로그인

-

한우 유전능력 컨설팅 서비스

-
- - {/* 폼 영역 */} -
-
- -
-
-
- )} - - {/* 시안 2: 로고 + 타이틀 가로 배치 */} - {activeTab === 'v2' && ( -
- {/* 로고 + 타이틀 가로 배치 */} -
- 로고 -
-

로그인

-

한우 유전능력 컨설팅 서비스

-
-
- - {/* 폼 영역 */} -
-
- -
-
-
- )} - - {/* 시안 3: 상단 바 형태 */} - {activeTab === 'v3' && ( -
- {/* 상단 헤더 바 */} -
- 로고 - 한우 유전능력 컨설팅 -
- - {/* 폼 영역 */} -
-
-
-

로그인

-

계정에 로그인하세요

-
- -
-
-
- )} - - {/* 시안 4: 배경 워터마크 */} - {activeTab === 'v4' && ( -
- {/* 배경 로고 (워터마크) */} -
- -
- - {/* 폼 영역 */} -
-
-
-

로그인

-

한우 유전능력 컨설팅 서비스

-
- -
-
-
- )} -
- - {/* 시안 설명 (하단 고정) */} -
-
-

{descriptions[activeTab].title}

-
    - {descriptions[activeTab].items.map((item, i) => ( -
  • • {item}
    • - ))} -
-
-
-
- ); -} diff --git a/frontend/src/app/findid/page.tsx b/frontend/src/app/findid/page.tsx index 1d65824..84c9781 100644 --- a/frontend/src/app/findid/page.tsx +++ b/frontend/src/app/findid/page.tsx @@ -24,21 +24,22 @@ export default function FindIdPage() { {/* 오른쪽 폼 영역 */} -
- {/* 모바일: 상단 로고 - 폼 바로 위에 배치 */} -
- 한우 유전능력 컨설팅 로고 -
- +
+ {/* 로고 + 폼을 하나로 묶어서 중앙 정렬 */}
-
+
+ {/* 모바일: 로고 - 폼 바로 위에 붙어있음 */} +
+ 한우 유전능력 컨설팅 로고 +
+
diff --git a/frontend/src/app/findpw/page.tsx b/frontend/src/app/findpw/page.tsx index e983550..55824c6 100644 --- a/frontend/src/app/findpw/page.tsx +++ b/frontend/src/app/findpw/page.tsx @@ -18,21 +18,22 @@ export default function FindPwPage() {
{/* 오른쪽 폼 영역 */} -
- {/* 모바일: 상단 로고 - 폼 바로 위에 배치 */} -
- 한우 유전능력 컨설팅 로고 -
- +
+ {/* 로고 + 폼을 하나로 묶어서 중앙 정렬 */}
-
+
+ {/* 모바일: 로고 - 폼 바로 위에 붙어있음 */} +
+ 한우 유전능력 컨설팅 로고 +
+
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index e5a5c36..b8622da 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -6,8 +6,8 @@ import { AnalysisYearProvider } from "@/contexts/AnalysisYearContext"; import { Toaster } from "@/components/ui/sonner"; export const metadata: Metadata = { - title: "한우 유전능력 컨설팅 서비스", - description: "한우 개체 유전능력 분석 및 KPN 추천 서비스", + title: "한우 유전체 컨설팅 서비스", + description: "한우 개체 유전체 분석 및 KPN 추천 서비스", }; export default function RootLayout({ diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx index d8f2b01..32b37d1 100644 --- a/frontend/src/app/login/page.tsx +++ b/frontend/src/app/login/page.tsx @@ -78,21 +78,22 @@ export default function LoginPage() {
{/* 오른쪽 폼 영역 */} -
- {/* 모바일: 상단 로고 - 폼 바로 위에 배치 */} -
- 한우 유전능력 컨설팅 로고 -
- +
+ {/* 로고 + 폼을 하나로 묶어서 중앙 정렬 */}
-
+
+ {/* 모바일: 로고 - 폼 바로 위에 붙어있음 */} +
+ 한우 유전능력 컨설팅 로고 +
+ 한우 유전능력 컨설팅 로고 {/* 오른쪽 폼 영역 */} -
- {/* 모바일: 상단 로고 */} -
- 한우 유전능력 컨설팅 로고 -
- +
+ {/* 로고 + 폼을 하나로 묶어서 중앙 정렬 */}
-
+
+ {/* 모바일: 로고 - 폼 바로 위에 붙어있음 */} +
+ 한우 유전체 컨설팅 로고 +
+
-
-

아이디 찾기

-

+

+

아이디 찾기

+

{step === "email" && "가입 시 등록한 정보를 입력해주세요"} {step === "verify" && "이메일로 전송된 인증번호를 입력해주세요"} {step === "result" && "아이디 찾기가 완료되었습니다"} @@ -100,7 +100,7 @@ export function FindIdForm({ {step === "email" && ( <> - 이름 + 이름 setUserName(e.target.value)} required disabled={isLoading} - className="h-11" + className="h-10 lg:h-11" />

- 이메일 + 이메일 비밀번호 찾기 @@ -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" /> - @@ -141,17 +141,17 @@ export function FindIdForm({ {step === "verify" && ( <> - 이메일 + 이메일 - 인증번호 + 인증번호 {timer > 0 ? "남은 시간: " + formatTime(timer) : "인증번호가 만료되었습니다"} - - @@ -183,19 +183,19 @@ export function FindIdForm({ {step === "result" && ( <> -
-

회원님의 아이디는

-

{foundUserId}

-

입니다

+
+

회원님의 아이디는

+

{foundUserId}

+

입니다

- - @@ -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" > 로그인 diff --git a/frontend/src/components/auth/findpw-form.tsx b/frontend/src/components/auth/findpw-form.tsx index 31fcb45..7a16653 100644 --- a/frontend/src/components/auth/findpw-form.tsx +++ b/frontend/src/components/auth/findpw-form.tsx @@ -124,11 +124,11 @@ export function FindPwForm({ } return ( - + -
-

비밀번호 찾기

-

+

+

비밀번호 찾기

+

{step === "info" && "등록된 정보를 입력해주세요"} {step === "verify" && "이메일로 전송된 인증번호를 입력해주세요"} {step === "reset" && "새로운 비밀번호를 설정해주세요"} @@ -139,7 +139,7 @@ export function FindPwForm({ {step === "info" && ( <> - 아이디 + 아이디 setUserId(e.target.value)} required disabled={isLoading} - className="h-11" + className="h-10 lg:h-11" />

- 이메일 + 이메일 아이디 찾기 @@ -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" /> - @@ -180,15 +180,15 @@ export function FindPwForm({ {step === "verify" && ( <> - 아이디 - + 아이디 + - 이메일 - + 이메일 + - 인증번호 + 인증번호 {timer > 0 ? `남은 시간: ${formatTime(timer)}` : "인증번호가 만료되었습니다"} - - @@ -220,7 +220,7 @@ export function FindPwForm({ {step === "reset" && ( <> - 새 비밀번호 + 새 비밀번호
setNewPassword(e.target.value)} required disabled={isLoading} - className="h-11 pr-10" + className="h-10 lg:h-11 pr-10" /> @@ -281,15 +281,15 @@ export function FindPwForm({ {step === "complete" && ( <> -
-

비밀번호 재설정 완료

-

+

+

비밀번호 재설정 완료

+

새로운 비밀번호로 로그인해주세요

- @@ -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" > 로그인 diff --git a/frontend/src/components/auth/login-form.tsx b/frontend/src/components/auth/login-form.tsx index a63fb9e..bab93d2 100644 --- a/frontend/src/components/auth/login-form.tsx +++ b/frontend/src/components/auth/login-form.tsx @@ -38,16 +38,16 @@ export function LoginForm({ const [showPassword, setShowPassword] = useState(false); return ( - + -
-

로그인

-

- 한우 유전능력 컨설팅 서비스에 오신 것을 환영합니다 +

+

로그인

+

+ 한우 유전체 컨설팅 서비스에 오신 것을 환영합니다

- 아이디 + 아이디 setUserId(e.target.value)} placeholder="아이디를 입력하세요" disabled={isLoading} - className="h-11" + className="h-10 lg:h-11" required />
- 비밀번호 + 비밀번호 비밀번호 찾기 @@ -74,7 +74,7 @@ export function LoginForm({ onChange={(e) => setUserPassword(e.target.value)} placeholder="비밀번호를 입력하세요" disabled={isLoading} - className="h-11 pr-10" + className="h-10 lg:h-11 pr-10" required /> diff --git a/frontend/src/components/auth/signup-form.tsx b/frontend/src/components/auth/signup-form.tsx index a4d25de..1bd7ed3 100644 --- a/frontend/src/components/auth/signup-form.tsx +++ b/frontend/src/components/auth/signup-form.tsx @@ -120,12 +120,12 @@ export function SignupForm({ }; return ( - + {/* 헤더 */} -
-

회원가입

-

+

+

회원가입

+

{getStepTitle()}

@@ -162,14 +162,14 @@ export function SignupForm({ {currentStep === 1 && ( <> - 회원 유형 * + 회원 유형 * - 이름 * + 이름 * @@ -214,7 +214,7 @@ export function SignupForm({ {currentStep === 2 && ( <> - 이메일 * + 이메일 *
@ -
+
{formData.emailDomain === '직접입력' ? ( {isSendingCode && } {isEmailVerified ? '인증완료' : isSendingCode ? '발송중...' : isCodeSent ? '발송완료' : '인증번호 발송'} @@ -334,7 +334,7 @@ export function SignupForm({ {!isEmailVerified && isCodeSent && formData.userEmail && ( - 인증번호 + 인증번호