admin/dev 사이드바 프레임 공통화

devfront/src/components/layout/AppLayout.tsx

@@ -1,6 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
 import {
-  BadgeCheck,
   ChevronDown,
   ClipboardCheck,
   LayoutDashboard,
@@ -15,12 +14,14 @@ import { useEffect, useRef, useState } from "react";
 import { useAuth } from "react-oidc-context";
 import { NavLink, Outlet, useLocation, useNavigate } from "react-router-dom";
 import {
+  AppSidebar,
   type ShellTranslator,
   applyShellTheme,
   buildShellProfileSummary,
   buildShellSessionStatus,
   readShellSessionExpiryEnabled,
   readShellTheme,
+  type ShellSidebarNavItem,
   shellLayoutClasses,
   writeShellSessionExpiryEnabled,
 } from "../../../../common/shell";
@@ -34,12 +35,13 @@ import {
 import LanguageSelector from "../common/LanguageSelector";
 import { Toaster } from "../ui/toaster";
 
-const navItems = [
+const navItems: ShellSidebarNavItem[] = [
   {
     labelKey: "ui.dev.nav.overview",
     labelFallback: "Overview",
     to: "/",
     icon: LayoutDashboard,
+    end: true,
   },
   {
     labelKey: "ui.dev.nav.developer_request",
@@ -323,81 +325,50 @@ function AppLayout() {
       return next;
     });
   };
+  const sidebarNavContent = (
+    <div className={shellLayoutClasses.navList}>
+      {navItems.map(({ labelKey, labelFallback, to, icon: Icon }) => (
+        <NavLink
+          key={to}
+          to={to}
+          end={to === "/"}
+          className={({ isActive }) =>
+            [
+              shellLayoutClasses.navItemBase,
+              isActive
+                ? shellLayoutClasses.navItemActive
+                : shellLayoutClasses.navItemIdle,
+            ].join(" ")
+          }
+        >
+          <Icon size={18} />
+          <span>{t(labelKey, labelFallback)}</span>
+        </NavLink>
+      ))}
+    </div>
+  );
+  const sidebarFooterContent = (
+    <div className="border-t border-border/50 px-3 pt-4">
+      <button
+        type="button"
+        onClick={handleLogout}
+        className={shellLayoutClasses.logoutButton}
+      >
+        <LogOut size={18} />
+        <span>{t("ui.dev.nav.logout", "Logout")}</span>
+      </button>
+    </div>
+  );
 
   return (
     <div className={shellLayoutClasses.root}>
-      <aside className={shellLayoutClasses.aside}>
-        <div>
-          <div className={shellLayoutClasses.brandSection}>
-            <div className={shellLayoutClasses.brandWrap}>
-              <div className={shellLayoutClasses.brandIcon}>
-                <ShieldHalf size={20} />
-              </div>
-              <div>
-                <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
-                  {t("ui.dev.brand", "Baron Sign In")}
-                </p>
-                <h1 className="text-lg font-semibold">
-                  {t("ui.dev.console_title", "Developer Console")}
-                </h1>
-              </div>
-            </div>
-            <div className={shellLayoutClasses.scopeBadge}>
-              <BadgeCheck size={14} />
-              {t("ui.dev.scope_badge", "Scoped to /dev")}
-            </div>
-          </div>
-          <nav className={shellLayoutClasses.navWrap}>
-            <div className={shellLayoutClasses.navMeta}>
-              <span className="rounded-full border border-border px-3 py-1">
-                {t("ui.dev.env_badge", "Env: dev")}
-              </span>
-            </div>
-            <div className={shellLayoutClasses.navList}>
-              {navItems.map(({ labelKey, labelFallback, to, icon: Icon }) => (
-                <NavLink
-                  key={to}
-                  to={to}
-                  end={to === "/"}
-                  className={({ isActive }) =>
-                    [
-                      shellLayoutClasses.navItemBase,
-                      isActive
-                        ? shellLayoutClasses.navItemActive
-                        : shellLayoutClasses.navItemIdle,
-                    ].join(" ")
-                  }
-                >
-                  <Icon size={18} />
-                  <span>{t(labelKey, labelFallback)}</span>
-                </NavLink>
-              ))}
-            </div>
-          </nav>
-        </div>
-
-        <div>
-          <div className="border-t border-border/50 px-3 pt-4">
-            <button
-              type="button"
-              onClick={handleLogout}
-              className={shellLayoutClasses.logoutButton}
-            >
-              <LogOut size={18} />
-              <span>{t("ui.dev.nav.logout", "Logout")}</span>
-            </button>
-          </div>
-          <div className={shellLayoutClasses.sidebarFooterNotice}>
-            <p>{t("msg.dev.sidebar.notice", "Developer Console")}</p>
-            <p>
-              {t(
-                "msg.dev.sidebar.notice_detail",
-                "Register and manage client applications.",
-              )}
-            </p>
-          </div>
-        </div>
-      </aside>
+      <AppSidebar
+        brandLabel={t("ui.dev.brand", "Baron Sign In")}
+        brandTitle={t("ui.dev.console_title", "Developer Console")}
+        brandIcon={<ShieldHalf size={20} />}
+        navContent={sidebarNavContent}
+        footerContent={sidebarFooterContent}
+      />
 
       <div className={shellLayoutClasses.content}>
         <header className={shellLayoutClasses.header}>