From 3b9a32b0da2a6f3287514cb980d2d61ef68ef449 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sun, 26 Jul 2026 02:29:09 +0900
Subject: [PATCH] feat(ui): add ComponentShowcaseView for live demo of 14
 components across 4 layers; bind to header toolbar

---
 src/frontend/src/components/QuantHeader.vue   |   4 +
 src/frontend/src/router/index.ts              |   1 +
 .../src/views/ComponentShowcaseView.vue       | 148 ++++++++++++++++++
 3 files changed, 153 insertions(+)
 create mode 100644 src/frontend/src/views/ComponentShowcaseView.vue

diff --git a/src/frontend/src/components/QuantHeader.vue b/src/frontend/src/components/QuantHeader.vue
index 478154bf..4c85fb25 100644
--- a/src/frontend/src/components/QuantHeader.vue
+++ b/src/frontend/src/components/QuantHeader.vue
@@ -69,6 +69,10 @@ onMounted(() => {
       
       <span class="h-4 w-px bg-slate-800 mx-1"></span>
 
+      <router-link to="/components" class="px-2.5 py-1 bg-blue-600 hover:bg-blue-700 text-white text-xs font-bold rounded transition shadow-sm text-decoration-none flex items-center gap-1">
+        <span>🧩 컴포넌트 쇼케이스</span>
+      </router-link>
+
       <router-link to="/login" class="px-3 py-1 bg-rose-600 hover:bg-rose-700 text-white text-xs font-bold rounded transition shadow-sm text-decoration-none">
         로그아웃
       </router-link>
diff --git a/src/frontend/src/router/index.ts b/src/frontend/src/router/index.ts
index 0d17d8cf..78c95835 100644
--- a/src/frontend/src/router/index.ts
+++ b/src/frontend/src/router/index.ts
@@ -29,6 +29,7 @@ const router = createRouter({
     { path: '/database', component: DatabaseView },
     { path: '/snapshots', component: SnapshotAdminView },
     { path: '/users', component: UserManagementView },
+    { path: '/components', component: () => import('../views/ComponentShowcaseView.vue') },
 
     // 프로토타입 템플릿 경로 매핑 (Lazy-loaded for Performance & Bundle Splitting)
     { path: '/templates', component: () => import('../views/templates/TemplateGalleryView.vue') },
diff --git a/src/frontend/src/views/ComponentShowcaseView.vue b/src/frontend/src/views/ComponentShowcaseView.vue
new file mode 100644
index 00000000..a7679e26
--- /dev/null
+++ b/src/frontend/src/views/ComponentShowcaseView.vue
@@ -0,0 +1,148 @@
+<!-- ComponentShowcaseView.vue -->
+<template>
+  <div class="component-showcase-container p-6 bg-slate-100 min-h-full overflow-y-auto flex flex-col gap-6 select-none">
+    <!-- Showcase Header -->
+    <div class="bg-white p-5 rounded-lg border border-slate-300 shadow-sm flex justify-between items-center">
+      <div>
+        <h2 class="text-xl font-extrabold text-slate-900 flex items-center gap-2">
+          <span>🧩 OMS·WMS·ERP 4계층 입력 컴포넌트 라이브 쇼케이스</span>
+          <span class="px-2.5 py-0.5 rounded bg-blue-100 text-blue-800 text-xs font-bold font-mono">14개 전수 작동 중</span>
+        </h2>
+        <p class="text-xs text-slate-500 mt-1">상용화 지침 명세(`docs/ENTERPRISE_CRUD_DESIGN_SPECIFICATION.md`) 기준 4계층 컴포넌트 원형 카탈로그입니다.</p>
+      </div>
+      <div class="text-xs font-mono bg-slate-50 border border-slate-200 px-3 py-2 rounded text-slate-700 font-bold">
+        WBS-COMP-1.1 ~ 4.3 Status: <span class="text-emerald-700">All Integrated</span>
+      </div>
+    </div>
+
+    <!-- Layer 1: Primitives Layer -->
+    <div class="bg-white p-4 rounded-lg border border-slate-300 shadow-sm flex flex-col gap-3">
+      <h3 class="text-sm font-bold text-slate-900 pb-2 border-b border-slate-200 flex items-center gap-2">
+        <span class="px-2 py-0.5 rounded bg-slate-800 text-amber-300 font-mono text-xs">Layer 1</span>
+        <span>Primitives Layer (원자 입력 컴포넌트)</span>
+      </h3>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="flex flex-col gap-1.5 p-3 bg-slate-50 rounded border border-slate-200">
+          <span class="text-xs font-bold text-slate-800">1.1 TextInput (텍스트 입력)</span>
+          <TextInput v-model="primitiveText" placeholder="1-Click 삭제 버튼 내장" />
+          <span class="text-[11px] text-slate-500 font-mono">바인딩 값: {{ primitiveText }}</span>
+        </div>
+        <div class="flex flex-col gap-1.5 p-3 bg-slate-50 rounded border border-slate-200">
+          <span class="text-xs font-bold text-slate-800">1.2 SelectInput (드롭다운)</span>
+          <SelectInput v-model="primitiveSelect" :options="['Option 1', 'Option 2', 'Option 3']" />
+          <span class="text-[11px] text-slate-500 font-mono">선택 값: {{ primitiveSelect }}</span>
+        </div>
+        <div class="flex flex-col gap-1.5 p-3 bg-slate-50 rounded border border-slate-200">
+          <span class="text-xs font-bold text-slate-800">1.3 DialogModal (모달 대화상자)</span>
+          <button type="button" class="h-9 px-3 bg-slate-800 hover:bg-slate-900 text-white font-bold text-xs rounded transition shadow-xs" @click="showModal = true">
+            모달 다이얼로그 열기
+          </button>
+          <DialogModal :isOpen="showModal" title="표준 확인 모달" @close="showModal = false" @confirm="showModal = false">
+            <p class="text-xs text-slate-700">더존 ERP 스타일 표준 확인 모달 다이얼로그입니다.</p>
+          </DialogModal>
+        </div>
+      </div>
+    </div>
+
+    <!-- Layer 2: Typed Field Layer -->
+    <div class="bg-white p-4 rounded-lg border border-slate-300 shadow-sm flex flex-col gap-3">
+      <h3 class="text-sm font-bold text-slate-900 pb-2 border-b border-slate-200 flex items-center gap-2">
+        <span class="px-2 py-0.5 rounded bg-blue-700 text-white font-mono text-xs">Layer 2</span>
+        <span>Typed Field Layer (타입 안전성 폼 필드)</span>
+      </h3>
+      <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div class="p-3 bg-slate-50 rounded border border-slate-200">
+          <StringField label="2.1 StringField" v-model="typedString" placeholder="문자열 입력" required />
+        </div>
+        <div class="p-3 bg-slate-50 rounded border border-slate-200">
+          <NumberField label="2.2 NumberField" v-model="typedNumber" placeholder="0" required />
+        </div>
+        <div class="p-3 bg-slate-50 rounded border border-slate-200">
+          <DateField label="2.3 DateField" v-model="typedDate" showTodayBtn required />
+        </div>
+        <div class="p-3 bg-slate-50 rounded border border-slate-200">
+          <CodeField label="2.4 CodeField (300ms 검증)" v-model="typedCode" required />
+        </div>
+      </div>
+    </div>
+
+    <!-- Layer 3: Domain Field Layer -->
+    <div class="bg-white p-4 rounded-lg border border-slate-300 shadow-sm flex flex-col gap-3">
+      <h3 class="text-sm font-bold text-slate-900 pb-2 border-b border-slate-200 flex items-center gap-2">
+        <span class="px-2 py-0.5 rounded bg-emerald-700 text-white font-mono text-xs">Layer 3</span>
+        <span>Domain Field Layer (OMS·WMS 도메인 특화 필드)</span>
+      </h3>
+      <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div class="p-3 bg-slate-50 rounded border border-slate-200">
+          <QuantityField label="3.1 QuantityField" v-model:amount="domainQty" v-model:unitCode="domainUnit" :availableStock="5000" required />
+        </div>
+        <div class="p-3 bg-slate-50 rounded border border-slate-200">
+          <MoneyField label="3.2 MoneyField" v-model:amount="domainMoney" v-model:currencyCode="domainCurrency" required />
+        </div>
+        <div class="p-3 bg-slate-50 rounded border border-slate-200">
+          <BarcodeInput label="3.3 BarcodeInput (스캐너)" v-model="domainBarcode" required />
+        </div>
+        <div class="p-3 bg-slate-50 rounded border border-slate-200">
+          <LotField lotNumber="LOT-20260725-01" expirationDate="2026-08-15" required />
+        </div>
+      </div>
+    </div>
+
+    <!-- Layer 4: Business Composite Layer -->
+    <div class="bg-white p-4 rounded-lg border border-slate-300 shadow-sm flex flex-col gap-3">
+      <h3 class="text-sm font-bold text-slate-900 pb-2 border-b border-slate-200 flex items-center gap-2">
+        <span class="px-2 py-0.5 rounded bg-purple-700 text-white font-mono text-xs">Layer 4</span>
+        <span>Business Composite Layer (고성능 비즈니스 복합체)</span>
+      </h3>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="p-3 bg-slate-50 rounded border border-slate-200 flex flex-col gap-3">
+          <AddressEditor label="4.1 AddressEditor (주소 입력기)" postalCode="06164" baseAddress="서울특별시 강남구 영동대로 517" detailAddress="아셈타워 32층" />
+          <AISuggestedField label="4.2 AISuggestedField (AI 추천)" v-model="aiValue" suggestedValue="추천 거래처: 삼성전자(주)" :confidenceScore="94" reasoning="과거 1년 출고 이력 기준 최빈 거래처 자동 매칭" />
+        </div>
+        <div class="p-3 bg-slate-50 rounded border border-slate-200">
+          <span class="text-xs font-bold text-slate-800 mb-2 block">4.3 OrderLineEditor (주문 라인 인라인 에디터)</span>
+          <OrderLineEditor />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import TextInput from '../components/primitives/TextInput.vue';
+import SelectInput from '../components/primitives/SelectInput.vue';
+import DialogModal from '../components/primitives/DialogModal.vue';
+
+import StringField from '../components/fields/StringField.vue';
+import NumberField from '../components/fields/NumberField.vue';
+import DateField from '../components/fields/DateField.vue';
+import CodeField from '../components/fields/CodeField.vue';
+
+import QuantityField from '../components/domain-fields/QuantityField.vue';
+import MoneyField from '../components/domain-fields/MoneyField.vue';
+import BarcodeInput from '../components/domain-fields/BarcodeInput.vue';
+import LotField from '../components/domain-fields/LotField.vue';
+
+import AddressEditor from '../components/business-composites/AddressEditor.vue';
+import AISuggestedField from '../components/business-composites/AISuggestedField.vue';
+import OrderLineEditor from '../components/business-composites/OrderLineEditor.vue';
+
+const primitiveText = ref('테스트 데이터');
+const primitiveSelect = ref('Option 1');
+const showModal = ref(false);
+
+const typedString = ref('주문번호 ORD-2026-9901');
+const typedNumber = ref(1500000);
+const typedDate = ref('2026-07-26');
+const typedCode = ref('CUST-001');
+
+const domainQty = ref(120);
+const domainUnit = ref('EA');
+const domainMoney = ref('2500000');
+const domainCurrency = ref('KRW');
+const domainBarcode = ref('8801234567890');
+
+const aiValue = ref('');
+</script>