[폴더, 파일 구조 정리]

components/base/grid/ToastGrid.vue

@@ -1,50 +1,50 @@
-<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 selectionUnit = "row"
-
-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"
-      :selectionUnit="selectionUnit"
-    />
-</template>
+<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 selectionUnit = "row"
+
+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"
+      :selectionUnit="selectionUnit"
+    />
+</template>

components/base/popup/CommonPopup.vue

@@ -1,28 +1,27 @@
-<template>
-  <div v-if="show" class="popup-overlay" @click.self="show = false">
-    <div class="popup-container">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const show = defineModel('show', {type: Boolean, default:false});
-
-</script>
-
-<style scoped>
-.popup-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.popup-container {
-  background: #fff;
-  border-radius: 8px;
-  overflow: hidden;
-}
-</style>
+<template>
+  <div v-if="show" class="popup-overlay" @click.self="show = false">
+    <div class="popup-container">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const show = defineModel("show", { type: Boolean, default: false });
+</script>
+
+<style scoped>
+.popup-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.popup-container {
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+}
+</style>

components/domain/culture-graph/BatchTabs.vue

@@ -15,7 +15,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
-import BatchGraph from "~/components/BatchGraph.vue";
+import BatchGraph from "~/components/domain/culture-graph/BatchGraph.vue";
 const batchNames = ["배치 1", "배치 2", "배치 3", "배치 4"];
 const currentTab = ref(0);
 </script>

components/layout/ContentsWrapper.vue

@@ -1,95 +0,0 @@
-<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/layout/navigation/AppHeader.vue

@@ -18,7 +18,7 @@
     <!-- 사용자 정보 및 드롭다운 -->
     <div class="user-menu-wrapper">
       <div class="user-info" @click="toggleDropdown">
-        <span class="user-name">{{ userStore.name }}</span>
+        <span class="user-name">{{ userStore.user?.name }}</span>
         <div class="user-icon">
           <svg
             width="24"
@@ -36,10 +36,6 @@
         </div>
       </div>
       <div v-show="showDropdown" class="user-dropdown">
-        <div class="user-details">
-          <p class="user-email">{{ userStore.user?.email }}</p>
-          <p class="user-role">{{ userStore.isAdmin ? "관리자" : "사용자" }}</p>
-        </div>
         <div class="dropdown-divider"></div>
         <button class="logout-btn" @click="logout">
           <svg
@@ -61,12 +57,7 @@
   </header>
 </template>
 
-<script setup>
-import { ref, computed, onMounted, onBeforeUnmount } from "vue";
-import { useUserStore } from "~/stores/user";
-import { usePermissionsStore } from "~/stores/permissions";
-
-// defineModel 사용
+<script setup lang="ts">
 const modelValue = defineModel({ type: String, required: true });
 
 const showDropdown = ref(false);
@@ -84,7 +75,7 @@ const availableMenus = computed(() => {
 });
 
 // 메뉴 클릭 핸들러
-function onMenuClick(menu) {
+function onMenuClick(menu: string) {
   modelValue.value = menu;
 }
 
@@ -92,9 +83,9 @@ function toggleDropdown() {
   showDropdown.value = !showDropdown.value;
 }
 
-function handleClickOutside(event) {
+function handleClickOutside(event: MouseEvent) {
   const menu = document.querySelector(".user-menu-wrapper");
-  if (menu && !menu.contains(event.target)) {
+  if (menu && !menu.contains(event.target as Node)) {
     showDropdown.value = false;
   }
 }

components/layout/wrapper/ContentsWrapper.vue

@@ -0,0 +1,91 @@
+<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">
+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/layout/wrapper/PopupWrapper.vue

@@ -1,81 +1,78 @@
-<template>
-  <customPopup v-model:show="show">
-    <div class="popup-content" :style="{ width, height }">
-      <!-- Top -->
-      <div class="popup-top">
-        <slot name="top"></slot>
-      </div>
-
-      <!-- Middle -->
-      <div class="popup-middle">
-        <slot name="middle"></slot>
-      </div>
-
-      <!-- Bottom -->
-      <div class="popup-bottom">
-        <button class="popup-close" @click="show = false">닫기</button>
-        <slot name="bottom"></slot>
-      </div>
-    </div>
-  </customPopup>
-</template>
-
-<script setup lang="ts">
-
-defineProps<{
-  width?: string
-  height?: string
-}>()
-
-// defineModel + 기본값 지정
-const show = defineModel('show', {type: Boolean, default:false});
-
-</script>
-
-
-<style scoped>
-.popup-content {
-  background: white;
-  display: flex;
-  flex-direction: column;
-  border-radius: 8px;
-  overflow: hidden;
-}
-.popup-top {
-  padding: 10px 20px;
-  font-weight: bold;
-  background: #f0f0f0;
-  border-bottom: 1px solid #ddd;
-}
-.popup-middle {
-  flex: 1;
-  padding: 20px;
-  overflow-y: auto;
-}
-.popup-bottom {
-  padding: 10px 20px;
-  display: flex;
-  justify-content: center; /* 중앙 정렬 */
-  gap: 10px;
-  background: #f9f9f9;
-  border-top: 1px solid #ddd;
-}
-
-/* ⭐️ bottom 슬롯 버튼 공통 스타일 */
-.popup-bottom ::v-deep(button) {
-  padding: 8px 16px;
-  border: none;
-  border-radius: 6px;
-  background: #007bff;
-  color: white;
-  cursor: pointer;
-}
-.popup-bottom ::v-deep(button:hover) {
-  background: #0056b3;
-}
-
-.popup-close {
-  background: #ddd !important;
-  color: black !important;
-}
-</style>
+<template>
+  <CommonPopup v-model:show="show">
+    <div class="popup-content" :style="{ width, height }">
+      <!-- Top -->
+      <div class="popup-top">
+        <slot name="top"></slot>
+      </div>
+
+      <!-- Middle -->
+      <div class="popup-middle">
+        <slot name="middle"></slot>
+      </div>
+
+      <!-- Bottom -->
+      <div class="popup-bottom">
+        <button class="popup-close" @click="show = false">닫기</button>
+        <slot name="bottom"></slot>
+      </div>
+    </div>
+  </CommonPopup>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: string;
+  height?: string;
+}>();
+
+// defineModel + 기본값 지정
+const show = defineModel("show", { type: Boolean, default: false });
+</script>
+
+<style scoped>
+.popup-content {
+  background: white;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.popup-top {
+  padding: 10px 20px;
+  font-weight: bold;
+  background: #f0f0f0;
+  border-bottom: 1px solid #ddd;
+}
+.popup-middle {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+}
+.popup-bottom {
+  padding: 10px 20px;
+  display: flex;
+  justify-content: center; /* 중앙 정렬 */
+  gap: 10px;
+  background: #f9f9f9;
+  border-top: 1px solid #ddd;
+}
+
+/* ⭐️ bottom 슬롯 버튼 공통 스타일 */
+.popup-bottom ::v-deep(button) {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  background: #007bff;
+  color: white;
+  cursor: pointer;
+}
+.popup-bottom ::v-deep(button:hover) {
+  background: #0056b3;
+}
+
+.popup-close {
+  background: #ddd !important;
+  color: black !important;
+}
+</style>

composables/popupManager.ts

@@ -1,15 +0,0 @@
-import { ref } from 'vue'
-
-let baseZIndex = 1000;
-
-++baseZIndex;
-
-const currentZ = ref(baseZIndex)
-
-export function usePopupZIndex() {
-  function nextZIndex() {
-    currentZ.value += 1
-    return currentZ.value
-  }
-  return { nextZIndex }
-}

composables/useCounter.ts

@@ -1,25 +0,0 @@
-export const useCounter = () => {
-  const count = ref(0);
-
-  const increment = () => {
-    count.value++;
-  };
-
-  const decrement = () => {
-    count.value--;
-  };
-
-  const reset = () => {
-    count.value = 0;
-  };
-
-  const double = computed(() => count.value * 2);
-
-  return {
-    count: readonly(count),
-    increment,
-    decrement,
-    reset,
-    double,
-  };
-};

constants/resourceGrid.ts

@@ -1,188 +1,188 @@
-import type { OptColumn } from 'tui-grid/types/options';
-
-export const colDefs: OptColumn[] = [
-  {
-    name: 'seq',
-    header: 'seq',
-    width: 50,
-    align: 'center',
-    hidden: true,
-  },
-  {
-    name: 'parentCode',
-    header: '부모 코드',
-    width: 200,
-    editor: 'text',
-    align: 'center',
-    filter: { type: 'text' },
-  },
-  {
-    name: 'level',
-    header: '레벨',
-    width: 100,
-    editor: 'text',
-    align: 'center',
-    filter: { type: 'number' },
-  },
-  {
-    name: 'code',
-    header: '코드',
-    minWidth: 250,
-    editor: 'text',
-    align: 'center',
-  },
-  {
-    name: 'name',
-    header: '이름',
-    minWidth: 250,
-    editor: 'text',
-    align: 'center',
-  },
-  {
-    name: 'useFlag',
-    header: '사용 여부',
-    width: 150,
-    filter: { type: 'text' },
-    align: 'center',
-  },
-  {
-    name: 'menuFlag',
-    header: '메뉴 여부',
-    width: 150,
-    filter: { type: 'text' },
-    align: 'center',
-  },
-  {
-    name: 'apiFlag',
-    header: 'API 여부',
-    width: 150,
-    filter: { type: 'text' },
-    align: 'center',
-  },
-  {
-    name: 'authExceptionFlag',
-    header: '예외 허용 여부',
-    width: 150,
-    filter: { type: 'text' },
-    align: 'center',
-  },
-  {
-    name: 'sortOrder',
-    header: '표시 순서',
-    width: 200,
-    editor: 'text',
-    align: 'center',
-  },
-  {
-    name: 'uri',
-    header: 'uri',
-    width: 300,
-    editor: 'text',
-    align: 'center',
-  },
-  {
-    name: 'field1',
-    header: '필드1',
-    width: 200,
-    editor: 'text',
-    align: 'center',
-  },
-  {
-    name: 'field2',
-    header: '필드2',
-    width: 200,
-    editor: 'text',
-    align: 'center',
-  },
-  {
-    name: 'field3',
-    header: '필드3',
-    width: 200,
-    editor: 'text',
-    align: 'center',
-  },
-  {
-    name: 'field4',
-    header: '필드4',
-    width: 200,
-    editor: 'text',
-    align: 'center',
-  },
-  {
-    name: 'field5',
-    header: '필드5',
-    width: 200,
-    editor: 'text',
-    align: 'center',
-  },
-  {
-    name: 'userButton1',
-    header: '사용자 버튼1',
-    width: 200,
-    editor: 'text',
-    align: 'center',
-  },
-  {
-    name: 'userButton2',
-    header: '사용자 버튼2',
-    width: 200,
-    editor: 'text',
-    align: 'center',
-  },
-  {
-    name: 'userButton3',
-    header: '사용자 버튼3',
-    width: 200,
-    editor: 'text',
-    align: 'center',
-  },
-  {
-    name: 'userButton4',
-    header: '사용자 버튼4',
-    width: 200,
-    editor: 'text',
-    align: 'center',
-  },
-  {
-    name: 'userButton5',
-    header: '사용자 버튼5',
-    width: 200,
-    editor: 'text',
-    align: 'center',
-  },
-  {
-    name: 'userButton6',
-    header: '사용자 버튼6',
-    width: 200,
-    editor: 'text',
-    align: 'center',
-  },
-  {
-    name: 'userButton7',
-    header: '사용자 버튼7',
-    width: 200,
-    editor: 'text',
-    align: 'center',
-  },
-  {
-    name: 'userButton8',
-    header: '사용자 버튼8',
-    width: 200,
-    editor: 'text',
-    align: 'center',
-  },
-  {
-    name: 'userButton9',
-    header: '사용자 버튼9',
-    width: 200,
-    editor: 'text',
-    align: 'center',
-  },
-  {
-    name: 'userButton10',
-    header: '사용자 버튼10',
-    width: 200,
-    editor: 'text',
-    align: 'center',
-  },
-];
+import type { OptColumn } from 'tui-grid/types/options';
+
+export const colDefs: OptColumn[] = [
+  {
+    name: 'seq',
+    header: 'seq',
+    width: 50,
+    align: 'center',
+    hidden: true,
+  },
+  {
+    name: 'parentCode',
+    header: '부모 코드',
+    width: 200,
+    editor: 'text',
+    align: 'center',
+    filter: { type: 'text' },
+  },
+  {
+    name: 'level',
+    header: '레벨',
+    width: 100,
+    editor: 'text',
+    align: 'center',
+    filter: { type: 'number' },
+  },
+  {
+    name: 'code',
+    header: '코드',
+    minWidth: 250,
+    editor: 'text',
+    align: 'center',
+  },
+  {
+    name: 'name',
+    header: '이름',
+    minWidth: 250,
+    editor: 'text',
+    align: 'center',
+  },
+  {
+    name: 'useFlag',
+    header: '사용 여부',
+    width: 150,
+    filter: { type: 'text' },
+    align: 'center',
+  },
+  {
+    name: 'menuFlag',
+    header: '메뉴 여부',
+    width: 150,
+    filter: { type: 'text' },
+    align: 'center',
+  },
+  {
+    name: 'apiFlag',
+    header: 'API 여부',
+    width: 150,
+    filter: { type: 'text' },
+    align: 'center',
+  },
+  {
+    name: 'authExceptionFlag',
+    header: '예외 허용 여부',
+    width: 150,
+    filter: { type: 'text' },
+    align: 'center',
+  },
+  {
+    name: 'sortOrder',
+    header: '표시 순서',
+    width: 200,
+    editor: 'text',
+    align: 'center',
+  },
+  {
+    name: 'uri',
+    header: 'uri',
+    width: 300,
+    editor: 'text',
+    align: 'center',
+  },
+  {
+    name: 'field1',
+    header: '필드1',
+    width: 200,
+    editor: 'text',
+    align: 'center',
+  },
+  {
+    name: 'field2',
+    header: '필드2',
+    width: 200,
+    editor: 'text',
+    align: 'center',
+  },
+  {
+    name: 'field3',
+    header: '필드3',
+    width: 200,
+    editor: 'text',
+    align: 'center',
+  },
+  {
+    name: 'field4',
+    header: '필드4',
+    width: 200,
+    editor: 'text',
+    align: 'center',
+  },
+  {
+    name: 'field5',
+    header: '필드5',
+    width: 200,
+    editor: 'text',
+    align: 'center',
+  },
+  {
+    name: 'userButton1',
+    header: '사용자 버튼1',
+    width: 200,
+    editor: 'text',
+    align: 'center',
+  },
+  {
+    name: 'userButton2',
+    header: '사용자 버튼2',
+    width: 200,
+    editor: 'text',
+    align: 'center',
+  },
+  {
+    name: 'userButton3',
+    header: '사용자 버튼3',
+    width: 200,
+    editor: 'text',
+    align: 'center',
+  },
+  {
+    name: 'userButton4',
+    header: '사용자 버튼4',
+    width: 200,
+    editor: 'text',
+    align: 'center',
+  },
+  {
+    name: 'userButton5',
+    header: '사용자 버튼5',
+    width: 200,
+    editor: 'text',
+    align: 'center',
+  },
+  {
+    name: 'userButton6',
+    header: '사용자 버튼6',
+    width: 200,
+    editor: 'text',
+    align: 'center',
+  },
+  {
+    name: 'userButton7',
+    header: '사용자 버튼7',
+    width: 200,
+    editor: 'text',
+    align: 'center',
+  },
+  {
+    name: 'userButton8',
+    header: '사용자 버튼8',
+    width: 200,
+    editor: 'text',
+    align: 'center',
+  },
+  {
+    name: 'userButton9',
+    header: '사용자 버튼9',
+    width: 200,
+    editor: 'text',
+    align: 'center',
+  },
+  {
+    name: 'userButton10',
+    header: '사용자 버튼10',
+    width: 200,
+    editor: 'text',
+    align: 'center',
+  },
+];

layouts/default.vue

@@ -19,9 +19,9 @@
 </template>
 
 <script setup lang="ts">
-import AppHeader from "../components/layout/AppHeader.vue";
-import SubMenuBar from "../components/layout/SubMenuBar.vue";
-import TabBar from "../components/layout/TabBar.vue";
+import AppHeader from "../components/layout/navigation/AppHeader.vue";
+import SubMenuBar from "../components/layout/navigation/SubMenuBar.vue";
+import TabBar from "../components/layout/navigation/TabBar.vue";
 import { ref, computed } from "vue";
 import { useTabsStore } from "../stores/tab";
 import { usePermissionsStore } from "~/stores/permissions";

nuxt.config.ts

@@ -11,18 +11,7 @@ export default defineNuxtConfig({
     "@nuxtjs/tailwindcss",
   ],
   piniaPluginPersistedstate: {
-    storage: 'localStorage',
-  },
-  app: {
-    head: {
-      link: [
-        {
-          rel: "stylesheet",
-          href: "https://fonts.googleapis.com/icon?family=Material+Icons",
-        },
-      ],
-      //script: [{ src: "/dist/igv.js", defer: true }],
-    },
+    storage: "localStorage",
   },
   vite: {
     optimizeDeps: {
@@ -49,6 +38,8 @@ export default defineNuxtConfig({
   },
   plugins: ["~/plugins/vue3-tui-grid.client.ts"],
   components: [
-    { path: "~/components", pathPrefix: false }, // 경로 접두사 제거
+    { path: "~/components/base", pathPrefix: false }, // @base/ 접두사 제거
+    { path: "~/components/layout", pathPrefix: false }, // @layout/ 접두사 제거
+    { path: "~/components/domain", pathPrefix: true }, // @domain/ 접두사 유지
   ],
 });

pages/[tabId]/admin/resource.vue

@@ -1,41 +1,36 @@
 <template>
-    <ContentsWrapper>
-        <template #actions>
-            <button @click="onAddClick">추가</button>
-            <button @click="onUpdateClick">저장</button>
-        </template>
-        <input type="text" >
-        <ToastGrid  
-            ref="grid1Ref"
-            :data="data"
-            :columns="colDefs"
-        />  
-    </ContentsWrapper>
+  <ContentsWrapper>
+    <template #actions>
+      <button @click="onAddClick">추가</button>
+      <button @click="onUpdateClick">저장</button>
+    </template>
+    <input type="text" />
+    <ToastGrid ref="grid1Ref" :data="data" :columns="colDefs" />
+  </ContentsWrapper>
 </template>
-  
+
 <script setup lang="ts">
-import {colDefs} from '../../../composables/grids/resourceGrid'
+import { colDefs } from "../../../constants/resourceGrid";
 
 definePageMeta({
-    title: '리소스 관리'
-})
+  title: "리소스 관리",
+});
 
-const data = [{}]
+const data = [{}];
 
 const grid1Ref = ref();
 
 onMounted(async () => {
-  await nextTick() // DOM 및 컴포넌트 렌더링 완료 대기
-  grid1Ref.value?.api()?.setBodyHeight('700')
-})
+  await nextTick(); // DOM 및 컴포넌트 렌더링 완료 대기
+  grid1Ref.value?.api()?.setBodyHeight("700");
+});
 
 function onAddClick() {
-  grid1Ref.value?.api()?.appendRow({});  
+  grid1Ref.value?.api()?.appendRow({});
 }
 
 function onUpdateClick() {
-   //grid1Ref.value?.clearGrid();
-  console.log(grid1Ref.value?.api()?.getModifiedRows());  
+  //grid1Ref.value?.clearGrid();
+  console.log(grid1Ref.value?.api()?.getModifiedRows());
 }
 </script>
-  

pages/[tabId]/index.vue

@@ -23,10 +23,6 @@
             }}</span
             >님!
           </p>
-          <p class="text-sm text-gray-600">
-            {{ userStore.isAdmin ? "관리자" : "사용자" }} 권한으로
-            로그인되었습니다.
-          </p>
           <p class="text-sm text-gray-600">
             <button
               class="mr-2 bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded"
@@ -113,9 +109,6 @@
 </template>
 
 <script setup lang="ts">
-import { useUserStore } from "~/stores/user";
-
-// 페이지 메타데이터 설정
 definePageMeta({
   title: "Home",
   description: "Welcome to our Nuxt.js application",

pages/[tabId]/test/culture-graph-tab.vue

@@ -28,5 +28,5 @@
   </div>
 </template>
 <script setup lang="ts">
-import BatchTabs from "~/components/BatchTabs.vue";
+import BatchTabs from "~/components/domain/cultureGraph/BatchTabs.vue";
 </script>

pages/[tabId]/test/culture-graph.vue

@@ -146,7 +146,7 @@
 <script setup lang="ts">
 import { ref, onMounted, watch, computed, onUnmounted } from "vue";
 import * as echarts from "echarts";
-import CustomContextMenu from "~/components/CustomContextMenu.vue";
+import CustomContextMenu from "~/components/domain/cultureGraph/CustomContextMenu.vue";
 
 // 타입 인터페이스 정의
 interface YAxis {

pages/[tabId]/test/permission-test.vue

@@ -547,10 +547,6 @@
 </template>
 
 <script setup lang="ts">
-// 컴포넌트 import
-import PermissionButton from "~/components/base/PermissionButton.vue";
-
-// 페이지 메타데이터 설정
 definePageMeta({
   title: "권한 시스템 테스트",
   description:

pages/[tabId]/tui.vue

@@ -1,17 +1,29 @@
-<script setup lang="ts">
-import ToastGrid from '@/components/base/ToastGrid.vue';
+<template>
+  <div>
+    <button @click="onClearClick">clear api</button>
+    <br />
+    <button @click="onUpdateClick">update list</button>
+    <ToastGrid
+      ref="grid1Ref"
+      :data="data"
+      :columns="columns"
+      :tree-column-options="treeColumnOptions"
+    />
+  </div>
+</template>
 
+<script setup lang="ts">
 const data = [
   {
     id: 549731,
-    name: 'Beautiful Lies',
-    artist: 'Birdy',
-    release: '2016.03.26',
-    type: 'Deluxe',
-    typeCode: '1',
-    genre: 'Pop',
-    genreCode: '1',
-    grade: '4',
+    name: "Beautiful Lies",
+    artist: "Birdy",
+    release: "2016.03.26",
+    type: "Deluxe",
+    typeCode: "1",
+    genre: "Pop",
+    genreCode: "1",
+    grade: "4",
     price: 10000,
     downloadCount: 1000,
     listenCount: 5000,
@@ -21,14 +33,14 @@ const data = [
     _children: [
       {
         id: 491379,
-        name: 'Chaos And The Calm',
-        artist: 'James Bay',
-        release: '2015.03.23',
-        type: 'EP',
-        typeCode: '2',
-        genre: 'Pop,Rock',
-        genreCode: '1,2',
-        grade: '5',
+        name: "Chaos And The Calm",
+        artist: "James Bay",
+        release: "2015.03.23",
+        type: "EP",
+        typeCode: "2",
+        genre: "Pop,Rock",
+        genreCode: "1,2",
+        grade: "5",
         price: 12000,
         downloadCount: 1000,
         listenCount: 5000,
@@ -36,14 +48,14 @@ const data = [
       },
       {
         id: 498896,
-        name: 'The Magic Whip',
-        artist: 'Blur',
-        release: '2015.04.27',
-        type: 'EP',
-        typeCode: '2',
-        genre: 'Rock',
-        genreCode: '2',
-        grade: '3',
+        name: "The Magic Whip",
+        artist: "Blur",
+        release: "2015.04.27",
+        type: "EP",
+        typeCode: "2",
+        genre: "Rock",
+        genreCode: "2",
+        grade: "3",
         price: 15000,
         downloadCount: 1000,
         listenCount: 5000,
@@ -54,13 +66,13 @@ const data = [
       {
         id: 450720,
         name: "I'm Not The Only One",
-        artist: 'Sam Smith',
-        release: '2014.09.15',
-        type: 'Single',
-        typeCode: '3',
-        genre: 'Pop,R&B',
-        genreCode: '1,3',
-        grade: '4',
+        artist: "Sam Smith",
+        release: "2014.09.15",
+        type: "Single",
+        typeCode: "3",
+        genre: "Pop,R&B",
+        genreCode: "1,3",
+        grade: "4",
         price: 8000,
         downloadCount: 1000,
         listenCount: 5000,
@@ -70,14 +82,14 @@ const data = [
         _children: [
           {
             id: 587871,
-            name: 'This Is Acting',
-            artist: 'Sia',
-            release: '2016.10.22',
-            type: 'EP',
-            typeCode: '2',
-            genre: 'Pop',
-            genreCode: '1',
-            grade: '3',
+            name: "This Is Acting",
+            artist: "Sia",
+            release: "2016.10.22",
+            type: "EP",
+            typeCode: "2",
+            genre: "Pop",
+            genreCode: "1",
+            grade: "3",
             price: 20000,
             downloadCount: 1000,
             listenCount: 5000,
@@ -87,14 +99,14 @@ const data = [
             _children: [
               {
                 id: 490500,
-                name: 'Blue Skies',
-                release: '2015.03.18',
-                artist: 'Lenka',
-                type: 'Single',
-                typeCode: '3',
-                genre: 'Pop,Rock',
-                genreCode: '1,2',
-                grade: '5',
+                name: "Blue Skies",
+                release: "2015.03.18",
+                artist: "Lenka",
+                type: "Single",
+                typeCode: "3",
+                genre: "Pop,Rock",
+                genreCode: "1,2",
+                grade: "5",
                 price: 6000,
                 downloadCount: 1000,
                 listenCount: 5000,
@@ -102,27 +114,27 @@ const data = [
               {
                 id: 317659,
                 name: "I Won't Give Up",
-                artist: 'Jason Mraz',
-                release: '2012.01.03',
-                type: 'Single',
-                typeCode: '3',
-                genre: 'Pop',
-                genreCode: '1',
-                grade: '2',
+                artist: "Jason Mraz",
+                release: "2012.01.03",
+                type: "Single",
+                typeCode: "3",
+                genre: "Pop",
+                genreCode: "1",
+                grade: "2",
                 price: 7000,
                 downloadCount: 1000,
                 listenCount: 5000,
               },
               {
                 id: 583551,
-                name: 'Following My Intuition',
-                artist: 'Craig David',
-                release: '2016.10.01',
-                type: 'Deluxe',
-                typeCode: '1',
-                genre: 'R&B,Electronic',
-                genreCode: '3,4',
-                grade: '5',
+                name: "Following My Intuition",
+                artist: "Craig David",
+                release: "2016.10.01",
+                type: "Deluxe",
+                typeCode: "1",
+                genre: "R&B,Electronic",
+                genreCode: "3,4",
+                grade: "5",
                 price: 15000,
                 downloadCount: 1000,
                 listenCount: 5000,
@@ -135,42 +147,42 @@ const data = [
   },
   {
     id: 436461,
-    name: 'X',
-    artist: 'Ed Sheeran',
-    release: '2014.06.24',
-    type: 'Deluxe',
-    typeCode: '1',
-    genre: 'Pop',
-    genreCode: '1',
-    grade: '5',
+    name: "X",
+    artist: "Ed Sheeran",
+    release: "2014.06.24",
+    type: "Deluxe",
+    typeCode: "1",
+    genre: "Pop",
+    genreCode: "1",
+    grade: "5",
     price: 20000,
     downloadCount: 1000,
     listenCount: 5000,
   },
   {
     id: 295651,
-    name: 'Moves Like Jagger',
-    release: '2011.08.08',
-    artist: 'Maroon5',
-    type: 'Single',
-    typeCode: '3',
-    genre: 'Pop,Rock',
-    genreCode: '1,2',
-    grade: '2',
+    name: "Moves Like Jagger",
+    release: "2011.08.08",
+    artist: "Maroon5",
+    type: "Single",
+    typeCode: "3",
+    genre: "Pop,Rock",
+    genreCode: "1,2",
+    grade: "2",
     price: 7000,
     downloadCount: 1000,
     listenCount: 5000,
   },
   {
     id: 541713,
-    name: 'A Head Full Of Dreams',
-    artist: 'Coldplay',
-    release: '2015.12.04',
-    type: 'Deluxe',
-    typeCode: '1',
-    genre: 'Rock',
-    genreCode: '2',
-    grade: '3',
+    name: "A Head Full Of Dreams",
+    artist: "Coldplay",
+    release: "2015.12.04",
+    type: "Deluxe",
+    typeCode: "1",
+    genre: "Rock",
+    genreCode: "2",
+    grade: "3",
     price: 25000,
     downloadCount: 1000,
     listenCount: 5000,
@@ -180,28 +192,28 @@ const data = [
     _children: [
       {
         id: 294574,
-        name: '4',
-        artist: 'Beyoncé',
-        release: '2011.07.26',
-        type: 'Deluxe',
-        typeCode: '1',
-        genre: 'Pop',
-        genreCode: '1',
-        grade: '3',
+        name: "4",
+        artist: "Beyoncé",
+        release: "2011.07.26",
+        type: "Deluxe",
+        typeCode: "1",
+        genre: "Pop",
+        genreCode: "1",
+        grade: "3",
         price: 12000,
         downloadCount: 1000,
         listenCount: 5000,
       },
       {
         id: 265289,
-        name: '21',
-        artist: 'Adele',
-        release: '2011.01.21',
-        type: 'Deluxe',
-        typeCode: '1',
-        genre: 'Pop,R&B',
-        genreCode: '1,3',
-        grade: '5',
+        name: "21",
+        artist: "Adele",
+        release: "2011.01.21",
+        type: "Deluxe",
+        typeCode: "1",
+        genre: "Pop,R&B",
+        genreCode: "1,3",
+        grade: "5",
         price: 15000,
         downloadCount: 1000,
         listenCount: 5000,
@@ -210,70 +222,70 @@ const data = [
   },
   {
     id: 555871,
-    name: 'Warm On A Cold Night',
-    artist: 'HONNE',
-    release: '2016.07.22',
-    type: 'EP',
-    typeCode: '1',
-    genre: 'R&B,Electronic',
-    genreCode: '3,4',
-    grade: '4',
+    name: "Warm On A Cold Night",
+    artist: "HONNE",
+    release: "2016.07.22",
+    type: "EP",
+    typeCode: "1",
+    genre: "R&B,Electronic",
+    genreCode: "3,4",
+    grade: "4",
     price: 11000,
     downloadCount: 1000,
     listenCount: 5000,
   },
   {
     id: 550571,
-    name: 'Take Me To The Alley',
-    artist: 'Gregory Porter',
-    release: '2016.09.02',
-    type: 'Deluxe',
-    typeCode: '1',
-    genre: 'Jazz',
-    genreCode: '5',
-    grade: '3',
+    name: "Take Me To The Alley",
+    artist: "Gregory Porter",
+    release: "2016.09.02",
+    type: "Deluxe",
+    typeCode: "1",
+    genre: "Jazz",
+    genreCode: "5",
+    grade: "3",
     price: 30000,
     downloadCount: 1000,
     listenCount: 5000,
   },
   {
     id: 544128,
-    name: 'Make Out',
-    artist: 'LANY',
-    release: '2015.12.11',
-    type: 'EP',
-    typeCode: '2',
-    genre: 'Electronic',
-    genreCode: '4',
-    grade: '2',
+    name: "Make Out",
+    artist: "LANY",
+    release: "2015.12.11",
+    type: "EP",
+    typeCode: "2",
+    genre: "Electronic",
+    genreCode: "4",
+    grade: "2",
     price: 12000,
     downloadCount: 1000,
     listenCount: 5000,
   },
   {
     id: 366374,
-    name: 'Get Lucky',
-    artist: 'Daft Punk',
-    release: '2013.04.23',
-    type: 'Single',
-    typeCode: '3',
-    genre: 'Pop,Funk',
-    genreCode: '1,5',
-    grade: '3',
+    name: "Get Lucky",
+    artist: "Daft Punk",
+    release: "2013.04.23",
+    type: "Single",
+    typeCode: "3",
+    genre: "Pop,Funk",
+    genreCode: "1,5",
+    grade: "3",
     price: 9000,
     downloadCount: 1000,
     listenCount: 5000,
   },
   {
     id: 8012747,
-    name: 'Valtari',
-    artist: 'Sigur Rós',
-    release: '2012.05.31',
-    type: 'EP',
-    typeCode: '3',
-    genre: 'Rock',
-    genreCode: '2',
-    grade: '5',
+    name: "Valtari",
+    artist: "Sigur Rós",
+    release: "2012.05.31",
+    type: "EP",
+    typeCode: "3",
+    genre: "Rock",
+    genreCode: "2",
+    grade: "5",
     price: 10000,
     downloadCount: 1000,
     listenCount: 5000,
@@ -281,43 +293,33 @@ const data = [
 ];
 
 const columns = [
-  { header: 'Name', name: 'name', width: 300 },
-  { header: 'Artist', name: 'artist' },
-  { header: 'Type', name: 'type' },
-  { header: 'Release', name: 'release' },
-  { header: 'Genre', name: 'genre' },
-  { header: 'checkbox', name: 'checkbox', editor:{ type: 'checkbox', options: {
-          listItems: [
-            { text: 'true', value: true },
-          ]
-  }}}
+  { header: "Name", name: "name", width: 300 },
+  { header: "Artist", name: "artist" },
+  { header: "Type", name: "type" },
+  { header: "Release", name: "release" },
+  { header: "Genre", name: "genre" },
+  {
+    header: "checkbox",
+    name: "checkbox",
+    editor: {
+      type: "checkbox",
+      options: {
+        listItems: [{ text: "true", value: true }],
+      },
+    },
+  },
 ];
-const treeColumnOptions = { name: 'name', useCascadingCheckbox: true };
+const treeColumnOptions = { name: "name", useCascadingCheckbox: true };
 
 const grid1Ref = ref();
 
 function onClearClick() {
-   //grid1Ref.value?.clearGrid();
-  grid1Ref.value?.api()?.clear();  
+  //grid1Ref.value?.clearGrid();
+  grid1Ref.value?.api()?.clear();
 }
 
 function onUpdateClick() {
-   //grid1Ref.value?.clearGrid();
-  console.log(grid1Ref.value?.api()?.getModifiedRows());  
+  //grid1Ref.value?.clearGrid();
+  console.log(grid1Ref.value?.api()?.getModifiedRows());
 }
-
 </script>
-
-<template>
-  <div>
-    <button @click="onClearClick">clear api</button>
-    <br>
-    <button @click="onUpdateClick">update list</button>
-  <ToastGrid  
-    ref="grid1Ref"
-    :data="data"
-    :columns="columns"
-    :treeColumnOptions="treeColumnOptions"
-  />  
-  </div>
-</template>

pages/index.vue

@@ -23,10 +23,6 @@
             }}</span
             >님!
           </p>
-          <p class="text-sm text-gray-600">
-            {{ userStore.isAdmin ? "관리자" : "사용자" }} 권한으로
-            로그인되었습니다.
-          </p>
         </div>
         <div
           v-else
@@ -99,9 +95,6 @@
 </template>
 
 <script setup lang="ts">
-import { useUserStore } from "~/stores/user";
-
-// 페이지 메타데이터 설정
 definePageMeta({
   title: "Home",
   description: "Welcome to our Nuxt.js application",

pages/login.vue

@@ -54,11 +54,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useRouter } from "vue-router";
-import { useUserStore } from "~/stores/user";
-
-// auth 레이아웃 사용
 definePageMeta({
   layout: "auth",
 });
@@ -67,7 +62,6 @@ const userId = ref("");
 const password = ref("");
 const errorMessage = ref("");
 const isLoading = ref(false);
-const router = useRouter();
 const userStore = useUserStore();
 
 // 이미 로그인된 경우 홈으로 리다이렉션

pages/register.vue

@@ -66,11 +66,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useRouter } from "vue-router";
-import { useUserStore } from "~/stores/user";
-
-// auth 레이아웃 사용
 definePageMeta({
   layout: "auth",
 });
@@ -81,7 +76,6 @@ const confirmPassword = ref("");
 const errorMessage = ref("");
 const successMessage = ref("");
 const isLoading = ref(false);
-const router = useRouter();
 const userStore = useUserStore();
 
 // 이미 로그인된 경우 홈으로 리다이렉션

stores/counter.ts

@@ -1,27 +0,0 @@
-export const useCounterStore = defineStore("counter", () => {
-  const count = ref(0);
-  const name = ref("Counter Store");
-
-  const doubleCount = computed(() => count.value * 2);
-
-  function increment() {
-    count.value++;
-  }
-
-  function decrement() {
-    count.value--;
-  }
-
-  function reset() {
-    count.value = 0;
-  }
-
-  return {
-    count,
-    name,
-    doubleCount,
-    increment,
-    decrement,
-    reset,
-  };
-});