Commit @eabb484e977a0540ca79671e50a0fc8b4522c924

임동욱 08-20

refactor: 디자인 테스트 사이드바를 본 프로젝트 사이드바 디자인으로

admin-sidebar(시안 snb-area 3041:11860)의 규칙을 그대로 옮겼다. 240px 폭,
회색→옅은 파랑 그라데이션, 1depth 알약(multiply)·2depth 흰 카드·3depth 들여쓰기.
@fox 폴더만 복사해도 하니스가 따라가야 해서 app SCSS를 참조하지 않고 옮겨 적었다.

깊이를 맞추려고 트리도 본 프로젝트와 같은 3depth 접힘으로 바꿨다. 상위 분류가 없는
토큰 섹션(Size·Theme·Primitive)은 자식 없는 1depth라 바로 선택된다. 펼침은
useSidebarNav와 같이 "선택 항목에서 파생된 기본값 + 사용자가 누른 값" 2층이다.

시안에 없어 남긴 것: 선택 가능한 행의 개수 배지(캐럿 자리)와 focus-visible 윤곽선.

Co-Authored-By: Claude Opus 5

@eabb484e977a0540ca79671e50a0fc8b4522c924

94a8d94

eabb484

@fox/dev-test/dev-test-page.tsx

--- @fox/dev-test/dev-test-page.tsx

+++ @fox/dev-test/dev-test-page.tsx


 "use client";
 
-import { useSyncExternalStore } from "react";
+import { useState, useSyncExternalStore } from "react";
 import { FoxBadge } from "../core/components/fox-badge";
+import { FoxCaretDownIcon, FoxCaretUpIcon, FoxStarIcon } from "../core/icons";
 import { cx } from "../core/utils";
 import { COMPONENT_GROUPS } from "./component-groups";
 import { COMPONENT_EXAMPLES } from "./component-registry";

   return groups;
 }
 
+type TokenGroup = ReturnType<typeof groupedSections>[number];
+type ComponentGroupView = ReturnType<typeof groupedComponents>[number];
+type Selection = { kind: string; id: string };
+
+function tokenGroupId(category: string): string {
+  return `token:${category}`;
+}
+
+function componentGroupId(label: string): string {
+  return `component:${label}`;
+}
+
+/**
+ * 선택된 항목을 품은 가지 — 기본 펼침 대상이다. 사용자가 직접 누른 값이 있으면 그쪽이
+ * 이기고, 없으면 이 값을 쓴다(본 프로젝트 사이드바 `useSidebarNav`와 같은 방식).
+ */
+function defaultOpenIds(
+  current: Selection,
+  tokenGroups: TokenGroup[],
+  componentGroups: ComponentGroupView[]
+): Set<string> {
+  const ids = new Set<string>();
+
+  if (current.kind === "token") {
+    for (const group of tokenGroups) {
+      if (group.category && group.sections.some((section) => section.id === current.id)) {
+        ids.add(tokenGroupId(group.category));
+      }
+    }
+    return ids;
+  }
+
+  for (const group of componentGroups) {
+    for (const subgroup of group.subgroups) {
+      if (subgroup.examples.some((example) => example.id === current.id)) {
+        ids.add(componentGroupId(group.label));
+        ids.add(`${componentGroupId(group.label)}/${subgroup.label}`);
+      }
+    }
+  }
+
+  return ids;
+}
+
+function CountBadge({ value }: { value: number }) {
+  return (
+    <span className={styles.count}>
+      <FoxBadge type="pastel" color="neutral" size="sm">
+        {String(value)}
+      </FoxBadge>
+    </span>
+  );
+}
+
 export function DevTestPage() {
   const selection = useSelection();
   const sections = useCssTokens();
+  // 사용자가 직접 누른 것만 담는다. 없으면 선택 항목에서 파생된 기본값을 쓴다.
+  const [openOverrides, setOpenOverrides] = useState<Record<string, boolean>>({});
 
   if (!sections) {
     return (

   const current = selection ?? { kind: "token", id: sections[0]?.id ?? "" };
   const activeSection = sections.find((section) => section.id === current.id);
 
+  const tokenGroups = groupedSections(sections);
+  const componentGroups = groupedComponents();
+  const openByDefault = defaultOpenIds(current, tokenGroups, componentGroups);
+
+  const isOpen = (id: string) => openOverrides[id] ?? openByDefault.has(id);
+  const toggle = (id: string) =>
+    setOpenOverrides((prev) => ({ ...prev, [id]: !(prev[id] ?? openByDefault.has(id)) }));
+
+  const isTokenActive = (id: string) => current.kind === "token" && current.id === id;
+  const isComponentActive = (id: string) => current.kind === "component" && current.id === id;
+
   return (
     <div className={styles.shell}>
       <aside className={styles.sidebar}>
-        <div className={styles.brand}>
-          <span className={styles.brandTitle}>@fox 디자인 시스템</span>
-          <span className={styles.brandNote}>개발 전용 테스트 페이지</span>
-        </div>
-
-        <ThemeSwitch />
-
-        <nav className={styles.nav} aria-label="섹션">
-          <div className={styles.navGroup}>
-            <h2 className={styles.navGroupTitle}>토큰 · {totalTokens}</h2>
-
-            {groupedSections(sections).map((group) => (
-              <div key={group.category ?? group.sections[0].id} className={styles.navSubGroup}>
-                {group.category ? (
-                  <h3 className={styles.navSubTitle}>{group.category}</h3>
-                ) : null}
-                <ul className={styles.navList}>
-                  {group.sections.map((section) => (
-                    <li key={section.id}>
-                      <button
-                        type="button"
-                        className={styles.navItem}
-                        aria-current={
-                          current.kind === "token" && current.id === section.id ? "page" : undefined
-                        }
-                        onClick={() => select("token", section.id)}
-                      >
-                        <span>{section.label}</span>
-                        <FoxBadge type="pastel" color="neutral" size="sm">
-                          {String(section.tokens.length)}
-                        </FoxBadge>
-                      </button>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
+        <div className={styles.top}>
+          <div className={styles.brand}>
+            <span className={styles.brandTitle}>@fox 디자인 시스템</span>
+            <span className={styles.brandNote}>개발 전용 테스트 페이지</span>
           </div>
 
-          <div className={styles.navGroup}>
-            <h2 className={styles.navGroupTitle}>컴포넌트 · {COMPONENT_EXAMPLES.length}</h2>
+          <ThemeSwitch />
+        </div>
 
-            {groupedComponents().map((group) => (
-              <div key={group.label} className={styles.navSubGroup}>
-                <h3 className={styles.navSubTitle}>{group.label}</h3>
+        <nav aria-label="섹션">
+          <section className={styles.section}>
+            <h2 className={styles.sectionTitle}>토큰 · {totalTokens}</h2>
 
-                {group.subgroups.map((subgroup) => (
-                  <div key={subgroup.label} className={styles.navLeaf}>
-                    <h4 className={styles.navLeafTitle}>{subgroup.label}</h4>
-                    <ul className={styles.navList}>
-                      {subgroup.examples.map((example) => (
-                        <li key={example.id}>
-                          <button
-                            type="button"
-                            className={styles.navItem}
-                            aria-current={
-                              current.kind === "component" && current.id === example.id
-                                ? "page"
-                                : undefined
-                            }
-                            onClick={() => select("component", example.id)}
-                          >
-                            <span>{example.name}</span>
-                            <FoxBadge type="pastel" color="neutral" size="sm">
-                              {String(example.variants.length)}
-                            </FoxBadge>
-                          </button>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                ))}
-              </div>
-            ))}
+            <ul className={styles.list}>
+              {tokenGroups.map((group) => {
+                // 상위 분류가 없는 섹션은 1depth에서 바로 고른다.
+                if (!group.category) {
+                  return group.sections.map((section) => (
+                    <li key={section.id} className={styles.item}>
+                      <button
+                        type="button"
+                        className={cx(
+                          styles.itemButton,
+                          isTokenActive(section.id) && styles.itemButtonActive
+                        )}
+                        aria-current={isTokenActive(section.id) ? "page" : undefined}
+                        onClick={() => select("token", section.id)}
+                      >
+                        <span className={styles.itemLabel}>{section.label}</span>
+                        <CountBadge value={section.tokens.length} />
+                      </button>
+                    </li>
+                  ));
+                }
 
-            <ul className={styles.navList}>
+                const groupId = tokenGroupId(group.category);
+                const open = isOpen(groupId);
+                const containsActive = group.sections.some((section) =>
+                  isTokenActive(section.id)
+                );
+
+                return (
+                  <li key={groupId} className={styles.item}>
+                    <button
+                      type="button"
+                      className={cx(
+                        styles.itemButton,
+                        containsActive && styles.itemButtonActive
+                      )}
+                      aria-expanded={open}
+                      onClick={() => toggle(groupId)}
+                    >
+                      <span className={styles.itemLabel}>{group.category}</span>
+                    </button>
+
+                    {open && (
+                      <ul className={styles.childGroup}>
+                        {group.sections.map((section) => (
+                          <li key={section.id} className={styles.child}>
+                            <button
+                              type="button"
+                              className={cx(
+                                styles.childRow,
+                                isTokenActive(section.id) && styles.childRowActive
+                              )}
+                              aria-current={isTokenActive(section.id) ? "page" : undefined}
+                              onClick={() => select("token", section.id)}
+                            >
+                              <span className={cx(styles.childMark, styles.childMarkHidden)}>
+                                <FoxStarIcon />
+                              </span>
+                              <span className={styles.childLabel}>{section.label}</span>
+                              <CountBadge value={section.tokens.length} />
+                            </button>
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          </section>
+
+          <section className={styles.section}>
+            <h2 className={styles.sectionTitle}>컴포넌트 · {COMPONENT_EXAMPLES.length}</h2>
+
+            <ul className={styles.list}>
+              {componentGroups.map((group) => {
+                const groupId = componentGroupId(group.label);
+                const open = isOpen(groupId);
+                const containsActive = group.subgroups.some((subgroup) =>
+                  subgroup.examples.some((example) => isComponentActive(example.id))
+                );
+
+                return (
+                  <li key={group.label} className={styles.item}>
+                    <button
+                      type="button"
+                      className={cx(
+                        styles.itemButton,
+                        containsActive && styles.itemButtonActive
+                      )}
+                      aria-expanded={open}
+                      onClick={() => toggle(groupId)}
+                    >
+                      <span className={styles.itemLabel}>{group.label}</span>
+                    </button>
+
+                    {open && (
+                      <ul className={styles.childGroup}>
+                        {group.subgroups.map((subgroup) => {
+                          const subgroupId = `${groupId}/${subgroup.label}`;
+                          const subgroupOpen = isOpen(subgroupId);
+
+                          return (
+                            <li key={subgroup.label} className={styles.child}>
+                              <button
+                                type="button"
+                                className={cx(
+                                  styles.childRow,
+                                  subgroupOpen && styles.childRowActive
+                                )}
+                                aria-expanded={subgroupOpen}
+                                onClick={() => toggle(subgroupId)}
+                              >
+                                <span className={styles.childMark}>
+                                  <FoxStarIcon />
+                                </span>
+                                <span className={styles.childLabel}>{subgroup.label}</span>
+                                <span className={styles.childMark}>
+                                  {subgroupOpen ? <FoxCaretUpIcon /> : <FoxCaretDownIcon />}
+                                </span>
+                              </button>
+
+                              {subgroupOpen && (
+                                <ul className={styles.leafGroup}>
+                                  {subgroup.examples.map((example) => (
+                                    <li key={example.id} className={styles.child}>
+                                      <button
+                                        type="button"
+                                        className={cx(
+                                          styles.leaf,
+                                          isComponentActive(example.id) && styles.leafActive
+                                        )}
+                                        aria-current={
+                                          isComponentActive(example.id) ? "page" : undefined
+                                        }
+                                        onClick={() => select("component", example.id)}
+                                      >
+                                        <span className={styles.childMark}>
+                                          <FoxStarIcon />
+                                        </span>
+                                        <span className={styles.childLabel}>{example.name}</span>
+                                        <CountBadge value={example.variants.length} />
+                                      </button>
+                                    </li>
+                                  ))}
+                                </ul>
+                              )}
+                            </li>
+                          );
+                        })}
+                      </ul>
+                    )}
+                  </li>
+                );
+              })}
+
               {/* 컴포넌트가 아니라 안내라 항상 맨 아래에 두고 생김새를 달리한다. */}
-              <li>
+              <li className={styles.item}>
                 <button
                   type="button"
-                  className={cx(styles.navItem, styles.navItemGuide)}
+                  className={cx(
+                    styles.itemButton,
+                    styles.guideButton,
+                    current.kind === "component" &&
+                      !isRegistered(current.id) &&
+                      styles.guideButtonActive
+                  )}
                   aria-current={
                     current.kind === "component" && !isRegistered(current.id) ? "page" : undefined
                   }
                   onClick={() => select("component", GUIDE_ID)}
                 >
-                  <span>추가 방법</span>
-                  <span aria-hidden="true" className={styles.navGuideMark}>
+                  <span className={styles.itemLabel}>추가 방법</span>
+                  <span aria-hidden="true" className={styles.guideMark}>
                     +
                   </span>
                 </button>
               </li>
             </ul>
-          </div>
+          </section>
         </nav>
       </aside>
 

94a8d94

eabb484

@fox/dev-test/dev-test.module.scss

--- @fox/dev-test/dev-test.module.scss

+++ @fox/dev-test/dev-test.module.scss


   @include fox.pc {
     // 화면을 넘지 않게 못박고 스크롤은 두 칸이 각자 갖는다.
     block-size: 100dvh;
-    grid-template-columns: 26rem 1fr;
+    grid-template-columns: 24rem 1fr;
     overflow: hidden;
   }
 }

 }
 
 // ── 사이드바 ────────────────────────────────────────────────────────────────
+// 본 프로젝트 사이드바(app/(protected)/(basic)/_components/admin-sidebar)와 같은 생김새다.
+// @fox 폴더만 복사해도 하니스가 따라가야 해서 규칙을 옮겨 적었다.
 .sidebar {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: fox.gap(5);
-  padding: fox.padding(7);
-  border-block-end: fox.border(1) solid fox.color(border-neutral-subtle);
-  background: fox.color(surface-neutral-gray);
+  padding: fox.padding(5);
+  border-block-end: fox.border(1) solid fox.color(border-neutral-subtler);
+  background: linear-gradient(
+    to bottom,
+    fox.color(surface-neutral-gray) 70%,
+    fox.color(surface-theme-primary)
+  );
 
   @include fox.pc {
     min-block-size: 0;
     overflow-y: auto;
     border-block-end: 0;
-    border-inline-end: fox.border(1) solid fox.color(border-neutral-subtle);
+    box-shadow: inset calc(-1 * #{fox.border(1)}) 0 0 0
+      fox.color(border-neutral-subtler);
   }
+}
+
+.top {
+  display: flex;
+  flex-direction: column;
+  gap: fox.gap(3);
+  padding-block-end: fox.spacing(bottom-sm);
+  border-block-end: fox.border(1) solid fox.color(border-neutral-subtle);
 }
 
 .brand {

 }
 
 .brandTitle {
+  color: fox.color(font-neutral-default);
+  font-family: fox.font-family(title);
   font-size: fox.font-size(heading-sm);
   font-weight: fox.font-weight(bold);
+  letter-spacing: -0.025em;
 }
 
 .brandNote {

   font-size: fox.font-size(label-xsm);
 }
 
-.nav {
+// ── 섹션 ────────────────────────────────────────────────────────────────────
+.section {
   display: flex;
+  inline-size: 100%;
   flex-direction: column;
-  gap: fox.gap(6);
+  align-items: flex-start;
+  padding-block-start: fox.spacing(top-sm);
+  padding-block-end: fox.spacing(bottom-md);
 }
 
-.navGroup {
-  display: flex;
-  flex-direction: column;
-  gap: fox.gap(2);
-}
-
-.navGroupTitle {
-  padding-inline: fox.padding(3);
+.sectionTitle {
+  inline-size: 100%;
+  margin: 0;
+  padding-block-end: fox.spacing(bottom-sm);
   color: fox.color(font-neutral-subtler);
-  font-size: fox.font-size(label-xsm);
+  font-family: fox.font-family(title);
+  font-size: fox.font-size(heading-2xsm);
   font-weight: fox.font-weight(bold);
-  letter-spacing: 0.04em;
+  line-height: 1.4;
+  letter-spacing: -0.025em;
 }
 
-// Mode / Responsive 처럼 하위 항목을 묶는 분류.
-.navSubGroup {
+.list {
   display: flex;
+  inline-size: 100%;
   flex-direction: column;
-  gap: fox.gap(1);
-  margin-block-start: fox.gap(2);
-}
-
-.navSubTitle {
-  padding-inline: fox.padding(3);
-  color: fox.color(font-neutral-subtler);
-  font-size: fox.font-size(label-xsm);
-  font-weight: fox.font-weight(medium);
-  opacity: 0.8;
-}
-
-// 3depth — 대분류(navSubTitle) 아래 소분류.
-.navLeaf {
-  display: flex;
-  flex-direction: column;
-  gap: fox.gap(1);
-  margin-block-start: fox.gap(1);
-  padding-inline-start: fox.padding(3);
-}
-
-.navLeafTitle {
-  padding-inline: fox.padding(3);
-  color: fox.color(font-neutral-subtler);
-  font-size: fox.font-size(label-xsm);
-  font-weight: fox.font-weight(regular);
-  opacity: 0.7;
-}
-
-.navList {
-  display: flex;
-  flex-direction: column;
-  gap: fox.gap(1);
+  align-items: flex-start;
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.navItem {
+.item {
+  inline-size: 100%;
+}
+
+// ── 1depth ──────────────────────────────────────────────────────────────────
+.itemButton {
   display: flex;
   inline-size: 100%;
   align-items: center;
-  justify-content: space-between;
-  gap: fox.gap(3);
-  padding: fox.padding(3) fox.padding(4);
+  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-size: fox.font-size(label-sm);
+  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;
-
-  &:hover {
-    background: fox.color(button-default-surface-hover);
-    color: fox.color(font-neutral-default);
-  }
-
-  &[aria-current="page"] {
-    background: fox.color(button-primary-surface);
-    color: fox.color(button-primary-font);
-  }
-
-  &:focus-visible {
-    outline: fox.border(2) solid fox.color(border-theme-primary);
-    outline-offset: fox.border(1);
-  }
+  cursor: pointer;
+  mix-blend-mode: multiply;
 }
 
-// "추가 방법"은 컴포넌트가 아니라 안내다. 목록 맨 아래에 두고 점선 테두리로 구분해,
-// 등록된 컴포넌트 탭과 같은 층위로 읽히지 않게 한다.
-// `.navItem` 뒤에 와야 선택 상태(aria-current)를 덮어쓴다 — 특이도가 같아 순서가 정한다.
-.navItemGuide {
+.itemButtonActive {
+  background: fox.color(action-secondary-active);
+  color: fox.color(font-neutral-strong-inverse);
+  mix-blend-mode: normal;
+}
+
+.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-radius: fox.radius(3);
+  box-shadow: inset 0 0 0 fox.border(1) fox.color(border-neutral-subtler);
+  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;
+  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);
+  border: none;
+  background: none;
+  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-align: start;
+  cursor: pointer;
+}
+
+.leafActive {
+  color: fox.color(font-theme-secondary);
+}
+
+// 시안에 없는 상태 — 키보드로 훑을 수 있어야 해서 남긴다.
+.itemButton:focus-visible,
+.childRow:focus-visible,
+.leaf:focus-visible {
+  outline: fox.border(2) solid fox.color(border-theme-primary);
+  outline-offset: fox.border(1);
+}
+
+// 시안에 없는 컴포넌트별 개수 표시. 캐럿이 서는 자리에 둔다.
+.count {
+  flex-shrink: 0;
+}
+
+// "추가 방법"은 컴포넌트가 아니라 안내다. 목록 맨 아래에 두고 테두리로 구분해, 등록된
+// 컴포넌트와 같은 층위로 읽히지 않게 한다.
+.guideButton {
   margin-block-start: fox.gap(2);
-  border: fox.border(1) dashed fox.color(border-neutral-strong);
+  box-shadow: inset 0 0 0 fox.border(1) fox.color(border-neutral-strong);
   background: none;
   color: fox.color(font-neutral-subtler);
-
-  &:hover {
-    border-color: fox.color(border-theme-primary);
-    background: none;
-    color: fox.color(font-theme-primary);
-  }
-
-  &[aria-current="page"] {
-    border-style: solid;
-    border-color: fox.color(border-theme-primary);
-    background: none;
-    color: fox.color(font-theme-primary);
-  }
+  mix-blend-mode: normal;
 }
 
-.navGuideMark {
+.guideButtonActive {
+  box-shadow: inset 0 0 0 fox.border(1) fox.color(border-theme-primary);
+  color: fox.color(font-theme-primary);
+}
+
+.guideMark {
   font-size: fox.font-size(label-lg);
   line-height: 1;
 }
 
+
 // ── 본문 ────────────────────────────────────────────────────────────────────
 .content {
   min-inline-size: 0;

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,7 +1,8 @@
1	1	"use client";
2	2
3		-import { useSyncExternalStore } from "react";
	3	+import { useState, useSyncExternalStore } from "react";
4	4	import { FoxBadge } from "../core/components/fox-badge";
	5	+import { FoxCaretDownIcon, FoxCaretUpIcon, FoxStarIcon } from "../core/icons";
5	6	import { cx } from "../core/utils";
6	7	import { COMPONENT_GROUPS } from "./component-groups";
7	8	import { COMPONENT_EXAMPLES } from "./component-registry";
...	...	@@ -86,9 +87,65 @@
86	87	return groups;
87	88	}
88	89
	90	+type TokenGroup = ReturnType<typeof groupedSections>[number];
	91	+type ComponentGroupView = ReturnType<typeof groupedComponents>[number];
	92	+type Selection = { kind: string; id: string };
	93	+
	94	+function tokenGroupId(category: string): string {
	95	+ return `token:${category}`;
	96	+}
	97	+
	98	+function componentGroupId(label: string): string {
	99	+ return `component:${label}`;
	100	+}
	101	+
	102	+/**
	103	+ * 선택된 항목을 품은 가지 — 기본 펼침 대상이다. 사용자가 직접 누른 값이 있으면 그쪽이
	104	+ * 이기고, 없으면 이 값을 쓴다(본 프로젝트 사이드바 `useSidebarNav`와 같은 방식).
	105	+ */
	106	+function defaultOpenIds(
	107	+ current: Selection,
	108	+ tokenGroups: TokenGroup[],
	109	+ componentGroups: ComponentGroupView[]
	110	+): Set<string> {
	111	+ const ids = new Set<string>();
	112	+
	113	+ if (current.kind === "token") {
	114	+ for (const group of tokenGroups) {
	115	+ if (group.category && group.sections.some((section) => section.id === current.id)) {
	116	+ ids.add(tokenGroupId(group.category));
	117	+ }
	118	+ }
	119	+ return ids;
	120	+ }
	121	+
	122	+ for (const group of componentGroups) {
	123	+ for (const subgroup of group.subgroups) {
	124	+ if (subgroup.examples.some((example) => example.id === current.id)) {
	125	+ ids.add(componentGroupId(group.label));
	126	+ ids.add(`${componentGroupId(group.label)}/${subgroup.label}`);
	127	+ }
	128	+ }
	129	+ }
	130	+
	131	+ return ids;
	132	+}
	133	+
	134	+function CountBadge({ value }: { value: number }) {
	135	+ return (
	136	+ <span className={styles.count}>
	137	+ <FoxBadge type="pastel" color="neutral" size="sm">
	138	+ {String(value)}
	139	+ </FoxBadge>
	140	+ </span>
	141	+ );
	142	+}
	143	+
89	144	export function DevTestPage() {
90	145	const selection = useSelection();
91	146	const sections = useCssTokens();
	147	+ // 사용자가 직접 누른 것만 담는다. 없으면 선택 항목에서 파생된 기본값을 쓴다.
	148	+ const [openOverrides, setOpenOverrides] = useState<Record<string, boolean>>({});
92	149
93	150	if (!sections) {
94	151	return (
...	...	@@ -102,103 +159,213 @@
102	159	const current = selection ?? { kind: "token", id: sections[0]?.id ?? "" };
103	160	const activeSection = sections.find((section) => section.id === current.id);
104	161
	162	+ const tokenGroups = groupedSections(sections);
	163	+ const componentGroups = groupedComponents();
	164	+ const openByDefault = defaultOpenIds(current, tokenGroups, componentGroups);
	165	+
	166	+ const isOpen = (id: string) => openOverrides[id] ?? openByDefault.has(id);
	167	+ const toggle = (id: string) =>
	168	+ setOpenOverrides((prev) => ({ ...prev, [id]: !(prev[id] ?? openByDefault.has(id)) }));
	169	+
	170	+ const isTokenActive = (id: string) => current.kind === "token" && current.id === id;
	171	+ const isComponentActive = (id: string) => current.kind === "component" && current.id === id;
	172	+
105	173	return (
106	174	<div className={styles.shell}>
107	175	<aside className={styles.sidebar}>
108		- <div className={styles.brand}>
109		- <span className={styles.brandTitle}>@fox 디자인 시스템</span>
110		- <span className={styles.brandNote}>개발 전용 테스트 페이지</span>
111		- </div>
112		-
113		- <ThemeSwitch />
114		-
115		- <nav className={styles.nav} aria-label="섹션">
116		- <div className={styles.navGroup}>
117		- <h2 className={styles.navGroupTitle}>토큰 · {totalTokens}</h2>
118		-
119		- {groupedSections(sections).map((group) => (
120		- <div key={group.category ?? group.sections[0].id} className={styles.navSubGroup}>
121		- {group.category ? (
122		- <h3 className={styles.navSubTitle}>{group.category}</h3>
123		- ) : null}
124		- <ul className={styles.navList}>
125		- {group.sections.map((section) => (
126		- <li key={section.id}>
127		- <button
128		- type="button"
129		- className={styles.navItem}
130		- aria-current={
131		- current.kind === "token" && current.id === section.id ? "page" : undefined
132		- }
133		- onClick={() => select("token", section.id)}
134		- >
135		- <span>{section.label}</span>
136		- <FoxBadge type="pastel" color="neutral" size="sm">
137		- {String(section.tokens.length)}
138		- </FoxBadge>
139		- </button>
140		- </li>
141		- ))}
142		- </ul>
143		- </div>
144		- ))}
	176	+ <div className={styles.top}>
	177	+ <div className={styles.brand}>
	178	+ <span className={styles.brandTitle}>@fox 디자인 시스템</span>
	179	+ <span className={styles.brandNote}>개발 전용 테스트 페이지</span>
145	180	</div>
146	181
147		- <div className={styles.navGroup}>
148		- <h2 className={styles.navGroupTitle}>컴포넌트 · {COMPONENT_EXAMPLES.length}</h2>
	182	+ <ThemeSwitch />
	183	+ </div>
149	184
150		- {groupedComponents().map((group) => (
151		- <div key={group.label} className={styles.navSubGroup}>
152		- <h3 className={styles.navSubTitle}>{group.label}</h3>
	185	+ <nav aria-label="섹션">
	186	+ <section className={styles.section}>
	187	+ <h2 className={styles.sectionTitle}>토큰 · {totalTokens}</h2>
153	188
154		- {group.subgroups.map((subgroup) => (
155		- <div key={subgroup.label} className={styles.navLeaf}>
156		- <h4 className={styles.navLeafTitle}>{subgroup.label}</h4>
157		- <ul className={styles.navList}>
158		- {subgroup.examples.map((example) => (
159		- <li key={example.id}>
160		- <button
161		- type="button"
162		- className={styles.navItem}
163		- aria-current={
164		- current.kind === "component" && current.id === example.id
165		- ? "page"
166		- : undefined
167		- }
168		- onClick={() => select("component", example.id)}
169		- >
170		- <span>{example.name}</span>
171		- <FoxBadge type="pastel" color="neutral" size="sm">
172		- {String(example.variants.length)}
173		- </FoxBadge>
174		- </button>
175		- </li>
176		- ))}
177		- </ul>
178		- </div>
179		- ))}
180		- </div>
181		- ))}
	189	+ <ul className={styles.list}>
	190	+ {tokenGroups.map((group) => {
	191	+ // 상위 분류가 없는 섹션은 1depth에서 바로 고른다.
	192	+ if (!group.category) {
	193	+ return group.sections.map((section) => (
	194	+ <li key={section.id} className={styles.item}>
	195	+ <button
	196	+ type="button"
	197	+ className={cx(
	198	+ styles.itemButton,
	199	+ isTokenActive(section.id) && styles.itemButtonActive
	200	+ )}
	201	+ aria-current={isTokenActive(section.id) ? "page" : undefined}
	202	+ onClick={() => select("token", section.id)}
	203	+ >
	204	+ <span className={styles.itemLabel}>{section.label}</span>
	205	+ <CountBadge value={section.tokens.length} />
	206	+ </button>
	207	+ </li>
	208	+ ));
	209	+ }
182	210
183		- <ul className={styles.navList}>
	211	+ const groupId = tokenGroupId(group.category);
	212	+ const open = isOpen(groupId);
	213	+ const containsActive = group.sections.some((section) =>
	214	+ isTokenActive(section.id)
	215	+ );
	216	+
	217	+ return (
	218	+ <li key={groupId} className={styles.item}>
	219	+ <button
	220	+ type="button"
	221	+ className={cx(
	222	+ styles.itemButton,
	223	+ containsActive && styles.itemButtonActive
	224	+ )}
	225	+ aria-expanded={open}
	226	+ onClick={() => toggle(groupId)}
	227	+ >
	228	+ <span className={styles.itemLabel}>{group.category}</span>
	229	+ </button>
	230	+
	231	+ {open && (
	232	+ <ul className={styles.childGroup}>
	233	+ {group.sections.map((section) => (
	234	+ <li key={section.id} className={styles.child}>
	235	+ <button
	236	+ type="button"
	237	+ className={cx(
	238	+ styles.childRow,
	239	+ isTokenActive(section.id) && styles.childRowActive
	240	+ )}
	241	+ aria-current={isTokenActive(section.id) ? "page" : undefined}
	242	+ onClick={() => select("token", section.id)}
	243	+ >
	244	+ <span className={cx(styles.childMark, styles.childMarkHidden)}>
	245	+ <FoxStarIcon />
	246	+ </span>
	247	+ <span className={styles.childLabel}>{section.label}</span>
	248	+ <CountBadge value={section.tokens.length} />
	249	+ </button>
	250	+ </li>
	251	+ ))}
	252	+ </ul>
	253	+ )}
	254	+ </li>
	255	+ );
	256	+ })}
	257	+ </ul>
	258	+ </section>
	259	+
	260	+ <section className={styles.section}>
	261	+ <h2 className={styles.sectionTitle}>컴포넌트 · {COMPONENT_EXAMPLES.length}</h2>
	262	+
	263	+ <ul className={styles.list}>
	264	+ {componentGroups.map((group) => {
	265	+ const groupId = componentGroupId(group.label);
	266	+ const open = isOpen(groupId);
	267	+ const containsActive = group.subgroups.some((subgroup) =>
	268	+ subgroup.examples.some((example) => isComponentActive(example.id))
	269	+ );
	270	+
	271	+ return (
	272	+ <li key={group.label} className={styles.item}>
	273	+ <button
	274	+ type="button"
	275	+ className={cx(
	276	+ styles.itemButton,
	277	+ containsActive && styles.itemButtonActive
	278	+ )}
	279	+ aria-expanded={open}
	280	+ onClick={() => toggle(groupId)}
	281	+ >
	282	+ <span className={styles.itemLabel}>{group.label}</span>
	283	+ </button>
	284	+
	285	+ {open && (
	286	+ <ul className={styles.childGroup}>
	287	+ {group.subgroups.map((subgroup) => {
	288	+ const subgroupId = `${groupId}/${subgroup.label}`;
	289	+ const subgroupOpen = isOpen(subgroupId);
	290	+
	291	+ return (
	292	+ <li key={subgroup.label} className={styles.child}>
	293	+ <button
	294	+ type="button"
	295	+ className={cx(
	296	+ styles.childRow,
	297	+ subgroupOpen && styles.childRowActive
	298	+ )}
	299	+ aria-expanded={subgroupOpen}
	300	+ onClick={() => toggle(subgroupId)}
	301	+ >
	302	+ <span className={styles.childMark}>
	303	+ <FoxStarIcon />
	304	+ </span>
	305	+ <span className={styles.childLabel}>{subgroup.label}</span>
	306	+ <span className={styles.childMark}>
	307	+ {subgroupOpen ? <FoxCaretUpIcon /> : <FoxCaretDownIcon />}
	308	+ </span>
	309	+ </button>
	310	+
	311	+ {subgroupOpen && (
	312	+ <ul className={styles.leafGroup}>
	313	+ {subgroup.examples.map((example) => (
	314	+ <li key={example.id} className={styles.child}>
	315	+ <button
	316	+ type="button"
	317	+ className={cx(
	318	+ styles.leaf,
	319	+ isComponentActive(example.id) && styles.leafActive
	320	+ )}
	321	+ aria-current={
	322	+ isComponentActive(example.id) ? "page" : undefined
	323	+ }
	324	+ onClick={() => select("component", example.id)}
	325	+ >
	326	+ <span className={styles.childMark}>
	327	+ <FoxStarIcon />
	328	+ </span>
	329	+ <span className={styles.childLabel}>{example.name}</span>
	330	+ <CountBadge value={example.variants.length} />
	331	+ </button>
	332	+ </li>
	333	+ ))}
	334	+ </ul>
	335	+ )}
	336	+ </li>
	337	+ );
	338	+ })}
	339	+ </ul>
	340	+ )}
	341	+ </li>
	342	+ );
	343	+ })}
	344	+
184	345	{/* 컴포넌트가 아니라 안내라 항상 맨 아래에 두고 생김새를 달리한다. */}
185		- <li>
	346	+ <li className={styles.item}>
186	347	<button
187	348	type="button"
188		- className={cx(styles.navItem, styles.navItemGuide)}
	349	+ className={cx(
	350	+ styles.itemButton,
	351	+ styles.guideButton,
	352	+ current.kind === "component" &&
	353	+ !isRegistered(current.id) &&
	354	+ styles.guideButtonActive
	355	+ )}
189	356	aria-current={
190	357	current.kind === "component" && !isRegistered(current.id) ? "page" : undefined
191	358	}
192	359	onClick={() => select("component", GUIDE_ID)}
193	360	>
194		- <span>추가 방법</span>
195		- <span aria-hidden="true" className={styles.navGuideMark}>
	361	+ <span className={styles.itemLabel}>추가 방법</span>
	362	+ <span aria-hidden="true" className={styles.guideMark}>
196	363	+
197	364	</span>
198	365	</button>
199	366	</li>
200	367	</ul>
201		- </div>
	368	+ </section>
202	369	</nav>
203	370	</aside>
204	371

...	...	@@ -16,7 +16,7 @@
16	16	@include fox.pc {
17	17	// 화면을 넘지 않게 못박고 스크롤은 두 칸이 각자 갖는다.
18	18	block-size: 100dvh;
19		- grid-template-columns: 26rem 1fr;
	19	+ grid-template-columns: 24rem 1fr;
20	20	overflow: hidden;
21	21	}
22	22	}
...	...	@@ -28,20 +28,35 @@
28	28	}
29	29
30	30	// ── 사이드바 ────────────────────────────────────────────────────────────────
	31	+// 본 프로젝트 사이드바(app/(protected)/(basic)/_components/admin-sidebar)와 같은 생김새다.
	32	+// @fox 폴더만 복사해도 하니스가 따라가야 해서 규칙을 옮겨 적었다.
31	33	.sidebar {
	34	+ box-sizing: border-box;
32	35	display: flex;
33	36	flex-direction: column;
34		- gap: fox.gap(5);
35		- padding: fox.padding(7);
36		- border-block-end: fox.border(1) solid fox.color(border-neutral-subtle);
37		- background: fox.color(surface-neutral-gray);
	37	+ padding: fox.padding(5);
	38	+ border-block-end: fox.border(1) solid fox.color(border-neutral-subtler);
	39	+ background: linear-gradient(
	40	+ to bottom,
	41	+ fox.color(surface-neutral-gray) 70%,
	42	+ fox.color(surface-theme-primary)
	43	+ );
38	44
39	45	@include fox.pc {
40	46	min-block-size: 0;
41	47	overflow-y: auto;
42	48	border-block-end: 0;
43		- border-inline-end: fox.border(1) solid fox.color(border-neutral-subtle);
	49	+ box-shadow: inset calc(-1 * #{fox.border(1)}) 0 0 0
	50	+ fox.color(border-neutral-subtler);
44	51	}
	52	+}
	53	+
	54	+.top {
	55	+ display: flex;
	56	+ flex-direction: column;
	57	+ gap: fox.gap(3);
	58	+ padding-block-end: fox.spacing(bottom-sm);
	59	+ border-block-end: fox.border(1) solid fox.color(border-neutral-subtle);
45	60	}
46	61
47	62	.brand {
...	...	@@ -51,8 +66,11 @@
51	66	}
52	67
53	68	.brandTitle {
	69	+ color: fox.color(font-neutral-default);
	70	+ font-family: fox.font-family(title);
54	71	font-size: fox.font-size(heading-sm);
55	72	font-weight: fox.font-weight(bold);
	73	+ letter-spacing: -0.025em;
56	74	}
57	75
58	76	.brandNote {
...	...	@@ -60,124 +78,210 @@
60	78	font-size: fox.font-size(label-xsm);
61	79	}
62	80
63		-.nav {
	81	+// ── 섹션 ────────────────────────────────────────────────────────────────────
	82	+.section {
64	83	display: flex;
	84	+ inline-size: 100%;
65	85	flex-direction: column;
66		- gap: fox.gap(6);
	86	+ align-items: flex-start;
	87	+ padding-block-start: fox.spacing(top-sm);
	88	+ padding-block-end: fox.spacing(bottom-md);
67	89	}
68	90
69		-.navGroup {
70		- display: flex;
71		- flex-direction: column;
72		- gap: fox.gap(2);
73		-}
74		-
75		-.navGroupTitle {
76		- padding-inline: fox.padding(3);
	91	+.sectionTitle {
	92	+ inline-size: 100%;
	93	+ margin: 0;
	94	+ padding-block-end: fox.spacing(bottom-sm);
77	95	color: fox.color(font-neutral-subtler);
78		- font-size: fox.font-size(label-xsm);
	96	+ font-family: fox.font-family(title);
	97	+ font-size: fox.font-size(heading-2xsm);
79	98	font-weight: fox.font-weight(bold);
80		- letter-spacing: 0.04em;
	99	+ line-height: 1.4;
	100	+ letter-spacing: -0.025em;
81	101	}
82	102
83		-// Mode / Responsive 처럼 하위 항목을 묶는 분류.
84		-.navSubGroup {
	103	+.list {
85	104	display: flex;
	105	+ inline-size: 100%;
86	106	flex-direction: column;
87		- gap: fox.gap(1);
88		- margin-block-start: fox.gap(2);
89		-}
90		-
91		-.navSubTitle {
92		- padding-inline: fox.padding(3);
93		- color: fox.color(font-neutral-subtler);
94		- font-size: fox.font-size(label-xsm);
95		- font-weight: fox.font-weight(medium);
96		- opacity: 0.8;
97		-}
98		-
99		-// 3depth — 대분류(navSubTitle) 아래 소분류.
100		-.navLeaf {
101		- display: flex;
102		- flex-direction: column;
103		- gap: fox.gap(1);
104		- margin-block-start: fox.gap(1);
105		- padding-inline-start: fox.padding(3);
106		-}
107		-
108		-.navLeafTitle {
109		- padding-inline: fox.padding(3);
110		- color: fox.color(font-neutral-subtler);
111		- font-size: fox.font-size(label-xsm);
112		- font-weight: fox.font-weight(regular);
113		- opacity: 0.7;
114		-}
115		-
116		-.navList {
117		- display: flex;
118		- flex-direction: column;
119		- gap: fox.gap(1);
	107	+ align-items: flex-start;
120	108	margin: 0;
121	109	padding: 0;
122	110	list-style: none;
123	111	}
124	112
125		-.navItem {
	113	+.item {
	114	+ inline-size: 100%;
	115	+}
	116	+
	117	+// ── 1depth ──────────────────────────────────────────────────────────────────
	118	+.itemButton {
126	119	display: flex;
127	120	inline-size: 100%;
128	121	align-items: center;
129		- justify-content: space-between;
130		- gap: fox.gap(3);
131		- padding: fox.padding(3) fox.padding(4);
	122	+ gap: fox.gap(2);
	123	+ padding-block: fox.padding(4);
	124	+ padding-inline: fox.padding(3);
	125	+ border: none;
132	126	border-radius: fox.radius(3);
	127	+ background: fox.color(action-secondary);
133	128	color: fox.color(font-neutral-subtle);
134		- font-size: fox.font-size(label-sm);
	129	+ font-family: fox.font-family(title);
	130	+ font-size: 1.4rem;
	131	+ font-weight: fox.font-weight(bold);
	132	+ line-height: 1.4;
	133	+ letter-spacing: -0.025em;
135	134	text-align: start;
136		-
137		- &:hover {
138		- background: fox.color(button-default-surface-hover);
139		- color: fox.color(font-neutral-default);
140		- }
141		-
142		- &[aria-current="page"] {
143		- background: fox.color(button-primary-surface);
144		- color: fox.color(button-primary-font);
145		- }
146		-
147		- &:focus-visible {
148		- outline: fox.border(2) solid fox.color(border-theme-primary);
149		- outline-offset: fox.border(1);
150		- }
	135	+ cursor: pointer;
	136	+ mix-blend-mode: multiply;
151	137	}
152	138
153		-// "추가 방법"은 컴포넌트가 아니라 안내다. 목록 맨 아래에 두고 점선 테두리로 구분해,
154		-// 등록된 컴포넌트 탭과 같은 층위로 읽히지 않게 한다.
155		-// `.navItem` 뒤에 와야 선택 상태(aria-current)를 덮어쓴다 — 특이도가 같아 순서가 정한다.
156		-.navItemGuide {
	139	+.itemButtonActive {
	140	+ background: fox.color(action-secondary-active);
	141	+ color: fox.color(font-neutral-strong-inverse);
	142	+ mix-blend-mode: normal;
	143	+}
	144	+
	145	+.itemLabel {
	146	+ flex: 1 0 0;
	147	+ min-inline-size: 0;
	148	+}
	149	+
	150	+// ── 2depth ──────────────────────────────────────────────────────────────────
	151	+.childGroup {
	152	+ display: flex;
	153	+ inline-size: 100%;
	154	+ flex-direction: column;
	155	+ align-items: flex-start;
	156	+ margin: fox.gap(2) 0 0;
	157	+ padding: fox.padding(3);
	158	+ border-radius: fox.radius(3);
	159	+ box-shadow: inset 0 0 0 fox.border(1) fox.color(border-neutral-subtler);
	160	+ background: fox.color(surface-neutral-default);
	161	+ list-style: none;
	162	+}
	163	+
	164	+.child {
	165	+ inline-size: 100%;
	166	+}
	167	+
	168	+.childRow {
	169	+ display: flex;
	170	+ inline-size: 100%;
	171	+ align-items: center;
	172	+ gap: fox.gap(2);
	173	+ padding-block: fox.padding(2);
	174	+ padding-inline: fox.padding(3);
	175	+ border: none;
	176	+ border-radius: fox.radius(3);
	177	+ background: fox.color(action-secondary);
	178	+ color: fox.color(font-neutral-default);
	179	+ font-family: fox.font-family(title);
	180	+ font-size: 1.4rem;
	181	+ font-weight: fox.font-weight(bold);
	182	+ line-height: 1.4;
	183	+ letter-spacing: -0.025em;
	184	+ text-align: start;
	185	+ cursor: pointer;
	186	+}
	187	+
	188	+.childRowActive {
	189	+ color: fox.color(font-theme-secondary);
	190	+}
	191	+
	192	+// 별·캐럿 자리는 항상 잡아 두고 필요 없을 때 투명하게만 만든다 — 라벨 시작 위치가
	193	+// 항목마다 흔들리지 않게 하기 위해서다.
	194	+.childMark {
	195	+ display: inline-flex;
	196	+ flex-shrink: 0;
	197	+ inline-size: fox.icon(2);
	198	+ block-size: fox.icon(2);
	199	+}
	200	+
	201	+.childMark > svg {
	202	+ inline-size: 100%;
	203	+ block-size: 100%;
	204	+}
	205	+
	206	+.childMarkHidden {
	207	+ opacity: 0;
	208	+}
	209	+
	210	+.childLabel {
	211	+ flex: 1 0 0;
	212	+ min-inline-size: 0;
	213	+}
	214	+
	215	+// ── 3depth ──────────────────────────────────────────────────────────────────
	216	+.leafGroup {
	217	+ display: flex;
	218	+ inline-size: 100%;
	219	+ flex-direction: column;
	220	+ align-items: flex-start;
	221	+ margin: 0;
	222	+ padding-block: fox.padding(2);
	223	+ padding-inline-start: fox.padding(7);
	224	+ padding-inline-end: fox.padding(2);
	225	+ border-radius: fox.radius(3);
	226	+ list-style: none;
	227	+}
	228	+
	229	+.leaf {
	230	+ display: flex;
	231	+ inline-size: 100%;
	232	+ align-items: center;
	233	+ gap: fox.gap(2);
	234	+ padding-block: fox.padding(1);
	235	+ padding-inline: fox.padding(2);
	236	+ border: none;
	237	+ background: none;
	238	+ color: fox.color(font-neutral-subtle);
	239	+ font-family: fox.font-family(body);
	240	+ font-size: 1.3rem;
	241	+ line-height: 1.5;
	242	+ letter-spacing: -0.025em;
	243	+ text-align: start;
	244	+ cursor: pointer;
	245	+}
	246	+
	247	+.leafActive {
	248	+ color: fox.color(font-theme-secondary);
	249	+}
	250	+
	251	+// 시안에 없는 상태 — 키보드로 훑을 수 있어야 해서 남긴다.
	252	+.itemButton:focus-visible,
	253	+.childRow:focus-visible,
	254	+.leaf:focus-visible {
	255	+ outline: fox.border(2) solid fox.color(border-theme-primary);
	256	+ outline-offset: fox.border(1);
	257	+}
	258	+
	259	+// 시안에 없는 컴포넌트별 개수 표시. 캐럿이 서는 자리에 둔다.
	260	+.count {
	261	+ flex-shrink: 0;
	262	+}
	263	+
	264	+// "추가 방법"은 컴포넌트가 아니라 안내다. 목록 맨 아래에 두고 테두리로 구분해, 등록된
	265	+// 컴포넌트와 같은 층위로 읽히지 않게 한다.
	266	+.guideButton {
157	267	margin-block-start: fox.gap(2);
158		- border: fox.border(1) dashed fox.color(border-neutral-strong);
	268	+ box-shadow: inset 0 0 0 fox.border(1) fox.color(border-neutral-strong);
159	269	background: none;
160	270	color: fox.color(font-neutral-subtler);
161		-
162		- &:hover {
163		- border-color: fox.color(border-theme-primary);
164		- background: none;
165		- color: fox.color(font-theme-primary);
166		- }
167		-
168		- &[aria-current="page"] {
169		- border-style: solid;
170		- border-color: fox.color(border-theme-primary);
171		- background: none;
172		- color: fox.color(font-theme-primary);
173		- }
	271	+ mix-blend-mode: normal;
174	272	}
175	273
176		-.navGuideMark {
	274	+.guideButtonActive {
	275	+ box-shadow: inset 0 0 0 fox.border(1) fox.color(border-theme-primary);
	276	+ color: fox.color(font-theme-primary);
	277	+}
	278	+
	279	+.guideMark {
177	280	font-size: fox.font-size(label-lg);
178	281	line-height: 1;
179	282	}
180	283
	284	+
181	285	// ── 본문 ────────────────────────────────────────────────────────────────────
182	286	.content {
183	287	min-inline-size: 0;

Delete comment