로그아웃 기능 추가

devfront/src/components/layout/AppLayout.tsx

@@ -1,7 +1,7 @@
 import { BadgeCheck, LogOut, Moon, ShieldHalf, Sun } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useAuth } from "react-oidc-context";
-import { NavLink, Outlet } from "react-router-dom";
+import { NavLink, Outlet, useNavigate } from "react-router-dom";
 import { t } from "../../lib/i18n";
 import LanguageSelector from "../common/LanguageSelector";
 import { Toaster } from "../ui/toaster";
@@ -16,11 +16,22 @@ const navItems = [
 ];
 
 function AppLayout() {
+  const auth = useAuth();
+  const navigate = useNavigate();
   const [theme, setTheme] = useState<"light" | "dark">(() => {
     const stored = window.localStorage.getItem("admin_theme");
     return stored === "dark" ? "dark" : "light";
   });
 
+  const handleLogout = () => {
+    if (
+      window.confirm(t("msg.dev.logout_confirm", "로그아웃 하시겠습니까?"))
+    ) {
+      auth.removeUser();
+      navigate("/login");
+    }
+  };
+
   useEffect(() => {
     const root = document.documentElement;
     root.classList.remove("light", "dark");
@@ -38,60 +49,73 @@ function AppLayout() {
 
   return (
     <div className="grid min-h-screen bg-background text-foreground md:grid-cols-[240px,1fr]">
-      <aside className="border-b border-border bg-card md:sticky md:top-0 md:h-screen md:border-b-0 md:border-r md:bg-card md:backdrop-blur">
-        <div className="flex items-center justify-between px-5 py-4 md:block md:space-y-6 md:py-6">
-          <div className="flex items-center gap-3 md:flex-col md:items-start">
-            <div className="grid h-11 w-11 place-items-center rounded-xl bg-primary/15 text-primary shadow-[0_12px_30px_rgba(54,211,153,0.22)]">
-              <ShieldHalf size={20} />
+      <aside className="border-b border-border bg-card md:sticky md:top-0 md:h-screen md:border-b-0 md:border-r md:bg-card md:backdrop-blur flex flex-col justify-between">
+        <div>
+          <div className="flex items-center justify-between px-5 py-4 md:block md:space-y-6 md:py-6">
+            <div className="flex items-center gap-3 md:flex-col md:items-start">
+              <div className="grid h-11 w-11 place-items-center rounded-xl bg-primary/15 text-primary shadow-[0_12px_30px_rgba(54,211,153,0.22)]">
+                <ShieldHalf size={20} />
+              </div>
+              <div>
+                <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
+                  {t("ui.dev.brand", "Baron 로그인")}
+                </p>
+                <h1 className="text-lg font-semibold">
+                  {t("ui.dev.console_title", "Developer Console")}
+                </h1>
+              </div>
             </div>
-            <div>
-              <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
-                {t("ui.dev.brand", "Baron 로그인")}
-              </p>
-              <h1 className="text-lg font-semibold">
-                {t("ui.dev.console_title", "Developer Console")}
-              </h1>
+            <div className="hidden rounded-full border border-border px-3 py-2 text-xs text-muted-foreground md:inline-flex md:items-center md:gap-2">
+              <BadgeCheck size={14} />
+              {t("ui.dev.scope_badge", "Scoped to /dev")}
             </div>
           </div>
-          <div className="hidden rounded-full border border-border px-3 py-2 text-xs text-muted-foreground md:inline-flex md:items-center md:gap-2">
-            <BadgeCheck size={14} />
-            {t("ui.dev.scope_badge", "Scoped to /dev")}
+          <nav className="px-2 pb-4 md:px-3 md:pb-8">
+            <div className="flex flex-wrap gap-2 px-3 pb-4 text-[11px] text-muted-foreground md:flex-col md:items-start">
+              <span className="rounded-full border border-border px-3 py-1">
+                {t("ui.dev.env_badge", "Env: dev")}
+              </span>
+            </div>
+            <div className="flex flex-col gap-1">
+              {navItems.map(({ labelKey, labelFallback, to, icon: Icon }) => (
+                <NavLink
+                  key={to}
+                  to={to}
+                  className={({ isActive }) =>
+                    [
+                      "flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition",
+                      isActive
+                        ? "bg-primary/10 text-primary shadow-[0_12px_40px_rgba(54,211,153,0.18)]"
+                        : "text-muted-foreground hover:bg-muted/10 hover:text-foreground",
+                    ].join(" ")
+                  }
+                >
+                  <Icon size={18} />
+                  <span>{t(labelKey, labelFallback)}</span>
+                </NavLink>
+              ))}
+            </div>
+          </nav>
+          <div className="hidden space-y-2 px-5 pb-6 text-xs text-[var(--color-muted)] md:block">
+            <p>{t("msg.dev.sidebar.notice", "개발자 전용 콘솔입니다.")}</p>
+            <p>
+              {t(
+                "msg.dev.sidebar.notice_detail",
+                "클라이언트 애플리케이션 등록 및 관리를 수행할 수 있습니다.",
+              )}
+            </p>
           </div>
         </div>
-        <nav className="px-2 pb-4 md:px-3 md:pb-8">
-          <div className="flex flex-wrap gap-2 px-3 pb-4 text-[11px] text-muted-foreground md:flex-col md:items-start">
-            <span className="rounded-full border border-border px-3 py-1">
-              {t("ui.dev.env_badge", "Env: dev")}
-            </span>
-          </div>
-          <div className="flex flex-col gap-1">
-            {navItems.map(({ labelKey, labelFallback, to, icon: Icon }) => (
-              <NavLink
-                key={to}
-                to={to}
-                className={({ isActive }) =>
-                  [
-                    "flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition",
-                    isActive
-                      ? "bg-primary/10 text-primary shadow-[0_12px_40px_rgba(54,211,153,0.18)]"
-                      : "text-muted-foreground hover:bg-muted/10 hover:text-foreground",
-                  ].join(" ")
-                }
-              >
-                <Icon size={18} />
-                <span>{t(labelKey, labelFallback)}</span>
-              </NavLink>
-            ))}
-          </div>
-        </nav>
-        <div className="hidden space-y-2 px-5 pb-6 text-xs text-[var(--color-muted)] md:block">
-          <p>{t("msg.dev.sidebar.notice", "개발자 전용 콘솔입니다.")}</p>
-          <p>
-            {t(
-              "msg.dev.sidebar.notice_detail",
-              "클라이언트 애플리케이션 등록 및 관리를 수행할 수 있습니다.",
-            )}
-          </p>
+        
+        <div className="px-2 pb-6 md:px-3">
+          <button
+            type="button"
+            onClick={handleLogout}
+            className="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-sm text-muted-foreground transition hover:bg-muted/10 hover:text-foreground"
+          >
+            <LogOut size={18} />
+            <span>{t("ui.dev.nav.logout", "Logout")}</span>
+          </button>
         </div>
       </aside>