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

package/package.json

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

package/template/src/components/DataGrid/CellView.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import { Badge } from 'm2m-uiux-vue/Badge';
 import styles from './DataGrid.module.css';
 import RowMenuView from './RowMenuView.vue';
 import type { Cell } from './types';
 
 defineProps<{ cell: Cell }>();
+
+const thumbFailed = ref(false);
 </script>
 
 <template>
@@ -85,7 +88,14 @@ defineProps<{ cell: Cell }>();
   </span>
 
   <div v-else-if="cell.kind === 'thumbTitle'" :class="styles.thumbTitle">
-    <div :class="styles.thumb" :style="{ background: `repeating-linear-gradient(135deg, ${cell.thumb} 0 6px, #fff 6px 12px)` }" />
+    <img
+      v-if="cell.imageSrc && !thumbFailed"
+      :class="[styles.thumb, styles.thumbImage]"
+      :src="cell.imageSrc"
+      alt=""
+      @error="thumbFailed = true"
+    />
+    <div v-else :class="styles.thumb" :style="{ background: `repeating-linear-gradient(135deg, ${cell.thumb} 0 6px, #fff 6px 12px)` }" aria-hidden="true" />
     <div style="min-width: 0">
       <button type="button" :class="styles.thumbTitleBtn" :style="{ color: cell.titleFg }" @click="cell.onClick?.()">{{ cell.title }}</button>
       <span :class="styles.thumbTitleId">#{{ cell.id }}</span>

package/template/src/components/DataGrid/DataGrid.module.css

@@ -71,12 +71,49 @@
   position: sticky;
 }
 .headBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
   border: 0;
   background: transparent;
-  padding: 0;
+  padding: 3px 6px;
+  margin: -3px -6px;
+  border-radius: 5px;
   font: inherit;
   color: inherit;
   cursor: pointer;
+  transition:
+    background-color 0.12s ease,
+    color 0.12s ease;
+  user-select: none;
+  max-width: 100%;
+}
+.headBtn:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: #18181b;
+}
+
+.sortIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.59375rem;
+  line-height: 1;
+  color: #a1a1aa;
+  opacity: 0.35;
+  transition:
+    opacity 0.12s ease,
+    color 0.12s ease;
+  flex: none;
+}
+.headBtn:hover .sortIcon {
+  opacity: 0.85;
+  color: #52525b;
+}
+.sortIconActive {
+  opacity: 1 !important;
+  color: var(--common-primary, #2563eb) !important;
+  font-weight: 700;
 }
 
 .row {
@@ -378,6 +415,9 @@
   border-radius: 6px;
   border: 1px solid rgba(0, 0, 0, 0.07);
 }
+.thumbImage {
+  object-fit: cover;
+}
 .thumbTitleBtn {
   display: block;
   max-width: 100%;

package/template/src/components/DataGrid/DataGrid.vue

@@ -6,7 +6,10 @@ import CellView from './CellView.vue';
 import styles from './DataGrid.module.css';
 import type { Cell, DataGridProps, GridColumn, GridRow } from './types';
 
-const props = defineProps<DataGridProps>();
+const props = withDefaults(defineProps<DataGridProps>(), {
+  sortable: true,
+  showPagination: true,
+});
 
 const isInlineDetailLabel = (value?: string) => Boolean(value && /^상세(?:\s*보기)?$/.test(value.trim()));
 
@@ -62,6 +65,38 @@ function withoutGridTracks(template: string, removed: Set<number>, columnCount:
   return template;
 }
 
+function parseSortableValue(val: unknown): { isNum: boolean; num: number; str: string } {
+  if (typeof val === 'number') return { isNum: !Number.isNaN(val), num: val, str: String(val) };
+  if (typeof val !== 'string') val = String(val ?? '');
+  const str = (val as string).trim();
+  if (!str) return { isNum: false, num: 0, str: '' };
+  const cleanStr = str.replace(/,/g, '').replace(/[원개건회명%₩$\s]/g, '');
+  if (cleanStr && !Number.isNaN(Number(cleanStr)) && !str.includes('/') && !str.includes(':')) {
+    const isNegativeOrSingle = !str.includes('-') || (str.startsWith('-') && str.indexOf('-', 1) === -1);
+    if (isNegativeOrSingle) return { isNum: true, num: Number(cleanStr), str };
+  }
+  return { isNum: false, num: 0, str };
+}
+
+function getCellRawValue(cell: Cell | undefined): unknown {
+  if (!cell) return '';
+  if (cell.kind === 'progress') return cell.pct;
+  if (cell.kind === 'custom') return cell.exportValue ?? '';
+  return cellExportValue(cell);
+}
+
+function compareCells(cellA: Cell | undefined, cellB: Cell | undefined, direction: 'asc' | 'desc'): number {
+  const parsedA = parseSortableValue(getCellRawValue(cellA));
+  const parsedB = parseSortableValue(getCellRawValue(cellB));
+  if (!parsedA.str && !parsedB.str) return 0;
+  if (!parsedA.str) return 1;
+  if (!parsedB.str) return -1;
+  let comparison = 0;
+  if (parsedA.isNum && parsedB.isNum) comparison = parsedA.num - parsedB.num;
+  else comparison = parsedA.str.localeCompare(parsedB.str, 'ko', { numeric: true, sensitivity: 'base' });
+  return direction === 'asc' ? comparison : -comparison;
+}
+
 function cellExportValue(cell: Cell): string {
   switch (cell.kind) {
     case 'text':
@@ -136,10 +171,12 @@ function cellFgColor(cell: Cell): string | undefined {
 }
 
 const rootRef = ref<HTMLDivElement | null>(null);
-const autoSelectable = ref(false);
 const internalSelected = ref<Set<string | number>>(new Set());
 const pageSize = ref<number | null>(null);
 const currentPage = ref(1);
+const sortColumnIndex = ref<number | null>(props.defaultSortColumn ?? null);
+const sortDirection = ref<'asc' | 'desc' | null>(props.defaultSortDirection ?? null);
+const effectiveSortable = computed(() => props.sortable ?? true);
 
 function handlePageSize(event: Event) {
   const size = (event as CustomEvent<{ pageSize?: number }>).detail?.pageSize;
@@ -150,9 +187,6 @@ function handlePageSize(event: Event) {
 
 onMounted(() => {
   rootRef.value?.addEventListener(DATA_GRID_PAGE_SIZE_EVENT, handlePageSize);
-  if (props.selectable === undefined) {
-    autoSelectable.value = Boolean(rootRef.value?.ownerDocument.querySelector('[data-excel-download]'));
-  }
 });
 onUnmounted(() => {
   rootRef.value?.removeEventListener(DATA_GRID_PAGE_SIZE_EVENT, handlePageSize);
@@ -172,7 +206,7 @@ watch(
   }
 );
 
-const effectiveSelectable = computed(() => props.selectable ?? autoSelectable.value);
+const effectiveSelectable = computed(() => props.selectable ?? false);
 const pageStart = computed(() => (pageSize.value ? (currentPage.value - 1) * pageSize.value : 0));
 const visibleSourceRows = computed(() => (pageSize.value ? props.rows.slice(pageStart.value, pageStart.value + pageSize.value) : props.rows));
 
@@ -226,7 +260,42 @@ const displayRows = computed(() =>
     }),
   }))
 );
-const pagedDisplayRows = computed(() => (pageSize.value ? displayRows.value.slice(pageStart.value, pageStart.value + pageSize.value) : displayRows.value));
+const sortedDisplayRows = computed(() => {
+  if (sortColumnIndex.value === null || sortDirection.value === null) return displayRows.value;
+  const index = sortColumnIndex.value;
+  const direction = sortDirection.value;
+  return [...displayRows.value].sort((rowA, rowB) => compareCells(rowA.cells[index], rowB.cells[index], direction));
+});
+const pagedDisplayRows = computed(() => (pageSize.value ? sortedDisplayRows.value.slice(pageStart.value, pageStart.value + pageSize.value) : sortedDisplayRows.value));
+
+function isSortableColumn(col: GridColumn) {
+  return effectiveSortable.value && (col.sortable ?? true) && !(typeof col.label === 'string' && ['관리', '상세', '설정', '메뉴'].includes(col.label.trim()));
+}
+
+watch(displayColumns, (columns) => {
+  if (sortColumnIndex.value !== null && sortColumnIndex.value >= columns.length) {
+    sortColumnIndex.value = null;
+    sortDirection.value = null;
+  }
+});
+
+function handleHeaderClick(columnIndex: number, col: GridColumn) {
+  col.onClick?.();
+  if (!isSortableColumn(col)) return;
+  let nextDirection: 'asc' | 'desc' | null = 'asc';
+  let nextColumn: number | null = columnIndex;
+  if (sortColumnIndex.value === columnIndex) {
+    if (sortDirection.value === 'asc') nextDirection = 'desc';
+    else if (sortDirection.value === 'desc') {
+      nextDirection = null;
+      nextColumn = null;
+    } else nextDirection = 'asc';
+  }
+  sortColumnIndex.value = nextColumn;
+  sortDirection.value = nextDirection;
+  currentPage.value = 1;
+  props.onSortChange?.(nextColumn, nextDirection);
+}
 
 const temporalColumnIndexes = computed(() => new Set(displayColumns.value.flatMap((column, columnIndex) => (isTemporalColumnLabel(column.label) ? [columnIndex] : []))));
 const serialColumnIndexes = computed(() => new Set(displayColumns.value.flatMap((column, columnIndex) => (isSerialColumnLabel(column.label) ? [columnIndex] : []))));
@@ -315,9 +384,24 @@ function cellAlignOf(cell: Cell, index: number) {
           <input type="checkbox" :class="styles.checkbox" :checked="effectiveAllSelected" style="pointer-events: none" aria-label="현재 목록 전체 선택" @change="() => {}" />
         </div>
         <template v-for="(col, i) in displayColumns" :key="i">
-          <button v-if="col.onClick" type="button" :class="styles.headBtn" :style="{ textAlign: centeredColumnIndexes.has(i) ? 'center' : col.align }" @click="col.onClick">
-            <span data-datagrid-column>{{ col.label }}</span>
-          </button>
+          <div
+            v-if="isSortableColumn(col) || col.onClick"
+            :style="{ display: 'flex', justifyContent: centeredColumnIndexes.has(i) ? 'center' : col.align === 'right' ? 'flex-end' : 'flex-start', minWidth: 0 }"
+          >
+            <button
+              type="button"
+              :class="styles.headBtn"
+              :style="{ justifyContent: centeredColumnIndexes.has(i) ? 'center' : col.align === 'right' ? 'flex-end' : 'flex-start' }"
+              :aria-sort="sortColumnIndex === i && sortDirection ? (sortDirection === 'asc' ? 'ascending' : 'descending') : 'none'"
+              :title="isSortableColumn(col) ? (sortColumnIndex !== i || !sortDirection ? '오름차순 정렬' : sortDirection === 'asc' ? '내림차순 정렬' : '정렬 해제') : undefined"
+              @click="handleHeaderClick(i, col)"
+            >
+              <span data-datagrid-column>{{ col.label }}</span>
+              <span v-if="isSortableColumn(col)" :class="[styles.sortIcon, sortColumnIndex === i && sortDirection && styles.sortIconActive]" aria-hidden="true">{{
+                sortColumnIndex === i && sortDirection === 'asc' ? '▲' : sortColumnIndex === i && sortDirection === 'desc' ? '▼' : '⇅'
+              }}</span>
+            </button>
+          </div>
           <span v-else :style="{ textAlign: centeredColumnIndexes.has(i) ? 'center' : col.align }" data-datagrid-column>{{ col.label }}</span>
         </template>
       </div>

package/template/src/components/DataGrid/types.ts

@@ -100,6 +100,7 @@ export interface NoTagCell extends BaseCell {
 export interface ThumbTitleCell extends BaseCell {
   kind: 'thumbTitle';
   thumb: string;
+  imageSrc?: string;
   title: string;
   id: string;
   titleFg?: string;
@@ -161,6 +162,7 @@ export interface GridColumn {
   label: string;
   align?: Align;
   onClick?: () => void;
+  sortable?: boolean;
 }
 
 export interface PageBtn {
@@ -191,4 +193,8 @@ export interface DataGridProps {
   showTopBar?: boolean;
   totalLabel?: string;
   actions?: { label: string; onClick: () => void }[];
+  sortable?: boolean;
+  defaultSortColumn?: number;
+  defaultSortDirection?: 'asc' | 'desc';
+  onSortChange?: (columnIndex: number | null, direction: 'asc' | 'desc' | null) => void;
 }

package/template/src/components/common/ExcelDownloadButton.vue

@@ -15,7 +15,7 @@ const emit = defineEmits<{ click: [MouseEvent] }>();
     type="button"
     variant="secondary"
     size="sm"
-    :class="[$style.button, className]"
+    :class-names="[$style.button, className ?? '']"
     data-excel-download
     data-grid-download
     @click="emit('click', $event)"

package/template/src/components/common/PageSizeSelect.module.css

@@ -3,6 +3,10 @@
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
+  /* 부모가 flex/grid일 때 늘어나면 화살표(absolute)가 박스 밖에 떠버린다 */
+  width: fit-content;
+  flex: none;
+  align-self: flex-start;
 }
 
 .select {
@@ -39,13 +43,3 @@
   cursor: not-allowed;
   background-color: var(--common-bg-disabled, #f4f4f5);
 }
-
-.arrowIcon {
-  position: absolute;
-  right: 9px;
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-  color: var(--common-text-muted, #71717a);
-  flex-shrink: 0;
-}

package/template/src/components/common/PageSizeSelect.vue

@@ -19,7 +19,6 @@ export const DATA_GRID_PAGE_SIZE_EVENT = 'data-grid-page-size-change';
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue';
-import { ChevronDown } from 'lucide-vue-next';
 
 function pageSizeOf(value: string) {
   const parsed = Number.parseInt(value.replace(/[^0-9]/g, ''), 10);
@@ -50,6 +49,8 @@ function notifyNearestDataGrid(select: HTMLSelectElement) {
   grid?.dispatchEvent(new CustomEvent(DATA_GRID_PAGE_SIZE_EVENT, { detail: { pageSize } }));
 }
 
+defineOptions({ inheritAttrs: false });
+
 const props = withDefaults(defineProps<PageSizeSelectProps>(), {
   options: () => DEFAULT_PAGE_SIZE_OPTIONS,
   defaultValue: '20개씩 보기',
@@ -81,6 +82,7 @@ function handleChange(event: Event) {
   <div :class="[$style.wrapper, wrapperClassName].filter(Boolean).join(' ')">
     <select
       ref="selectRef"
+      v-bind="$attrs"
       :aria-label="props['aria-label'] ?? '페이지당 표시 개수'"
       :value="value ?? defaultValue"
       :class="[$style.select, className].filter(Boolean).join(' ')"
@@ -92,7 +94,6 @@ function handleChange(event: Event) {
         </option>
       </slot>
     </select>
-    <ChevronDown :size="14" :class="$style.arrowIcon" aria-hidden="true" />
   </div>
 </template>
 

package/template/src/components/shell/GlobalSearchBar.module.css

@@ -0,0 +1,13 @@
+.bar {
+  width: 100%;
+}
+
+/* 헤더 안에서는 각진 모서리로 통일 (공용 SearchField 기본값 덮어쓰기) */
+.bar > * {
+  border-radius: 0;
+}
+
+.bar input,
+.bar button {
+  border-radius: 0;
+}

package/template/src/components/shell/GlobalSearchBar.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import SearchField from '../SearchField/SearchField.vue';
+import styles from './GlobalSearchBar.module.css';
+
+withDefaults(defineProps<{ placeholder?: string; className?: string }>(), {
+  placeholder: '메뉴, 상품, 주문 검색',
+  className: '',
+});
+
+const router = useRouter();
+const wrapRef = ref<HTMLElement | null>(null);
+const keyword = ref('');
+
+function focusInput() {
+  wrapRef.value?.querySelector('input')?.focus();
+  wrapRef.value?.querySelector('input')?.select();
+}
+
+function handler(e: KeyboardEvent) {
+  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
+    e.preventDefault();
+    focusInput();
+  }
+}
+
+onMounted(() => window.addEventListener('keydown', handler));
+onUnmounted(() => window.removeEventListener('keydown', handler));
+
+function runSearch(value: string) {
+  const query = value.trim();
+  if (!query) {
+    wrapRef.value?.querySelector('input')?.focus();
+    return;
+  }
+  router.push(`/search?q=${encodeURIComponent(query)}`);
+}
+
+function handleKeyDown(e: KeyboardEvent) {
+  if (e.key === 'Enter') {
+    e.preventDefault();
+    runSearch(keyword.value);
+  }
+}
+</script>
+
+<template>
+  <span ref="wrapRef">
+    <SearchField
+      size="sm"
+      clearable
+      full-width
+      :class-name="`${styles.bar} ${className}`"
+      :placeholder="placeholder"
+      shortcut-hint="Ctrl K"
+      :value="keyword"
+      :on-value-change="(v: string) => (keyword = v)"
+      :on-search="runSearch"
+      @keydown="handleKeyDown"
+      aria-label="통합 검색"
+    />
+  </span>
+</template>

package/template/src/components/shell/Header.module.css

@@ -1,12 +1,15 @@
 .header {
   display: flex;
   align-items: center;
-  gap: 14px;
+  gap: 12px;
   height: 52px;
-  padding: 0 18px;
+  padding: 0 20px;
   background: var(--common-bg);
   border-bottom: 1px solid var(--common-border);
+  border-radius: 0;
   flex: none;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .crumb {
@@ -15,6 +18,9 @@
   gap: 7px;
   font-size: 0.78125rem;
   color: var(--common-text-muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+  min-width: max-content;
 }
 .crumbSep {
   color: var(--common-border-strong);
@@ -22,10 +28,26 @@
 .crumbLeaf {
   color: var(--common-text);
   font-weight: 600;
+  white-space: nowrap;
 }
 
 .spacer {
   flex: 1;
+  min-width: 8px;
+}
+
+.searchWrapper {
+  flex: 0 1 340px;
+  min-width: 180px;
+  max-width: 400px;
+}
+
+.rightGroup {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 
 .modeSwitcherWrapper {
@@ -37,7 +59,7 @@
   padding: 0 10px;
   border: 1px solid var(--common-border);
   background: var(--common-bg);
-  border-radius: 8px;
+  border-radius: var(--common-radius-md);
   color: var(--common-text);
   font-size: 0.75rem;
   font-weight: 600;
@@ -57,7 +79,7 @@
   font-size: 0.65625rem;
   font-weight: 700;
   padding: 1px 6px;
-  border-radius: 4px;
+  border-radius: var(--common-radius-sm);
 }
 
 .modeDropdown {
@@ -67,7 +89,7 @@
   min-width: 175px;
   background: var(--common-bg);
   border: 1px solid var(--common-border);
-  border-radius: 10px;
+  border-radius: var(--common-radius-lg);
   box-shadow: var(--common-shadow-popover);
   padding: 6px;
   z-index: 1000;
@@ -81,7 +103,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 7px 10px;
-  border-radius: 6px;
+  border-radius: var(--common-radius-sm);
   border: none;
   background: none;
   font-size: 0.75rem;
@@ -115,7 +137,7 @@
   cursor: pointer;
   border: none;
   background: none;
-  border-radius: 4px;
+  border-radius: var(--common-radius-sm);
 }
 
 .modeDropdownLink:hover {
@@ -127,7 +149,7 @@
   width: 32px;
   border: 1px solid var(--common-border);
   background: var(--common-bg);
-  border-radius: 9px;
+  border-radius: var(--common-radius-md);
   color: var(--common-text-sub);
   cursor: pointer;
   display: flex;
@@ -154,7 +176,7 @@
 .accountAvatar {
   width: 26px;
   height: 26px;
-  border-radius: 8px;
+  border-radius: var(--common-radius-md);
   background: var(--common-primary-light);
   color: var(--common-primary);
   display: flex;

package/template/src/components/shell/Header.vue

@@ -4,6 +4,7 @@ import { Blocks, Settings, ChevronDown, Check } from 'lucide-vue-next';
 import { Header as M2MHeader } from 'm2m-uiux-vue/Header';
 import { useRoute, useRouter } from 'vue-router';
 import { activeKeyForPath, breadcrumbForKey } from '../../lib/nav';
+import GlobalSearchBar from './GlobalSearchBar.vue';
 import {
   loadBusinessSettings,
   saveBusinessSettings,
@@ -86,43 +87,51 @@ function goSystemDisplay() {
 
     <div :class="styles.spacer" />
 
-    <div ref="dropdownRef" :class="styles.modeSwitcherWrapper">
-      <button type="button" :class="styles.modeSwitcherBtn" title="작업 비즈니스 모드 변경" @click="modeDropdownOpen = !modeDropdownOpen">
-        <span :class="styles.modeTag" :style="{ backgroundColor: modeBadgeColor.bg, color: modeBadgeColor.fg }">{{ currentModeInfo.badge }}</span>
-        <span>{{ currentModeInfo.title.split(' ')[0] }}</span>
-        <ChevronDown :size="14" />
-      </button>
+    <div :class="styles.searchWrapper">
+      <GlobalSearchBar />
+    </div>
+
+    <div :class="styles.spacer" />
 
-      <div v-if="modeDropdownOpen" :class="styles.modeDropdown">
-        <button
-          v-for="card in BUSINESS_MODE_CARDS"
-          :key="card.mode"
-          type="button"
-          :class="[styles.modeOption, businessSettings.activeMode === card.mode && styles.modeOptionActive]"
-          :disabled="!isEnabled(card.mode)"
-          :style="{ opacity: isEnabled(card.mode) ? 1 : 0.45 }"
-          @click="isEnabled(card.mode) && handleSelectMode(card.mode)"
-        >
-          <span>{{ card.title }}</span>
-          <Check v-if="businessSettings.activeMode === card.mode" :size="14" />
+    <div :class="styles.rightGroup">
+      <div ref="dropdownRef" :class="styles.modeSwitcherWrapper">
+        <button type="button" :class="styles.modeSwitcherBtn" title="작업 비즈니스 모드 변경" @click="modeDropdownOpen = !modeDropdownOpen">
+          <span :class="styles.modeTag" :style="{ backgroundColor: modeBadgeColor.bg, color: modeBadgeColor.fg }">{{ currentModeInfo.badge }}</span>
+          <span>{{ currentModeInfo.title.split(' ')[0] }}</span>
+          <ChevronDown :size="14" />
         </button>
 
-        <div :class="styles.modeDropdownDivider" />
-        <button type="button" :class="styles.modeDropdownLink" @click="goSystemDisplay">운영 설정 관리 →</button>
+        <div v-if="modeDropdownOpen" :class="styles.modeDropdown">
+          <button
+            v-for="card in BUSINESS_MODE_CARDS"
+            :key="card.mode"
+            type="button"
+            :class="[styles.modeOption, businessSettings.activeMode === card.mode && styles.modeOptionActive]"
+            :disabled="!isEnabled(card.mode)"
+            :style="{ opacity: isEnabled(card.mode) ? 1 : 0.45 }"
+            @click="isEnabled(card.mode) && handleSelectMode(card.mode)"
+          >
+            <span>{{ card.title }}</span>
+            <Check v-if="businessSettings.activeMode === card.mode" :size="14" />
+          </button>
+
+          <div :class="styles.modeDropdownDivider" />
+          <button type="button" :class="styles.modeDropdownLink" @click="goSystemDisplay">운영 설정 관리 →</button>
+        </div>
       </div>
-    </div>
 
-    <button type="button" :class="[styles.iconBtn, route.path === '/components' && styles.iconBtnActive]" title="컴포넌트" @click="goComponents">
-      <Blocks :size="15" :stroke-width="1.8" />
-    </button>
+      <button type="button" :class="[styles.iconBtn, route.path === '/components' && styles.iconBtnActive]" title="컴포넌트" @click="goComponents">
+        <Blocks :size="15" :stroke-width="1.8" />
+      </button>
 
-    <button type="button" :class="[styles.iconBtn, route.path.startsWith('/system') && styles.iconBtnActive]" title="환경 설정" @click="goSystemDisplay">
-      <Settings :size="15" :stroke-width="1.8" />
-    </button>
+      <button type="button" :class="[styles.iconBtn, route.path.startsWith('/system') && styles.iconBtnActive]" title="환경 설정" @click="goSystemDisplay">
+        <Settings :size="15" :stroke-width="1.8" />
+      </button>
 
-    <div :class="styles.account">
-      <div :class="styles.accountAvatar">관</div>
-      <span :class="styles.accountName">관리자</span>
+      <div :class="styles.account">
+        <div :class="styles.accountAvatar">관</div>
+        <span :class="styles.accountName">관리자</span>
+      </div>
     </div>
   </M2MHeader>
 </template>