mpt화면 수정

frontend/src/app/cow/[cowNo]/page.tsx

@@ -1678,26 +1678,19 @@ export default function CowOverviewPage() {
 
                 {/* 번식능력 탭 */}
                 <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} />
-
-                  {/* 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>
               </Tabs>
             </div>

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

@@ -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>
+  );
+}