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

common/shell/AppSidebar.tsx

@@ -0,0 +1,49 @@
+import type { ComponentType, ReactNode } from "react";
+import { shellLayoutClasses } from "./layout";
+
+export type ShellSidebarNavItem = {
+  labelKey: string;
+  labelFallback: string;
+  to: string;
+  icon: ComponentType<{ size?: number | string }>;
+  isExternal?: boolean;
+  end?: boolean;
+  isActive?: boolean;
+};
+
+type ShellSidebarProps = {
+  brandLabel: string;
+  brandTitle: string;
+  brandIcon: ReactNode;
+  navContent: ReactNode;
+  footerContent: ReactNode;
+};
+
+export function AppSidebar({
+  brandLabel,
+  brandTitle,
+  brandIcon,
+  navContent,
+  footerContent,
+}: ShellSidebarProps) {
+  return (
+    <aside className={shellLayoutClasses.aside}>
+      <div>
+        <div className={shellLayoutClasses.brandSection}>
+          <div className={shellLayoutClasses.brandWrap}>
+            <div className={shellLayoutClasses.brandIcon}>{brandIcon}</div>
+            <div>
+              <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
+                {brandLabel}
+              </p>
+              <h1 className="text-lg font-semibold">{brandTitle}</h1>
+            </div>
+          </div>
+        </div>
+        <nav className={shellLayoutClasses.navWrap}>{navContent}</nav>
+      </div>
+
+      <div>{footerContent}</div>
+    </aside>
+  );
+}