tab, toast grid 추가

components/ContentsWrapper.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="wrapper">
+      <!-- 경로 -->
+      <nav class="breadcrumb">{{ breadcrumb }}</nav>
+  
+      <!-- 화면 명 + 버튼 영역 -->
+      <header class="header">
+        <h1 class="title">{{ pageTitle }}</h1>
+        <div class="header-actions">
+          <slot name="actions" />
+        </div>
+      </header>
+  
+      <!-- 메인 콘텐츠 -->
+      <main class="content">
+        <slot />
+      </main>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { useRoute } from '#imports'
+  
+  const route = useRoute()
+  
+  // 경로(메뉴 경로)
+  const breadcrumb = computed(() => route.path)
+  
+  // 화면명(meta.title 값)
+  const pageTitle = computed(() => route.meta.title || 'Untitled Page')
+  </script>
+  
+  <style scoped>
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 16px;
+    background: #f9f9f9;
+    min-height: 100%;
+  }
+  
+  .breadcrumb {
+    font-size: 14px;
+    color: #666;
+  }
+  
+  /* 화면명과 버튼을 좌우 끝으로 배치 */
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: bold;
+  }
+  
+  .header-actions {
+    display: flex;
+    gap: 8px;
+  }
+  
+  .content {
+    flex: 1;
+    padding: 12px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  }
+
+  /* 버튼 공통 스타일 */
+.header-actions ::v-deep button {
+  background-color: #4CAF50;
+  color: white;
+  font-size: 14px;
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.header-actions ::v-deep button:hover {
+  background-color: #45a049;
+}
+
+.header-actions ::v-deep button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+  </style>
+  

components/ToastGrid.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref, defineExpose } from 'vue';
+import type { OptColumn, OptRow } from 'tui-grid/types/options';
+import type { TuiGridElement } from 'vue3-tui-grid';
+import type Grid from 'tui-grid';
+
+interface TreeColumnOptions {
+  name: string;
+  useCascadingCheckbox?: boolean;
+}
+
+const tuiGridRef = ref<TuiGridElement>();
+
+const props = defineProps<{
+  data: OptRow[];
+  // editor: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide-kor.md
+  columns: OptColumn[];
+  treeColumnOptions?: TreeColumnOptions;
+  rowHeaders?: string[];
+  rowKey?: string;
+}>();
+
+// grid api : https://nhn.github.io/tui.grid/latest/Grid
+// const ref = ref<InstanceType<typeof ToastGrid>>();
+// ref.value?.api()?.clear();  
+// ref.value?.api()?.getModifiedRows();
+defineExpose({
+  api: (): Grid | undefined => tuiGridRef.value?.gridInstance,
+  clearGrid: () => clearGrid(),
+});
+
+function clearGrid() {
+  tuiGridRef.value?.gridInstance.clear();
+}
+
+</script>
+
+<template>
+    <tui-grid
+      ref="tuiGridRef"
+      :data="props.data"
+      :columns="props.columns"
+      :treeColumnOptions="props.treeColumnOptions"
+      :rowHeaders="props.rowHeaders"
+      :rowKey="props.rowKey"
+    />
+</template>