nbnloper / edupay-admin star
Forked from ldu0009 / edupay-admin
임동욱 임동욱 08-13
Merge branch 'claude/design-system-setup-46d8aa' into hub
@9e7030ac65113d8b6eeca5ed003f7361ba7a0771
 
9e7030a
@fox/core/components/fox-breadcrumb/fox-breadcrumb.tsx (added)
+++ @fox/core/components/fox-breadcrumb/fox-breadcrumb.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cx } from "../../utils";
+import { FoxCaretRightIcon, FoxHouseIcon } from "../../icons";
+
+export interface FoxBreadcrumbItem {
+  label: string;
+  /** 주면 링크가 되고, 없으면 글자만 남는다. 마지막 항목은 있어도 링크가 되지 않는다. */
+  href?: string;
+  /** 눌렀을 때. `href`와 함께 주면 라우터를 직접 다루는 호출부가 쓴다. */
+  onSelect?: () => void;
+  /** 글자 앞 아이콘. 첫 항목은 넘기지 않아도 집 아이콘이 붙는다. */
+  icon?: ReactNode;
+}
+
+export interface FoxBreadcrumbProps {
+  items: FoxBreadcrumbItem[];
+  /** 첫 항목 앞의 집 아이콘. 끄면 글자만 남는다. */
+  homeIcon?: boolean;
+  /** 스크린리더가 읽을 이름. 한 화면에 둘 이상 두면 서로 다르게 준다. */
+  label?: string;
+  /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
+  hidden?: boolean;
+  /** 배치 조정용. */
+  className?: string;
+}
+
+/**
+ * @fox 브레드크럼. 마지막 항목이 현재 위치이고 링크가 되지 않는다.
+ *
+ * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
+ * (또는 개별 파티셜)로 한 번 불러와야 한다.
+ */
+export function FoxBreadcrumb({
+  items,
+  homeIcon = true,
+  label = "현재 위치",
+  hidden = false,
+  className,
+}: FoxBreadcrumbProps) {
+  if (hidden || items.length === 0) {
+    return null;
+  }
+
+  return (
+    <nav className={cx("fox-breadcrumb", className)} aria-label={label}>
+      <ol className="fox-breadcrumb__list">
+        {items.map((item, index) => {
+          const last = index === items.length - 1;
+          const icon = item.icon ?? (index === 0 && homeIcon ? <FoxHouseIcon /> : null);
+          const body = (
+            <>
+              {icon && (
+                <span className="fox-breadcrumb__icon" aria-hidden="true">
+                  {icon}
+                </span>
+              )}
+              {item.label}
+            </>
+          );
+
+          return (
+            <li className="fox-breadcrumb__crumb" key={`${item.label}-${index}`}>
+              {index > 0 && (
+                <span className="fox-breadcrumb__separator" aria-hidden="true">
+                  <FoxCaretRightIcon />
+                </span>
+              )}
+
+              {/* 현재 위치는 누를 곳이 없다. */}
+              {last ? (
+                <span className="fox-breadcrumb__item" aria-current="page">
+                  {body}
+                </span>
+              ) : item.href ? (
+                <a className="fox-breadcrumb__item" href={item.href} onClick={item.onSelect}>
+                  {body}
+                </a>
+              ) : (
+                <button className="fox-breadcrumb__item" type="button" onClick={item.onSelect}>
+                  {body}
+                </button>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
 
9e7030a
@fox/core/components/fox-breadcrumb/index.ts (added)
+++ @fox/core/components/fox-breadcrumb/index.ts
@@ -0,0 +1,1 @@
+export { FoxBreadcrumb, type FoxBreadcrumbProps, type FoxBreadcrumbItem } from "./fox-breadcrumb";
 
9e7030a
@fox/core/components/fox-pagination/fox-pagination.tsx (added)
+++ @fox/core/components/fox-pagination/fox-pagination.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cx } from "../../utils";
+import { FoxCaretLeftIcon, FoxCaretRightIcon } from "../../icons";
+
+export interface FoxPaginationProps {
+  /** 1부터 센다. */
+  currentPage: number;
+  totalPages: number;
+  onPageChange?: (page: number) => void;
+  /**
+   * 페이지 번호를 링크로 만들 때. 주면 `<a>`가 되고, 없으면 `<button>`이 된다.
+   * 라우팅은 호출부 몫이다.
+   */
+  buildHref?: (page: number) => string;
+  /** 한 번에 보여줄 번호 개수. 기본 5. */
+  windowSize?: number;
+  /**
+   * 창 밖에 페이지가 더 있으면 `…`을 붙인다. 시안의 pagination-item에 있는 모양이다.
+   * 기본값은 꺼짐 — 시안의 pagination 조합에는 없다.
+   */
+  ellipsis?: boolean;
+
+  previousLabel?: string;
+  nextLabel?: string;
+  /** 스크린리더가 읽을 이름. 한 화면에 둘 이상 두면 서로 다르게 준다. */
+  label?: string;
+  /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
+  hidden?: boolean;
+  /** 배치 조정용. */
+  className?: string;
+}
+
+/** 현재 페이지를 가운데 두고 `size`개를 [1, total] 안에서 민다. */
+function pageWindow(current: number, total: number, size: number): number[] {
+  if (total < 1) {
+    return [];
+  }
+  const start = Math.max(1, Math.min(current - Math.floor(size / 2), total - size + 1));
+  const end = Math.min(total, start + size - 1);
+
+  const pages: number[] = [];
+  for (let page = Math.max(1, start); page <= end; page += 1) {
+    pages.push(page);
+  }
+  return pages;
+}
+
+/**
+ * @fox 페이지네이션.
+ *
+ * PC는 [이전] [번호들] [다음]이 한 줄이고, 모바일은 이전·다음이 위로 빠지고 번호가 아래
+ * 줄에 선다(시안의 device 축). 그 전환은 CSS가 화면 폭을 보고 하므로 프롭이 없다.
+ *
+ * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
+ * (또는 개별 파티셜)로 한 번 불러와야 한다.
+ */
+export function FoxPagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  buildHref,
+  windowSize = 5,
+  ellipsis = false,
+  previousLabel = "이전",
+  nextLabel = "다음",
+  label = "페이지",
+  hidden = false,
+  className,
+}: FoxPaginationProps) {
+  if (hidden || totalPages < 1) {
+    return null;
+  }
+
+  const pages = pageWindow(currentPage, totalPages, windowSize);
+  const first = pages[0] ?? 1;
+  const last = pages[pages.length - 1] ?? 1;
+
+  const step = (target: number, disabled: boolean, direction: "prev" | "next", text: string) => {
+    const icon = (
+      <span className="fox-pagination__step-icon" aria-hidden="true">
+        {direction === "prev" ? <FoxCaretLeftIcon /> : <FoxCaretRightIcon />}
+      </span>
+    );
+    const body: ReactNode =
+      direction === "prev" ? (
+        <>
+          {icon}
+          {text}
+        </>
+      ) : (
+        <>
+          {text}
+          {icon}
+        </>
+      );
+    const itemClass = cx("fox-pagination__item", "fox-pagination__step");
+
+    // 갈 곳이 없으면 링크로 두지 않는다 — 눌리지 않는 링크는 스크린리더에서도 걸린다.
+    if (disabled) {
+      return (
+        <span className={itemClass} aria-disabled="true">
+          {body}
+        </span>
+      );
+    }
+    return buildHref ? (
+      <a className={itemClass} href={buildHref(target)} onClick={() => onPageChange?.(target)}>
+        {body}
+      </a>
+    ) : (
+      <button className={itemClass} type="button" onClick={() => onPageChange?.(target)}>
+        {body}
+      </button>
+    );
+  };
+
+  const number = (page: number) => {
+    const current = page === currentPage;
+    const itemClass = cx(
+      "fox-pagination__item",
+      "fox-pagination__number",
+      current && "fox-pagination__number--current"
+    );
+
+    if (current) {
+      return (
+        <span className={itemClass} aria-current="page">
+          {page}
+        </span>
+      );
+    }
+    return buildHref ? (
+      <a
+        className={itemClass}
+        href={buildHref(page)}
+        aria-label={`${page}페이지`}
+        onClick={() => onPageChange?.(page)}
+      >
+        {page}
+      </a>
+    ) : (
+      <button
+        className={itemClass}
+        type="button"
+        aria-label={`${page}페이지`}
+        onClick={() => onPageChange?.(page)}
+      >
+        {page}
+      </button>
+    );
+  };
+
+  const more = (
+    <span className="fox-pagination__item fox-pagination__ellipsis" aria-hidden="true">
+      …
+    </span>
+  );
+
+  // 이전·목록·다음이 형제다. 모바일에서 목록만 한 줄을 통째로 차지해 아래로 밀린다.
+  return (
+    <nav className={cx("fox-pagination", className)} aria-label={label}>
+      {step(currentPage - 1, currentPage <= 1, "prev", previousLabel)}
+
+      <ul className="fox-pagination__list">
+        {ellipsis && first > 1 && <li>{more}</li>}
+        {pages.map((page) => (
+          <li key={page}>{number(page)}</li>
+        ))}
+        {ellipsis && last < totalPages && <li>{more}</li>}
+      </ul>
+
+      {step(currentPage + 1, currentPage >= totalPages, "next", nextLabel)}
+    </nav>
+  );
+}
 
9e7030a
@fox/core/components/fox-pagination/index.ts (added)
+++ @fox/core/components/fox-pagination/index.ts
@@ -0,0 +1,1 @@
+export { FoxPagination, type FoxPaginationProps } from "./fox-pagination";
9086ecb
9e7030a
@fox/core/components/index.ts
--- @fox/core/components/index.ts
+++ @fox/core/components/index.ts
@@ -1,13 +1,18 @@
 
 export * from "./fox-address";
 
+export * from "./fox-breadcrumb";
 
 export * from "./fox-button";
 
 export * from "./fox-button-group";
 
 export * from "./fox-button-panel";
 
+export * from "./fox-carousel-area";
 
+export * from "./fox-carousel-button";
 
+export * from "./fox-carousel-indicator";
 
 export * from "./fox-certified";
 
 export * from "./fox-email";
 
 export * from "./fox-file-upload";
 
 export * from "./fox-icon-button";
 
 export * from "./fox-input";
 
 export * from "./fox-link-button";
 
+export * from "./fox-pagination";
 
 export * from "./fox-phone-number";
 
 export * from "./fox-select";
 
 export * from "./fox-select-option";
 
9e7030a
@fox/core/icons/icons.tsx (added)
+++ @fox/core/icons/icons.tsx
@@ -0,0 +1,83 @@
+// @fox 아이콘 — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)의 `ico/*` 컴포넌트
+//
+// Figma export 자산의 path를 그대로 옮겼다. 손으로 그리지 않았으므로 굵기·곡률이 시안과 같다.
+// 시안은 아이콘을 정사각 박스(12·16·24·32px) 안에 여백을 두고 앉히는데, 그 여백까지
+// `transform: translate`로 재현했다 — 박스만 맞추고 path를 늘리면 굵기가 어긋난다.
+//
+// 크기는 갖지 않는다. 감싼 쪽이 `inline-size`/`block-size`로 정하고 `viewBox`가 따라 늘어난다.
+// 색도 갖지 않는다 — `fill: currentColor`라 감싼 쪽의 `color`를 쓴다.
+//
+// CaretLeft/CaretRight는 두 벌이다. 시안이 브레드크럼·페이지네이션에는 Regular 굵기를,
+// 캐러셀 버튼에는 Bold 굵기를 물려 놓았다(같은 아이콘의 다른 variant).
+
+/** 시안 ico/House. 아이콘 박스 16px 안에서의 위치까지 그대로 옮겼다. */
+export function FoxHouseIcon() {
+  return (
+    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path transform="translate(2 1.4992)" d="M11.7069 5.29266L6.70688 0.292662C6.51936 0.105267 6.26511 0 6.00001 0C5.7349 0 5.48065 0.105267 5.29313 0.292662L0.293131 5.29266C0.199822 5.38528 0.125855 5.49552 0.0755335 5.61698C0.0252116 5.73844 -0.00046166 5.86869 6.28343e-06 6.00016V12.0002C6.28343e-06 12.1328 0.0526848 12.2599 0.146453 12.3537C0.240221 12.4475 0.367398 12.5002 0.500006 12.5002H4.50001C4.63261 12.5002 4.75979 12.4475 4.85356 12.3537C4.94733 12.2599 5.00001 12.1328 5.00001 12.0002V8.50016H7.00001V12.0002C7.00001 12.1328 7.05268 12.2599 7.14645 12.3537C7.24022 12.4475 7.3674 12.5002 7.50001 12.5002H11.5C11.6326 12.5002 11.7598 12.4475 11.8536 12.3537C11.9473 12.2599 12 12.1328 12 12.0002V6.00016C12.0005 5.86869 11.9748 5.73844 11.9245 5.61698C11.8742 5.49552 11.8002 5.38528 11.7069 5.29266ZM11 11.5002H8.00001V8.00016C8.00001 7.86755 7.94733 7.74038 7.85356 7.64661C7.75979 7.55284 7.63261 7.50016 7.50001 7.50016H4.50001C4.3674 7.50016 4.24022 7.55284 4.14645 7.64661C4.05268 7.74038 4.00001 7.86755 4.00001 8.00016V11.5002H1.00001V6.00016L6.00001 1.00016L11 6.00016V11.5002Z" />
+    </svg>
+  );
+}
+
+/** 시안 ico/CaretLeft. 아이콘 박스 16px 안에서의 위치까지 그대로 옮겼다. */
+export function FoxCaretLeftIcon() {
+  return (
+    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path transform="translate(4.4992 2.4992)" d="M5.85414 10.1465C5.9006 10.193 5.93745 10.2481 5.96259 10.3088C5.98773 10.3695 6.00067 10.4346 6.00067 10.5003C6.00067 10.566 5.98773 10.631 5.96259 10.6917C5.93745 10.7524 5.9006 10.8076 5.85414 10.854C5.80769 10.9005 5.75254 10.9373 5.69184 10.9625C5.63115 10.9876 5.56609 11.0006 5.50039 11.0006C5.4347 11.0006 5.36964 10.9876 5.30895 10.9625C5.24825 10.9373 5.1931 10.9005 5.14664 10.854L0.146643 5.85403C0.100155 5.80759 0.0632757 5.75245 0.0381136 5.69175C0.0129514 5.63105 0 5.56599 0 5.50028C0 5.43457 0.0129514 5.36951 0.0381136 5.30881C0.0632757 5.24811 0.100155 5.19296 0.146643 5.14653L5.14664 0.146528C5.24046 0.0527077 5.36771 -2.61548e-09 5.50039 0C5.63308 2.61548e-09 5.76032 0.0527077 5.85414 0.146528C5.94796 0.240348 6.00067 0.367596 6.00067 0.500278C6.00067 0.63296 5.94796 0.760208 5.85414 0.854028L1.20727 5.50028L5.85414 10.1465Z" />
+    </svg>
+  );
+}
+
+/** 시안 ico/CaretRight. 아이콘 박스 16px 안에서의 위치까지 그대로 옮겼다. */
+export function FoxCaretRightIcon() {
+  return (
+    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path transform="translate(5.4992 2.4992)" d="M5.85403 5.85403L0.854028 10.854C0.807573 10.9005 0.752423 10.9373 0.691726 10.9625C0.63103 10.9876 0.565975 11.0006 0.500278 11.0006C0.434581 11.0006 0.369526 10.9876 0.30883 10.9625C0.248133 10.9373 0.192983 10.9005 0.146528 10.854C0.100073 10.8076 0.0632225 10.7524 0.0380812 10.6917C0.0129398 10.631 0 10.566 0 10.5003C0 10.4346 0.0129398 10.3695 0.0380812 10.3088C0.0632225 10.2481 0.100073 10.193 0.146528 10.1465L4.7934 5.50028L0.146528 0.854028C0.0527074 0.760208 -9.88558e-10 0.63296 0 0.500278C9.88559e-10 0.367596 0.0527074 0.240348 0.146528 0.146528C0.240348 0.0527077 0.367596 9.88558e-10 0.500278 0C0.63296 -9.88558e-10 0.760208 0.0527077 0.854028 0.146528L5.85403 5.14653C5.90052 5.19296 5.9374 5.24811 5.96256 5.30881C5.98772 5.36951 6.00067 5.43457 6.00067 5.50028C6.00067 5.56599 5.98772 5.63105 5.96256 5.69175C5.9374 5.75245 5.90052 5.80759 5.85403 5.85403Z" />
+    </svg>
+  );
+}
+
+/** 시안 ico/CaretLeft(bold). 아이콘 박스 24px 안에서의 위치까지 그대로 옮겼다. */
+export function FoxCaretLeftBoldIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path transform="translate(6.372 3.3744)" d="M9.42464 15.3301C9.63598 15.5414 9.75471 15.8281 9.75471 16.127C9.75471 16.4258 9.63598 16.7125 9.42464 16.9238C9.21329 17.1352 8.92665 17.2539 8.62776 17.2539C8.32888 17.2539 8.04223 17.1352 7.83089 16.9238L0.330887 9.42383C0.226007 9.31931 0.142791 9.19512 0.0860095 9.05837C0.0292284 8.92163 0 8.77502 0 8.62695C0 8.47889 0.0292284 8.33228 0.0860095 8.19553C0.142791 8.05878 0.226007 7.93459 0.330887 7.83008L7.83089 0.330076C8.04223 0.118732 8.32888 -4.45375e-09 8.62776 0C8.92665 4.45375e-09 9.21329 0.118732 9.42464 0.330077C9.63598 0.541421 9.75471 0.828065 9.75471 1.12695C9.75471 1.42584 9.63598 1.71248 9.42464 1.92383L2.72245 8.62601L9.42464 15.3301Z" />
+    </svg>
+  );
+}
+
+/** 시안 ico/CaretRight(bold). 아이콘 박스 24px 안에서의 위치까지 그대로 옮겼다. */
+export function FoxCaretRightBoldIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path transform="translate(7.872 3.372)" d="M9.42383 9.42383L1.92383 16.9238C1.71248 17.1352 1.42584 17.2539 1.12695 17.2539C0.828065 17.2539 0.541421 17.1352 0.330076 16.9238C0.118732 16.7125 2.22687e-09 16.4258 0 16.127C-2.22687e-09 15.8281 0.118732 15.5414 0.330076 15.3301L7.03414 8.62789L0.331952 1.92383C0.227304 1.81918 0.144293 1.69495 0.0876589 1.55822C0.0310243 1.42149 0.00187469 1.27494 0.00187469 1.12695C0.00187468 0.978958 0.0310243 0.832414 0.0876589 0.695686C0.144293 0.558958 0.227304 0.434724 0.331952 0.330077C0.436599 0.225429 0.560833 0.142419 0.697561 0.0857842C0.834289 0.0291496 0.980833 -1.10264e-09 1.12883 0C1.27682 1.10264e-09 1.42336 0.0291496 1.56009 0.0857842C1.69682 0.142419 1.82105 0.225429 1.9257 0.330077L9.4257 7.83008C9.53046 7.93472 9.61353 8.05901 9.67015 8.19582C9.72677 8.33263 9.75582 8.47928 9.75565 8.62734C9.75548 8.77541 9.72608 8.92198 9.66913 9.05866C9.61219 9.19534 9.52883 9.31943 9.42383 9.42383Z" />
+    </svg>
+  );
+}
+
+/** 시안 ico/Play. 아이콘 박스 24px 안에서의 위치까지 그대로 옮겼다. */
+export function FoxPlayIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path transform="translate(6 2.2488)" d="M16.5 9.75047C16.5006 10.0051 16.4353 10.2556 16.3105 10.4775C16.1856 10.6995 16.0055 10.8853 15.7875 11.017L2.28 19.2802C2.05227 19.4196 1.79144 19.4957 1.52445 19.5007C1.25746 19.5056 0.993989 19.4392 0.76125 19.3083C0.530728 19.1794 0.338696 18.9914 0.204904 18.7637C0.0711107 18.536 0.000385179 18.2768 0 18.0127V1.48828C0.000385179 1.22417 0.0711107 0.964934 0.204904 0.737222C0.338696 0.509511 0.530728 0.321545 0.76125 0.192655C0.993989 0.0617322 1.25746 -0.00468706 1.52445 0.0002572C1.79144 0.00520146 2.05227 0.0813301 2.28 0.220781L15.7875 8.4839C16.0055 8.6156 16.1856 8.80145 16.3105 9.0234C16.4353 9.24534 16.5006 9.49582 16.5 9.75047Z" />
+    </svg>
+  );
+}
+
+/** 시안 ico/Pause. 아이콘 박스 24px 안에서의 위치까지 그대로 옮겼다. */
+export function FoxPauseIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path transform="translate(3.7512 3)" d="M16.5 1.5V16.5C16.5 16.8978 16.342 17.2794 16.0607 17.5607C15.7794 17.842 15.3978 18 15 18H11.25C10.8522 18 10.4706 17.842 10.1893 17.5607C9.90804 17.2794 9.75 16.8978 9.75 16.5V1.5C9.75 1.10218 9.90804 0.720644 10.1893 0.43934C10.4706 0.158035 10.8522 0 11.25 0H15C15.3978 0 15.7794 0.158035 16.0607 0.43934C16.342 0.720644 16.5 1.10218 16.5 1.5ZM5.25 0H1.5C1.10218 0 0.720644 0.158035 0.43934 0.43934C0.158035 0.720644 0 1.10218 0 1.5V16.5C0 16.8978 0.158035 17.2794 0.43934 17.5607C0.720644 17.842 1.10218 18 1.5 18H5.25C5.64782 18 6.02936 17.842 6.31066 17.5607C6.59196 17.2794 6.75 16.8978 6.75 16.5V1.5C6.75 1.10218 6.59196 0.720644 6.31066 0.43934C6.02936 0.158035 5.64782 0 5.25 0Z" />
+    </svg>
+  );
+}
+
+/** 시안 ico/Plus. 아이콘 박스 24px 안에서의 위치까지 그대로 옮겼다. */
+export function FoxPlusIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path transform="translate(2.6256 2.6256)" d="M18.75 9.375C18.75 9.67337 18.6315 9.95952 18.4205 10.1705C18.2095 10.3815 17.9234 10.5 17.625 10.5H10.5V17.625C10.5 17.9234 10.3815 18.2095 10.1705 18.4205C9.95952 18.6315 9.67337 18.75 9.375 18.75C9.07663 18.75 8.79048 18.6315 8.5795 18.4205C8.36853 18.2095 8.25 17.9234 8.25 17.625V10.5H1.125C0.826631 10.5 0.540483 10.3815 0.329505 10.1705C0.118526 9.95952 0 9.67337 0 9.375C0 9.07663 0.118526 8.79048 0.329505 8.5795C0.540483 8.36853 0.826631 8.25 1.125 8.25H8.25V1.125C8.25 0.826631 8.36853 0.540483 8.5795 0.329505C8.79048 0.118526 9.07663 0 9.375 0C9.67337 0 9.95952 0.118526 10.1705 0.329505C10.3815 0.540483 10.5 0.826631 10.5 1.125V8.25H17.625C17.9234 8.25 18.2095 8.36853 18.4205 8.5795C18.6315 8.79048 18.75 9.07663 18.75 9.375Z" />
+    </svg>
+  );
+}
 
9e7030a
@fox/core/icons/index.ts (added)
+++ @fox/core/icons/index.ts
@@ -0,0 +1,1 @@
+export * from "./icons";
9086ecb
9e7030a
@fox/dev-test/component-registry.tsx
--- @fox/dev-test/component-registry.tsx
+++ @fox/dev-test/component-registry.tsx
@@ -14,6 +14,18 @@
 
 import { FoxPhoneNumber, type FoxPhoneNumberState } from "../core/components/fox-phone-number";
 
 import { FoxTextArea, type FoxTextAreaState } from "../core/components/fox-text-area";
 
 import { FoxTextButton } from "../core/components/fox-text-button";
 
+import { FoxBreadcrumb } from "../core/components/fox-breadcrumb";
 
+import { FoxCarouselArea } from "../core/components/fox-carousel-area";
 
+import { FoxCarouselButton } from "../core/components/fox-carousel-button";
 
+import { FoxCarouselIndicator } from "../core/components/fox-carousel-indicator";
 
+import { FoxPagination } from "../core/components/fox-pagination";
 
+import {
 
+  FoxCaretLeftBoldIcon,
 
+  FoxCaretRightBoldIcon,
 
+  FoxPauseIcon,
 
+  FoxPlayIcon,
 
+  FoxPlusIcon,
 
+} from "../core/icons";
 
 import styles from "./dev-test.module.scss";
 
 
 export interface ComponentExample {
@@ -326,6 +338,61 @@
 
   { value: "b", label: "아이콘 없는 옵션" },
 
   { value: "c", label: "아주 긴 옵션 라벨 — 트리거에서는 말줄임으로 잘린다" },
 
 ];
 
+
 
+const BREADCRUMB_ITEMS = [
 
+  { label: "홈", href: "#" },
 
+  { label: "1Depth", href: "#" },
 
+  { label: "2Depth", href: "#" },
 
+  { label: "3Depth" },
 
+];
 
+
 
+function PaginationLiveDemo() {
 
+  const [page, setPage] = useState(1);
 
+  return (
 
+    <div className={styles.demoStack}>
 
+      <FoxPagination currentPage={page} totalPages={12} onPageChange={setPage} ellipsis />
 
+      <p>
 
+        현재 {page} / 12 페이지
 
+      </p>
 
+    </div>
 
+  );
 
+}
 
+
 
+function CarouselDotPickDemo() {
 
+  const [page, setPage] = useState(1);
 
+  return <FoxCarouselIndicator current={page} total={5} onSelect={setPage} />;
 
+}
 
+
 
+function CarouselLiveDemo() {
 
+  const total = 5;
 
+  const [page, setPage] = useState(1);
 
+  const [playing, setPlaying] = useState(true);
 
+  const move = (step: number) => setPage((prev) => ((prev - 1 + step + total) % total) + 1);
 
+
 
+  return (
 
+    <FoxCarouselArea>
 
+      <FoxCarouselIndicator current={page} total={total} onSelect={setPage} />
 
+      <FoxCarouselButton
 
+        type="plain"
 
+        label="이전"
 
+        icon={<FoxCaretLeftBoldIcon />}
 
+        onAction={() => move(-1)}
 
+      />
 
+      <FoxCarouselButton
 
+        type="plain"
 
+        label="다음"
 
+        icon={<FoxCaretRightBoldIcon />}
 
+        onAction={() => move(1)}
 
+      />
 
+      <FoxCarouselButton
 
+        type="plain"
 
+        label={playing ? "정지" : "재생"}
 
+        icon={playing ? <FoxPauseIcon /> : <FoxPlayIcon />}
 
+        onAction={() => setPlaying((prev) => !prev)}
 
+      />
 
+    </FoxCarouselArea>
 
+  );
 
+}
 
 
 /** 컴포넌트를 만들 때마다 항목 하나를 추가한다 — 다른 파일은 고치지 않는다. */
 
 export const COMPONENT_EXAMPLES: ComponentExample[] = [
@@ -1392,4 +1459,231 @@
 
       },
 
     ],
 
   },
 
+  {
 
+    id: "fox-breadcrumb",
 
+    name: "FoxBreadcrumb",
 
+    description:
 
+      "Figma 시안(breadcrumb 141:3204)을 옮겼습니다. 마지막 항목이 현재 위치라 링크가 되지 않고 aria-current=\"page\"가 붙습니다. href를 주면 <a>, 없으면 <button>입니다. 항목 바탕이 투명이라 hover·pressed는 마우스를 올려 확인하세요.",
 
+    variants: [
 
+      {
 
+        label: "깊이 — 1 · 2 · 3 · 4단계",
 
+        node: (
 
+          <div className={styles.demoStack}>
 
+            <FoxBreadcrumb items={[{ label: "홈" }]} />
 
+            <FoxBreadcrumb items={[{ label: "홈", href: "#" }, { label: "1Depth" }]} />
 
+            <FoxBreadcrumb
 
+              items={[
 
+                { label: "홈", href: "#" },
 
+                { label: "1Depth", href: "#" },
 
+                { label: "2Depth" },
 
+              ]}
 
+            />
 
+            <FoxBreadcrumb items={BREADCRUMB_ITEMS} />
 
+          </div>
 
+        ),
 
+      },
 
+      {
 
+        label: "집 아이콘 끄기",
 
+        node: <FoxBreadcrumb items={BREADCRUMB_ITEMS} homeIcon={false} />,
 
+      },
 
+      {
 
+        label: "긴 이름 — 좁아지면 줄이 넘어갑니다",
 
+        node: (
 
+          <div className={styles.demoNarrow}>
 
+            <FoxBreadcrumb
 
+              items={[
 
+                { label: "홈", href: "#" },
 
+                { label: "회원관리", href: "#" },
 
+                { label: "학생 회원 목록", href: "#" },
 
+                { label: "상세 조회" },
 
+              ]}
 
+            />
 
+          </div>
 
+        ),
 
+      },
 
+    ],
 
+  },
 
+  {
 
+    id: "fox-pagination",
 
+    name: "FoxPagination",
 
+    description:
 
+      "Figma 시안(pagination 162:374)을 옮겼습니다. 시안의 device 축은 프롭이 아니라 화면 폭이 정합니다 — 768px 미만에서 이전·다음이 첫 줄로 빠지고 번호가 아래 줄에 섭니다(창을 좁혀 확인하세요). 숫자칸은 PC 32px / 모바일 24px입니다.",
 
+    variants: [
 
+      {
 
+        label: "눌러서 확인",
 
+        node: <PaginationLiveDemo />,
 
+      },
 
+      {
 
+        label: "위치 — 첫 · 중간 · 마지막",
 
+        node: (
 
+          <div className={styles.demoStack}>
 
+            <FoxPagination currentPage={1} totalPages={5} />
 
+            <FoxPagination currentPage={3} totalPages={5} />
 
+            <FoxPagination currentPage={5} totalPages={5} />
 
+          </div>
 
+        ),
 
+      },
 
+      {
 
+        label: "한 쪽만 있을 때 — 이전·다음이 잠깁니다",
 
+        node: (
 
+          <div className={styles.demoStack}>
 
+            <FoxPagination currentPage={1} totalPages={1} />
 
+          </div>
 
+        ),
 
+      },
 
+      {
 
+        label: "말줄임 (ellipsis) — 창 밖에 페이지가 더 있을 때",
 
+        node: (
 
+          <div className={styles.demoStack}>
 
+            <FoxPagination currentPage={1} totalPages={20} ellipsis />
 
+            <FoxPagination currentPage={10} totalPages={20} ellipsis />
 
+            <FoxPagination currentPage={20} totalPages={20} ellipsis />
 
+          </div>
 
+        ),
 
+      },
 
+      {
 
+        label: "링크형 (buildHref) — 번호가 <a>가 됩니다",
 
+        node: <FoxPagination currentPage={2} totalPages={5} buildHref={(page) => `#page-${page}`} />,
 
+      },
 
+      {
 
+        label: "보이는 개수 (windowSize)",
 
+        node: (
 
+          <div className={styles.demoStack}>
 
+            <FoxPagination currentPage={5} totalPages={20} windowSize={3} />
 
+            <FoxPagination currentPage={5} totalPages={20} windowSize={10} />
 
+          </div>
 
+        ),
 
+      },
 
+    ],
 
+  },
 
+  {
 
+    id: "fox-carousel-indicator",
 
+    name: "FoxCarouselIndicator",
 
+    description:
 
+      "Figma 시안(carousel-dot 162:403 · carousel-number 162:408)을 한 컴포넌트로 두었습니다. 흰 알약이 같고 안에 든 것만 달라서입니다. 흰 조각이라 아래 예제는 회색 판 위에 올렸습니다.",
 
+    variants: [
 
+      {
 
+        label: "형태 (type) — dot · number",
 
+        node: (
 
+          <div className={styles.carouselStage}>
 
+            <FoxCarouselIndicator current={1} total={5} />
 
+            <FoxCarouselIndicator type="number" current={1} total={3} />
 
+          </div>
 
+        ),
 
+      },
 
+      {
 
+        label: "현재 위치",
 
+        node: (
 
+          <div className={styles.carouselStage}>
 
+            <FoxCarouselIndicator current={1} total={4} />
 
+            <FoxCarouselIndicator current={2} total={4} />
 
+            <FoxCarouselIndicator current={4} total={4} />
 
+          </div>
 
+        ),
 
+      },
 
+      {
 
+        label: "점을 눌러 옮기기 (onSelect) — 점이 <button>이 됩니다",
 
+        node: (
 
+          <div className={styles.carouselStage}>
 
+            <CarouselDotPickDemo />
 
+          </div>
 
+        ),
 
+      },
 
+    ],
 
+  },
 
+  {
 
+    id: "fox-carousel-button",
 
+    name: "FoxCarouselButton",
 
+    description:
 
+      "Figma 시안의 carousel-arrow(163:420)와 carousel-atomic(680:5710)을 한 컴포넌트로 두었습니다. 원형·흰 바탕·아이콘 하나까지 같고 테두리와 그림자만 달라 그 차이를 type으로 뒀습니다. outlined만 hover·pressed에서 떠오르고 아이콘이 진해집니다 — 마우스를 올려 확인하세요.",
 
+    variants: [
 
+      {
 
+        label: "계열 (type) — outlined · plain",
 
+        node: (
 
+          <div className={styles.carouselStage}>
 
+            <FoxCarouselButton label="이전" icon={<FoxCaretLeftBoldIcon />} />
 
+            <FoxCarouselButton type="plain" label="이전" icon={<FoxCaretLeftBoldIcon />} />
 
+          </div>
 
+        ),
 
+      },
 
+      {
 
+        label: "크기 (size) — lg · md · sm",
 
+        node: (
 
+          <div className={styles.carouselStage}>
 
+            <FoxCarouselButton size="lg" label="이전" icon={<FoxCaretLeftBoldIcon />} />
 
+            <FoxCarouselButton size="md" label="이전" icon={<FoxCaretLeftBoldIcon />} />
 
+            <FoxCarouselButton size="sm" label="이전" icon={<FoxCaretLeftBoldIcon />} />
 
+            <FoxCarouselButton size="lg" label="다음" icon={<FoxCaretRightBoldIcon />} />
 
+            <FoxCarouselButton size="md" label="다음" icon={<FoxCaretRightBoldIcon />} />
 
+            <FoxCarouselButton size="sm" label="다음" icon={<FoxCaretRightBoldIcon />} />
 
+          </div>
 
+        ),
 
+      },
 
+      {
 
+        label: "시안의 아이콘 5종 (plain)",
 
+        node: (
 
+          <div className={styles.carouselStage}>
 
+            <FoxCarouselButton type="plain" label="이전" icon={<FoxCaretLeftBoldIcon />} />
 
+            <FoxCarouselButton type="plain" label="다음" icon={<FoxCaretRightBoldIcon />} />
 
+            <FoxCarouselButton type="plain" label="재생" icon={<FoxPlayIcon />} />
 
+            <FoxCarouselButton type="plain" label="정지" icon={<FoxPauseIcon />} />
 
+            <FoxCarouselButton type="plain" label="더보기" icon={<FoxPlusIcon />} />
 
+          </div>
 
+        ),
 
+      },
 
+      {
 
+        label: "비활성",
 
+        node: (
 
+          <div className={styles.carouselStage}>
 
+            <FoxCarouselButton size="lg" label="이전" icon={<FoxCaretLeftBoldIcon />} disabled />
 
+            <FoxCarouselButton size="md" label="이전" icon={<FoxCaretLeftBoldIcon />} disabled />
 
+            <FoxCarouselButton size="sm" label="이전" icon={<FoxCaretLeftBoldIcon />} disabled />
 
+            <FoxCarouselButton type="plain" label="이전" icon={<FoxCaretLeftBoldIcon />} disabled />
 
+          </div>
 
+        ),
 
+      },
 
+    ],
 
+  },
 
+  {
 
+    id: "fox-carousel-area",
 
+    name: "FoxCarouselArea",
 
+    description:
 
+      "Figma 시안(carousel-area 683:5902 · 683:5923)의 두 조합입니다. 담는 그릇만 갖고 무엇이 들어갈지는 정하지 않습니다 — 시안에서도 안에 든 것이 전부 다른 컴포넌트의 인스턴스입니다.",
 
+    variants: [
 
+      {
 
+        label: "눌러서 확인",
 
+        node: (
 
+          <div className={styles.carouselStage}>
 
+            <CarouselLiveDemo />
 
+          </div>
 
+        ),
 
+      },
 
+      {
 
+        label: "시안 조합 — 점 + 이전·다음·정지",
 
+        node: (
 
+          <div className={styles.carouselStage}>
 
+            <FoxCarouselArea>
 
+              <FoxCarouselIndicator current={1} total={5} />
 
+              <FoxCarouselButton type="plain" label="이전" icon={<FoxCaretLeftBoldIcon />} />
 
+              <FoxCarouselButton type="plain" label="다음" icon={<FoxCaretRightBoldIcon />} />
 
+              <FoxCarouselButton type="plain" label="정지" icon={<FoxPauseIcon />} />
 
+            </FoxCarouselArea>
 
+          </div>
 
+        ),
 
+      },
 
+      {
 
+        label: "시안 조합 — 숫자 + 이전·다음·더보기",
 
+        node: (
 
+          <div className={styles.carouselStage}>
 
+            <FoxCarouselArea>
 
+              <FoxCarouselIndicator type="number" current={1} total={3} />
 
+              <FoxCarouselButton type="plain" label="이전" icon={<FoxCaretLeftBoldIcon />} />
 
+              <FoxCarouselButton type="plain" label="다음" icon={<FoxCaretRightBoldIcon />} />
 
+              <FoxCarouselButton type="plain" label="더보기" icon={<FoxPlusIcon />} />
 
+            </FoxCarouselArea>
 
+          </div>
 
+        ),
 
+      },
 
+    ],
 
+  },
 
 ];
9086ecb
9e7030a
@fox/dev-test/dev-test.module.scss
--- @fox/dev-test/dev-test.module.scss
+++ @fox/dev-test/dev-test.module.scss
@@ -477,3 +477,14 @@
 
   inline-size: 80rem;
 
   max-inline-size: 100%;
 
 }
 
+
 
+// 캐러셀 조각은 흰 알약이라 흰 바탕에서는 보이지 않는다 — 시안처럼 어두운 판 위에 올린다.
 
+.carouselStage {
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+  gap: fox.gap(5);
 
+  align-items: center;
 
+  padding: fox.padding(6);
 
+  border-radius: fox.radius(3);
 
+  background: fox.color(surface-neutral-gray-stronger);
 
+}
 
9e7030a
@fox/styles/_fox-breadcrumb.scss (added)
+++ @fox/styles/_fox-breadcrumb.scss
@@ -0,0 +1,110 @@
+// FoxBreadcrumb — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
+//                        Figma breadcrumb (141:3204 · 섹션 392:5794)
+//
+// 마크업 계약 (React 밖 소비자용):
+//   <nav class="fox-breadcrumb" aria-label="현재 위치">
+//     <ol class="fox-breadcrumb__list">
+//       <li class="fox-breadcrumb__crumb">
+//         <a class="fox-breadcrumb__item"><span class="fox-breadcrumb__icon">…svg…</span>홈</a>
+//       </li>
+//       <li class="fox-breadcrumb__crumb">
+//         <span class="fox-breadcrumb__separator">…svg…</span>
+//         <span class="fox-breadcrumb__item" aria-current="page">1Depth</span>
+//       </li>
+//     </ol>
+//   </nav>
+//
+// 시안에 상태 변형이 없다. 누를 수 있는 항목만 hover·pressed를 주는데, 항목 바탕이
+// `action/primary`(투명)라 같은 계열의 hover·pressed 토큰을 그대로 쓴다.
+//
+// 아이콘 크기 16(집)·12(구분자)는 시안 값이다. 아이콘 자체는 `@fox/core/icons`가 갖는다.
+//
+// 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목):
+//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로 export하지 않는다.
+//   - 목록의 margin/padding/list-style 0: `<ol>`의 브라우저 기본값 지우기.
+//   - 버튼·링크 초기화(appearance/cursor/색 상속): 구조 규칙.
+
+@use "abstracts" as fox;
+
+.fox-breadcrumb {
+  display: flex;
+  inline-size: 100%;
+
+  // `<ol>`이라 브라우저 기본 여백·번호를 먼저 지운다.
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: fox.gap(2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  // 구분자와 항목이 한 덩어리로 붙어 다녀야 줄바꿈이 어긋나지 않는다.
+  &__crumb {
+    display: flex;
+    align-items: center;
+    gap: fox.gap(2);
+  }
+
+  &__separator {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: fox.color(icon-neutral-subtle);
+
+    > * {
+      inline-size: fox.icon(2);
+      block-size: fox.icon(2);
+    }
+  }
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    gap: fox.gap(1);
+    margin: 0;
+    padding-inline: fox.padding(2);
+    padding-block: fox.padding(1);
+    border: none;
+    border-radius: fox.radius(2);
+    background: fox.color(action-primary);
+    color: fox.color(font-neutral-default);
+    font-family: fox.font-family(body);
+    font-size: fox.font-size(label-sm);
+    font-weight: fox.font-weight(regular);
+    line-height: 1;
+    letter-spacing: -0.025em;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  &__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: fox.color(icon-neutral-default);
+
+    > * {
+      inline-size: fox.icon(3);
+      block-size: fox.icon(3);
+    }
+  }
+
+  // 현재 위치는 누를 곳이 없다.
+  &__item[aria-current="page"] {
+    cursor: default;
+  }
+
+  a.fox-breadcrumb__item,
+  button.fox-breadcrumb__item {
+    cursor: pointer;
+
+    &:hover {
+      background: fox.color(action-primary-hover);
+    }
+
+    &:active {
+      background: fox.color(action-primary-pressed);
+    }
+  }
+}
 
9e7030a
@fox/styles/_fox-carousel-area.scss (added)
+++ @fox/styles/_fox-carousel-area.scss
@@ -0,0 +1,18 @@
+// FoxCarouselArea — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
+//                          carousel-area (683:5902 · 683:5923 · 섹션 683:5921)
+//
+// 마크업 계약 (React 밖 소비자용):
+//   <div class="fox-carousel-area">
+//     …fox-carousel-indicator…
+//     …fox-carousel-button ×3…
+//   </div>
+//
+// 시안에서 안에 든 것이 전부 다른 컴포넌트의 인스턴스라 이 파일은 줄 배치만 갖는다.
+
+@use "abstracts" as fox;
+
+.fox-carousel-area {
+  display: inline-flex;
+  align-items: center;
+  gap: fox.gap(2);
+}
 
9e7030a
@fox/styles/_fox-carousel-button.scss (added)
+++ @fox/styles/_fox-carousel-button.scss
@@ -0,0 +1,125 @@
+// FoxCarouselButton — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
+//                            carousel-arrow (163:420 · 섹션 391:4034)
+//                            carousel-atomic (680:5710 · 섹션 683:5904)
+//
+// 마크업 계약 (React 밖 소비자용):
+//   <button class="fox-carousel-button fox-carousel-button--outlined fox-carousel-button--md"
+//           type="button" aria-label="이전">
+//     <span class="fox-carousel-button__icon">…svg…</span>
+//   </button>
+//
+// 두 시안이 한 컴포넌트다 — 원형·흰 바탕·아이콘 하나까지 같고 테두리와 그림자만 다르다.
+//   - outlined = carousel-arrow: 테두리가 있고 hover·pressed에서 떠오른다(그림자 neutral/lv2).
+//   - plain    = carousel-atomic: 테두리도 그림자도 없다.
+// 아이콘 색도 갈린다 — outlined만 hover·pressed에서 진해지고, plain은 그대로다(시안 확인).
+//
+// 크기는 상자 높이 토큰을 그대로 쓴다. lg가 PC 56 / 모바일 48로 줄어드는 건 반응형 토큰의
+// 성질이고, 시안의 56은 PC 값이다.
+//
+// 토큰이 아닌 값:
+//   - 그림자 색: 시안이 테마 토큰이 아니라 `alpha/black10` 원시값에 직접 물려 놓았다
+//     (fox-select-option과 같은 사정). 그래서 다크 모드에서도 검은 그림자다.
+//   - appearance / cursor 관련: 구조·상호작용 규칙.
+
+@use "abstracts" as fox;
+
+// 시안 neutral/lv2 — 그림자 둘이 겹친다.
+@mixin _lifted {
+  box-shadow:
+    fox.shadow(location3) fox.shadow(location3) fox.shadow(blur3) 0
+      fox.primitive(alpha-black10),
+    fox.shadow(location1) fox.shadow(location1) fox.shadow(blur2) 0
+      fox.primitive(alpha-black10);
+}
+
+.fox-carousel-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: fox.radius(max);
+  background: fox.color(action-default);
+  color: fox.color(icon-neutral-subtle);
+  cursor: pointer;
+
+  &__icon {
+    display: inline-flex;
+
+    > * {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+  }
+
+  // ── 크기 (정사각) ──────────────────────────────────────────────────────────
+  &--lg {
+    inline-size: fox.form(height-lg);
+    block-size: fox.form(height-lg);
+  }
+
+  &--lg &__icon {
+    inline-size: fox.icon(6);
+    block-size: fox.icon(6);
+  }
+
+  &--md {
+    inline-size: fox.form(height-md);
+    block-size: fox.form(height-md);
+  }
+
+  &--md &__icon {
+    inline-size: fox.icon(5);
+    block-size: fox.icon(5);
+  }
+
+  &--sm {
+    inline-size: fox.form(height-sm);
+    block-size: fox.form(height-sm);
+  }
+
+  &--sm &__icon {
+    inline-size: fox.icon(3);
+    block-size: fox.icon(3);
+  }
+
+  // ── 계열 ──────────────────────────────────────────────────────────────────
+  &--outlined {
+    border: fox.border(1) solid fox.color(border-neutral-subtle);
+
+    &:hover:not(:disabled) {
+      background: fox.color(action-default-hover);
+      color: fox.color(icon-neutral-default);
+
+      @include _lifted;
+    }
+
+    &:active:not(:disabled) {
+      background: fox.color(action-default-pressed);
+      color: fox.color(icon-neutral-default);
+
+      @include _lifted;
+    }
+  }
+
+  &--plain {
+    &:hover:not(:disabled) {
+      background: fox.color(action-default-hover);
+    }
+
+    &:active:not(:disabled) {
+      background: fox.color(action-default-pressed);
+    }
+  }
+
+  // 잠기면 회색 원 하나가 된다 — 테두리도 바탕색과 같아져 사라진 것처럼 보인다.
+  &:disabled {
+    border-color: fox.color(button-disabled-surface);
+    background: fox.color(button-disabled-surface);
+    color: fox.color(icon-neutral-disabled-strong);
+    cursor: default;
+  }
+}
 
9e7030a
@fox/styles/_fox-carousel-indicator.scss (added)
+++ @fox/styles/_fox-carousel-indicator.scss
@@ -0,0 +1,98 @@
+// FoxCarouselIndicator — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
+//                               carousel-dot (162:403) · carousel-number (162:408)
+//                               섹션 392:5776
+//
+// 마크업 계약 (React 밖 소비자용):
+//   <div class="fox-carousel-indicator fox-carousel-indicator--dot" role="group">
+//     <span class="fox-carousel-indicator__dot fox-carousel-indicator__dot--active"></span>
+//     <span class="fox-carousel-indicator__dot"></span>
+//   </div>
+//   <p class="fox-carousel-indicator fox-carousel-indicator--number">
+//     <span class="fox-carousel-indicator__current">1</span>
+//     <span class="fox-carousel-indicator__separator"></span>
+//     <span class="fox-carousel-indicator__total">3</span>
+//   </p>
+//
+// 두 시안이 한 컴포넌트다 — 흰 알약(높이·좌우 여백·간격·모서리)이 같고 안에 든 것만 다르다.
+// 높이 40px은 시안이 리터럴로 적었지만 `form/height/md`와 값이 같고, carousel-area에서
+// md 버튼과 나란히 서야 하므로 토큰으로 맞췄다.
+//
+// 시안에 상태 변형이 없다. 점을 눌러 옮길 수 있게 하면 `<button>`이 되는데, 그때 쓸
+// hover·pressed 표시가 시안에 없어 두지 않았다.
+//
+// 토큰이 아닌 값:
+//   - 점 0.8rem · 활성 막대 2.4rem×0.8rem · 숫자형 가운뎃점 0.4rem: 시안 값이나 Figma가
+//     변수로 export하지 않는다(사용자 승인).
+//   - line-height / letter-spacing: 위와 같다.
+//   - 버튼 초기화(appearance/cursor): 구조 규칙.
+
+@use "abstracts" as fox;
+
+.fox-carousel-indicator {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: fox.gap(2);
+  block-size: fox.form(height-md);
+  margin: 0;
+  padding-inline: fox.padding(6);
+  border-radius: fox.radius(max);
+  background: fox.color(surface-neutral-default);
+
+  // ── 점 ────────────────────────────────────────────────────────────────────
+  // 시안 값이나 변수로 export되지 않는다 — 파일 상단 참고.
+  &__dot {
+    display: block;
+    flex-shrink: 0;
+    inline-size: 0.8rem;
+    block-size: 0.8rem;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: fox.radius(max);
+    background: fox.color(element-neutral-default);
+  }
+
+  // 현재 위치만 길쭉해지고 색이 바뀐다.
+  &__dot--active {
+    inline-size: 2.4rem;
+    background: fox.color(element-theme-primary);
+  }
+
+  button.fox-carousel-indicator__dot {
+    cursor: pointer;
+  }
+
+  // ── 숫자 ──────────────────────────────────────────────────────────────────
+  &--number {
+    justify-content: center;
+  }
+
+  &__current,
+  &__total {
+    font-family: fox.font-family(body);
+    font-size: fox.font-size(label-md);
+    line-height: 1;
+    letter-spacing: -0.025em;
+  }
+
+  // 현재 위치만 굵고 색이 다르다.
+  &__current {
+    color: fox.color(font-theme-primary);
+    font-weight: fox.font-weight(bold);
+  }
+
+  &__total {
+    color: fox.color(font-neutral-subtle);
+    font-weight: fox.font-weight(regular);
+  }
+
+  &__separator {
+    flex-shrink: 0;
+    inline-size: 0.4rem;
+    block-size: 0.4rem;
+    border-radius: fox.radius(max);
+    background: fox.color(element-neutral-default);
+  }
+}
 
9e7030a
@fox/styles/_fox-pagination.scss (added)
+++ @fox/styles/_fox-pagination.scss
@@ -0,0 +1,154 @@
+// FoxPagination — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
+//                        Figma pagination (162:374 · 섹션 391:3925)
+//                              pagination-item (섹션 391:3817)
+//
+// 마크업 계약 (React 밖 소비자용):
+//   <nav class="fox-pagination" aria-label="페이지">
+//     <a class="fox-pagination__item fox-pagination__step">
+//       <span class="fox-pagination__step-icon">…svg…</span>이전
+//     </a>
+//     <ul class="fox-pagination__list">
+//       <li><span class="fox-pagination__item fox-pagination__number
+//                      fox-pagination__number--current" aria-current="page">1</span></li>
+//       <li><a class="fox-pagination__item fox-pagination__number">2</a></li>
+//     </ul>
+//     <a class="fox-pagination__item fox-pagination__step">
+//       다음<span class="fox-pagination__step-icon">…svg…</span>
+//     </a>
+//   </nav>
+//
+// 시안의 device 축을 프롭이 아니라 화면 폭으로 나눈다.
+//   - 모바일: 이전·다음이 첫 줄, 번호가 둘째 줄. 번호칸만 폭을 다 먹어 줄이 넘어간다.
+//   - PC: 이전·번호·다음이 한 줄. `order`로 번호를 가운데로 되돌린다.
+// 마크업은 한 벌이고 DOM 순서(이전 → 번호 → 다음)는 읽는 순서 그대로다.
+//
+// 번호칸끼리는 간격이 없다(시안 list에 gap이 없다) — 칸 자체가 정사각이라 붙어도 벌어져 보인다.
+//
+// 토큰이 아닌 값:
+//   - 번호칸 정사각 크기 3.2rem(PC) / 2.4rem(모바일): 시안 값이나 Figma가 변수로
+//     export하지 않는다(사용자 승인).
+//   - line-height / letter-spacing: 위와 같다.
+//   - 목록의 margin/padding/list-style 0: `<ul>`의 브라우저 기본값 지우기.
+//   - 버튼·링크 초기화(appearance/cursor/색 상속): 구조 규칙.
+
+@use "abstracts" as fox;
+
+.fox-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: fox.gap(3);
+  inline-size: 100%;
+  padding-block-start: fox.spacing(top-lg);
+
+  // `<ul>`이라 브라우저 기본 여백·글머리표를 먼저 지운다.
+  &__list {
+    display: flex;
+    order: 1;
+    align-items: center;
+    justify-content: center;
+    inline-size: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    border: none;
+    border-radius: fox.radius(2);
+    background: fox.color(action-secondary);
+    font-family: fox.font-family(body);
+    font-size: fox.font-size(label-md);
+    font-weight: fox.font-weight(regular);
+    line-height: 1;
+    letter-spacing: -0.025em;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  // ── 이전 · 다음 ────────────────────────────────────────────────────────────
+  &__step {
+    gap: fox.gap(1);
+    padding: fox.padding(2);
+    color: fox.color(font-neutral-default);
+  }
+
+  &__step-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: fox.color(element-neutral-strong);
+
+    > * {
+      inline-size: fox.icon(3);
+      block-size: fox.icon(3);
+    }
+  }
+
+  // ── 번호 ──────────────────────────────────────────────────────────────────
+  // 시안 값이나 변수로 export되지 않는다 — 파일 상단 참고.
+  &__number {
+    box-sizing: border-box;
+    justify-content: center;
+    inline-size: 2.4rem;
+    block-size: 2.4rem;
+    color: fox.color(font-neutral-subtle);
+  }
+
+  &__number--current {
+    background: fox.color(action-secondary-active);
+    color: fox.color(font-neutral-static-inverse);
+    font-weight: fox.font-weight(bold);
+    cursor: default;
+  }
+
+  &__ellipsis {
+    justify-content: center;
+    inline-size: 2.4rem;
+    block-size: 2.4rem;
+    color: fox.color(font-neutral-subtle);
+  }
+
+  // ── 상태 ──────────────────────────────────────────────────────────────────
+  a.fox-pagination__item,
+  button.fox-pagination__item {
+    cursor: pointer;
+
+    &:hover {
+      background: fox.color(action-secondary-hover);
+    }
+
+    &:active {
+      background: fox.color(action-secondary-pressed);
+    }
+  }
+
+  // 갈 곳이 없는 이전·다음. `aria-disabled`가 곧 표시 조건이다.
+  &__item[aria-disabled="true"] {
+    color: fox.color(font-neutral-disabled);
+    cursor: default;
+
+    .fox-pagination__step-icon {
+      color: fox.color(icon-neutral-disabled);
+    }
+  }
+
+  @include fox.pc {
+    flex-wrap: nowrap;
+    gap: fox.gap(5);
+
+    &__list {
+      order: 0;
+      inline-size: auto;
+    }
+
+    &__number,
+    &__ellipsis {
+      inline-size: 3.2rem;
+      block-size: 3.2rem;
+    }
+  }
+}
9086ecb
9e7030a
@fox/styles/components.scss
--- @fox/styles/components.scss
+++ @fox/styles/components.scss
@@ -17,3 +17,8 @@
 
 @use "fox-select-option";
 
 @use "fox-select-option-item";
 
 @use "fox-text-area";
 
+@use "fox-breadcrumb";
 
+@use "fox-pagination";
 
+@use "fox-carousel-indicator";
 
+@use "fox-carousel-button";
 
+@use "fox-carousel-area";
Add a comment
List