+import type { SidebarMenu } from '@/lib/domain/sidebar-menu';

+  /** 계정 권한에 맞춰 서버가 구성한 사이드바 메뉴. */

+  menu: SidebarMenu;

+ * Basic 레이아웃의 상호작용 경계 — 헤더·사이드바·풋터를 조립한다. page 콘텐츠(children)는

+ * 상위 Server Component가 렌더한 결과를 props로 그대로 통과시켜 RSC를 유지한다 — 이 컴포넌트

+ * 자신은 children의 내용을 알거나 가공하지 않는다.

+ *

+ * 사이드바 열림/접힘 상태(useSidebar)는 더 이상 여기서 소유하지 않는다. 시안의 헤더·사이드바

+ * 어디에도 그 토글이 없어 헤더 구현 때 함께 걷어냈다 — 접힘 모양이 시안에 정의되면 그때

+ * 다시 붙인다.

+export function AdminShell({ children, adminName, menu }: AdminShellProps) {

+        <AdminSidebar menu={menu} />

+// Basic 레이아웃 사이드바 — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)

+//                                snb-area 3041:11860

+//

+// 시안에서 디자인시스템 컴포넌트로 정의된 건 btn-ico(FoxIconButton)와 아이콘들뿐이고, 1·2·3depth

+// 항목은 @fox에 없어 사이드바 전용으로 짰다(사용자 확정). 색·간격·radius·타이포는 전부 @fox

+// 토큰을 거치므로 없는 이름을 쓰면 빌드가 실패한다.

+

+@use "@fox/styles/abstracts" as fox;

+

+.sidebar {

+  box-sizing: border-box;

+  display: flex;

+  flex-direction: column;

+  flex-shrink: 0;

+  // 시안 240px. Figma가 변수로 export하지 않는다.

+  inline-size: 24rem;

+  padding: fox.padding(5);

+  border-inline-end: fox.border(1) solid fox.color(border-neutral-subtler);

+  // 시안은 회색에서 시작해 70% 지점부터 옅은 파랑으로 넘어간다.

+  background: linear-gradient(

+    to bottom,

+    fox.color(surface-neutral-gray) 70%,

+    fox.color(surface-theme-primary)

+  );

+  overflow-y: auto;

+}

+

+// ── 상단: 검색 + 사이드바 토글 ───────────────────────────────────────────────

+.top {

+  display: flex;

+  align-items: center;

+  gap: fox.gap(2);

+  padding-block-end: fox.spacing(bottom-md);

+}

+

+.search {

+  flex: 1 0 0;

+  min-inline-size: 0;

+}

+

+// FoxInput의 기본 테두리는 input-border(진한 회색)인데 시안 검색창은 border-neutral-subtler다.

+// 크기·radius·안쪽 여백은 md가 이미 시안과 같아 색만 덮는다. 명시도가 같아 로드 순서에

+// 좌우되지 않도록 `:global()`을 겹쳐 이기게 한다.

+.search :global(.fox-input__box) {

+  border-color: fox.color(border-neutral-subtler);

+}

+

+// ── 섹션 ────────────────────────────────────────────────────────────────────

+.section {

+  display: flex;

+  flex-direction: column;

+  align-items: flex-start;

+  padding-block-end: fox.spacing(bottom-md);

+}

+

+// 즐겨찾기만 아래 구분선이 있고 위 여백이 없다.

+.sectionFavorites {

+  padding-block-end: fox.spacing(bottom-sm);

+  border-block-end: fox.border(1) solid fox.color(border-neutral-subtle);

+}

+

+.sectionNav {

+  padding-block-start: fox.spacing(top-sm);

+}

+

+.sectionTitle {

+  inline-size: 100%;

+  margin: 0;

+  padding-block-end: fox.spacing(bottom-sm);

+  color: fox.color(font-neutral-subtler);

+  font-family: fox.font-family(title);

+  font-size: fox.font-size(heading-2xsm);

+  font-weight: fox.font-weight(bold);

+  line-height: 1.4;

+  letter-spacing: -0.025em;

+}

+

+.list {

+  display: flex;

+  inline-size: 100%;

+  flex-direction: column;

+  align-items: flex-start;

+  margin: 0;

+  padding: 0;

+  list-style: none;

+}

+

+// ── 즐겨찾기 항목 ───────────────────────────────────────────────────────────

+.favorite {

+  display: flex;

+  inline-size: 100%;

+  align-items: center;

+  gap: fox.gap(2);

+  padding-block: fox.padding(1);

+  padding-inline: fox.padding(2);

+  color: fox.color(font-neutral-subtle);

+  font-family: fox.font-family(body);

+  // 시안 13px. heading/2xsm과 값이 같지만 이쪽은 본문 계열이라 리터럴로 둔다.

+  font-size: 1.3rem;

+  line-height: 1.5;

+  letter-spacing: -0.025em;

+  text-decoration: none;

+}

+

+// ── 1depth ──────────────────────────────────────────────────────────────────

+.item {

+  inline-size: 100%;

+}

+

+.itemButton {

+  display: flex;

+  inline-size: 100%;

+  align-items: center;

+  gap: fox.gap(2);

+  padding-block: fox.padding(4);

+  padding-inline: fox.padding(3);

+  border: none;

+  border-radius: fox.radius(3);

+  background: fox.color(action-secondary);

+  color: fox.color(font-neutral-subtle);

+  font-family: fox.font-family(title);

+  // 시안 14px.

+  font-size: 1.4rem;

+  font-weight: fox.font-weight(bold);

+  line-height: 1.4;

+  letter-spacing: -0.025em;

+  text-align: start;

+  text-decoration: none;

+  cursor: pointer;

+  // 시안이 배경 위에 곱하기로 얹는다 — 그라데이션 위에서 색이 겹쳐 보이게 한다.

+  mix-blend-mode: multiply;

+}

+

+.itemButtonActive {

+  background: fox.color(action-secondary-active);

+  color: fox.color(font-neutral-strong-inverse);

+  // 활성 항목은 배경을 그대로 덮는다.

+  mix-blend-mode: normal;

+}

+

+.itemIcon {

+  display: inline-flex;

+  flex-shrink: 0;

+  inline-size: fox.icon(4);

+  block-size: fox.icon(4);

+}

+

+.itemIcon > svg {

+  inline-size: 100%;

+  block-size: 100%;

+}

+

+.itemLabel {

+  flex: 1 0 0;

+  min-inline-size: 0;

+}

+

+// ── 2depth ──────────────────────────────────────────────────────────────────

+.childGroup {

+  display: flex;

+  inline-size: 100%;

+  flex-direction: column;

+  align-items: flex-start;

+  margin: fox.gap(2) 0 0;

+  padding: fox.padding(3);

+  border: fox.border(1) solid fox.color(border-neutral-subtler);

+  border-radius: fox.radius(3);

+  background: fox.color(surface-neutral-default);

+  list-style: none;

+}

+

+.child {

+  inline-size: 100%;

+}

+

+.childRow {

+  display: flex;

+  inline-size: 100%;

+  align-items: center;

+  gap: fox.gap(2);

+  padding-block: fox.padding(2);

+  padding-inline: fox.padding(3);

+  border: none;

+  border-radius: fox.radius(3);

+  background: fox.color(action-secondary);

+  color: fox.color(font-neutral-default);

+  font-family: fox.font-family(title);

+  font-size: 1.4rem;

+  font-weight: fox.font-weight(bold);

+  line-height: 1.4;

+  letter-spacing: -0.025em;

+  text-align: start;

+  text-decoration: none;

+  cursor: pointer;

+}

+

+.childRowActive {

+  color: fox.color(font-theme-secondary);

+}

+

+// 시안은 별·캐럿 자리를 항상 잡아 두고 필요 없을 때 투명하게만 만든다 — 라벨 시작 위치가

+// 항목마다 흔들리지 않게 하기 위해서다.

+.childMark {

+  display: inline-flex;

+  flex-shrink: 0;

+  inline-size: fox.icon(2);

+  block-size: fox.icon(2);

+}

+

+.childMark > svg {

+  inline-size: 100%;

+  block-size: 100%;

+}

+

+.childMarkHidden {

+  opacity: 0;

+}

+

+.childLabel {

+  flex: 1 0 0;

+  min-inline-size: 0;

+}

+

+// ── 3depth ──────────────────────────────────────────────────────────────────

+.leafGroup {

+  display: flex;

+  inline-size: 100%;

+  flex-direction: column;

+  align-items: flex-start;

+  margin: 0;

+  padding-block: fox.padding(2);

+  padding-inline-start: fox.padding(7);

+  padding-inline-end: fox.padding(2);

+  border-radius: fox.radius(3);

+  list-style: none;

+}

+

+.leaf {

+  display: flex;

+  inline-size: 100%;

+  align-items: center;

+  gap: fox.gap(2);

+  padding-block: fox.padding(1);

+  padding-inline: fox.padding(2);

+  color: fox.color(font-neutral-subtle);

+  font-family: fox.font-family(body);

+  font-size: 1.3rem;

+  line-height: 1.5;

+  letter-spacing: -0.025em;

+  text-decoration: none;

+}

+

+.leafActive {

+  color: fox.color(font-theme-secondary);

+}

+'use client';

+import Link from 'next/link';

+import { FoxIconButton } from '@fox/core/components/fox-icon-button';

+import { FoxInput } from '@fox/core/components/fox-input';

+import {

+  FoxCaretDownIcon,

+  FoxCaretUpIcon,

+  FoxMagnifyingGlassIcon,

+  FoxSidebarSimpleIcon,

+  FoxStarIcon,

+} from '@fox/core/icons';

+import type {

+  SidebarMenu,

+  SidebarMenuChild,

+  SidebarMenuItem,

+} from '@/lib/domain/sidebar-menu';

+import { useSidebarNav, type SidebarNavState } from '../_hooks/use-sidebar-nav';

+import styles from './admin-sidebar.module.scss';

+import { SidebarMenuIcon } from './sidebar-menu-icon';

+  /** 서버가 계정 권한에 맞춰 구성해 준 메뉴. 이 컴포넌트는 라우트 목록을 알지 못한다. */

+  menu: SidebarMenu;

+ * Basic 레이아웃 사이드바 — 시안 snb-area(3041:11860)를 옮겼다. 검색·즐겨찾기·섹션별 GNB로

+ * 이루어지고, GNB는 1depth > 2depth > 3depth 중첩이다.

+ * **메뉴 데이터를 소유하지 않는다.** 권한마다 항목이 달라 매 요청 서버가 조회해 넘겨주며

+ * (`fetchSidebarMenu`), 여기서는 받은 트리를 그리고 펼침·활성 상태만 판정한다. 그래서 새 화면이

+ * 생겨도 이 파일은 손대지 않는다.

+ * 시안에 없어 넣지 않은 것: 검색 입력의 실제 동작(제출 대상이 정해지지 않음)과 즐겨찾기

+ * 추가/해제. 별 아이콘은 시안대로 표시만 한다.

+export function AdminSidebar({ menu }: AdminSidebarProps) {

+  const nav = useSidebarNav(menu);

+    <nav className={styles.sidebar} aria-label="주요 메뉴">

+      <div className={styles.top}>

+        <div className={styles.search}>

+          <FoxInput

+            size="md"

+            placeholder="검색어를 입력하세요."

+            icon={<FoxMagnifyingGlassIcon />}

+            aria-label="메뉴 검색"

+          />

+        </div>

+        <FoxIconButton

+          size="xsm"

+          type="ghost"

+          icon={<FoxSidebarSimpleIcon />}

+          label="사이드바 접기"

+        />

+      </div>

+

+      {menu.favorites.length > 0 && (

+        <section className={`${styles.section} ${styles.sectionFavorites}`}>

+          <h2 className={styles.sectionTitle}>즐겨찾기</h2>

+          <ul className={styles.list}>

+            {menu.favorites.map((favorite) => (

+              <li key={favorite.id} className={styles.item}>

+                <Link href={favorite.href} className={styles.favorite}>

+                  <span className={styles.childMark}>

+                    <FoxStarIcon weight="fill" />

+                  </span>

+                  {favorite.label}

+                </Link>

+              </li>

+            ))}

+          </ul>

+        </section>

+      )}

+

+      {menu.sections.map((section) => (

+        <section

+          key={section.id}

+          className={`${styles.section} ${styles.sectionNav}`}

+        >

+          <h2 className={styles.sectionTitle}>{section.label}</h2>

+          <ul className={styles.list}>

+            {section.items.map((item) => (

+              <SidebarItem key={item.id} item={item} nav={nav} />

+            ))}

+          </ul>

+        </section>

+      ))}

+    </nav>

+  );

+}

+

+/** 1depth — 자식이 있으면 펼침 버튼, 없으면 링크다. */

+function SidebarItem({

+  item,

+  nav,

+}: {

+  item: SidebarMenuItem;

+  nav: SidebarNavState;

+}) {

+  const hasChildren = (item.children?.length ?? 0) > 0;

+  const isActive = nav.containsActive(item);

+  const isOpen = nav.isItemOpen(item);

+  const rowClass = `${styles.itemButton} ${isActive ? styles.itemButtonActive : ''}`;

+

+  const inner = (

+      <span className={styles.itemIcon}>

+        <SidebarMenuIcon name={item.icon} />

+      </span>

+      <span className={styles.itemLabel}>{item.label}</span>

+    </>

+  );

+

+  return (

+    <li className={styles.item}>

+      {hasChildren ? (

+          className={rowClass}

+          aria-expanded={isOpen}

+          onClick={() => nav.toggleItem(item.id)}

+        >

+          {inner}

+        </button>

+      ) : (

+        <Link href={item.href ?? '#'} className={rowClass}>

+          {inner}

+        </Link>

+

+      {hasChildren && isOpen && (

+        <ul className={styles.childGroup}>

+          {item.children?.map((child) => (

+            <SidebarChild key={child.id} child={child} nav={nav} />

+          ))}

+        </ul>

+      )}

+    </li>

+  );

+}

+

+/** 2depth — 자식이 있으면 펼침 버튼(별·캐럿 표시), 없으면 링크다. */

+function SidebarChild({

+  child,

+  nav,

+}: {

+  child: SidebarMenuChild;

+  nav: SidebarNavState;

+}) {

+  const hasChildren = (child.children?.length ?? 0) > 0;

+  const isOpen = nav.isChildOpen(child);

+  const isActive = nav.isActive(child.href);

+  const rowClass = `${styles.childRow} ${

+    isActive || (hasChildren && isOpen) ? styles.childRowActive : ''

+  }`;

+

+  // 시안은 자식이 없는 항목도 별·캐럿 자리를 비워 두고 투명하게만 만든다 — 라벨 시작

+  // 위치를 줄마다 맞추기 위해서다.

+  const mark = (

+    <span

+      className={`${styles.childMark} ${hasChildren ? '' : styles.childMarkHidden}`}

+    >

+      <FoxStarIcon />

+    </span>

+  );

+  const caret = (

+    <span

+      className={`${styles.childMark} ${hasChildren ? '' : styles.childMarkHidden}`}

+    >

+      {isOpen ? <FoxCaretUpIcon /> : <FoxCaretDownIcon />}

+    </span>

+  );

+

+  return (

+    <li className={styles.child}>

+      {hasChildren ? (

+        <button

+          type="button"

+          className={rowClass}

+          aria-expanded={isOpen}

+          onClick={() => nav.toggleChild(child.id)}

+        >

+          {mark}

+          <span className={styles.childLabel}>{child.label}</span>

+          {caret}

+        </button>

+      ) : (

+        <Link href={child.href ?? '#'} className={rowClass}>

+          {mark}

+          <span className={styles.childLabel}>{child.label}</span>

+          {caret}

+        </Link>

+      )}

+

+      {hasChildren && isOpen && (

+        <ul className={styles.leafGroup}>

+          {child.children?.map((leaf) => (

+            <li key={leaf.id}>

+              <Link

+                href={leaf.href}

+                className={`${styles.leaf} ${

+                  nav.isActive(leaf.href) ? styles.leafActive : ''

+                }`}

+              >

+                <span className={styles.childMark}>

+                  <FoxStarIcon />

+                </span>

+                {leaf.label}

+              </Link>

+            </li>

+          ))}

+        </ul>

+      )}

+    </li>

+import type { ComponentType } from 'react';

+import {

+  FoxCalendarStarIcon,

+  FoxChartBarIcon,

+  FoxHouseIcon,

+  FoxIdentificationCardIcon,

+  FoxMedalIcon,

+  FoxNutIcon,

+  FoxPencilSimpleIcon,

+  FoxPhoneCallIcon,

+  FoxPottedPlantIcon,

+  FoxShieldCheckIcon,

+  FoxSquaresFourIcon,

+  FoxUserSquareIcon,

+  FoxUsersThreeIcon,

+  type FoxIconProps,

+} from '@fox/core/icons';

+

+/**

+ * 메뉴 아이콘 이름(백엔드가 주는 문자열) → @fox 아이콘 컴포넌트.

+ *

+ * 화이트리스트로 두는 이유 — @fox에는 아이콘이 1,512종 있고, 이름으로 동적 import를 하면

+ * 번들러가 무엇이 쓰일지 몰라 전부 싣게 된다. 여기 적힌 것만 번들에 들어간다.

+ *

+ * 목록은 시안 1depth가 쓰는 세트다. 백엔드가 새 이름을 보내면 여기에 한 줄 추가한다 —

+ * 모르는 이름이 와도 화면은 깨지지 않고 기본 아이콘으로 그려진다.

+ */

+const ICONS: Record<string, ComponentType<FoxIconProps>> = {

+  house: FoxHouseIcon,

+  'users-three': FoxUsersThreeIcon,

+  'user-square': FoxUserSquareIcon,

+  'potted-plant': FoxPottedPlantIcon,

+  'pencil-simple': FoxPencilSimpleIcon,

+  medal: FoxMedalIcon,

+  'identification-card': FoxIdentificationCardIcon,

+  'calendar-star': FoxCalendarStarIcon,

+  nut: FoxNutIcon,

+  'shield-check': FoxShieldCheckIcon,

+  'phone-call': FoxPhoneCallIcon,

+  'chart-bar': FoxChartBarIcon,

+};

+

+/** 모르는 이름이 왔을 때. 메뉴가 통째로 사라지는 것보다 낫다. */

+const FALLBACK = FoxSquaresFourIcon;

+

+interface SidebarMenuIconProps {

+  name: string;

+}

+

+/** 시안 1depth 아이콘은 Fill 굵기다. */

+export function SidebarMenuIcon({ name }: SidebarMenuIconProps) {

+  const Icon = ICONS[name] ?? FALLBACK;

+  return <Icon weight="fill" />;

+}

+import { useCallback, useMemo, useState } from 'react';

+import type {

+  SidebarMenu,

+  SidebarMenuChild,

+  SidebarMenuItem,

+} from '@/lib/domain/sidebar-menu';

+ * 사이드바 펼침·활성 상태(ViewModel). 트리는 서버가 준 값을 그대로 받고, 이 훅은 "지금 어디에

+ * 있는가"와 "무엇이 펼쳐져 있는가"만 판정한다.

+ * 펼침은 **현재 경로에서 파생된 기본값 + 사용자가 누른 값**의 2층이다. 그래서 링크를 눌러

+ * 이동하면 그 가지가 저절로 열리고, 사용자가 직접 접으면 그 선택이 유지된다. 열림 목록을

+ * 상태로만 들고 있으면 이동할 때마다 손으로 다시 열어야 한다.

+export interface SidebarNavState {

+  /** 이 href가 현재 경로인가. */

+  isActive: (href?: string) => boolean;

+  /** 1depth 항목이 펼쳐져 있는가. */

+  isItemOpen: (item: SidebarMenuItem) => boolean;

+  toggleItem: (id: string) => void;

+  /** 2depth 항목이 펼쳐져 있는가. */

+  isChildOpen: (child: SidebarMenuChild) => boolean;

+  toggleChild: (id: string) => void;

+  /** 자손 중에 현재 경로가 있는가 — 1depth를 활성으로 칠할지 판단한다. */

+  containsActive: (item: SidebarMenuItem) => boolean;

+}

+

+function childContainsPath(child: SidebarMenuChild, pathname: string): boolean {

+  return (

+    child.href === pathname ||

+    (child.children?.some((leaf) => leaf.href === pathname) ?? false)

+  );

+}

+

+function itemContainsPath(item: SidebarMenuItem, pathname: string): boolean {

+  return (

+    item.href === pathname ||

+    (item.children?.some((child) => childContainsPath(child, pathname)) ?? false)

+  );

+}

+

+export function useSidebarNav(menu: SidebarMenu): SidebarNavState {

+  // 사용자가 직접 누른 것만 담는다. 없으면 경로에서 파생된 기본값을 쓴다.

+  const [itemOverrides, setItemOverrides] = useState<Record<string, boolean>>({});

+  const [childOverrides, setChildOverrides] = useState<Record<string, boolean>>(

+    {}

+  );

+  // 현재 경로를 품은 가지 — 기본 펼침 대상이다.

+  const openByPath = useMemo(() => {

+    const items = new Set<string>();

+    const children = new Set<string>();

+    for (const section of menu.sections) {

+      for (const item of section.items) {

+        if (!itemContainsPath(item, pathname)) {

+          continue;

+        }

+        items.add(item.id);