@farmzone/fz-template-react 1.0.3 → 1.0.4

package/template/src/pages/sample/modal/index.tsx

@@ -1,253 +1,253 @@
-import { useState, type ReactNode } from "react";
-import { Button, Modal, Tab } from "@farmzone/fz-react-ui";
-import { ArrowRight, Clock, Maximize2, Minimize2, X } from "lucide-react";
-import ListHeader from "@/app/layout/ListHeader";
-
-const CATTLE = {
-  id: "KOR-00212345678",
-  farm: "송아지-34567",
-  gender: "수",
-  birthDate: "2026-03-01",
-  breedingType: "비육우",
-  status: "활동",
-  barn: "우사1",
-  farmName: "목장1",
-  registrationCategory: "협동",
-  registrationNumber: "12345678",
-  currentStatus: "상정 중",
-};
-
-const HISTORY = [
-  { id: 1, date: "2026-04-10", title: "사료 교체", desc: "비육 간등", active: true },
-  { id: 2, date: "2026-05-15", title: "예방 접종", desc: "구제역", active: false },
-  { id: 3, date: "2026-04-01", title: "정기 체중 측정", desc: "118kg (+30kg/일)", active: false },
-];
-
-const TABS = ["기본 정보", "혈통 정보", "유전 능력", "질병 관리", "체중 관리"];
-
-function InfoRow({
-  left,
-  right,
-}: {
-  left: { label: string; value: ReactNode; accent?: boolean };
-  right: { label: string; value: ReactNode; accent?: boolean };
-}) {
-  return (
-    <div className="grid grid-cols-2 border-b border-gray-100 last:border-0">
-      <div className="flex items-center gap-3 border-r border-gray-100 px-4 py-3">
-        <span className="w-24 shrink-0 text-sm text-gray-500">{left.label}</span>
-        <span className={`text-sm font-medium ${left.accent ? "text-green-600" : "text-gray-800"}`}>
-          {left.value}
-        </span>
-      </div>
-      <div className="flex items-center gap-3 px-4 py-3">
-        <span className="w-20 shrink-0 text-sm text-gray-500">{right.label}</span>
-        <span className={`text-sm font-medium ${right.accent ? "text-green-600" : "text-gray-800"}`}>
-          {right.value}
-        </span>
-      </div>
-    </div>
-  );
-}
-
-function CattleDetailModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
-  const [activeTab, setActiveTab] = useState(TABS[0]);
-  const [isMaximized, setIsMaximized] = useState(false);
-
-  const handleClose = () => {
-    setIsMaximized(false);
-    onClose();
-  };
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={handleClose}
-      contentClassName={
-        isMaximized
-          ? "w-screen h-screen max-w-none max-h-none rounded-none bg-white overflow-hidden"
-          : "w-200 max-w-[80vw] h-200 max-h-[90vh] rounded-xl bg-white overflow-hidden"
-      }
-    >
-      {/* Header */}
-      <div className="border-b border-gray-100 px-6 py-4">
-        <div className="flex items-center justify-between gap-4">
-          <div className="flex items-center gap-0 overflow-x-auto">
-            {/* ID + status */}
-            <div className="shrink-0 pr-6">
-              <h2 className="text-xl font-bold text-gray-900">{CATTLE.id}</h2>
-              <div className="mt-1.5 flex items-center gap-2">
-                <span className="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-semibold text-green-700">
-                  {CATTLE.status}
-                </span>
-                <span className="flex items-center gap-1 text-xs text-gray-400">
-                  <span>{CATTLE.barn}</span>
-                  <ArrowRight className="h-3 w-3" />
-                  <span>{CATTLE.farmName}</span>
-                </span>
-              </div>
-            </div>
-
-            {/* Divider */}
-            <div className="mx-1 h-10 w-px shrink-0 bg-gray-200" />
-
-            {/* Meta fields */}
-            <div className="flex items-center">
-              <div className="px-5">
-                <p className="text-xs text-gray-400">목장</p>
-                <p className="mt-0.5 text-sm font-semibold text-gray-800">{CATTLE.farm}</p>
-              </div>
-              <div className="h-8 w-px shrink-0 bg-gray-200" />
-              <div className="px-5">
-                <p className="text-xs text-gray-400">성별</p>
-                <p className="mt-0.5 text-sm font-semibold text-gray-800">{CATTLE.gender}</p>
-              </div>
-              <div className="h-8 w-px shrink-0 bg-gray-200" />
-              <div className="px-5">
-                <p className="text-xs text-gray-400">생년월일</p>
-                <p className="mt-0.5 text-sm font-semibold text-green-600">{CATTLE.birthDate}</p>
-              </div>
-              <div className="h-8 w-px shrink-0 bg-gray-200" />
-              <div className="px-5">
-                <p className="text-xs text-gray-400">사육 구분</p>
-                <p className="mt-0.5 text-sm font-bold text-gray-900">{CATTLE.breedingType}</p>
-              </div>
-            </div>
-          </div>
-
-          {/* Action buttons */}
-          <div className="flex shrink-0 items-center gap-0.5">
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={() => setIsMaximized((v) => !v)}
-              className="rounded p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
-            >
-              {isMaximized ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={handleClose}
-              className="rounded p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      {/* Tabs */}
-      <Tab
-        tabs={TABS.map((tab) => ({ label: tab, value: tab }))}
-        activeTab={activeTab}
-        onChange={setActiveTab}
-        showContent={false}
-        showIndicator
-        tabListClassName="px-4"
-        tabClassName="p-4 text-body hover:text-blue-500 hover:bg-gray-50"
-        indicatorClassName="h-0.5 bg-blue-400"
-      />
-
-      {/* Body */}
-      <div className="flex max-h-[500px] border-t-1 border-gray-200">
-        {/* Main content */}
-        <div className="flex-1 overflow-y-auto p-5">
-          {activeTab === "기본 정보" ? (
-            <>
-              <div className="mb-4 overflow-hidden rounded-xs border border-gray-200">
-                <div className="border-b border-gray-200 bg-gray-50 px-4 py-2.5 text-sm font-semibold text-gray-700">
-                  상세 정보
-                </div>
-                <InfoRow
-                  left={{ label: "개체식별번호", value: CATTLE.id }}
-                  right={{ label: "목장", value: CATTLE.farm }}
-                />
-                <InfoRow
-                  left={{ label: "성별", value: CATTLE.gender }}
-                  right={{ label: "생년월일", value: CATTLE.birthDate }}
-                />
-                <InfoRow
-                  left={{ label: "등록구분", value: CATTLE.registrationCategory }}
-                  right={{ label: "등록번호", value: CATTLE.registrationNumber }}
-                />
-                <InfoRow
-                  left={{ label: "사육구분", value: CATTLE.breedingType }}
-                  right={{
-                    label: "현재 상태",
-                    value: (
-                      <span className="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-semibold text-green-700">
-                        {CATTLE.currentStatus}
-                      </span>
-                    ),
-                  }}
-                />
-              </div>
-
-              <div className="overflow-hidden rounded-lg border border-gray-200">
-                <div className="border-b border-gray-200 bg-gray-50 px-4 py-2.5 text-xs font-semibold uppercase tracking-wider text-gray-500">
-                  Asset Visualization
-                </div>
-                <div className="flex h-44 items-center justify-center bg-gray-100">
-                  <img
-                    src="https://placehold.co/780x176/d1d5db/9ca3af?text=Cattle+Image"
-                    alt="cattle visualization"
-                    className="h-full w-full object-cover"
-                  />
-                </div>
-              </div>
-            </>
-          ) : (
-            <div className="flex h-40 items-center justify-center text-sm text-gray-400">준비 중입니다.</div>
-          )}
-        </div>
-
-        {/* Recent history sidebar */}
-        <div className="w-52 shrink-0 overflow-y-auto border-l border-gray-200 p-4">
-          <div className="mb-4 flex items-center gap-2">
-            <Clock className="h-4 w-4 text-gray-500" />
-            <span className="text-sm font-semibold text-gray-700">최근 이력</span>
-          </div>
-          <div>
-            {HISTORY.map((item, i) => (
-              <div key={item.id} className="relative flex gap-3 pb-5 last:pb-0">
-                {i < HISTORY.length - 1 && (
-                  <div className="absolute left-[7px] top-4 h-full w-px bg-gray-200" />
-                )}
-                <div
-                  className={`mt-0.5 h-[15px] w-[15px] shrink-0 rounded-full ${
-                    item.active ? "bg-green-500" : "bg-gray-300"
-                  }`}
-                />
-                <div>
-                  <p className="text-xs text-gray-400">{item.date}</p>
-                  <p className="mt-0.5 text-sm font-semibold text-gray-800">{item.title}</p>
-                  <p className="text-xs text-gray-500">{item.desc}</p>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </Modal>
-  );
-}
-
-export default function SampleModalPage() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <div className="p-6">
-      <ListHeader title="샘플 모달" />
-      <div className="mt-6 flex items-center justify-center rounded-xl border border-dashed border-gray-300 bg-white p-16">
-        <div className="text-center">
-          <p className="mb-4 text-sm text-gray-500">아래 버튼을 클릭하여 개체 상세 모달을 확인하세요.</p>
-          <Button variant="save" onClick={() => setIsOpen(true)}>
-            개체 상세 보기
-          </Button>
-        </div>
-      </div>
-      <CattleDetailModal isOpen={isOpen} onClose={() => setIsOpen(false)} />
-    </div>
-  );
-}
+import { useState, type ReactNode } from "react";
+import { Button, Modal, Tab } from "@farmzone/fz-react-ui";
+import { ArrowRight, Clock, Maximize2, Minimize2, X } from "lucide-react";
+import ListHeader from "@/app/layout/ListHeader";
+
+const CATTLE = {
+  id: "KOR-00212345678",
+  farm: "송아지-34567",
+  gender: "수",
+  birthDate: "2026-03-01",
+  breedingType: "비육우",
+  status: "활동",
+  barn: "우사1",
+  farmName: "목장1",
+  registrationCategory: "협동",
+  registrationNumber: "12345678",
+  currentStatus: "상정 중",
+};
+
+const HISTORY = [
+  { id: 1, date: "2026-04-10", title: "사료 교체", desc: "비육 간등", active: true },
+  { id: 2, date: "2026-05-15", title: "예방 접종", desc: "구제역", active: false },
+  { id: 3, date: "2026-04-01", title: "정기 체중 측정", desc: "118kg (+30kg/일)", active: false },
+];
+
+const TABS = ["기본 정보", "혈통 정보", "유전 능력", "질병 관리", "체중 관리"];
+
+function InfoRow({
+  left,
+  right,
+}: {
+  left: { label: string; value: ReactNode; accent?: boolean };
+  right: { label: string; value: ReactNode; accent?: boolean };
+}) {
+  return (
+    <div className="grid grid-cols-2 border-b border-gray-100 last:border-0">
+      <div className="flex items-center gap-3 border-r border-gray-100 px-4 py-3">
+        <span className="w-24 shrink-0 text-sm text-gray-500">{left.label}</span>
+        <span className={`text-sm font-medium ${left.accent ? "text-green-600" : "text-gray-800"}`}>
+          {left.value}
+        </span>
+      </div>
+      <div className="flex items-center gap-3 px-4 py-3">
+        <span className="w-20 shrink-0 text-sm text-gray-500">{right.label}</span>
+        <span className={`text-sm font-medium ${right.accent ? "text-green-600" : "text-gray-800"}`}>
+          {right.value}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function CattleDetailModal({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
+  const [activeTab, setActiveTab] = useState(TABS[0]);
+  const [isMaximized, setIsMaximized] = useState(false);
+
+  const handleClose = () => {
+    setIsMaximized(false);
+    onClose();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      contentClassName={
+        isMaximized
+          ? "w-screen h-screen max-w-none max-h-none rounded-none bg-white overflow-hidden"
+          : "w-200 max-w-[80vw] h-200 max-h-[90vh] rounded-xl bg-white overflow-hidden"
+      }
+    >
+      {/* Header */}
+      <div className="border-b border-gray-100 px-6 py-4">
+        <div className="flex items-center justify-between gap-4">
+          <div className="flex items-center gap-0 overflow-x-auto">
+            {/* ID + status */}
+            <div className="shrink-0 pr-6">
+              <h2 className="text-xl font-bold text-gray-900">{CATTLE.id}</h2>
+              <div className="mt-1.5 flex items-center gap-2">
+                <span className="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-semibold text-green-700">
+                  {CATTLE.status}
+                </span>
+                <span className="flex items-center gap-1 text-xs text-gray-400">
+                  <span>{CATTLE.barn}</span>
+                  <ArrowRight className="h-3 w-3" />
+                  <span>{CATTLE.farmName}</span>
+                </span>
+              </div>
+            </div>
+
+            {/* Divider */}
+            <div className="mx-1 h-10 w-px shrink-0 bg-gray-200" />
+
+            {/* Meta fields */}
+            <div className="flex items-center">
+              <div className="px-5">
+                <p className="text-xs text-gray-400">목장</p>
+                <p className="mt-0.5 text-sm font-semibold text-gray-800">{CATTLE.farm}</p>
+              </div>
+              <div className="h-8 w-px shrink-0 bg-gray-200" />
+              <div className="px-5">
+                <p className="text-xs text-gray-400">성별</p>
+                <p className="mt-0.5 text-sm font-semibold text-gray-800">{CATTLE.gender}</p>
+              </div>
+              <div className="h-8 w-px shrink-0 bg-gray-200" />
+              <div className="px-5">
+                <p className="text-xs text-gray-400">생년월일</p>
+                <p className="mt-0.5 text-sm font-semibold text-green-600">{CATTLE.birthDate}</p>
+              </div>
+              <div className="h-8 w-px shrink-0 bg-gray-200" />
+              <div className="px-5">
+                <p className="text-xs text-gray-400">사육 구분</p>
+                <p className="mt-0.5 text-sm font-bold text-gray-900">{CATTLE.breedingType}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Action buttons */}
+          <div className="flex shrink-0 items-center gap-0.5">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setIsMaximized((v) => !v)}
+              className="rounded p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+            >
+              {isMaximized ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleClose}
+              className="rounded p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <Tab
+        tabs={TABS.map((tab) => ({ label: tab, value: tab }))}
+        activeTab={activeTab}
+        onChange={setActiveTab}
+        showContent={false}
+        showIndicator
+        tabListClassName="px-4"
+        tabClassName="p-4 text-body hover:text-blue-500 hover:bg-gray-50"
+        indicatorClassName="h-0.5 bg-blue-400"
+      />
+
+      {/* Body */}
+      <div className="flex max-h-[500px] border-t-1 border-gray-200">
+        {/* Main content */}
+        <div className="flex-1 overflow-y-auto p-5">
+          {activeTab === "기본 정보" ? (
+            <>
+              <div className="mb-4 overflow-hidden rounded-xs border border-gray-200">
+                <div className="border-b border-gray-200 bg-gray-50 px-4 py-2.5 text-sm font-semibold text-gray-700">
+                  상세 정보
+                </div>
+                <InfoRow
+                  left={{ label: "개체식별번호", value: CATTLE.id }}
+                  right={{ label: "목장", value: CATTLE.farm }}
+                />
+                <InfoRow
+                  left={{ label: "성별", value: CATTLE.gender }}
+                  right={{ label: "생년월일", value: CATTLE.birthDate }}
+                />
+                <InfoRow
+                  left={{ label: "등록구분", value: CATTLE.registrationCategory }}
+                  right={{ label: "등록번호", value: CATTLE.registrationNumber }}
+                />
+                <InfoRow
+                  left={{ label: "사육구분", value: CATTLE.breedingType }}
+                  right={{
+                    label: "현재 상태",
+                    value: (
+                      <span className="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-semibold text-green-700">
+                        {CATTLE.currentStatus}
+                      </span>
+                    ),
+                  }}
+                />
+              </div>
+
+              <div className="overflow-hidden rounded-lg border border-gray-200">
+                <div className="border-b border-gray-200 bg-gray-50 px-4 py-2.5 text-xs font-semibold uppercase tracking-wider text-gray-500">
+                  Asset Visualization
+                </div>
+                <div className="flex h-44 items-center justify-center bg-gray-100">
+                  <img
+                    src="https://placehold.co/780x176/d1d5db/9ca3af?text=Cattle+Image"
+                    alt="cattle visualization"
+                    className="h-full w-full object-cover"
+                  />
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="flex h-40 items-center justify-center text-sm text-gray-400">준비 중입니다.</div>
+          )}
+        </div>
+
+        {/* Recent history sidebar */}
+        <div className="w-52 shrink-0 overflow-y-auto border-l border-gray-200 p-4">
+          <div className="mb-4 flex items-center gap-2">
+            <Clock className="h-4 w-4 text-gray-500" />
+            <span className="text-sm font-semibold text-gray-700">최근 이력</span>
+          </div>
+          <div>
+            {HISTORY.map((item, i) => (
+              <div key={item.id} className="relative flex gap-3 pb-5 last:pb-0">
+                {i < HISTORY.length - 1 && (
+                  <div className="absolute left-[7px] top-4 h-full w-px bg-gray-200" />
+                )}
+                <div
+                  className={`mt-0.5 h-[15px] w-[15px] shrink-0 rounded-full ${
+                    item.active ? "bg-green-500" : "bg-gray-300"
+                  }`}
+                />
+                <div>
+                  <p className="text-xs text-gray-400">{item.date}</p>
+                  <p className="mt-0.5 text-sm font-semibold text-gray-800">{item.title}</p>
+                  <p className="text-xs text-gray-500">{item.desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export default function SampleModalPage() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="p-6">
+      <ListHeader title="샘플 모달" />
+      <div className="mt-6 flex items-center justify-center rounded-xl border border-dashed border-gray-300 bg-white p-16">
+        <div className="text-center">
+          <p className="mb-4 text-sm text-gray-500">아래 버튼을 클릭하여 개체 상세 모달을 확인하세요.</p>
+          <Button variant="save" onClick={() => setIsOpen(true)}>
+            개체 상세 보기
+          </Button>
+        </div>
+      </div>
+      <CattleDetailModal isOpen={isOpen} onClose={() => setIsOpen(false)} />
+    </div>
+  );
+}