create-m2m-bo-template-vue 1.0.6 → 1.0.7

package/package.json

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

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

@@ -172,6 +172,7 @@ function cellFgColor(cell: Cell): string | undefined {
 
 const rootRef = ref<HTMLDivElement | null>(null);
 const internalSelected = ref<Set<string | number>>(new Set());
+const autoSelectable = ref(false);
 const pageSize = ref<number | null>(null);
 const currentPage = ref(1);
 const sortColumnIndex = ref<number | null>(props.defaultSortColumn ?? null);
@@ -185,12 +186,19 @@ function handlePageSize(event: Event) {
   currentPage.value = 1;
 }
 
+function updateAutoSelectable() {
+  if (props.selectable !== undefined) return;
+  autoSelectable.value = Boolean(rootRef.value?.ownerDocument.querySelector('[data-excel-download]'));
+}
+
 onMounted(() => {
   rootRef.value?.addEventListener(DATA_GRID_PAGE_SIZE_EVENT, handlePageSize);
+  updateAutoSelectable();
 });
 onUnmounted(() => {
   rootRef.value?.removeEventListener(DATA_GRID_PAGE_SIZE_EVENT, handlePageSize);
 });
+watch(() => props.selectable, updateAutoSelectable);
 
 const totalPageCount = computed(() => (pageSize.value ? Math.max(1, Math.ceil(props.rows.length / pageSize.value)) : 1));
 watch(totalPageCount, (count) => {
@@ -206,7 +214,7 @@ watch(
   }
 );
 
-const effectiveSelectable = computed(() => props.selectable ?? false);
+const effectiveSelectable = computed(() => props.selectable ?? autoSelectable.value);
 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));
 

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

@@ -1,3 +1,9 @@
+.wrapper {
+  width: 100%;
+  position: relative;
+  /* 퀵서치 패널이 wrapper를 기준으로 absolute 포지셔닝되도록 */
+}
+
 .bar {
   width: 100%;
 }

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

@@ -2,6 +2,8 @@
 import { onMounted, onUnmounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import SearchField from '../SearchField/SearchField.vue';
+import QuickSearchPanel from './QuickSearchPanel.vue';
+import { addRecentSearch } from '../../lib/recentSearches';
 import styles from './GlobalSearchBar.module.css';
 
 withDefaults(defineProps<{ placeholder?: string; className?: string }>(), {
@@ -12,12 +14,18 @@ withDefaults(defineProps<{ placeholder?: string; className?: string }>(), {
 const router = useRouter();
 const wrapRef = ref<HTMLElement | null>(null);
 const keyword = ref('');
+const panelOpen = ref(false);
+
+function getInput() {
+  return wrapRef.value?.querySelector('input') ?? null;
+}
 
 function focusInput() {
-  wrapRef.value?.querySelector('input')?.focus();
-  wrapRef.value?.querySelector('input')?.select();
+  getInput()?.focus();
+  getInput()?.select();
 }
 
+// Ctrl/⌘ + K 로 검색창 포커스
 function handler(e: KeyboardEvent) {
   if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
     e.preventDefault();
@@ -31,22 +39,46 @@ onUnmounted(() => window.removeEventListener('keydown', handler));
 function runSearch(value: string) {
   const query = value.trim();
   if (!query) {
-    wrapRef.value?.querySelector('input')?.focus();
+    focusInput();
     return;
   }
+  addRecentSearch(query);
+  panelOpen.value = false;
   router.push(`/search?q=${encodeURIComponent(query)}`);
 }
 
+function handleSelectKeyword(kw: string) {
+  keyword.value = kw;
+  runSearch(kw);
+}
+
+function handleValueChange(value: string) {
+  keyword.value = value;
+  panelOpen.value = true;
+}
+
+function handleFocus() {
+  panelOpen.value = true;
+}
+
+function handleClose() {
+  panelOpen.value = false;
+  focusInput();
+}
+
 function handleKeyDown(e: KeyboardEvent) {
   if (e.key === 'Enter') {
     e.preventDefault();
     runSearch(keyword.value);
   }
+  if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && panelOpen.value) {
+    e.preventDefault();
+  }
 }
 </script>
 
 <template>
-  <span ref="wrapRef">
+  <div ref="wrapRef" :class="`${styles.wrapper} ${className}`" style="position: relative">
     <SearchField
       size="sm"
       clearable
@@ -55,10 +87,21 @@ function handleKeyDown(e: KeyboardEvent) {
       :placeholder="placeholder"
       shortcut-hint="Ctrl K"
       :value="keyword"
-      :on-value-change="(v: string) => (keyword = v)"
+      :on-value-change="handleValueChange"
       :on-search="runSearch"
       @keydown="handleKeyDown"
+      @focusin="handleFocus"
       aria-label="통합 검색"
+      :aria-expanded="panelOpen"
+      aria-haspopup="listbox"
+    />
+
+    <QuickSearchPanel
+      v-if="panelOpen"
+      :query="keyword.trim()"
+      :anchor-el="wrapRef"
+      @close="handleClose"
+      @select-keyword="handleSelectKeyword"
     />
-  </span>
+  </div>
 </template>

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

@@ -0,0 +1,547 @@
+/* ─── 패널 래퍼 ─── */
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+}
+
+.panel {
+  position: absolute;
+  z-index: 1200;
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  width: 580px;
+  max-width: calc(100vw - 32px);
+  background: var(--common-bg, #fff);
+  border: 1px solid var(--common-border, rgba(0, 0, 0, 0.09));
+  border-radius: 16px;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.07),
+    0 20px 48px -8px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: min(440px, calc(100vh - 80px));
+  animation: panelIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes panelIn {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-6px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+
+/* ─── 탭 바 ─── */
+.tabBar {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 0 14px;
+  border-bottom: 1px solid var(--common-border, rgba(0, 0, 0, 0.08));
+  background: var(--common-bg-subtle, #fafafa);
+  flex: none;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.tabBar::-webkit-scrollbar {
+  display: none;
+}
+
+.tabItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0 10px;
+  height: 38px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--common-text-muted, #71717a);
+  font-size: 0.71875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    color 0.12s ease,
+    border-color 0.12s ease;
+  font-family: inherit;
+  margin-bottom: -1px;
+}
+.tabItem:hover {
+  color: var(--common-text, #18181b);
+}
+.tabActive {
+  color: var(--common-primary, #2563eb);
+  border-bottom-color: var(--common-primary, #2563eb);
+  font-weight: 700;
+}
+
+.tabBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: var(--common-bg-subtle, #f4f4f5);
+  color: var(--common-text-muted, #71717a);
+  font-size: 0.59375rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  transition:
+    background 0.12s ease,
+    color 0.12s ease;
+}
+.tabActive .tabBadge {
+  background: var(--common-primary-light, #eff6ff);
+  color: var(--common-primary, #2563eb);
+}
+
+/* ─── 결과 스크롤 영역 ─── */
+.resultScroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-gutter: stable;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: #d4d4d8 transparent;
+  padding: 6px 0;
+}
+.resultScroll::-webkit-scrollbar {
+  width: 5px;
+}
+.resultScroll::-webkit-scrollbar-thumb {
+  background: #d4d4d8;
+  border-radius: 99px;
+}
+
+/* ─── 최근 검색어 섹션 ─── */
+.recentSection {
+  padding: 6px 0 10px 0;
+  border-bottom: 1px solid var(--common-border, rgba(0, 0, 0, 0.06));
+  margin-bottom: 4px;
+}
+
+.recentHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 18px 8px 18px;
+}
+
+.recentTitle {
+  font-size: 0.71875rem;
+  font-weight: 600;
+  color: var(--common-text-muted, #71717a);
+  letter-spacing: -0.01em;
+}
+
+.recentClearBtn {
+  font-size: 0.6875rem;
+  color: var(--common-text-muted, #a1a1aa);
+  background: transparent;
+  border: none;
+  padding: 2px 4px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: color 0.12s ease, background 0.12s ease;
+  line-height: 1;
+}
+
+.recentClearBtn:hover {
+  color: var(--common-text, #3f3f46);
+  text-decoration: underline;
+}
+
+.recentChips {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 18px 2px 18px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.recentChips::-webkit-scrollbar {
+  display: none;
+}
+
+.recentChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 8px 0 12px;
+  background: var(--common-bg, #ffffff);
+  border: 1px solid var(--common-border, #e4e4e7);
+  border-radius: 9999px;
+  color: var(--common-text, #3f3f46);
+  font-size: 0.71875rem;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+}
+
+.recentChip:hover {
+  background: var(--common-bg-subtle, #f4f4f5);
+  border-color: #d4d4d8;
+  color: var(--common-text, #18181b);
+}
+
+.recentChipText {
+  line-height: 1;
+}
+
+.recentChipRemove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: none;
+  background: transparent;
+  color: #a1a1aa;
+  cursor: pointer;
+  padding: 0;
+  border-radius: 50%;
+  transition: color 0.12s ease, background 0.12s ease;
+}
+
+.recentChipRemove:hover {
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+}
+
+/* ─── 검색 히스토리 상세 뷰 ─── */
+.historyView {
+  padding: 6px 0;
+}
+
+.historyHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 18px 8px 18px;
+  border-bottom: 1px solid var(--common-border, rgba(0, 0, 0, 0.06));
+}
+
+.historyTitleWrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--common-text, #18181b);
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.historyList {
+  list-style: none;
+  margin: 0;
+  padding: 4px 0;
+}
+
+.historyItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 18px;
+  cursor: pointer;
+  transition: background 0.12s ease;
+}
+
+.historyItem:hover {
+  background: var(--common-bg-subtle, #f4f4f5);
+}
+
+.historyMain {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 0;
+}
+
+.historyClockIcon {
+  color: var(--common-text-muted, #a1a1aa);
+  flex: none;
+}
+
+.historyQuery {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--common-text, #27272a);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.historyMeta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: none;
+}
+
+.historyResultCount {
+  font-size: 0.6875rem;
+  color: var(--common-primary, #2563eb);
+  background: var(--common-primary-light, #eff6ff);
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.historyTime {
+  font-size: 0.6875rem;
+  color: var(--common-text-muted, #a1a1aa);
+}
+
+.historyRemoveBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  color: #a1a1aa;
+  cursor: pointer;
+  border-radius: 4px;
+  margin-left: 6px;
+  transition: color 0.12s ease, background 0.12s ease;
+}
+
+.historyRemoveBtn:hover {
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.historyEmpty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 36px 18px;
+  gap: 8px;
+  color: var(--common-text-muted, #a1a1aa);
+  font-size: 0.75rem;
+}
+
+/* ─── 도메인 섹션 ─── */
+.domainSection {
+  padding: 0;
+}
+
+.domainLabel {
+  display: block;
+  padding: 8px 18px 3px;
+  font-size: 0.625rem;
+  font-weight: 700;
+  color: var(--common-text-muted, #a1a1aa);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+/* ─── 결과 항목 ─── */
+.resultItem {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 8px 18px;
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+  font-family: inherit;
+  transition: background 0.12s ease;
+}
+.resultItem:hover,
+.resultItemFocused {
+  background: var(--common-bg-subtle, #f4f4f5);
+}
+
+.itemDomainBar {
+  flex: none;
+  width: 2.5px;
+  height: 24px;
+  border-radius: 2px;
+  margin-top: 2px;
+}
+
+.itemBody {
+  flex: 1;
+  min-width: 0;
+}
+
+.itemTitle {
+  display: block;
+  font-size: 0.78125rem;
+  font-weight: 600;
+  color: var(--common-text, #18181b);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.itemMeta {
+  display: block;
+  font-size: 0.625rem;
+  color: var(--common-text-muted, #a1a1aa);
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.itemMetaSep {
+  margin: 0 4px;
+  color: var(--common-border-strong, #d4d4d8);
+}
+
+.hit {
+  background: #fef08a;
+  color: inherit;
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+/* ─── 연관 검색어 ─── */
+.relatedSection {
+  padding: 8px 18px 10px;
+  border-top: 1px solid var(--common-border, rgba(0, 0, 0, 0.07));
+  margin-top: 4px;
+}
+
+.relatedLabel {
+  display: block;
+  font-size: 0.625rem;
+  font-weight: 700;
+  color: var(--common-text-muted, #a1a1aa);
+  letter-spacing: 0.04em;
+  margin-bottom: 8px;
+}
+
+.relatedChips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.relatedChip {
+  display: inline-flex;
+  align-items: center;
+  height: 26px;
+  padding: 0 10px;
+  border: 1px solid var(--common-border, rgba(0, 0, 0, 0.1));
+  border-radius: 999px;
+  background: var(--common-bg, #fff);
+  color: var(--common-text-sub, #52525b);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  cursor: pointer;
+  font-family: inherit;
+  transition:
+    background 0.12s ease,
+    border-color 0.12s ease,
+    color 0.12s ease;
+}
+.relatedChip:hover {
+  background: var(--common-primary-light, #eff6ff);
+  border-color: var(--common-primary-border, #bfdbfe);
+  color: var(--common-primary, #2563eb);
+}
+
+/* ─── 빈 결과 ─── */
+.emptyContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 28px 16px;
+  min-height: 180px;
+}
+
+/* ─── 하단 액션 바 ─── */
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 14px;
+  border-top: 1px solid var(--common-border, rgba(0, 0, 0, 0.08));
+  background: var(--common-bg-subtle, #fafafa);
+  flex: none;
+}
+
+.keyHints {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.keyHint {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--common-text-muted, #a1a1aa);
+  font-size: 0.59375rem;
+}
+
+.keyBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 18px;
+  padding: 0 4px;
+  background: var(--common-bg, #fff);
+  border: 1px solid var(--common-border-strong, #d4d4d8);
+  border-radius: 4px;
+  color: var(--common-text-sub, #52525b);
+  font-size: 0.59375rem;
+  font-weight: 600;
+  font-family: inherit;
+  box-shadow: 0 1px 0 var(--common-border-strong, #d4d4d8);
+}
+
+.viewAllBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 32px;
+  padding: 0 14px;
+  background: var(--common-text, #18181b);
+  color: #fff;
+  border: 0;
+  border-radius: 8px;
+  font-size: 0.71875rem;
+  font-weight: 700;
+  cursor: pointer;
+  white-space: nowrap;
+  font-family: inherit;
+  transition:
+    background 0.15s ease,
+    transform 0.1s ease;
+}
+.viewAllBtn:hover {
+  background: var(--common-primary, #2563eb);
+  transform: translateY(-1px);
+}
+.viewAllBtn:active {
+  transform: translateY(0);
+}
+
+.viewAllArrow {
+  font-size: 0.875rem;
+  font-weight: 400;
+}