From 5687db9f25cffef4dbe620987d4387ffbf3086cc Mon Sep 17 00:00:00 2001
From: sohot8653 <kmbin92@stam.kr>
Date: Fri, 26 Sep 2025 09:02:47 +0900
Subject: [PATCH] =?UTF-8?q?[=EC=9D=B8=EC=A6=9D=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EA=B0=9C=EC=84=A0]=20API=20=ED=98=B8?=
 =?UTF-8?q?=EC=B6=9C=20=EC=8B=9C=20=EC=9D=B8=EC=A6=9D=20=EC=98=A4=EB=A5=98?=
 =?UTF-8?q?=20=EB=B0=9C=EC=83=9D=20=EC=8B=9C=20=EC=82=AC=EC=9A=A9=EC=9E=90?=
 =?UTF-8?q?=20=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=20=EC=B2=98=EB=A6=AC=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=9D=B8=EC=A6=9D=20=EC=98=A4=EB=A5=98=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80.=20auth.global.ts?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EA=B3=B5=EA=B0=9C=20=EB=9D=BC=EC=9A=B0?=
 =?UTF-8?q?=ED=8A=B8=EC=97=90=20=EC=9D=B8=EC=A6=9D=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=8F=AC=ED=95=A8,=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=EC=9E=90=20=EC=84=B8=EC=85=98=20=EC=A0=95=EB=A6=AC=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EA=B0=9C=EC=84=A0.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 composables/useApi.ts     |  25 ++++--
 middleware/auth.global.ts |   2 +-
 pages/auth-error.vue      | 176 ++++++++++++++++++++++++++++++++++++++
 stores/user.ts            |  10 +--
 4 files changed, 202 insertions(+), 11 deletions(-)
 create mode 100644 pages/auth-error.vue

diff --git a/composables/useApi.ts b/composables/useApi.ts
index a73e076..8c711ac 100644
--- a/composables/useApi.ts
+++ b/composables/useApi.ts
@@ -75,11 +75,26 @@ export const useApi = async <T>(
       ...(headers && { headers }),
     };
 
-    return ($api as any)(path, apiOpts).catch((error: any) => {
+    return ($api as any)(path, apiOpts).catch(async (error: any) => {
+      const status = error.response?.status;
+      const message = error.response._data.message;
+
+      if (
+        status === 401 &&
+        ["JWT_TOKEN_EXPIRED", "INVALID_CLIENT_IP", "JWT_TOKEN_NULL"].includes(
+          message
+        )
+      ) {
+        const userStore = useUserStore();
+        userStore.user = null;
+        userStore.isLoggedIn = false;
+        await navigateTo(`/auth-error?type=${message}`);
+        throw error;
+      }
+
       // 사용자에게 알림 표시
       if (showAlert) {
-        const status = error.response?.status;
-        let message =
+        let description =
           status === 404
             ? "요청한 리소스를 찾을 수 없습니다."
             : status === 500
@@ -88,10 +103,10 @@ export const useApi = async <T>(
 
         // 서버에서 온 에러 메시지가 있으면 우선 사용
         if (error.response?._data?.description) {
-          message = error.response._data.description;
+          description = error.response._data.description;
         }
 
-        alert(message);
+        alert(description);
       }
 
       // 에러 처리 방식에 따라 반환
diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
index 5691463..9897b60 100644
--- a/middleware/auth.global.ts
+++ b/middleware/auth.global.ts
@@ -4,7 +4,7 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
     const { hasPagePermission } = usePermission();
 
     // 공개 라우트 목록 (로그인 없이 접근 가능)
-    const publicRoutes = ["/login", "/register"];
+    const publicRoutes = ["/login", "/register", "/auth-error"];
 
     // 공개 라우트인지 확인
     const isPublicRoute = publicRoutes.some(route => to.path === route);
diff --git a/pages/auth-error.vue b/pages/auth-error.vue
new file mode 100644
index 0000000..30ab3f0
--- /dev/null
+++ b/pages/auth-error.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="auth-error-container">
+    <div class="auth-error-card">
+      <div class="auth-error-icon">
+        <Icon name="mdi:alert-circle" size="64" color="#ef4444" />
+      </div>
+
+      <h1 class="auth-error-title">인증 오류</h1>
+
+      <div class="auth-error-message">
+        <p v-if="errorType === 'JWT_TOKEN_EXPIRED'">
+          세션이 만료되었습니다.<br />
+          보안을 위해 다시 로그인해 주세요.
+        </p>
+        <p v-else-if="errorType === 'INVALID_CLIENT_IP'">
+          접근 권한이 없습니다.<br />
+          허용된 IP에서 접근해 주세요.
+        </p>
+        <p v-else-if="errorType === 'JWT_TOKEN_NULL'">
+          인증 정보가 없습니다.<br />
+          다시 로그인해 주세요.
+        </p>
+        <p v-else>
+          인증에 문제가 발생했습니다.<br />
+          다시 로그인해 주세요.
+        </p>
+      </div>
+
+      <div class="auth-error-actions">
+        <button
+          class="auth-error-btn primary"
+          :disabled="isLoading"
+          @click="goToLogin"
+        >
+          <Icon name="mdi:login" size="20" />
+          로그인하기
+        </button>
+      </div>
+
+      <div class="auth-error-help">
+        <p>문제가 지속되면 관리자에게 문의해 주세요.</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// auth 레이아웃 사용
+definePageMeta({
+  layout: "auth",
+});
+
+const route = useRoute();
+const isLoading = ref(false);
+
+// 쿼리 파라미터에서 에러 타입 가져오기
+const errorType = computed(() => (route.query.type as string) || "UNKNOWN");
+
+const goToLogin = async () => {
+  isLoading.value = true;
+  try {
+    await navigateTo("/login");
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// 페이지 진입 시 사용자 세션 정리
+onMounted(() => {
+  const userStore = useUserStore();
+  userStore.user = null;
+  userStore.isLoggedIn = false;
+});
+</script>
+
+<style scoped>
+.auth-error-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.auth-error-card {
+  background: white;
+  border-radius: 12px;
+  padding: 48px;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  text-align: center;
+  max-width: 480px;
+  width: 100%;
+  border: 1px solid #e2e8f0;
+}
+
+.auth-error-icon {
+  margin-bottom: 24px;
+}
+
+.auth-error-title {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 16px;
+}
+
+.auth-error-message {
+  margin-bottom: 32px;
+}
+
+.auth-error-message p {
+  font-size: 16px;
+  color: #64748b;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.auth-error-actions {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 24px;
+}
+
+.auth-error-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 32px;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 14px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s;
+  justify-content: center;
+}
+
+.auth-error-btn.primary {
+  background: #0f172a;
+  color: white;
+}
+
+.auth-error-btn.primary:hover:not(:disabled) {
+  background: #1e293b;
+  transform: translateY(-1px);
+}
+
+.auth-error-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.auth-error-help {
+  padding-top: 16px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.auth-error-help p {
+  font-size: 14px;
+  color: #94a3b8;
+  margin: 0;
+}
+
+@media (max-width: 640px) {
+  .auth-error-card {
+    padding: 32px 24px;
+  }
+
+  .auth-error-btn {
+    width: 100%;
+  }
+}
+</style>
diff --git a/stores/user.ts b/stores/user.ts
index 833296d..47f5cc6 100644
--- a/stores/user.ts
+++ b/stores/user.ts
@@ -54,13 +54,13 @@ export const useUserStore = defineStore(
         showAlert: false,
       });
 
-      user.value = null;
-      isLoggedIn.value = false;
+      // user.value = null;
+      // isLoggedIn.value = false;
 
-      tabsStore.resetTabs();
-      permissionsStore.clearPermissions();
+      // tabsStore.resetTabs();
+      // permissionsStore.clearPermissions();
 
-      await navigateTo("/login");
+      // await navigateTo("/login");
     };
 
     return {