From 933eff9d9736d8dd8beaccf5031f0c50f49f6ca2 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sun, 26 Jul 2026 02:35:37 +0900
Subject: [PATCH] fix(showcase): correct QuantMasterGrid props binding (headers
 & items) and add null-safety checks to prevent TypeError

---
 src/frontend/src/components/QuantMasterGrid.vue  |  4 ++--
 src/frontend/src/views/ComponentShowcaseView.vue | 11 +++++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/components/QuantMasterGrid.vue b/src/frontend/src/components/QuantMasterGrid.vue
index 0f07b59d..76f99cdb 100644
--- a/src/frontend/src/components/QuantMasterGrid.vue
+++ b/src/frontend/src/components/QuantMasterGrid.vue
@@ -54,7 +54,7 @@ const onRowClick = (item: any) => {
               @click="onRowClick(item)"
             >
               <td
-                v-for="h in headers"
+                v-for="h in (headers || [])"
                 :key="h.key"
                 :style="{ textAlign: h.align || 'left' }"
                 class="fs-7"
@@ -67,7 +67,7 @@ const onRowClick = (item: any) => {
           </template>
           <template v-else>
             <tr>
-              <td :colspan="headers.length" class="text-center py-4 text-muted">
+              <td :colspan="(headers || []).length || 1" class="text-center py-4 text-muted">
                 <i class="ti ti-database-off fs-2 d-block mb-1"></i>
                 조회된 데이터가 없습니다.
               </td>
diff --git a/src/frontend/src/views/ComponentShowcaseView.vue b/src/frontend/src/views/ComponentShowcaseView.vue
index 1f41ca22..a8a14bf8 100644
--- a/src/frontend/src/views/ComponentShowcaseView.vue
+++ b/src/frontend/src/views/ComponentShowcaseView.vue
@@ -27,8 +27,8 @@
           <QuantDataGrid :rowData="showcaseRowData" :columnDefs="showcaseColumnDefs" :height="200" />
         </div>
         <div class="flex flex-col gap-1.5">
-          <span class="text-xs font-bold text-slate-800">QuantMasterGrid (마스터-디테일 트리 그리드)</span>
-          <QuantMasterGrid :masterData="showcaseRowData" :height="200" />
+          <span class="text-xs font-bold text-slate-800">QuantMasterGrid (마스터-디테일 테이블 그리드)</span>
+          <QuantMasterGrid title="주문 마스터 목록" :headers="masterGridHeaders" :items="showcaseRowData" />
         </div>
       </div>
     </div>
@@ -296,6 +296,13 @@ const domainBarcode = ref('8801234567890');
 const aiValue = ref('');
 
 // AG Grid Data
+const masterGridHeaders = ref([
+  { key: 'orderNo', label: '주문번호', width: '130px' },
+  { key: 'customerName', label: '거래처명' },
+  { key: 'orderDate', label: '주문일자', width: '110px', align: 'center' as const },
+  { key: 'status', label: '상태', width: '90px', align: 'center' as const }
+]);
+
 const showcaseColumnDefs = ref([
   { field: 'orderNo', headerName: '주문번호', width: 140 },
   { field: 'customerName', headerName: '거래처명', width: 180 },