[설정 및 상태 관리 개선] Nuxt 설정에 pinia-plugin-persistedstate 추가, package.json 및 package-lock.json 업데이트, tab 및 user 스토어에 persist 기능 적용

nuxt.config.ts

@@ -7,6 +7,7 @@ export default defineNuxtConfig({
     "@nuxt/image",
     "@nuxt/icon",
     "@pinia/nuxt",
+    "pinia-plugin-persistedstate/nuxt",
     "@nuxtjs/tailwindcss",
   ],
   app: {
@@ -17,14 +18,12 @@ export default defineNuxtConfig({
           href: "https://fonts.googleapis.com/icon?family=Material+Icons",
         },
       ],
-      script: [
+      script: [{ src: "/dist/igv.js", defer: true }],
-        { src: '/dist/igv.js', defer: true }
-      ]
     },
   },
   vite: {
     optimizeDeps: {
-      include: ['cytoscape-overlays'],
+      include: ["cytoscape-overlays"],
     },
     build: {
       commonjsOptions: {
@@ -33,20 +32,20 @@ export default defineNuxtConfig({
     },
   },
   nitro: {
-    logLevel: 'debug'
+    logLevel: "debug",
   },
   runtimeConfig: {
     public: {
-      apiBase: process.env.API_BASE || 'http://localhost',
+      apiBase: process.env.API_BASE || "http://localhost",
-      contextPath: process.env.CONTEXT_PATH || '/service',
+      contextPath: process.env.CONTEXT_PATH || "/service",
-    }
+    },
   },
   typescript: {
     shim: false,
     strict: true,
   },
-  plugins: ['~/plugins/vue3-tui-grid.client.ts'],
+  plugins: ["~/plugins/vue3-tui-grid.client.ts"],
   components: [
-    { path: '~/components', pathPrefix: false }, // 경로 접두사 제거
+    { path: "~/components", pathPrefix: false }, // 경로 접두사 제거
-  ]
+  ],
 });

package-lock.json

@@ -11,7 +11,7 @@
         "@nuxt/icon": "^1.14.0",
         "@nuxt/image": "^1.10.0",
         "@nuxtjs/tailwindcss": "^7.0.0-beta.0",
-        "@pinia/nuxt": "^0.11.1",
+        "@pinia/nuxt": "^0.11.2",
         "ag-grid-community": "^34.0.0",
         "ag-grid-vue3": "^34.0.0",
         "chart.js": "^4.5.0",
@@ -22,6 +22,7 @@
         "eslint": "^9.29.0",
         "nuxt": "^3.17.5",
         "pinia": "^3.0.3",
+        "pinia-plugin-persistedstate": "^4.5.0",
         "tui-code-snippet": "^2.3.3",
         "tui-grid": "^4.21.22",
         "vue": "^3.5.17",
@@ -2827,9 +2828,9 @@
       }
     },
     "node_modules/@pinia/nuxt": {
-      "version": "0.11.1",
+      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.11.2.tgz",
-      "integrity": "sha512-tCD8ioWhhIHKwm8Y9VvyhBAV/kK4W5uGBIYbI5iM4N1t7duOqK6ECBUavrMxMolELayqqMLb9+evegrh3S7s2A==",
+      "integrity": "sha512-CgvSWpbktxxWBV7ModhAcsExsQZqpPq6vMYEe9DexmmY6959ev8ukL4iFhr/qov2Nb9cQAWd7niFDnaWkN+FHg==",
       "license": "MIT",
       "dependencies": {
         "@nuxt/kit": "^3.9.0"
@@ -6086,6 +6087,12 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "license": "MIT"
     },
+    "node_modules/deep-pick-omit": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/deep-pick-omit/-/deep-pick-omit-1.2.1.tgz",
+      "integrity": "sha512-2J6Kc/m3irCeqVG42T+SaUMesaK7oGWaedGnQQK/+O0gYc+2SP5bKh/KKTE7d7SJ+GCA9UUE1GRzh6oDe0EnGw==",
+      "license": "MIT"
+    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -10770,6 +10777,33 @@
         }
       }
     },
+    "node_modules/pinia-plugin-persistedstate": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-4.5.0.tgz",
+      "integrity": "sha512-QTkP1xJVyCdr2I2p3AKUZM84/e+IS+HktRxKGAIuDzkyaKKV48mQcYkJFVVDuvTxlI5j6X3oZObpqoVB8JnWpw==",
+      "license": "MIT",
+      "dependencies": {
+        "deep-pick-omit": "^1.2.1",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": ">=3.0.0",
+        "@pinia/nuxt": ">=0.10.0",
+        "pinia": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "@pinia/nuxt": {
+          "optional": true
+        },
+        "pinia": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkg-types": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.2.0.tgz",

package.json

@@ -16,7 +16,7 @@
     "@nuxt/icon": "^1.14.0",
     "@nuxt/image": "^1.10.0",
     "@nuxtjs/tailwindcss": "^7.0.0-beta.0",
-    "@pinia/nuxt": "^0.11.1",
+    "@pinia/nuxt": "^0.11.2",
     "ag-grid-community": "^34.0.0",
     "ag-grid-vue3": "^34.0.0",
     "chart.js": "^4.5.0",
@@ -27,6 +27,7 @@
     "eslint": "^9.29.0",
     "nuxt": "^3.17.5",
     "pinia": "^3.0.3",
+    "pinia-plugin-persistedstate": "^4.5.0",
     "tui-code-snippet": "^2.3.3",
     "tui-grid": "^4.21.22",
     "vue": "^3.5.17",

stores/tab.ts

@@ -12,7 +12,7 @@ const defaultTab = { key: 1, label: "홈", to: "/", componentName: "home" };
 export const useTabsStore = defineStore("tabs", {
   state: () => ({
     tabs: [defaultTab] as Tab[],
-    activeTab: 1
+    activeTab: 1,
   }),
   actions: {
     // ✅ 새 탭 추가 (기본 페이지는 "/")
@@ -49,7 +49,9 @@ export const useTabsStore = defineStore("tabs", {
     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;
+        this.activeTab = this.tabs.length
+          ? this.tabs[this.tabs.length - 1].key
+          : 0;
       }
     },
 
@@ -59,6 +61,7 @@ export const useTabsStore = defineStore("tabs", {
 
       const tab = this.tabs.find(t => t.key === this.activeTab);
       $router.push(`/${tab?.key}${tab?.to}`);
-    }
+    },
-  }
+  },
+  persist: true,
 });

stores/user.ts

@@ -1,4 +1,6 @@
-export const useUserStore = defineStore("user", () => {
+export const useUserStore = defineStore(
+  "user",
+  () => {
     // 상태
     const isLoggedIn = ref(false);
     const user = ref<{
@@ -18,10 +20,13 @@ export const useUserStore = defineStore("user", () => {
       try {
         // 실제 API 호출로 대체할 수 있습니다
 
-      const { success, data } = await useApi<ApiResponse<LoginData>>("/login", {
+        const { success, data } = await useApi<ApiResponse<LoginData>>(
+          "/login",
+          {
             method: "post",
             body: { userId, password },
-      });
+          }
+        );
 
         if (success) {
           user.value = data;
@@ -100,4 +105,8 @@ export const useUserStore = defineStore("user", () => {
       setToken,
       getToken,
     };
-});
+  },
+  {
+    persist: true,
+  }
+);