로그아웃 기능 추가

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,7 +49,8 @@ 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">
+      <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)]">
@@ -93,6 +105,18 @@ function AppLayout() {
               )}
             </p>
           </div>
+        </div>
+        
+        <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>
 
       <div className="relative">