mpt화면 수정
This commit is contained in:
@@ -1678,26 +1678,19 @@ export default function CowOverviewPage() {
|
|||||||
|
|
||||||
{/* 번식능력 탭 */}
|
{/* 번식능력 탭 */}
|
||||||
<TabsContent value="reproduction" className="mt-6 space-y-6">
|
<TabsContent value="reproduction" className="mt-6 space-y-6">
|
||||||
{/* 혈액화학검사(MPT) 테이블 */}
|
{/* 혈액화학검사(MPT) 테이블 - 추후 사용
|
||||||
<MptTable cowShortNo={cowNo?.slice(-4)} cowNo={cowNo} farmNo={cow?.fkFarmNo} cow={cow} genomeRequest={genomeRequest} />
|
<MptTable cowShortNo={cowNo?.slice(-4)} cowNo={cowNo} farmNo={cow?.fkFarmNo} cow={cow} genomeRequest={genomeRequest} />
|
||||||
|
|
||||||
{/* TODO: 번식능력 분석 결과 (추후 사용)
|
|
||||||
{hasReproductionData ? (
|
|
||||||
<div>
|
|
||||||
<h3 className="text-lg lg:text-xl font-bold text-foreground">번식능력 분석 결과</h3>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<Card className="bg-slate-50 border border-border rounded-2xl">
|
|
||||||
<CardContent className="p-8 text-center">
|
|
||||||
<Activity className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
|
||||||
<h3 className="text-lg font-semibold text-foreground mb-2">번식능력 분석 데이터 없음</h3>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
이 개체는 아직 번식능력 분석이 완료되지 않았습니다.
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
)}
|
|
||||||
*/}
|
*/}
|
||||||
|
|
||||||
|
<Card className="bg-slate-50 border border-border rounded-2xl">
|
||||||
|
<CardContent className="p-8 text-center">
|
||||||
|
<Activity className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
||||||
|
<h3 className="text-lg font-semibold text-foreground mb-2">번식능력 분석 데이터 없음</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
이 개체는 아직 번식능력 분석이 완료되지 않았습니다.
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
253
frontend/src/app/demo/mobile-auth-v1/page.tsx
Normal file
253
frontend/src/app/demo/mobile-auth-v1/page.tsx
Normal file
@@ -0,0 +1,253 @@
|
|||||||
|
'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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user