From 0253322cdede385cfa5c49f9deafb1b36fa88ece Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sun, 26 Jul 2026 02:33:23 +0900
Subject: [PATCH] feat(ui): expand ComponentShowcaseView with AG Grid,
 QuantSearchHeaderBar, AutoComplete and 25 UI components

---
 .../src/views/ComponentShowcaseView.vue       | 112 +++++++++++++++++-
 1 file changed, 107 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/views/ComponentShowcaseView.vue b/src/frontend/src/views/ComponentShowcaseView.vue
index a7679e26..5aa17637 100644
--- a/src/frontend/src/views/ComponentShowcaseView.vue
+++ b/src/frontend/src/views/ComponentShowcaseView.vue
@@ -1,17 +1,83 @@
-<!-- ComponentShowcaseView.vue -->
+<!-- ComponentShowcaseView.vue: 25종 전수 컴포넌트 라이브 쇼케이스 -->
 <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>
+          <span>🧩 OMS·WMS·ERP 25종 전수 UI 컴포넌트 & AG Grid 쇼케이스</span>
+          <span class="px-2.5 py-0.5 rounded bg-emerald-100 text-emerald-800 text-xs font-bold font-mono">25개 전수 작동 중</span>
         </h2>
-        <p class="text-xs text-slate-500 mt-1">상용화 지침 명세(`docs/ENTERPRISE_CRUD_DESIGN_SPECIFICATION.md`) 기준 4계층 컴포넌트 원형 카탈로그입니다.</p>
+        <p class="text-xs text-slate-500 mt-1">상용화 지침 명세(`docs/ENTERPRISE_CRUD_DESIGN_SPECIFICATION.md`) 4계층 입력 컴포넌트 및 AG Grid, 마스터 그리드, 모달 다이얼로그 전수 카탈로그입니다.</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>
+        Total Components: <span class="text-blue-700 font-bold">25 Items Ready</span>
+      </div>
+    </div>
+
+    <!-- Section 0: Enterprise Core Grid & Layout Components -->
+    <div class="bg-white p-5 rounded-lg border border-slate-300 shadow-sm flex flex-col gap-4">
+      <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-amber-500 text-slate-950 font-mono text-xs font-bold">Core Layout</span>
+        <span>0.1 AG Grid 엔터프라이즈 데이터 그리드 (QuantDataGrid)</span>
+      </h3>
+      <div class="w-full">
+        <QuantDataGrid
+          :rowData="showcaseRowData"
+          :columnDefs="showcaseColumnDefs"
+          :height="240"
+        />
+      </div>
+    </div>
+
+    <!-- Section 0.2: Search Bar & Status Chips -->
+    <div class="bg-white p-5 rounded-lg border border-slate-300 shadow-sm flex flex-col gap-4">
+      <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-600 text-white font-mono text-xs font-bold">Search & Status</span>
+        <span>0.2 렌즈 검색 헤더 바 & 상태 시각화 칩 (QuantSearchHeaderBar / QuantStatusChip)</span>
+      </h3>
+      
+      <!-- Search Header Bar Showcase -->
+      <QuantSearchHeaderBar
+        v-model:searchQuery="showcaseSearch"
+        v-model:selectedStatus="showcaseStatus"
+        :statusOptions="['전체', '승인완료', '검토중', '보류', '반려']"
+        @search="onShowcaseSearch"
+        @reset="showcaseSearch = ''; showcaseStatus = '전체'"
+      />
+
+      <div class="flex items-center gap-3 pt-2">
+        <span class="text-xs font-bold text-slate-700">상태 시각화 칩:</span>
+        <QuantStatusChip status="APPROVED" text="승인완료" />
+        <QuantStatusChip status="PENDING" text="검토대기" />
+        <QuantStatusChip status="REJECTED" text="반려" />
+        <QuantStatusChip status="WARNING" text="출하주의" />
+      </div>
+    </div>
+
+    <!-- Section 0.3: AutoComplete & ComboBox -->
+    <div class="bg-white p-5 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-indigo-600 text-white font-mono text-xs font-bold">Form Elements</span>
+        <span>0.3 자동완성 & 콤보박스 (QuantAutoComplete / QuantComboBox)</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-1.5">
+          <span class="text-xs font-bold text-slate-800">QuantAutoComplete (실시간 검색 자동완성)</span>
+          <QuantAutoComplete
+            v-model="autoCompleteVal"
+            :suggestions="['삼성전자(주)', 'SK하이닉스(주)', 'LG에너지솔루션', '현대자동차(주)', 'POSCO홀딩스']"
+            placeholder="거래처 실시간 검색"
+          />
+        </div>
+        <div class="p-3 bg-slate-50 rounded border border-slate-200 flex flex-col gap-1.5">
+          <span class="text-xs font-bold text-slate-800">QuantComboBox (드롭다운 콤보박스)</span>
+          <QuantComboBox
+            v-model="comboBoxVal"
+            :options="['선급금 거래처', '외상매출금 거래처', '미수금 거래처']"
+            placeholder="구분 선택"
+          />
+        </div>
       </div>
     </div>
 
@@ -111,24 +177,41 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
+// 1. Enterprise Core UI & AG Grid
+import QuantDataGrid from '../components/QuantDataGrid.vue';
+import QuantSearchHeaderBar from '../components/QuantSearchHeaderBar.vue';
+import QuantStatusChip from '../components/QuantStatusChip.vue';
+import QuantAutoComplete from '../components/QuantAutoComplete.vue';
+import QuantComboBox from '../components/QuantComboBox.vue';
+
+// 2. Layer 1: Primitives
 import TextInput from '../components/primitives/TextInput.vue';
 import SelectInput from '../components/primitives/SelectInput.vue';
 import DialogModal from '../components/primitives/DialogModal.vue';
 
+// 3. Layer 2: Typed Fields
 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';
 
+// 4. Layer 3: Domain Fields
 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';
 
+// 5. Layer 4: Business Composites
 import AddressEditor from '../components/business-composites/AddressEditor.vue';
 import AISuggestedField from '../components/business-composites/AISuggestedField.vue';
 import OrderLineEditor from '../components/business-composites/OrderLineEditor.vue';
 
+// Showcase Reactive States
+const showcaseSearch = ref('');
+const showcaseStatus = ref('전체');
+const autoCompleteVal = ref('');
+const comboBoxVal = ref('');
+
 const primitiveText = ref('테스트 데이터');
 const primitiveSelect = ref('Option 1');
 const showModal = ref(false);
@@ -145,4 +228,23 @@ const domainCurrency = ref('KRW');
 const domainBarcode = ref('8801234567890');
 
 const aiValue = ref('');
+
+// AG Grid Showcase Data
+const showcaseColumnDefs = ref([
+  { field: 'orderNo', headerName: '주문번호', width: 140, fontMono: true },
+  { field: 'customerName', headerName: '거래처명', width: 180 },
+  { field: 'orderDate', headerName: '주문일자', width: 120 },
+  { field: 'amount', headerName: '금액(KRW)', width: 150, valueFormatter: (params: any) => params.value?.toLocaleString() },
+  { field: 'status', headerName: '상태', width: 110 }
+]);
+
+const showcaseRowData = ref([
+  { orderNo: 'ORD-20260725-01', customerName: '삼성전자(주)', orderDate: '2026-07-25', amount: 141000000, status: '승인완료' },
+  { orderNo: 'ORD-20260725-02', customerName: 'SK하이닉스(주)', orderDate: '2026-07-25', amount: 127500000, status: '검토대기' },
+  { orderNo: 'ORD-20260725-03', customerName: 'LG에너지솔루션', orderDate: '2026-07-26', amount: 89000000, status: '출하주의' }
+]);
+
+const onShowcaseSearch = () => {
+  console.log('Search Triggered:', showcaseSearch.value, showcaseStatus.value);
+};
 </script>