create-m2m-bo-template-vue 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-m2m-bo-template-vue",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Scaffolding CLI for the M2M back-office vue template.",
   "type": "module",
   "bin": {

package/template/src/pages/b2c/products/B2cProductCreatePage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, h, onMounted, onUnmounted, reactive, ref, watch, type VNodeChild } from 'vue';
+import { computed, h, onUnmounted, reactive, ref, watch, type VNodeChild } from 'vue';
 import { useRouter } from 'vue-router';
 import { CheckCircle2, ChevronDown, ChevronUp, Circle, CircleAlert, ImagePlus, Plus, X, XCircle } from 'lucide-vue-next';
 import styles from './B2cProductCreatePage.module.css';
@@ -379,7 +379,7 @@ function onFileInputChange(event: Event) {
                     size="sm"
                     :class="styles.fieldAside"
                     :model-value="form.autoCode"
-                    @update:model-value="(checked: boolean) => { form.autoCode = checked; if (checked) form.code = createInitialForm().code; }"
+                    @update:model-value="(checked: boolean | string[]) => { const c = checked as boolean; form.autoCode = c; if (c) form.code = createInitialForm().code; }"
                   >
                     자동 생성
                   </Checkbox>
@@ -391,7 +391,7 @@ function onFileInputChange(event: Event) {
                     placeholder="브랜드명 검색"
                     :options="BRAND_OPTIONS"
                     :model-value="form.brand"
-                    @update:model-value="(v: string) => update('brand', v)"
+                    @update:model-value="(v: string | string[]) => update('brand', v as string)"
                   />
                   <span :class="styles.helperText">등록된 브랜드만 선택할 수 있습니다.</span>
                 </label>
@@ -405,7 +405,7 @@ function onFileInputChange(event: Event) {
                     placeholder="대분류 선택"
                     :options="B2C_CATEGORIES.map((n) => ({ value: n.id, label: n.name }))"
                     :model-value="form.cat1"
-                    @update:model-value="(v: string) => { form.cat1 = v; form.cat2 = ''; form.cat3 = ''; }"
+                    @update:model-value="(v: string | string[]) => { form.cat1 = v as string; form.cat2 = ''; form.cat3 = ''; }"
                   />
                   <Select
                     aria-label="중분류"
@@ -413,7 +413,7 @@ function onFileInputChange(event: Event) {
                     :disabled="level2Options.length === 0"
                     :options="level2Options.map((n) => ({ value: n.id, label: n.name }))"
                     :model-value="form.cat2"
-                    @update:model-value="(v: string) => { form.cat2 = v; form.cat3 = ''; }"
+                    @update:model-value="(v: string | string[]) => { form.cat2 = v as string; form.cat3 = ''; }"
                   />
                   <Select
                     aria-label="소분류"
@@ -421,7 +421,7 @@ function onFileInputChange(event: Event) {
                     :disabled="level3Options.length === 0"
                     :options="level3Options.map((n) => ({ value: n.id, label: n.name }))"
                     :model-value="form.cat3"
-                    @update:model-value="(v: string) => update('cat3', v)"
+                    @update:model-value="(v: string | string[]) => update('cat3', v as string)"
                   />
                 </div>
                 <span v-if="path.length === 3" :class="styles.helperText">{{ path.join(' > ') }}</span>
@@ -525,7 +525,7 @@ function onFileInputChange(event: Event) {
                     :items="form.extraImages"
                     @change="(next: typeof form.extraImages) => update('extraImages', next)"
                   >
-                    <template #item="{ item: image, index }">
+                    <template #default="{ item: image, index }">
                       <div :class="styles.imageTile">
                         <div :class="styles.tileTop">
                           <span :class="styles.tileNum">{{ index + 1 }}</span>
@@ -663,7 +663,7 @@ function onFileInputChange(event: Event) {
 
               <div :class="styles.stockFooter">
                 <span :class="styles.muted">재고 수량은 [상품 관리 &gt; 재고 관리]에서 관리합니다. 등록 편의를 위한 초기 재고만 여기서 입력할 수 있습니다.</span>
-                <Checkbox size="sm" :model-value="form.withStock" @update:model-value="(v: boolean) => update('withStock', v)">초기 재고 함께 입력</Checkbox>
+                <Checkbox size="sm" :model-value="form.withStock" @update:model-value="(v: boolean | string[]) => update('withStock', v as boolean)">초기 재고 함께 입력</Checkbox>
               </div>
             </div>
           </Card>
@@ -716,7 +716,7 @@ function onFileInputChange(event: Event) {
             <div :class="styles.stack">
               <label :class="styles.fieldLabel">
                 배송 정책 <span class="req">*</span>
-                <Select :options="SHIPPING_POLICIES.map(({ value, label }) => ({ value, label }))" :model-value="form.shippingPolicy" placeholder="배송 정책 선택" @update:model-value="(v: string) => update('shippingPolicy', v)" />
+                <Select :options="SHIPPING_POLICIES.map(({ value, label }) => ({ value, label }))" :model-value="form.shippingPolicy" placeholder="배송 정책 선택" @update:model-value="(v: string | string[]) => update('shippingPolicy', v as string)" />
               </label>
               <Notice v-if="policy" type="neutral" :description="policy.summary" action-text="정책 관리로 이동" @action="router.push('/delivery-policy/base-fee')" />
               <div :class="styles.inlineFields">

package/template/src/pages/c2c/sales/SalesPerformancePage.vue

@@ -100,7 +100,7 @@ function downloadPerformance() {
         <div :class="styles.donutArea">
           <StatisticsDonutChart
             :data="categoryTotals.map((item) => ({ label: item.category, value: item.value }))"
-            :center-value="SALE_PRODUCTS.length"
+            :center-value="`${SALE_PRODUCTS.length}`"
             center-label="상품"
             :max-legend-items="4"
             aria-label="카테고리 거래 구성"

package/template/src/pages/components/ComponentsPage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { Plus, CheckCircle, ArrowUpRight } from 'lucide-vue-next';
+import { Plus, CheckCircle } from 'lucide-vue-next';
 import { Button } from 'm2m-uiux-vue/Button';
 import { ButtonGroup } from 'm2m-uiux-vue/ButtonGroup';
 import { Segmented } from 'm2m-uiux-vue/Segmented';
@@ -12,7 +12,7 @@ import { RadioGroup } from 'm2m-uiux-vue/RadioGroup';
 import { Switch } from 'm2m-uiux-vue/Switch';
 import { Textarea } from 'm2m-uiux-vue/Textarea';
 import { Divider } from 'm2m-uiux-vue/Divider';
-import { Badge } from 'm2m-uiux-vue/Badge';
+import { Badge, BADGE_TYPE } from 'm2m-uiux-vue/Badge';
 import { Header as M2MHeader } from 'm2m-uiux-vue/Header';
 import { Form } from 'm2m-uiux-vue/Form';
 import { Table, type TableColumn } from 'm2m-uiux-vue/Table';
@@ -111,11 +111,11 @@ const switchOn = ref(true);
 
 const tableSel = ref<Array<string | number>>([]);
 const tabValue = ref('all');
-const segmentTab = ref('b2c');
+const segmentTab = ref('B2C');
 const stepIndex = ref(1);
 const progress = ref(62);
 
-const dateSingle = ref<string | undefined>(undefined);
+const dateSingle = ref<Date | null>(null);
 const timeValue = ref('');
 const legacyDate = ref('');
 
@@ -123,10 +123,10 @@ const gridSearch = ref('');
 const chartHeight = ref(220);
 const previewNavOpen = ref(true);
 
-const tableColumns: TableColumn<DemoRow>[] = [
-  { key: 'name', title: '이름', dataIndex: 'name' },
-  { key: 'status', title: '상태', dataIndex: 'status' },
-  { key: 'amount', title: '금액', dataIndex: 'amount', align: 'right' },
+const tableColumns: TableColumn<Record<string,any>>[] = [
+  { key: 'name', label: '이름' },
+  { key: 'status', label: '상태' },
+  { key: 'amount', label: '금액', align: 'right' },
 ];
 
 const gridColumns: GridColumn[] = [{ label: '이름' }, { label: '상태' }, { label: '금액', align: 'right' }];
@@ -214,7 +214,7 @@ const presetItems = [
               <div :class="[styles.demoBody, styles.col]">
                 <StatGrid :columns="4">
                   <StatCard label="당월 총 매출" value="₩128,450,000" value-color="#18181b" note="+14.2% 전월 대비 상승" tone="up">
-                    <template #badge><Badge type="success" size="sm">성장</Badge></template>
+                    <template #badge><Badge :type="BADGE_TYPE['SUCCESS']" size="sm">성장</Badge></template>
                   </StatCard>
                   <StatCard label="신규 반품 요청" value="23건" value-color="#dc2626" note="-3건 전주 대비 감소" tone="down" dot="#ef4444" />
                   <StatCard label="미처리 정산 건" value="12건" note="마감 D-2 예정" tone="warn" dot="#f59e0b" />
@@ -503,12 +503,11 @@ const presetItems = [
             <div :class="styles.demo">
               <div :class="styles.demoHead"><span :class="styles.demoName">Badge</span><span :class="styles.demoDesc">운영 화면에서 사용하는 상태 색상</span></div>
               <div :class="styles.demoBody">
-                <Badge type="success">정상</Badge>
-                <Badge type="info">진행중</Badge>
-                <Badge type="primary">예약</Badge>
-                <Badge type="warning">주의</Badge>
-                <Badge type="error">실패</Badge>
-                <Badge type="neutral">중지</Badge>
+                <Badge :type="BADGE_TYPE['SUCCESS']">정상</Badge>
+                <Badge :type="BADGE_TYPE['INFO']">진행중</Badge>
+                <Badge :type="BADGE_TYPE['PRIMARY']">예약</Badge>
+                <Badge :type="BADGE_TYPE['WARNING']">주의</Badge>
+                <Badge :type="BADGE_TYPE['ERROR']">실패</Badge>
               </div>
             </div>
             <div :class="styles.demo">
@@ -520,7 +519,7 @@ const presetItems = [
             <div :class="styles.demo">
               <div :class="styles.demoHead"><span :class="styles.demoName">Form / FormField</span></div>
               <div :class="[styles.demoBody, styles.col]">
-                <Form layout="2column">
+                <Form>
                   <Form.Field label="담당자" required>
                     <Input placeholder="이름" />
                   </Form.Field>
@@ -611,15 +610,14 @@ const presetItems = [
               </div>
               <div :class="[styles.demoBody, styles.col]">
                 <div style="display: flex; flex-direction: column; gap: 14px">
-                  <div style="display: flex; flex-direction: column; gap: 6px">
+                  <div style="display: inline-flex; flex-direction: column; gap: 6px; width: min-content;">
                     <span style="font-size: 0.71875rem; font-weight: 700; color: var(--common-text-muted)">세그먼트형 (type="segmented") — 유형 전환 / 토글 탭</span>
-                    <Tabs
-                      type="segmented"
+                    <Segmented
                       v-model="segmentTab"
-                      :items="[
-                        { key: 'b2c', label: 'B2C' },
-                        { key: 'c2c', label: 'C2C' },
-                        { key: 'b2b', label: 'B2B' },
+                      :options="[
+                        'B2C',
+                        'C2C',
+                        'B2B',
                       ]"
                     />
                   </div>
@@ -732,7 +730,7 @@ const presetItems = [
                     { label: '도서/음반', value: 310000 },
                     { label: '기타 잡화', value: 150000 },
                   ]"
-                  :center-value="186"
+                  :center-value="'186'"
                   center-label="상품"
                   :max-legend-items="4"
                   aria-label="카테고리 구성비 차트 예제"

package/template/src/pages/content/CategoriesPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onUnmounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import sh from './contentShared.module.css';
 import styles from './CategoriesPage.module.css';

package/template/src/pages/content/ContentListPage.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, reactive, ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { PageSizeSelect } from '../../components/common';
-import ExcelDownloadButton from '../../components/common/ExcelDownloadButton.vue';
 import DatePicker from '../../components/forms/DatePicker.vue';
 import { SearchField } from '../../components/SearchField';
 import { ChevronDown, ChevronUp, RotateCcw, SlidersHorizontal } from 'lucide-vue-next';
@@ -107,7 +106,7 @@ const filtered = computed(() => {
   const query = q.value.trim().toLowerCase();
   let list = modeData.value.filter((r) => {
     if (query) {
-      const hay = field === '콘텐츠 ID' ? r.id : field === '제목' ? r.title : field === '작성자' ? r.author : r.id + r.title + r.author;
+      const hay = r.id + r.title + r.author;
       if (!hay.toLowerCase().includes(query)) return false;
     }
     if (status.value !== '전체' && r.status !== status.value) return false;

package/template/src/pages/content/ExposurePage.vue

@@ -116,7 +116,7 @@ function runNavDialog(b: NavDialogButton) {
   if (!navDialog.value) return;
   if (b.act === 'close') { navDialog.value = null; return; }
   if (b.act === 'gonosave') { changes.value = 0; area.value = navDialog.value.toId; selRowId.value = null; rowDraft.value = null; navDialog.value = null; }
-  if (b.act === 'gosave') { changes.value = 0; area.value = navDialog.value.toId; selRowId.value = null; rowDraft.value = null; navDialog.value = null; toast.value = '노출 설정이 저장되었습니다.'; }
+  if (b.act === 'gosave') { changes.value = 0; area.value = navDialog.value?.toId as string; selRowId.value = null; rowDraft.value = null; navDialog.value = null; toast.value = '노출 설정이 저장되었습니다.'; }
 }
 
 function openRow(entry: ExposureEntry) {
@@ -443,7 +443,7 @@ function toggleAreaOpen(id: string) {
             <div :class="sh.metaRow">
               <div :class="sh.metaCell">
                 <div :class="sh.metaCellLabel">현재 순서</div>
-                <div :class="sh.metaCellValue">{{ curList.findIndex((x) => x.id === selEntry.id) + 1 }}</div>
+                <div :class="sh.metaCellValue">{{ curList.findIndex((x) => x.id === selEntry?.id) + 1 }}</div>
               </div>
               <div :class="sh.metaCell">
                 <div :class="sh.metaCellLabel">등록 관리자</div>

package/template/src/pages/content/ReviewPage.vue

@@ -64,7 +64,7 @@ const list = computed(() => {
   let out = modeItems.value.filter((it) => {
     if (tab.value !== '전체' && it.status !== tab.value) return false;
     if (query) {
-      const hay = field === '콘텐츠 ID' ? it.ctid : field === '제목' ? it.title : field === '요청자' ? it.requester : it.ctid + it.title + it.requester;
+      const hay = it.ctid + it.title + it.requester;
       if (!hay.toLowerCase().includes(query)) return false;
     }
     if (reqTypeF.value !== '전체' && it.reqType !== reqTypeF.value) return false;

package/template/src/pages/content/TagsPage.vue

@@ -97,7 +97,7 @@ const list = computed(() => {
   let out = items.value.filter((it) => {
     if (it.scope !== scope.value) return false;
     if (query) {
-      const hay = field === '태그명' ? it.name : field === '태그 코드' ? it.code : it.name + it.code;
+      const hay = it.name + it.code;
       if (!hay.toLowerCase().includes(query)) return false;
     }
     if (useF.value !== '전체' && (useF.value === '사용' ? !it.use : it.use)) return false;

package/template/src/pages/coupons/CouponPolicyPage.vue

@@ -294,9 +294,9 @@ const digest = computed<[string, string][]>(() => [
             </div>
 
             <div :class="styles.checkGrid">
-              <Checkbox size="md" label="동일 쿠폰 여러 장" :model-value="p.allowSameCouponMultiple" @update:model-value="(checked: boolean) => set('allowSameCouponMultiple', checked)" />
-              <Checkbox size="md" label="프로모션과 중복" :model-value="p.promotionStackDefault" @update:model-value="(checked: boolean) => set('promotionStackDefault', checked)" />
-              <Checkbox size="md" label="포인트와 중복" :model-value="p.pointStackAllowed" @update:model-value="(checked: boolean) => set('pointStackAllowed', checked)" />
+              <Checkbox size="md" label="동일 쿠폰 여러 장" :model-value="p.allowSameCouponMultiple" @update:model-value="(checked) => set('allowSameCouponMultiple', checked as boolean)" />
+              <Checkbox size="md" label="프로모션과 중복" :model-value="p.promotionStackDefault" @update:model-value="(checked) => set('promotionStackDefault', checked as boolean)" />
+              <Checkbox size="md" label="포인트와 중복" :model-value="p.pointStackAllowed" @update:model-value="(checked) => set('pointStackAllowed', checked as boolean)" />
             </div>
           </div>
         </div>
@@ -322,7 +322,7 @@ const digest = computed<[string, string][]>(() => [
               <div>
                 <div :class="styles.fieldLabel">포함 항목</div>
                 <div :class="styles.checkRow">
-                  <Checkbox size="md" label="배송비 포함" :model-value="p.includeShippingInMin" @update:model-value="(checked: boolean) => set('includeShippingInMin', checked)" />
+                  <Checkbox size="md" label="배송비 포함" :model-value="p.includeShippingInMin" @update:model-value="(checked) => set('includeShippingInMin', checked as boolean)" />
                 </div>
               </div>
             </div>
@@ -348,23 +348,23 @@ const digest = computed<[string, string][]>(() => [
                   </div>
                   <div :class="styles.tableRow">
                     <span :class="styles.tableRowLabel">전체 취소</span>
-                    <span :class="styles.tableCellCenter"><Checkbox size="sm" aria-label="전체 취소 시 쿠폰 복원" :model-value="p.fullCancelRestore" @update:model-value="(checked: boolean) => set('fullCancelRestore', checked)" /></span>
+                    <span :class="styles.tableCellCenter"><Checkbox size="sm" aria-label="전체 취소 시 쿠폰 복원" :model-value="p.fullCancelRestore" @update:model-value="(checked) => set('fullCancelRestore', checked as boolean)" /></span>
                     <span :class="styles.tableCellCenter"><Checkbox size="sm" aria-label="전체 취소 시 잔여 재계산" :model-value="false" disabled /></span>
                   </div>
                   <div :class="styles.tableRow">
                     <span :class="styles.tableRowLabel">전체 반품</span>
-                    <span :class="styles.tableCellCenter"><Checkbox size="sm" aria-label="전체 반품 시 쿠폰 복원" :model-value="p.fullRefundRestore" @update:model-value="(checked: boolean) => set('fullRefundRestore', checked)" /></span>
+                    <span :class="styles.tableCellCenter"><Checkbox size="sm" aria-label="전체 반품 시 쿠폰 복원" :model-value="p.fullRefundRestore" @update:model-value="(checked) => set('fullRefundRestore', checked as boolean)" /></span>
                     <span :class="styles.tableCellCenter"><Checkbox size="sm" aria-label="전체 반품 시 잔여 재계산" :model-value="false" disabled /></span>
                   </div>
                   <div :class="styles.tableRow">
                     <span :class="styles.tableRowLabel">부분 취소</span>
                     <span :class="styles.tableCellCenter"><Checkbox size="sm" aria-label="부분 취소 시 쿠폰 복원" :model-value="false" disabled /></span>
-                    <span :class="styles.tableCellCenter"><Checkbox size="sm" aria-label="부분 취소 시 잔여 재계산" :model-value="p.partialCancelRecalculate" @update:model-value="(checked: boolean) => set('partialCancelRecalculate', checked)" /></span>
+                    <span :class="styles.tableCellCenter"><Checkbox size="sm" aria-label="부분 취소 시 잔여 재계산" :model-value="p.partialCancelRecalculate" @update:model-value="(checked) => set('partialCancelRecalculate', checked as boolean)" /></span>
                   </div>
                   <div :class="styles.tableRow">
                     <span :class="styles.tableRowLabel">부분 반품</span>
                     <span :class="styles.tableCellCenter"><Checkbox size="sm" aria-label="부분 반품 시 쿠폰 복원" :model-value="false" disabled /></span>
-                    <span :class="styles.tableCellCenter"><Checkbox size="sm" aria-label="부분 반품 시 잔여 재계산" :model-value="p.partialRefundRecalculate" @update:model-value="(checked: boolean) => set('partialRefundRecalculate', checked)" /></span>
+                    <span :class="styles.tableCellCenter"><Checkbox size="sm" aria-label="부분 반품 시 잔여 재계산" :model-value="p.partialRefundRecalculate" @update:model-value="(checked) => set('partialRefundRecalculate', checked as boolean)" /></span>
                   </div>
                 </div>
               </div>
@@ -410,7 +410,7 @@ const digest = computed<[string, string][]>(() => [
               <div>
                 <div :class="styles.fieldLabel">총 한도 초과 시</div>
                 <div :class="styles.checkRow">
-                  <Checkbox size="md" label="발급 차단" :model-value="p.blockOnLimitExceeded" @update:model-value="(checked: boolean) => set('blockOnLimitExceeded', checked)" />
+                  <Checkbox size="md" label="발급 차단" :model-value="p.blockOnLimitExceeded" @update:model-value="(checked) => set('blockOnLimitExceeded', checked as boolean)" />
                 </div>
               </div>
             </div>

package/template/src/pages/cs/AdminMemoDrawer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { DatePicker } from '../../components/forms';
+import { useRouter } from 'vue-router';
 import { computed, ref } from 'vue';
 import drawer from '../ops/opsDrawerShared.module.css';
 import styles from './AdminMemosPage.module.css';
@@ -7,7 +8,7 @@ import { useOutsideClose } from '../../lib/useOutsideClose';
 import { MEMO_ADMINS, MEMO_TARGET_TYPES, MEMO_TYPES, followUpState, type AdminMemoEntry, type MemoTargetType, type MemoType, type PinScope } from './adminMemosData';
 
 type Tab = 'memo' | 'context' | 'followup' | 'version' | 'history';
-
+const router = useRouter()
 const props = defineProps<{ initial: AdminMemoEntry; isNew: boolean; startEditing?: boolean }>();
 const emit = defineEmits<{
   close: [];
@@ -148,8 +149,8 @@ function handleFollowUpDateChange(e: Event) {
         </div>
         <section :class="styles.formSection">
           <h3>연결 업무</h3>
-          <div v-if="draft.relatedInquiryId" :class="styles.contextRow"><span>1:1 문의</span><strong>{{ draft.relatedInquiryId }}</strong><em>연결됨</em><button type="button" @click="() => (window.location.href = '/cs/inquiries')">보기 ↗</button></div>
-          <div v-if="draft.relatedConsultationId" :class="styles.contextRow"><span>상담</span><strong>{{ draft.relatedConsultationId }}</strong><em>연결됨</em><button type="button" @click="() => (window.location.href = '/cs/consultations')">보기 ↗</button></div>
+          <div v-if="draft.relatedInquiryId" :class="styles.contextRow"><span>1:1 문의</span><strong>{{ draft.relatedInquiryId }}</strong><em>연결됨</em><button type="button" @click="() => router.push('/cs/inquiries')">보기 ↗</button></div>
+          <div v-if="draft.relatedConsultationId" :class="styles.contextRow"><span>상담</span><strong>{{ draft.relatedConsultationId }}</strong><em>연결됨</em><button type="button" @click="() => router.push('/cs/consultations')">보기 ↗</button></div>
           <div v-if="draft.relatedOrderId" :class="styles.contextRow"><span>주문</span><strong>{{ draft.relatedOrderId }}</strong><em>연결됨</em><button type="button">보기 ↗</button></div>
           <div v-if="!draft.relatedInquiryId && !draft.relatedConsultationId && !draft.relatedOrderId" :class="drawer.emptyInline">추가로 연결된 업무가 없습니다.</div>
         </section>

package/template/src/pages/cs/ConsultationDetailDrawer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
 import drawer from '../ops/opsDrawerShared.module.css';
 import styles from './ConsultationsPage.module.css';
 import { useOutsideClose } from '../../lib/useOutsideClose';
@@ -7,6 +8,7 @@ import { durationLabel, type ConsultationEntry } from './consultationsData';
 
 type Tab = 'summary' | 'conversation' | 'related' | 'result' | 'memo' | 'history';
 
+const router = useRouter()
 const props = defineProps<{ item: ConsultationEntry }>();
 const emit = defineEmits<{
   close: [];
@@ -59,7 +61,7 @@ function styleKey(prefix: string, key: string) {
       </div>
       <div :class="drawer.actionRow">
         <button type="button" :class="drawer.actionLink">고객 보기 ↗</button>
-        <button v-if="item.inquiryId" type="button" :class="drawer.actionLink" @click="() => (window.location.href = '/cs/inquiries')">원 문의 보기 ↗</button>
+        <button v-if="item.inquiryId" type="button" :class="drawer.actionLink" @click="() => (router.push('/cs/inquiries'))">원 문의 보기 ↗</button>
         <button type="button" :class="drawer.actionLink" @click="emit('correct')">상담 기록 정정</button>
         <span :class="drawer.spacer" />
         <button type="button" :class="drawer.actionLink" @click="emit('newInquiry')">새 문의 등록</button>

package/template/src/pages/cs/ConsultationsPage.vue

@@ -225,6 +225,10 @@ function register() {
   toastBriefly('상담 내역을 등록했습니다.');
 }
 
+function goToInquiries() {
+  window.location.href = '/cs/inquiries';
+}
+
 function reopenInquiry() {
   if (!detail.value) return;
   const current = detail.value;
@@ -473,7 +477,7 @@ const rows = computed<GridRow[]>(() =>
       @close="detailId = null"
       @reopen="modal = 'reopen'"
       @correct="correctResult = detail!.result; modal = 'correct'"
-      @new-inquiry="() => (window.location.href = '/cs/inquiries')"
+      @new-inquiry="goToInquiries"
     />
 
     <div v-if="modal === 'register'" :class="shared.dialogOverlay" @mousedown="(e) => { if (e.target === e.currentTarget) modal = null; }">

package/template/src/pages/cs/CsHistoryDetailDrawer.vue

@@ -19,6 +19,10 @@ const adjacent = computed(() => findAdjacent(props.log, props.all));
 
 const asideRef = ref<HTMLElement | null>(null);
 useOutsideClose(asideRef, () => emit('close'));
+
+function goTo(path: string) {
+  window.location.href = path;
+}
 </script>
 
 <template>
@@ -37,8 +41,8 @@ useOutsideClose(asideRef, () => emit('close'));
         <button type="button" :class="drawer.closeBtn" @click="emit('close')">×</button>
       </div>
       <div v-if="log.relatedInquiryId || log.relatedConsultationId" :class="drawer.actionRow">
-        <button v-if="log.relatedInquiryId" type="button" :class="drawer.actionLink" @click="() => (window.location.href = '/cs/inquiries')">관련 문의 보기 ↗</button>
-        <button v-if="log.relatedConsultationId" type="button" :class="drawer.actionLink" @click="() => (window.location.href = '/cs/consultations')">관련 상담 보기 ↗</button>
+        <button v-if="log.relatedInquiryId" type="button" :class="drawer.actionLink" @click="goTo('/cs/inquiries')">관련 문의 보기 ↗</button>
+        <button v-if="log.relatedConsultationId" type="button" :class="drawer.actionLink" @click="goTo('/cs/consultations')">관련 상담 보기 ↗</button>
       </div>
     </div>
 

package/template/src/pages/cs/ProductInquiryDetailDrawer.vue

@@ -25,6 +25,10 @@ function notify(message: string) {
   showToast({ message, type: 'success' });
 }
 
+function goTo(path: string) {
+  window.location.href = path;
+}
+
 function update(patch: Partial<ProductInquiry>) {
   Object.assign(props.inquiry, patch);
   emit('change');
@@ -96,13 +100,13 @@ function toggleHidden() {
       <div :class="drawer.sectionTitleLoose">상품 정보</div>
       <div :class="drawer.linkedItem">
         <div><strong>{{ productName(inquiry.productCode) }}</strong><div :class="drawer.sub">{{ inquiry.productCode }}</div></div>
-        <button type="button" :class="drawer.actionLink" @click="() => (window.location.href = '/products')">상품 상세 보기</button>
+        <button type="button" :class="drawer.actionLink" @click="goTo('/products')">상품 상세 보기</button>
       </div>
 
       <div :class="drawer.sectionTitleLoose">작성자 정보</div>
       <div :class="drawer.linkedItem">
         <strong>{{ inquiry.member }}</strong>
-        <button type="button" :class="drawer.actionLink" @click="() => (window.location.href = '/members')">회원 상세 보기</button>
+        <button type="button" :class="drawer.actionLink" @click="goTo('/members')">회원 상세 보기</button>
       </div>
 
       <div :class="drawer.sectionTitleLoose">문의 내용</div>

package/template/src/pages/delivery/DeliveryListPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { Button } from 'm2m-uiux-vue/Button';
 import { ExcelDownloadButton, PageSizeSelect, showToast } from '../../components/common';
 import DataGrid from '../../components/DataGrid/DataGrid.vue';

package/template/src/pages/inventory/InventoryAlertsConfigPage.vue

@@ -16,6 +16,10 @@ function setTab(next: string) {
   router.replace({ query: { ...route.query, tab: next } });
 }
 
+function isTab(t: 'safety' | 'config' | 'history') {
+  return tab.value === t;
+}
+
 const lowStockAlert = ref(true);
 const soldOutAlert = ref(true);
 const imminentAlert = ref(true);
@@ -44,9 +48,9 @@ function toggleChannel(ch: string) {
     <template #header-tabs>
       <div :class="styles.viewToggleRow" style="margin-top: 12px; margin-bottom: 4px">
         <div :class="styles.viewToggle">
-          <button type="button" :class="[styles.viewToggleBtn, tab === 'safety' && styles.active]" @click="setTab('safety')">안전재고 기준</button>
-          <button type="button" :class="[styles.viewToggleBtn, tab === 'config' && styles.active]" @click="setTab('config')">알림 설정</button>
-          <button type="button" :class="[styles.viewToggleBtn, tab === 'history' && styles.active]" @click="setTab('history')">알림 내역</button>
+          <button type="button" :class="[styles.viewToggleBtn, isTab('safety') && styles.active]" @click="setTab('safety')">안전재고 기준</button>
+          <button type="button" :class="[styles.viewToggleBtn, isTab('config') && styles.active]" @click="setTab('config')">알림 설정</button>
+          <button type="button" :class="[styles.viewToggleBtn, isTab('history') && styles.active]" @click="setTab('history')">알림 내역</button>
         </div>
       </div>
     </template>
@@ -60,9 +64,9 @@ function toggleChannel(ch: string) {
     <template #header-tabs>
       <div :class="styles.viewToggleRow" style="margin-top: 12px; margin-bottom: 4px">
         <div :class="styles.viewToggle">
-          <button type="button" :class="[styles.viewToggleBtn, tab === 'safety' && styles.active]" @click="setTab('safety')">안전재고 기준</button>
-          <button type="button" :class="[styles.viewToggleBtn, tab === 'config' && styles.active]" @click="setTab('config')">알림 설정</button>
-          <button type="button" :class="[styles.viewToggleBtn, tab === 'history' && styles.active]" @click="setTab('history')">알림 내역</button>
+          <button type="button" :class="[styles.viewToggleBtn, isTab('safety') && styles.active]" @click="setTab('safety')">안전재고 기준</button>
+          <button type="button" :class="[styles.viewToggleBtn, isTab('config') && styles.active]" @click="setTab('config')">알림 설정</button>
+          <button type="button" :class="[styles.viewToggleBtn, isTab('history') && styles.active]" @click="setTab('history')">알림 내역</button>
         </div>
       </div>
     </template>
@@ -78,9 +82,9 @@ function toggleChannel(ch: string) {
       </div>
       <div :class="styles.viewToggleRow" style="margin-top: 12px; margin-bottom: 4px">
         <div :class="styles.viewToggle">
-          <button type="button" :class="[styles.viewToggleBtn, tab === 'safety' && styles.active]" @click="setTab('safety')">안전재고 기준</button>
-          <button type="button" :class="[styles.viewToggleBtn, tab === 'config' && styles.active]" @click="setTab('config')">알림 설정</button>
-          <button type="button" :class="[styles.viewToggleBtn, tab === 'history' && styles.active]" @click="setTab('history')">알림 내역</button>
+          <button type="button" :class="[styles.viewToggleBtn, isTab('safety') && styles.active]" @click="setTab('safety')">안전재고 기준</button>
+          <button type="button" :class="[styles.viewToggleBtn, isTab('config') && styles.active]" @click="setTab('config')">알림 설정</button>
+          <button type="button" :class="[styles.viewToggleBtn, isTab('history') && styles.active]" @click="setTab('history')">알림 내역</button>
         </div>
       </div>
       <div :class="styles.definitionStrip">

package/template/src/pages/inventory/StockMovementManagementPage.vue

@@ -13,6 +13,10 @@ const tab = computed(() => (route.query.tab === 'outbound' ? 'outbound' : 'inbou
 function setTab(next: 'inbound' | 'outbound') {
   router.replace({ query: { ...route.query, tab: next } });
 }
+
+function isTab(t: 'inbound' | 'outbound') {
+  return tab.value === t;
+}
 </script>
 
 <template>
@@ -20,8 +24,8 @@ function setTab(next: 'inbound' | 'outbound') {
     <template #header-tabs>
       <div :class="styles.viewToggleRow" style="margin-top: 12px; margin-bottom: 4px">
         <div :class="styles.viewToggle">
-          <button type="button" :class="[styles.viewToggleBtn, tab === 'inbound' && styles.active]" @click="setTab('inbound')">입고 관리</button>
-          <button type="button" :class="[styles.viewToggleBtn, tab === 'outbound' && styles.active]" @click="setTab('outbound')">출고 관리</button>
+          <button type="button" :class="[styles.viewToggleBtn, isTab('inbound') && styles.active]" @click="setTab('inbound')">입고 관리</button>
+          <button type="button" :class="[styles.viewToggleBtn, isTab('outbound') && styles.active]" @click="setTab('outbound')">출고 관리</button>
         </div>
       </div>
     </template>
@@ -30,8 +34,8 @@ function setTab(next: 'inbound' | 'outbound') {
     <template #header-tabs>
       <div :class="styles.viewToggleRow" style="margin-top: 12px; margin-bottom: 4px">
         <div :class="styles.viewToggle">
-          <button type="button" :class="[styles.viewToggleBtn, tab === 'inbound' && styles.active]" @click="setTab('inbound')">입고 관리</button>
-          <button type="button" :class="[styles.viewToggleBtn, tab === 'outbound' && styles.active]" @click="setTab('outbound')">출고 관리</button>
+          <button type="button" :class="[styles.viewToggleBtn, isTab('inbound') && styles.active]" @click="setTab('inbound')">입고 관리</button>
+          <button type="button" :class="[styles.viewToggleBtn, isTab('outbound') && styles.active]" @click="setTab('outbound')">출고 관리</button>
         </div>
       </div>
     </template>