kjh2064/QuantEngineByItz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

feat(ui): ensure 1:1 direct mapping of all 21 top-level Vue component files in components directory to ComponentShowcaseView
Validators (Pushes and Pull Requests) / UI & Storage Validation (push) Failing after 10s
Details
Validators (Pushes and Pull Requests) / Notify PR Results (push) Has been skipped
Details
Validators (Pushes and Pull Requests) / Database & Schema Validation (push) Successful in 11s
Details
Validators (Pushes and Pull Requests) / Core Validators & Database Setup (push) Failing after 19s
Details
Validators (Pushes and Pull Requests) / WBS & Audit Validations (push) Has been skipped
Details
Validators (Pushes and Pull Requests) / .NET Contracts (push) Has been skipped
Details
Validators (Pushes and Pull Requests) / Calibration & Performance (push) Has been skipped
Details
Validators (Pushes and Pull Requests) / Operational Report & Decision Packet (push) Has been skipped
Details
Validators (Pushes and Pull Requests) / Security & Secrets (push) Successful in 9s
Details
Validators (Pushes and Pull Requests) / CI Workflow Lint (push) Failing after 8s
Details

Browse Source
This commit is contained in:
김재현
2026-07-26 02:37:27 +09:00
parent 4503d4fcb1
commit 9f3cdf5759
1 changed files with 160 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/src/views/ComponentShowcaseView.vue
+160 -142
View File
@@ -1,161 +1,143 @@
<!-- ComponentShowcaseView.vue: 41종 단 1개도 빠짐없는 100% 완전 전수 컴포넌트 쇼케이스 --> <!-- ComponentShowcaseView.vue: 21개 Vue 컴포넌트 전수 명시 라이브 쇼케이스 -->
<template> <template>
<div class="component-showcase-container p-6 bg-slate-100 min-h-full overflow-y-auto flex flex-col gap-6 select-none"> <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 --> <!-- Showcase Header -->
<div class="bg-white p-5 rounded-lg border border-slate-300 shadow-sm flex justify-between items-center"> <div class="bg-white p-5 rounded-lg border border-slate-300 shadow-sm flex justify-between items-center">
<div> <div>
<h2 class="text-xl font-extrabold text-slate-900 flex items-center gap-2"> <h2 class="text-xl font-extrabold text-slate-900 flex items-center gap-2">
<span>🧩 OMS·WMS·ERP 41종 전수 UI 컴포넌트 & 서브 모듈 쇼케이스</span> <span>🧩 OMS·WMS·ERP 프론트엔드 UI 컴포넌트 전수 라이브 쇼케이스</span>
<span class="px-2.5 py-0.5 rounded bg-emerald-100 text-emerald-800 text-xs font-bold font-mono">41/41 전수 완결</span> <span class="px-2.5 py-0.5 rounded bg-emerald-100 text-emerald-800 text-xs font-bold font-mono">21/21 컴포넌트 전수 활성화</span>
</h2> </h2>
<p class="text-xs text-slate-500 mt-1">상용화 지침 명세(`docs/ENTERPRISE_CRUD_DESIGN_SPECIFICATION.md`) 기준 41개 컴포넌트 모듈 100% 전수 카탈로그입니다.</p> <p class="text-xs text-slate-500 mt-1">`src/frontend/src/components/` 디렉토리 내의 모든 컴포넌트 파일이 이 화면에 1:1 전수 렌더링되어 있습니다.</p>
</div> </div>
<div class="text-xs font-mono bg-slate-50 border border-slate-200 px-3 py-2 rounded text-slate-700 font-bold"> <div class="text-xs font-mono bg-slate-50 border border-slate-200 px-3 py-2 rounded text-slate-700 font-bold">
Inventory Coverage: <span class="text-emerald-700 font-bold">41 Components 100% PASS</span> Total Components: <span class="text-emerald-700 font-bold">21 Vue Files Ready</span>
</div> </div>
</div> </div>
<!-- Section 0: Grid & Sub Grid Toolbars --> <!-- 1. Enterprise Data Grids -->
<div class="bg-white p-5 rounded-lg border border-slate-300 shadow-sm flex flex-col gap-4"> <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"> <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">Grid Submodules</span> <span class="px-2 py-0.5 rounded bg-amber-500 text-slate-950 font-mono text-xs font-bold">1. Grids</span>
<span>0.1 그리드 헤더 툴바, 수익률 칩 & 티커 뱃지 (GridHeaderToolbar / ReturnChip / TickerBadge)</span> <span>1. QuantDataGrid & 2. QuantMasterGrid</span>
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex flex-col gap-1.5 p-3 bg-slate-50 rounded border">
<span class="text-xs font-bold text-slate-800">1. QuantDataGrid (AG Grid 대량 가상화)</span>
<QuantDataGrid :rowData="showcaseRowData" :columnDefs="showcaseColumnDefs" :height="180" />
</div>
<div class="flex flex-col gap-1.5 p-3 bg-slate-50 rounded border">
<span class="text-xs font-bold text-slate-800">2. QuantMasterGrid (마스터-디테일 테이블)</span>
<QuantMasterGrid title="주문 마스터" :headers="masterGridHeaders" :items="showcaseRowData" />
</div>
</div>
</div>
<!-- 2. Search & Toolbars & Submodules -->
<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-blue-600 text-white font-mono text-xs font-bold">2. Toolbars & Submodules</span>
<span>3. QuantSearchHeaderBar / 4. CrudToolbar / 5. GridHeaderToolbar / 6. LiveTelemetryFooter / 7. AuditTimeline</span>
</h3> </h3>
<GridHeaderToolbar <!-- 3. QuantSearchHeaderBar -->
title="주문 마스터 대량 가상화 그리드" <div class="p-3 bg-slate-50 rounded border">
:totalCount="1285" <span class="text-xs font-bold text-slate-800 mb-1.5 block">3. QuantSearchHeaderBar (상단 렌즈 검색 바)</span>
@search="onShowcaseSearch" <QuantSearchHeaderBar v-model:searchQuery="showcaseSearch" v-model:selectedStatus="showcaseStatus" :statusOptions="['전체', '승인완료', '검토중', '보류']" />
@export="onShowcaseSearch"
/>
<div class="flex items-center gap-4 pt-1">
<div class="flex items-center gap-2">
<span class="text-xs font-bold text-slate-700">ReturnChip:</span>
<ReturnChip :value="12.4" />
<ReturnChip :value="-3.8" />
</div>
<div class="flex items-center gap-2">
<span class="text-xs font-bold text-slate-700">TickerBadge:</span>
<TickerBadge ticker="005930" name="삼성전자" />
<TickerBadge ticker="000660" name="SK하이닉스" />
</div>
</div> </div>
</div>
<!-- Section 0.2: CRUD Toolbars & Audit Timeline --> <!-- 4. CrudToolbar -->
<div class="bg-white p-5 rounded-lg border border-slate-300 shadow-sm flex flex-col gap-4"> <div class="p-3 bg-slate-50 rounded border">
<h3 class="text-sm font-bold text-slate-900 pb-2 border-b border-slate-200 flex items-center gap-2"> <span class="text-xs font-bold text-slate-800 mb-1.5 block">4. CrudToolbar (상용 ERP CRUD 툴바)</span>
<span class="px-2 py-0.5 rounded bg-blue-600 text-white font-mono text-xs font-bold">CRUD Submodules</span> <CrudToolbar title="OMS 주문 관리" :isNewMode="false" />
<span>0.2 상용 ERP CRUD 툴바 & 감사 이력 타임라인 (CrudToolbar / AuditTimeline)</span> </div>
</h3>
<CrudToolbar <!-- 5. GridHeaderToolbar -->
title="OMS 주문 마스터 관리" <div class="p-3 bg-slate-50 rounded border">
:isNewMode="false" <span class="text-xs font-bold text-slate-800 mb-1.5 block">5. GridHeaderToolbar (그리드 전용 툴바)</span>
@search="onShowcaseSearch" <GridHeaderToolbar title="주문 내역 가상화 그리드" :totalCount="1285" />
@new="onShowcaseSearch" </div>
@save="onShowcaseSearch"
@delete="onShowcaseSearch"
/>
<div class="p-3 bg-slate-50 rounded border border-slate-200"> <!-- 6. LiveTelemetryFooter -->
<span class="text-xs font-bold text-slate-800 mb-2 block">AuditTimeline (변경 이력 감사 로그)</span> <div class="p-3 bg-slate-50 rounded border">
<span class="text-xs font-bold text-slate-800 mb-1.5 block">6. LiveTelemetryFooter (실시간 관제 바)</span>
<LiveTelemetryFooter />
</div>
<!-- 7. AuditTimeline -->
<div class="p-3 bg-slate-50 rounded border">
<span class="text-xs font-bold text-slate-800 mb-1.5 block">7. AuditTimeline (변경 감사 이력 타임라인)</span>
<AuditTimeline :logs="showcaseAuditLogs" /> <AuditTimeline :logs="showcaseAuditLogs" />
</div> </div>
</div> </div>
<!-- Section 0.3: Telemetry Footer --> <!-- 3. Layouts & Chips & Badges -->
<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-slate-800 text-amber-300 font-mono text-xs font-bold">Telemetry</span>
<span>0.3 실시간 관제 텔레메트리 바 (LiveTelemetryFooter)</span>
</h3>
<div class="rounded border overflow-hidden">
<LiveTelemetryFooter />
</div>
</div>
<!-- Section 0.4: Core Data Grids -->
<div class="bg-white p-5 rounded-lg border border-slate-300 shadow-sm flex flex-col gap-4"> <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"> <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">Core Layout</span> <span class="px-2 py-0.5 rounded bg-purple-600 text-white font-mono text-xs font-bold">3. Layouts & Chips</span>
<span>0.4 AG Grid 데이터 그리드 & 마스터 그리드 (QuantDataGrid / QuantMasterGrid)</span> <span>8. QuantTabPanel / 9. QuantSplitter / 10. QuantStatusChip / 11. ReturnChip / 12. TickerBadge</span>
</h3> </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex flex-col gap-1.5">
<span class="text-xs font-bold text-slate-800">QuantDataGrid (단일 데이터 가상화 그리드)</span>
<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 title="주문 마스터 목록" :headers="masterGridHeaders" :items="showcaseRowData" />
</div>
</div>
</div>
<!-- Section 0.5: Search Bar & Status Chips & Tab Panel & Splitter -->
<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-purple-600 text-white font-mono text-xs font-bold">Search & Layout</span>
<span>0.5 렌즈 검색 바, 상태 칩, 탭 패널 & 스플리터 (QuantSearchHeaderBar / QuantTabPanel / QuantSplitter)</span>
</h3>
<QuantSearchHeaderBar
v-model:searchQuery="showcaseSearch"
v-model:selectedStatus="showcaseStatus"
:statusOptions="['전체', '승인완료', '검토중', '보류', '반려']"
/>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <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-2"> <!-- 8. QuantTabPanel -->
<span class="text-xs font-bold text-slate-800">QuantTabPanel (탭 패널 컨테이너)</span> <div class="p-3 bg-slate-50 rounded border">
<QuantTabPanel :tabs="['주문 기본정보', '배송지 상세', '변경 이력 로그']"> <span class="text-xs font-bold text-slate-800 mb-1 block">8. QuantTabPanel (탭 패널)</span>
<template #tab-0><p class="text-xs text-slate-700 p-2">주문 기본정보 탭 컨텐츠 영역입니다.</p></template> <QuantTabPanel :tabs="['기본 정보', '상세 이력']">
<template #tab-1><p class="text-xs text-slate-700 p-2">배송지 상세 주소 및 담당자 정보입니다.</p></template> <template #tab-0><p class="text-xs text-slate-700 p-2">기본 주문 정보 패널입니다.</p></template>
<template #tab-2><p class="text-xs text-slate-700 p-2">변경 이력 Audit Log 타임라인입니다.</p></template> <template #tab-1><p class="text-xs text-slate-700 p-2">상세 Audit 이력 패널입니다.</p></template>
</QuantTabPanel> </QuantTabPanel>
</div> </div>
<div class="p-3 bg-slate-50 rounded border border-slate-200 flex flex-col gap-2">
<span class="text-xs font-bold text-slate-800">QuantSplitter (분할 영역 스플리터)</span> <!-- 9. QuantSplitter -->
<QuantSplitter leftWidth="40%" class="h-32 border rounded bg-white p-2"> <div class="p-3 bg-slate-50 rounded border">
<template #left><div class="text-xs p-2 bg-blue-50 h-full rounded text-blue-900 font-bold">좌측 40% 분할 패널</div></template> <span class="text-xs font-bold text-slate-800 mb-1 block">9. QuantSplitter (화면 분할)</span>
<template #right><div class="text-xs p-2 bg-emerald-50 h-full rounded text-emerald-900 font-bold">우측 60% 분할 패널</div></template> <QuantSplitter leftWidth="40%" class="h-28 border rounded bg-white p-2">
<template #left><div class="text-xs p-2 bg-blue-50 h-full rounded text-blue-900 font-bold">좌측 40%</div></template>
<template #right><div class="text-xs p-2 bg-emerald-50 h-full rounded text-emerald-900 font-bold">우측 60%</div></template>
</QuantSplitter> </QuantSplitter>
</div> </div>
</div> </div>
<div class="flex items-center gap-3 pt-1"> <!-- Chips & Badges -->
<span class="text-xs font-bold text-slate-700">QuantStatusChip:</span> <div class="flex items-center gap-6 pt-1 p-3 bg-slate-50 rounded border">
<QuantStatusChip status="APPROVED" text="승인완료" /> <div class="flex items-center gap-2">
<QuantStatusChip status="PENDING" text="검토대기" /> <span class="text-xs font-bold text-slate-700">10. QuantStatusChip:</span>
<QuantStatusChip status="REJECTED" text="반려" /> <QuantStatusChip status="APPROVED" text="승인완료" />
<QuantStatusChip status="WARNING" text="출하주의" /> <QuantStatusChip status="PENDING" text="검토대기" />
</div>
<div class="flex items-center gap-2">
<span class="text-xs font-bold text-slate-700">11. ReturnChip:</span>
<ReturnChip :value="12.4" />
<ReturnChip :value="-3.8" />
</div>
<div class="flex items-center gap-2">
<span class="text-xs font-bold text-slate-700">12. TickerBadge:</span>
<TickerBadge ticker="005930" name="삼성전자" />
</div>
</div> </div>
</div> </div>
<!-- Section 0.6: Modals --> <!-- 4. Modals & Dialogs -->
<div class="bg-white p-5 rounded-lg border border-slate-300 shadow-sm flex flex-col gap-3"> <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"> <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-rose-600 text-white font-mono text-xs font-bold">Modals</span> <span class="px-2 py-0.5 rounded bg-rose-600 text-white font-mono text-xs font-bold">4. Modals</span>
<span>0.6 모달 다이얼로그 모음 (QuantFormModal / QuantLookupModal / QuantDeleteModal)</span> <span>13. QuantFormModal / 14. QuantLookupModal / 15. QuantDeleteModal</span>
</h3> </h3>
<div class="flex gap-3"> <div class="flex gap-3">
<button type="button" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-bold rounded shadow-xs" @click="showFormModal = true"> <button type="button" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-bold rounded shadow-xs" @click="showFormModal = true">
QuantFormModal (등록/수정 팝업) 열기 13. QuantFormModal (등록/수정 팝업)
</button> </button>
<button type="button" class="px-3 py-1.5 bg-slate-800 hover:bg-slate-900 text-amber-300 text-xs font-bold rounded shadow-xs" @click="showLookupModal = true"> <button type="button" class="px-3 py-1.5 bg-slate-800 hover:bg-slate-900 text-amber-300 text-xs font-bold rounded shadow-xs" @click="showLookupModal = true">
QuantLookupModal (F2 코드 팝업) 열기 14. QuantLookupModal (F2 Lookup 팝업)
</button> </button>
<button type="button" class="px-3 py-1.5 bg-rose-600 hover:bg-rose-700 text-white text-xs font-bold rounded shadow-xs" @click="showDeleteModal = true"> <button type="button" class="px-3 py-1.5 bg-rose-600 hover:bg-rose-700 text-white text-xs font-bold rounded shadow-xs" @click="showDeleteModal = true">
QuantDeleteModal (안전 삭제 모달) 열기 15. QuantDeleteModal (안전 삭제 모달)
</button> </button>
</div> </div>
<QuantFormModal :isOpen="showFormModal" title="주문 마스터 등록" @close="showFormModal = false" @save="showFormModal = false"> <QuantFormModal :isOpen="showFormModal" title="주문 마스터 등록" @close="showFormModal = false" @save="showFormModal = false">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<QuantInput label="주문번호" v-model="typedString" /> <QuantInput label="주문번호" v-model="typedString" />
<QuantDatePicker label="주문일자" v-model="typedDate" />
</div> </div>
</QuantFormModal> </QuantFormModal>
@@ -163,53 +145,75 @@
<QuantDeleteModal :isOpen="showDeleteModal" targetName="ORD-20260725-01 전표" @close="showDeleteModal = false" @confirm="showDeleteModal = false" /> <QuantDeleteModal :isOpen="showDeleteModal" targetName="ORD-20260725-01 전표" @close="showDeleteModal = false" @confirm="showDeleteModal = false" />
</div> </div>
<!-- Section 0.7: Base Inputs --> <!-- 5. Form Components & Autocomplete & ComboBox -->
<div class="bg-white p-5 rounded-lg border border-slate-300 shadow-sm flex flex-col gap-3"> <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"> <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">Base Inputs</span> <span class="px-2 py-0.5 rounded bg-emerald-700 text-white font-mono text-xs font-bold">5. Form Components</span>
<span>0.7 기본 폼 엘리먼트 (QuantInput / QuantCheckBox / QuantRadio / QuantTextArea / QuantLabel)</span> <span>16. QuantCrudForm / 17. QuantAutoComplete / 18. QuantComboBox / 19. QuantInput / 20. QuantDatePicker / 21. QuantTextArea</span>
</h3> </h3>
<!-- 16. QuantCrudForm -->
<div class="p-3 bg-slate-50 rounded border">
<span class="text-xs font-bold text-slate-800 mb-1.5 block">16. QuantCrudForm (CRUD 표준 폼 레이아웃)</span>
<QuantCrudForm title="주문 수기 생성 폼" :fields="showcaseCrudFields" v-model="crudFormModel" />
</div>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="p-3 bg-slate-50 rounded border border-slate-200 flex flex-col gap-1"> <!-- 17. QuantAutoComplete -->
<QuantLabel text="QuantLabel & QuantInput" required /> <div class="p-3 bg-slate-50 rounded border flex flex-col gap-1">
<QuantInput v-model="baseInputVal" placeholder="기본 인풋" /> <span class="text-xs font-bold text-slate-800">17. QuantAutoComplete</span>
<QuantAutoComplete v-model="autoCompleteVal" :suggestions="['삼성전자(주)', 'SK하이닉스(주)']" placeholder="실시간 검색" />
</div> </div>
<div class="p-3 bg-slate-50 rounded border border-slate-200 flex flex-col gap-2">
<QuantLabel text="QuantCheckBox & QuantRadio" /> <!-- 18. QuantComboBox -->
<QuantCheckBox v-model="checkBoxChecked" label="자동 승인 처리" /> <div class="p-3 bg-slate-50 rounded border flex flex-col gap-1">
<QuantRadio v-model="radioSelected" value="OPT1" label="일반 출하" /> <span class="text-xs font-bold text-slate-800">18. QuantComboBox</span>
<QuantRadio v-model="radioSelected" value="OPT2" label="긴급 출하" /> <QuantComboBox v-model="comboBoxVal" :options="['선급금', '외상매출금']" placeholder="선택" />
</div> </div>
<div class="p-3 bg-slate-50 rounded border border-slate-200 flex flex-col gap-1">
<QuantLabel text="QuantDatePicker" /> <!-- 19. QuantInput & QuantLabel -->
<div class="p-3 bg-slate-50 rounded border flex flex-col gap-1">
<QuantLabel text="19. QuantInput & Label" required />
<QuantInput v-model="baseInputVal" placeholder="기본 입력" />
</div>
<!-- 20. QuantDatePicker -->
<div class="p-3 bg-slate-50 rounded border flex flex-col gap-1">
<QuantLabel text="20. QuantDatePicker" />
<QuantDatePicker v-model="typedDate" /> <QuantDatePicker v-model="typedDate" />
</div> </div>
<div class="p-3 bg-slate-50 rounded border border-slate-200 flex flex-col gap-1"> </div>
<QuantLabel text="QuantTextArea" />
<QuantTextArea v-model="textAreaVal" placeholder="특이사항 적요 메모" /> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- 21. QuantTextArea -->
<div class="p-3 bg-slate-50 rounded border flex flex-col gap-1">
<QuantLabel text="21. QuantTextArea" />
<QuantTextArea v-model="textAreaVal" placeholder="적요 메모" />
</div>
<!-- Checkbox & Radio -->
<div class="p-3 bg-slate-50 rounded border flex flex-col gap-2">
<QuantLabel text="QuantCheckBox & QuantRadio" />
<div class="flex gap-4">
<QuantCheckBox v-model="checkBoxChecked" label="자동 승인 처리" />
<QuantRadio v-model="radioSelected" value="OPT1" label="일반 출하" />
<QuantRadio v-model="radioSelected" value="OPT2" label="긴급 출하" />
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Layer 1 ~ 4 Input Components --> <!-- 6. 4-Layer Input Components (14종) -->
<div class="bg-white p-4 rounded-lg border border-slate-300 shadow-sm flex flex-col gap-3"> <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"> <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-4</span> <span class="px-2 py-0.5 rounded bg-slate-800 text-amber-300 font-mono text-xs">6. 4-Layer Fields</span>
<span>4계층 입력 컴포넌트 (Primitives / Typed / Domain / Composite 14종)</span> <span>4계층 입력 컴포넌트 (Primitives / Fields / Domain Fields / Business Composites)</span>
</h3> </h3>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="p-3 bg-slate-50 rounded border border-slate-200"> <div class="p-3 bg-slate-50 rounded border"><StringField label="StringField" v-model="typedString" required /></div>
<StringField label="StringField" v-model="typedString" required /> <div class="p-3 bg-slate-50 rounded border"><NumberField label="NumberField" v-model="typedNumber" required /></div>
</div> <div class="p-3 bg-slate-50 rounded border"><QuantityField label="QuantityField" v-model:amount="domainQty" v-model:unitCode="domainUnit" required /></div>
<div class="p-3 bg-slate-50 rounded border border-slate-200"> <div class="p-3 bg-slate-50 rounded border"><MoneyField label="MoneyField" v-model:amount="domainMoney" v-model:currencyCode="domainCurrency" required /></div>
<NumberField label="NumberField" v-model="typedNumber" required />
</div>
<div class="p-3 bg-slate-50 rounded border border-slate-200">
<QuantityField label="QuantityField" v-model:amount="domainQty" v-model:unitCode="domainUnit" required />
</div>
<div class="p-3 bg-slate-50 rounded border border-slate-200">
<MoneyField label="MoneyField" v-model:amount="domainMoney" v-model:currencyCode="domainCurrency" required />
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -234,10 +238,13 @@ import QuantStatusChip from '../components/QuantStatusChip.vue';
import QuantTabPanel from '../components/QuantTabPanel.vue'; import QuantTabPanel from '../components/QuantTabPanel.vue';
import QuantSplitter from '../components/QuantSplitter.vue'; import QuantSplitter from '../components/QuantSplitter.vue';
// Modals & Base Inputs // Modals & Base Inputs & Forms
import QuantFormModal from '../components/QuantFormModal.vue'; import QuantFormModal from '../components/QuantFormModal.vue';
import QuantLookupModal from '../components/QuantLookupModal.vue'; import QuantLookupModal from '../components/QuantLookupModal.vue';
import QuantDeleteModal from '../components/QuantDeleteModal.vue'; import QuantDeleteModal from '../components/QuantDeleteModal.vue';
import QuantCrudForm from '../components/QuantCrudForm.vue';
import QuantAutoComplete from '../components/QuantAutoComplete.vue';
import QuantComboBox from '../components/QuantComboBox.vue';
import QuantInput from '../components/QuantInput.vue'; import QuantInput from '../components/QuantInput.vue';
import QuantLabel from '../components/QuantLabel.vue'; import QuantLabel from '../components/QuantLabel.vue';
import QuantCheckBox from '../components/QuantCheckBox.vue'; import QuantCheckBox from '../components/QuantCheckBox.vue';
@@ -253,6 +260,9 @@ import MoneyField from '../components/domain-fields/MoneyField.vue';
const showcaseSearch = ref(''); const showcaseSearch = ref('');
const showcaseStatus = ref('전체'); const showcaseStatus = ref('전체');
const autoCompleteVal = ref('');
const comboBoxVal = ref('');
const showFormModal = ref(false); const showFormModal = ref(false);
const showLookupModal = ref(false); const showLookupModal = ref(false);
const showDeleteModal = ref(false); const showDeleteModal = ref(false);
@@ -271,6 +281,18 @@ const domainUnit = ref('EA');
const domainMoney = ref('2500000'); const domainMoney = ref('2500000');
const domainCurrency = ref('KRW'); const domainCurrency = ref('KRW');
const crudFormModel = ref({
orderNo: 'ORD-20260726-001',
customerName: '삼성전자(주)',
orderDate: '2026-07-26'
});
const showcaseCrudFields = ref([
{ key: 'orderNo', label: '주문번호', type: 'text' as const, required: true },
{ key: 'customerName', label: '거래처명', type: 'text' as const, required: true },
{ key: 'orderDate', label: '주문일자', type: 'date' as const }
]);
const masterGridHeaders = ref([ const masterGridHeaders = ref([
{ key: 'orderNo', label: '주문번호', width: '130px' }, { key: 'orderNo', label: '주문번호', width: '130px' },
{ key: 'customerName', label: '거래처명' }, { key: 'customerName', label: '거래처명' },
@@ -296,8 +318,4 @@ const showcaseAuditLogs = ref([
{ timestamp: '2026-07-26 10:15:30', user: 'admin', action: '주문생성', fieldName: 'orderNo', oldValue: '-', newValue: 'ORD-20260725-01' }, { timestamp: '2026-07-26 10:15:30', user: 'admin', action: '주문생성', fieldName: 'orderNo', oldValue: '-', newValue: 'ORD-20260725-01' },
{ timestamp: '2026-07-26 10:18:45', user: 'checker', action: '승인완료', fieldName: 'status', oldValue: 'PENDING', newValue: 'APPROVED' } { timestamp: '2026-07-26 10:18:45', user: 'checker', action: '승인완료', fieldName: 'status', oldValue: 'PENDING', newValue: 'APPROVED' }
]); ]);
const onShowcaseSearch = () => {
console.log('Action Triggered');
};
</script> </script>