From f801e876d292b7ed48789843db7f32396e3580cc Mon Sep 17 00:00:00 2001
From: ikju1223 <ikju1223@gmail.com>
Date: Fri, 22 Aug 2025 14:01:30 +0900
Subject: [PATCH] =?UTF-8?q?tab,=20component,=20popup=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                   | 114 +++++++++++++-
 components/{ => base}/AppButton.vue         |   0
 components/{ => base}/ToastGrid.vue         |   3 +
 components/base/customPopup.vue             |  28 ++++
 components/{ => layout}/AppHeader.vue       |   0
 components/{ => layout}/ContentsWrapper.vue |   0
 components/layout/PopupWrapper.vue          |  81 ++++++++++
 composables/popupManager.ts                 |  15 ++
 layouts/default.vue                         | 166 ++++++++++++--------
 nuxt.config.ts                              |   5 +-
 pages/{ => [tabId]}/admin/codes.vue         |   0
 pages/{ => [tabId]}/admin/logs.vue          |   0
 pages/{ => [tabId]}/admin/programs.vue      |   0
 pages/{ => [tabId]}/admin/resource.vue      |   2 +-
 pages/[tabId]/index.vue                     | 123 +++++++++++++++
 pages/[tabId]/sampleList.vue                |  20 +++
 pages/{ => [tabId]}/tui.vue                 |   2 +-
 pages/index.vue                             |   8 +
 pages/popup/addSamplePopup.vue              |  38 +++++
 stores/router.client.ts                     |   7 +
 stores/tab.ts                               |  76 ++++++---
 stores/user.ts                              |  82 ++++------
 22 files changed, 625 insertions(+), 145 deletions(-)
 rename components/{ => base}/AppButton.vue (100%)
 rename components/{ => base}/ToastGrid.vue (91%)
 create mode 100644 components/base/customPopup.vue
 rename components/{ => layout}/AppHeader.vue (100%)
 rename components/{ => layout}/ContentsWrapper.vue (100%)
 create mode 100644 components/layout/PopupWrapper.vue
 create mode 100644 composables/popupManager.ts
 rename pages/{ => [tabId]}/admin/codes.vue (100%)
 rename pages/{ => [tabId]}/admin/logs.vue (100%)
 rename pages/{ => [tabId]}/admin/programs.vue (100%)
 rename pages/{ => [tabId]}/admin/resource.vue (88%)
 create mode 100644 pages/[tabId]/index.vue
 create mode 100644 pages/[tabId]/sampleList.vue
 rename pages/{ => [tabId]}/tui.vue (94%)
 create mode 100644 pages/popup/addSamplePopup.vue
 create mode 100644 stores/router.client.ts

diff --git a/README.md b/README.md
index b7c180f..908fa49 100644
--- a/README.md
+++ b/README.md
@@ -5,8 +5,25 @@
  - compnenets 아래의 .vue는 자동 인식(template 내부에서만, 별도 script에서 필요시 선언 필요)
 
 
-## 공통 페이지 구성
+# 구성 요소
+## components 구성
+```
+components
+ |- base      // 기본 요소(button, input, grid, popup)
+ |- layout    // 레이아웃 요소(header, footer, sidebar, wrapper)
+ |- module    // 특정 기능 단위(card, form, list)
+ |- pages     // 특정 페이지 전용
+```
 
+## page 구성
+```
+pages         // 단일 화면(비 탭 요소)
+|- [tabId]    // 탭 요소
+    |- admin  // 관리자 페이지
+```
+
+# page(페이지) 생성 요소
+## 공통 페이지 구성
 ```
 <template>
     <ContentsWrapper> <!-- wrapper(title) 추가 -->
@@ -27,6 +44,7 @@
 </script>
 ```
 
+
 ## Toast(Tui) Grid 사용법
 한글 설명: https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.grid/docs/v4.0-migration-guide-kor.md
 
@@ -185,3 +203,97 @@ const treeColumnOptions = { name: 'name', useCascadingCheckbox: true };
 const grid1Ref = ref();
 </script>
 ```
+
+## 팝업 구성
+
+```
+┌─────────────────────────────┐
+│      customPopup.vue        │
+│ ┌─────────────────────────┐ │
+│ │      poupWrapper.vue    │ │
+│ │ ┌─────────────────────┐ │ │
+│ │ │        <slot>       │ │ │
+│ │ └─────────────────────┘ │ │
+│ └─────────────────────────┘ │
+└─────────────────────────────┘
+
+
+customPopup.vue - 기본 빈 팝업
+poupWrapper.vue - top, middle, bottom으로 구성된 팝업 구조
+
+1. 구조에 따라 customPopup, poupWrapper 기반으로 팝업 생성(/pages/popup/*.vue)
+2. 사용할 페이지에서 생성한 팝업 추가
+```
+
+
+### 팝업 생성
+```
+// examplePopup.vue
+<template>
+  <div>
+    <!--PopupWrapper 구성, 크기 지정, 숨김 여부 지정 -->
+    <PopupWrapper width="1000px" height="600px" v-model:show="show">
+      <template #top>
+        <h2>팝업 제목</h2>
+      </template>
+  
+      <template #middle>
+        <!-- 팝업 본문 -->
+      </template>
+  
+      <template #bottom>
+        <button>추가 버튼</button>
+        <!-- 닫기 버튼은 자동 생성 -->
+      </template>
+    </PopupWrapper>
+  </div>
+</template>
+  
+<script setup lang="ts">
+  // 숨김 여부 지정
+  const show = defineModel('show', {type: Boolean, default:false});
+</script>
+```
+
+### 팝업 사용
+```
+<template>
+  <button @click="popupShow = true">팝업 실행</button>
+  <examplePopup v-model:show="popupShow" />
+</template>
+<script setup lang="ts">
+  import addSamplePopup from '../popup/examplePopup.vue';
+  const popupShow = ref(false);
+</script>
+```
+
+
+## 탭 구성
+```
+// layouts/default.vue
+// stores/tab.ts
+
+import { useTabsStore } from "../stores/tab";
+const tabsStore = useTabsStore();
+
+// 탭추가 (최대 10개)
+tabsStore.addTab();
+
+// 탭 갱신
+tabsStore.updateActiveTab({ label, to, componentName});
+
+// 탭 변경
+tabsStore.setActiveTab(key);
+
+// 탭 생성
+<div
+  v-for="tab in tabsStore.tabs"
+  :key="tab.key"
+  class="tab-item"
+  :class="{ active: tabsStore.activeTab === tab.key }"
+  @click="tabsStore.setActiveTab(tab.key);"
+>
+  {{ tab.label }}
+  <span v-show="tabsStore.activeTab !== tab.key" class="close-btn" @click.stop="tabsStore.removeTab(tab.key)"> × </span>
+</div>
+```
\ No newline at end of file
diff --git a/components/AppButton.vue b/components/base/AppButton.vue
similarity index 100%
rename from components/AppButton.vue
rename to components/base/AppButton.vue
diff --git a/components/ToastGrid.vue b/components/base/ToastGrid.vue
similarity index 91%
rename from components/ToastGrid.vue
rename to components/base/ToastGrid.vue
index f53482f..11f3933 100644
--- a/components/ToastGrid.vue
+++ b/components/base/ToastGrid.vue
@@ -11,6 +11,8 @@ interface TreeColumnOptions {
 
 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
@@ -43,5 +45,6 @@ function clearGrid() {
       :treeColumnOptions="props.treeColumnOptions"
       :rowHeaders="props.rowHeaders"
       :rowKey="props.rowKey"
+      :selectionUnit="selectionUnit"
     />
 </template>
diff --git a/components/base/customPopup.vue b/components/base/customPopup.vue
new file mode 100644
index 0000000..5d3f600
--- /dev/null
+++ b/components/base/customPopup.vue
@@ -0,0 +1,28 @@
+<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>
diff --git a/components/AppHeader.vue b/components/layout/AppHeader.vue
similarity index 100%
rename from components/AppHeader.vue
rename to components/layout/AppHeader.vue
diff --git a/components/ContentsWrapper.vue b/components/layout/ContentsWrapper.vue
similarity index 100%
rename from components/ContentsWrapper.vue
rename to components/layout/ContentsWrapper.vue
diff --git a/components/layout/PopupWrapper.vue b/components/layout/PopupWrapper.vue
new file mode 100644
index 0000000..a67fdc5
--- /dev/null
+++ b/components/layout/PopupWrapper.vue
@@ -0,0 +1,81 @@
+<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>
diff --git a/composables/popupManager.ts b/composables/popupManager.ts
new file mode 100644
index 0000000..49149b0
--- /dev/null
+++ b/composables/popupManager.ts
@@ -0,0 +1,15 @@
+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 }
+}
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index cbe5228..9813f46 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,52 +1,95 @@
 <script setup lang="ts">
-import AppHeader from "../components/AppHeader.vue";
-import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
-import { useRouter, useRoute } from "vue-router";
+import AppHeader from "../components/layout/AppHeader.vue";
+import { ref, computed, watch  } from "vue";
+import { useRouter } from "vue-router";
 import { useTabsStore } from "../stores/tab";
 
 const router = useRouter();
-const route = useRoute();
 const activeMenu = ref("home");
 const showSubmenuBar = ref(false);
 
 const tabsStore = useTabsStore();
 
-// HOME 메뉴가 선택되었을 때 최상단 경로로 이동
+// 메뉴 클릭 시 홈 이동
 watch(activeMenu, (newValue) => {
-  if (newValue === "home") {
-    router.push("/");
-  }
-});
-
-watch(route, () => {
-  showSubmenuBar.value = false;
+  if (newValue === "home") router.push("/");
 });
 
 // 서브메뉴 정의
 const subMenus = computed(() => {
   if (activeMenu.value === "test") {
-    return [
-      { key: "test", label: "테스트", to: "/test/test01" },
-      { key: "igv", label: "ivg", to: "/test/test02" },
-      { key: "igv2", label: "ivg2", to: "/test/igv2" },
-      { key: "pathway", label: "pathway", to: "/test/pathway" },
-      { key: "pathway2", label: "pathway2", to: "/test/pathway2" },
-      { key: "pathway3", label: "pathway3", to: "/test/pathway3" },
-      { key: "pathway4", label: "pathway4", to: "/cultureGraph/pathway4" },
-      { key: "pathwayjson", label: "pathwayjson", to: "/test/pathwayjson" },
-      { key: "cultureGraph", label: "배양그래프", to: "/test/culture-graph" },
-      { key: "cultureGraphMulti", label: "배양그래프 멀티", to: "/test/culture-graph-multi" },
-      { key: "cultureGraphTab", label: "배양그래프 탭", to: "/test/culture-graph-tab" },
-      { key: "tui-grid", label: "tui-grid", to: "/tui" },
-      { key: "리소스", label: "리소스", to: "/admin/resource" },
-    ];
-  } else if (activeMenu.value === "admin") {
-    return [
-      { key: "logs", label: "접속기록", to: "/admin/logs" },
-      { key: "codes", label: "공통코드", to: "/admin/codes" },
-      { key: "programs", label: "프로그램", to: "/admin/programs" },
-    ];
-  }
+    return [{
+        key: "test",
+        label: "테스트",
+        to: "/test/test01"
+    }, {
+        key: "igv",
+        label: "ivg",
+        to: "/test/test02"
+    }, {
+        key: "igv2",
+        label: "ivg2",
+        to: "/test/igv2"
+    }, {
+        key: "pathway",
+        label: "pathway",
+        to: "/test/pathway"
+    }, {
+        key: "pathway2",
+        label: "pathway2",
+        to: "/test/pathway2"
+    }, {
+        key: "pathway3",
+        label: "pathway3",
+        to: "/test/pathway3"
+    }, {
+        key: "pathway4",
+        label: "pathway4",
+        to: "/cultureGraph/pathway4"
+    }, {
+        key: "pathwayjson",
+        label: "pathwayjson",
+        to: "/test/pathwayjson"
+    }, {
+        key: "cultureGraph",
+        label: "배양그래프",
+        to: "/test/culture-graph"
+    }, {
+        key: "cultureGraphMulti",
+        label: "배양그래프 멀티",
+        to: "/test/culture-graph-multi"
+    }, {
+        key: "cultureGraphTab",
+        label: "배양그래프 탭",
+        to: "/test/culture-graph-tab"
+    }, {
+        key: "tui-grid",
+        label: "tui-grid",
+        to: "/tui"
+    }, {
+        key: "리소스",
+        label: "리소스",
+        to: "/admin/resource"
+    }, {
+        key: "sample",
+        label: "sample",
+        to: "/sampleList"
+    }, ];
+} else if (activeMenu.value === "ADMIN") {
+    return [{
+        key: "logs",
+        label: "접속기록",
+        to: "/admin/logs"
+    }, {
+        key: "codes",
+        label: "공통코드",
+        to: "/admin/codes"
+    }, {
+        key: "programs",
+        label: "프로그램",
+        to: "/admin/programs"
+    }, ];
+}
   return [];
 });
 
@@ -55,29 +98,19 @@ function onMenuClick(menu: string) {
   showSubmenuBar.value = true;
 }
 
-// 서브메뉴 클릭 시 탭 추가
-function onSubMenuClick(sub: { key: string; label: string; to: string, componentName:string }) {
-  tabsStore.addTab(sub);
-  router.push(sub.to);
+// ✅ 서브메뉴 클릭 → 현재 활성 탭 내용만 변경
+function onSubMenuClick(sub: { key: string; label: string; to: string; componentName: string }) {
+  tabsStore.updateActiveTab(sub);
+  // const activeKey = tabsStore.activeTab;
+  // router.push(`/${activeKey}${sub.to}`);
 }
 
-function handleClickOutsideSubmenuBar(event: MouseEvent) {
-  const submenu = document.querySelector(".submenu-bar");
-  if (
-    submenu &&
-    !submenu.contains(event.target as Node) &&
-    !(event.target as HTMLElement).classList.contains("menu-btn")
-  ) {
-    showSubmenuBar.value = false;
-  }
+// ✅ 새 탭 추가 버튼
+function addNewTab() {
+  tabsStore.addTab();
+  // router.push(`/${key}/`);
 }
 
-onMounted(() => {
-  window.addEventListener("click", handleClickOutsideSubmenuBar);
-});
-onBeforeUnmount(() => {
-  window.removeEventListener("click", handleClickOutsideSubmenuBar);
-});
 </script>
 
 <template>
@@ -85,46 +118,41 @@ onBeforeUnmount(() => {
     <AppHeader v-model="activeMenu" @update:model-value="onMenuClick" />
 
     <!-- 서브메뉴 바 -->
-    <nav
-      v-if="subMenus && subMenus.length && showSubmenuBar"
-      class="submenu-bar"
-      @click.stop
-    >
+    <nav v-if="subMenus && subMenus.length && showSubmenuBar" class="submenu-bar" @click.stop>
       <button
         v-for="sub in subMenus"
         :key="sub.key"
         class="submenu-btn"
-        :class="{ active: $route.path === sub.to }"
-        @click="onSubMenuClick({...sub, componentName : sub.key})"
+        @click="onSubMenuClick({ ...sub, componentName: sub.key })"
       >
         {{ sub.label }}
       </button>
     </nav>
-
-    <!-- 동적 탭 바 -->
-    <div v-if="tabsStore.tabs.length" class="tab-bar">
+    <br><br>
+    <!-- 탭 바 -->
+    <div class="tab-bar">
       <div
         v-for="tab in tabsStore.tabs"
         :key="tab.key"
         class="tab-item"
         :class="{ active: tabsStore.activeTab === tab.key }"
-        @click="tabsStore.setActiveTab(tab.key); router.push(tab.to)"
+        @click="tabsStore.setActiveTab(tab.key);"
       >
         {{ tab.label }}
-        <span class="close-btn" @click.stop="tabsStore.removeTab(tab.key)">×</span>
+        <span v-show="tabsStore.activeTab !== tab.key" class="close-btn" @click.stop="tabsStore.removeTab(tab.key)"> × </span>
       </div>
+
+      <!-- ✅ 새 탭 추가 버튼 -->
+      <button class="add-tab-btn" @click="addNewTab">＋</button>
     </div>
 
     <main class="main">
       <slot />
     </main>
-
-    <footer class="footer">
-      <p>&copy; 2024 Nuxt.js App</p>
-    </footer>
   </div>
 </template>
 
+
 <style scoped>
 .layout {
   min-height: 100vh;
diff --git a/nuxt.config.ts b/nuxt.config.ts
index da71411..456d0aa 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -44,5 +44,8 @@ export default defineNuxtConfig({
     shim: false,
     strict: true,
   },
-  plugins: ['~/plugins/vue3-tui-grid.client.ts']
+  plugins: ['~/plugins/vue3-tui-grid.client.ts'],
+  components: [
+    { path: '~/components', pathPrefix: false }, // 경로 접두사 제거
+  ]
 });
diff --git a/pages/admin/codes.vue b/pages/[tabId]/admin/codes.vue
similarity index 100%
rename from pages/admin/codes.vue
rename to pages/[tabId]/admin/codes.vue
diff --git a/pages/admin/logs.vue b/pages/[tabId]/admin/logs.vue
similarity index 100%
rename from pages/admin/logs.vue
rename to pages/[tabId]/admin/logs.vue
diff --git a/pages/admin/programs.vue b/pages/[tabId]/admin/programs.vue
similarity index 100%
rename from pages/admin/programs.vue
rename to pages/[tabId]/admin/programs.vue
diff --git a/pages/admin/resource.vue b/pages/[tabId]/admin/resource.vue
similarity index 88%
rename from pages/admin/resource.vue
rename to pages/[tabId]/admin/resource.vue
index 6d8b12d..78049d9 100644
--- a/pages/admin/resource.vue
+++ b/pages/[tabId]/admin/resource.vue
@@ -14,7 +14,7 @@
 </template>
   
 <script setup lang="ts">
-import {colDefs} from '../../composables/grids/resourceGrid'
+import {colDefs} from '../../../composables/grids/resourceGrid'
 
 definePageMeta({
     title: '리소스 관리'
diff --git a/pages/[tabId]/index.vue b/pages/[tabId]/index.vue
new file mode 100644
index 0000000..31fb64e
--- /dev/null
+++ b/pages/[tabId]/index.vue
@@ -0,0 +1,123 @@
+<template>
+  <div
+    class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4"
+  >
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-8">
+        <h1 class="text-4xl font-bold text-gray-900 mb-4">
+          Integrated Bio Foundry Platform
+        </h1>
+        <p class="text-xl text-gray-600">
+          통합 바이오 파운드리 플랫폼에 오신 것을 환영합니다
+        </p>
+
+        <!-- 사용자 환영 메시지 -->
+        <div
+          v-if="userStore.isLoggedIn"
+          class="mt-6 p-4 bg-white rounded-lg shadow-md inline-block"
+        >
+          <p class="text-lg text-gray-800 mb-2">
+            안녕하세요,
+            <span class="font-semibold text-blue-600">{{
+              userStore.userName
+            }}</span
+            >님!
+          </p>
+          <p class="text-sm text-gray-600">
+            {{ userStore.isAdmin ? "관리자" : "사용자" }} 권한으로
+            로그인되었습니다.
+          </p>
+        </div>
+        <div
+          v-else
+          class="mt-6 p-4 bg-yellow-50 rounded-lg shadow-md inline-block"
+        >
+          <p class="text-lg text-gray-800 mb-2">로그인이 필요합니다</p>
+          <NuxtLink
+            to="/login"
+            class="inline-block mt-2 bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors"
+          >
+            로그인하기
+          </NuxtLink>
+        </div>
+      </div>
+
+      <!-- Tailwind CSS 테스트 섹션 -->
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <div
+          class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow"
+        >
+          <div
+            class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mb-4 mx-auto"
+          >
+            <span class="text-white font-bold">1</span>
+          </div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">Feature 1</h3>
+          <p class="text-gray-600">Tailwind CSS가 정상 작동하고 있습니다!</p>
+        </div>
+
+        <div
+          class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow"
+        >
+          <div
+            class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mb-4 mx-auto"
+          >
+            <span class="text-white font-bold">2</span>
+          </div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">Feature 2</h3>
+          <p class="text-gray-600">반응형 디자인이 적용되었습니다.</p>
+        </div>
+
+        <div
+          class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow"
+        >
+          <div
+            class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center mb-4 mx-auto"
+          >
+            <span class="text-white font-bold">3</span>
+          </div>
+          <h3 class="text-lg font-semibold text-gray-900 mb-2">Feature 3</h3>
+          <p class="text-gray-600">모던한 UI 컴포넌트를 사용할 수 있습니다.</p>
+        </div>
+      </div>
+
+      <!-- 버튼 테스트 -->
+      <div class="text-center space-x-4">
+        <button
+          class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors"
+        >
+          Primary Button
+        </button>
+        <button
+          class="bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition-colors"
+        >
+          Secondary Button
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useUserStore } from "~/stores/user";
+
+// 페이지 메타데이터 설정
+definePageMeta({
+  title: "Home",
+  description: "Welcome to our Nuxt.js application",
+});
+
+const userStore = useUserStore();
+</script>
+
+<style scoped>
+.home {
+  padding: 2rem;
+  text-align: center;
+}
+
+h1 {
+  color: #00dc82;
+  margin-bottom: 1rem;
+}
+</style>
diff --git a/pages/[tabId]/sampleList.vue b/pages/[tabId]/sampleList.vue
new file mode 100644
index 0000000..c7b3179
--- /dev/null
+++ b/pages/[tabId]/sampleList.vue
@@ -0,0 +1,20 @@
+<template>
+    <ContentsWrapper> <!-- wrapper(title) 추가 -->
+        <template #actions> <!--title 우측 버튼 설정-->
+            <button>스케쥴 확인</button>
+            <button @click="addSamplePopupShow = true">샘플 등록</button>
+        </template>
+        <!--메인 콘텐츠 영역-->
+        <input type="text" >
+        <addSamplePopup v-model:show="addSamplePopupShow" />
+    </ContentsWrapper>
+</template>
+<script setup lang="ts">
+    import addSamplePopup from '../popup/addSamplePopup.vue';
+    // title(wrapper) 설정
+    definePageMeta({
+        title: '조회 결과'
+    })
+
+    const addSamplePopupShow = ref(false);
+</script>
\ No newline at end of file
diff --git a/pages/tui.vue b/pages/[tabId]/tui.vue
similarity index 94%
rename from pages/tui.vue
rename to pages/[tabId]/tui.vue
index d344eb2..0b1e8b8 100644
--- a/pages/tui.vue
+++ b/pages/[tabId]/tui.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ToastGrid from '../components/ToastGrid.vue';
+import ToastGrid from '@/components/base/ToastGrid.vue';
 
 const data = [
   {
diff --git a/pages/index.vue b/pages/index.vue
index 31fb64e..a3e8b63 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -100,6 +100,13 @@
 
 <script setup lang="ts">
 import { useUserStore } from "~/stores/user";
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+onMounted(()=> {
+  router.push('/1/') 
+})
+
 
 // 페이지 메타데이터 설정
 definePageMeta({
@@ -108,6 +115,7 @@ definePageMeta({
 });
 
 const userStore = useUserStore();
+
 </script>
 
 <style scoped>
diff --git a/pages/popup/addSamplePopup.vue b/pages/popup/addSamplePopup.vue
new file mode 100644
index 0000000..2f6216d
--- /dev/null
+++ b/pages/popup/addSamplePopup.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <PopupWrapper width="1000px" height="600px" v-model:show="show">
+      <template #top>
+        <h2>의뢰 선택</h2>
+      </template>
+  
+      <template #middle>
+        <ToastGrid :ref="sampleListRef" :data="data" :columns="columns" :rowHeaders="rowHeader"/>
+      </template>
+  
+      <template #bottom>
+        <button>선택</button>
+      </template>
+    </PopupWrapper>
+  </div>
+</template>
+  
+<script setup lang="ts">
+
+const show = defineModel('show', {type: Boolean, default:false});
+
+
+const sampleListRef = ref();
+
+const data= [
+  {name : "TEXT", user : "TEXT", end : "TEXT" },
+  {name : "TEXT", user : "TEXT", end : "TEXT" }
+];
+
+const rowHeader = ['rowNum'];
+
+const columns = [
+  { header: '의뢰 이름', name: 'name', width: 300 },
+  { header: '의뢰자', name: 'user' },
+  { header: '마감일자', name: 'end' },
+]
+</script>
\ No newline at end of file
diff --git a/stores/router.client.ts b/stores/router.client.ts
new file mode 100644
index 0000000..019c270
--- /dev/null
+++ b/stores/router.client.ts
@@ -0,0 +1,7 @@
+export default defineNuxtPlugin(() => {
+    return {
+      provide: {
+        router: useRouter()
+      }
+    }
+  })
\ No newline at end of file
diff --git a/stores/tab.ts b/stores/tab.ts
index 13da245..292de2b 100644
--- a/stores/tab.ts
+++ b/stores/tab.ts
@@ -1,36 +1,64 @@
-// stores/tabs.ts
-import { defineStore } from 'pinia'
+import { defineStore } from "pinia";
 
-export interface TabItem {
-  key: string
-  label: string
-  to: string
-  componentName: string
+interface Tab {
+  key: number;          // 1~10
+  label: string;
+  to: string;           // 페이지 라우트
+  componentName: string;
 }
 
-export const useTabsStore = defineStore('tabs', {
+const defaultTab = { key: 1, label: "홈", to: "/", componentName: "home" };
+
+export const useTabsStore = defineStore("tabs", {
   state: () => ({
-    activeTab: '' as string,
-    tabs: [] as { key: string; label: string; to: string; componentName: string }[]
+    tabs: [defaultTab] as Tab[],
+    activeTab: 1
   }),
   actions: {
-    addTab(tab: TabItem) {
-      if (!this.tabs.find(t => t.key === tab.key)) {
-        this.tabs.push(tab)
+    // ✅ 새 탭 추가 (기본 페이지는 "/")
+    addTab() {
+      const { $router } = useNuxtApp();
+
+      if (this.tabs.length >= 10) {
+        alert("탭은 최대 10개까지 열 수 있습니다.");
+        return;
       }
-      this.activeTab = tab.key
+      // 빈 key 찾기
+      let key = 1;
+      while (this.tabs.find(t => t.key === key)) key++;
+
+      this.tabs.push({...defaultTab, key : key});
+      this.activeTab = key;
+      $router.push(defaultTab.to);
+      return key;
     },
-    removeTab(key: string) {
-      const idx = this.tabs.findIndex(t => t.key === key)
-      if (idx !== -1) {
-        this.tabs.splice(idx, 1)
-        if (this.activeTab === key && this.tabs.length) {
-          this.activeTab = this.tabs[Math.max(idx - 1, 0)].key
-        }
+
+    // ✅ 활성 탭 내용 변경 (서브메뉴 클릭)
+    updateActiveTab(sub: { label: string; to: string; componentName: string }) {
+      const { $router } = useNuxtApp();
+
+      const tab = this.tabs.find(t => t.key === this.activeTab);
+      if (tab) {
+        tab.label = sub.label;
+        tab.to = sub.to;
+        tab.componentName = sub.componentName;
+      }
+      $router.push(`/${tab?.key}${tab?.to}`);
+    },
+
+    removeTab(key: number) {
+      this.tabs = this.tabs.filter(t => t.key !== key);
+      if (this.activeTab === key) {
+        this.activeTab = this.tabs.length ? this.tabs[this.tabs.length - 1].key : 0;
       }
     },
-    setActiveTab(key: string) {
-      this.activeTab = key
+
+    setActiveTab(key: number) {
+      const { $router } = useNuxtApp();
+      this.activeTab = key;
+
+      const tab = this.tabs.find(t => t.key === this.activeTab);
+      $router.push(`/${tab?.key}${tab?.to}`);
     }
   }
-})
+});
diff --git a/stores/user.ts b/stores/user.ts
index 6faca9a..74e9877 100644
--- a/stores/user.ts
+++ b/stores/user.ts
@@ -10,64 +10,50 @@ export const useUserStore = defineStore("user", () => {
   } | null>(null);
   const token = ref<string | null>(null);
 
+
+  interface LoginData {
+    userId: string
+    role: string
+    lastLoginAt: string
+  }
+  
+  interface LoginResponse {
+    code: number
+    message: string
+    description: string
+    data: LoginData
+  }
+
   // 게터
   const isAdmin = computed(() => user.value?.role === "admin");
   const userName = computed(() => user.value?.name || "사용자");
-
   // 액션
   const login = async (userId: string, password: string) => {
     try {
       // 실제 API 호출로 대체할 수 있습니다
-      /*
-      const { data, error: _error } = await useApi('/login', {
+      
+      const {data, error: _error } = await useApi<LoginResponse>('/service/login', {
         method: 'post',
-        body: { id: userId, pw: password, loginLogFlag : 0 }
-      })
-     */
-      // 임시 로그인 로직 (실제로는 API 응답을 사용)
-      if (userId && password) {
-        // 테스트 계정 확인
-        let mockUser;
-        
-        if (userId === "admin" && password === "stam1201!") {
-          mockUser = {
-            id: "1",
-            userId: "admin",
-            email: "admin@test.com",
-            name: "관리자",
-            role: "admin",
-          };
-        } else if (userId === "user" && password === "stam1201!") {
-          mockUser = {
-            id: "2",
-            userId: "user",
-            email: "user@test.com",
-            name: "일반사용자",
-            role: "user",
-          };
-        } else {
-          throw new Error("아이디 또는 비밀번호가 올바르지 않습니다.");
-        }
-        
-/*
-        if(data && data.value){
-          mockUser = data.value;
-        }else{
-          throw new Error("아이디 또는 비밀번호가 올바르지 않습니다.");
-        }
-*/
-        user.value = mockUser;
-        token.value = "mock-token-" + Date.now();
-        isLoggedIn.value = true;
+        body: { userId, password }
+      })     
+     
+      let mockUser;
 
-        // 로컬 스토리지에 저장
-        localStorage.setItem("user", JSON.stringify(mockUser));
-        localStorage.setItem("token", token.value);
-
-        return { success: true, user: mockUser };
-      } else {
-        throw new Error("아이디와 비밀번호를 입력해주세요.");
+      if(data && data.value && data.value.code === 200){
+        mockUser = data.value.data;
+      }else{
+        throw new Error("아이디 또는 비밀번호가 올바르지 않습니다.");
       }
+
+      user.value = mockUser;
+      token.value = "mock-token-" + Date.now();
+      isLoggedIn.value = true;
+
+      // 로컬 스토리지에 저장
+      localStorage.setItem("user", JSON.stringify(mockUser));
+      localStorage.setItem("token", token.value);
+
+      return { success: true, user: mockUser };
     } catch (error) {
       console.error("로그인 실패:", error);
       return {