Commit @da813ceeac1b27de48b84bf348c3bdd4b65b9c6b

임동욱 08-12

feat: FoxButton 추가 — 로직·구조와 시안 디자인 적용

Figma 시안(관리자페이지 node 390:439)을 토큰만으로 옮겼다. 컴파일된 CSS의 토큰 참조
50개, 원시 hex/px/rem 리터럴 0개다.

시안에서 확인한 것(추측하지 않음): gap은 lg·md·sm이 gap-2이고 xsm만 gap-1이다.
primary에는 테두리가 없고 secondary·default만 border-1을 갖는다. disabled는 계열과
무관하게 테두리가 사라진다(시안에서 disabled-border 미사용). 높이만 고정이고 좌우
padding만 지정돼 너비는 가변이다.

토큰이 아닌 코드 세 가지를 사용자 승인 후 넣었다.
- line-height: 1 / letter-spacing: -0.025em — 시안 텍스트 스타일 label/*-strong의 값이나
Figma에서 변수로 export되지 않아 토큰이 없다. 네 크기가 같은 값이라 규칙 하나로 끝난다.
- box-sizing: border-box — 높이 고정 + secondary·default의 1px 테두리 때문에 필수다.
없으면 계열별 바깥 높이가 2px 어긋난다.
- cursor·white-space·flex-shrink — 구조·상호작용 규칙. 버튼 스코프에만 적용한다.

모양 규칙은 @fox/styles/_fox-button.scss가 소유하고 module이 @use로 끌어올린다 —
클래스명이 모듈 스코프로 감싸져 전역 충돌이 없고, index.scss는 이 파티셜을 포함하지
않아 CSS가 중복 출력되지 않는다.

아이콘은 계열별 색을 토큰으로 입히기 위해 ReactNode로 받는다(currentColor 전제).
크기는 슬롯이 form-icon-* 토큰으로 정한다.

error 계열은 시안 미정이라 클래스를 비워 뒀다.

Co-Authored-By: Claude Opus 5

@da813ceeac1b27de48b84bf348c3bdd4b65b9c6b

da813ce

@fox/core/components/fox-button/fox-button.module.scss (added)

+++ @fox/core/components/fox-button/fox-button.module.scss

...	...	@@ -0,0 +1,9 @@
	1	+// FoxButton의 모양 규칙은 디자인 시스템 쪽(`@fox/styles/_fox-button.scss`)이 소유한다.
	2	+// 여기서는 그것을 CSS Module로 끌어올리기만 한다 — `@use`가 그 파일의 CSS를 이 모듈의
	3	+// 컴파일 단위에 포함시키므로, 클래스명이 모듈 스코프로 감싸지고 컴포넌트에서
	4	+// `styles.button`처럼 쓸 수 있다. 전역 이름 충돌이 생기지 않는다.
	5	+//
	6	+// ⚠️ 이 파티셜을 다른 모듈에서 또 `@use`하면 CSS가 그 모듈에도 복제된다. 소비처는
	7	+// 이 파일 하나로 유지한다.
	8	+
	9	+@use "@fox/styles/fox-button";

da813ce

@fox/core/components/fox-button/fox-button.tsx (added)

+++ @fox/core/components/fox-button/fox-button.tsx

...	...	@@ -0,0 +1,127 @@
	1	+"use client";
	2	+
	3	+import type { ReactNode, Ref } from "react";
	4	+import { cx } from "../../utils";
	5	+import styles from "./fox-button.module.scss";
	6	+
	7	+export type FoxButtonType = "primary" \| "secondary" \| "default" \| "error";
	8	+export type FoxButtonSize = "lg" \| "md" \| "sm" \| "xsm";
	9	+
	10	+export interface FoxButtonProps {
	11	+ /** 시각 계열. 디자인은 Figma 시안(node 390-439) 기준으로 추후 적용한다. */
	12	+ type?: FoxButtonType;
	13	+ size: FoxButtonSize;
	14	+ /** 네이티브 `type` 속성. prop 이름의 `type`이 시각 계열을 쓰므로 분리했다. */
	15	+ htmlType?: "button" \| "submit" \| "reset";
	16	+ /** 배치(마진·그리드) 조정용. 디자인 값 주입은 금지 — 모양이 달라야 하면 `type`을 추가한다. */
	17	+ className?: string;
	18	+ /**
	19	+ * 아이콘 엘리먼트. 계열별 색은 슬롯이 `color`로 내려주므로 **`currentColor`로 그린
	20	+ * SVG**를 넣어야 시안대로 물든다(primary는 흰색, secondary는 파랑 …).
	21	+ * 크기는 슬롯이 `form-icon-*` 토큰으로 정하므로 아이콘 자체에 크기를 두지 않아도 된다.
	22	+ */
	23	+ leadingIcon?: ReactNode;
	24	+ trailingIcon?: ReactNode;
	25	+ label: string;
	26	+ disabled?: boolean;
	27	+ /** 참이면 아무것도 렌더하지 않는다(DOM에 남지 않는다). */
	28	+ hidden?: boolean;
	29	+ /** 호출부가 소유하는 상태다 — 버튼은 이 값을 읽기만 하고 스스로 켜지 않는다. */
	30	+ loading?: boolean;
	31	+ fullWidth?: boolean;
	32	+ onAction?: () => void;
	33	+ /** 포인터가 올라오면 `true`, 벗어나면 `false`. */
	34	+ onHoverChange?: (hovered: boolean) => void;
	35	+ ref?: Ref<HTMLButtonElement>;
	36	+}
	37	+
	38	+/**
	39	+ * variant마다 클래스를 `Record`로 고정한다 — 계열을 추가하면 여기 항목을 빠뜨릴 수 없다
	40	+ * (타입 에러). 모양 규칙은 `@fox/styles/_fox-button.scss`가 소유한다.
	41	+ */
	42	+const TYPE_CLASS: Record<FoxButtonType, string> = {
	43	+ primary: styles.typePrimary,
	44	+ secondary: styles.typeSecondary,
	45	+ default: styles.typeDefault,
	46	+ error: styles.typeError,
	47	+};
	48	+
	49	+const SIZE_CLASS: Record<FoxButtonSize, string> = {
	50	+ lg: styles.sizeLg,
	51	+ md: styles.sizeMd,
	52	+ sm: styles.sizeSm,
	53	+ xsm: styles.sizeXsm,
	54	+};
	55	+
	56	+/**
	57	+ * @fox 공용 버튼.
	58	+ *
	59	+ * 상태를 갖지 않는 프레젠테이션 컴포넌트다 — `loading`·`disabled`는 호출부가 소유하고
	60	+ * 버튼은 그에 따라 상호작용을 막기만 한다. 버튼이 스스로 로딩을 켜면 호출부의 상태와
	61	+ * 어긋날 수 있어 그 책임을 지지 않는다.
	62	+ *
	63	+ * 모양은 Figma 시안(관리자페이지 node 390:439)을 토큰으로만 옮긴 것이며 규칙은
	64	+ * `@fox/styles/_fox-button.scss`에 있다. `error` 계열만 시안 미정이라 비어 있다.
	65	+ */
	66	+export function FoxButton({
	67	+ type = "default",
	68	+ size,
	69	+ htmlType = "button",
	70	+ className,
	71	+ leadingIcon,
	72	+ trailingIcon,
	73	+ label,
	74	+ disabled = false,
	75	+ hidden = false,
	76	+ loading = false,
	77	+ fullWidth = false,
	78	+ onAction,
	79	+ onHoverChange,
	80	+ ref,
	81	+}: FoxButtonProps) {
	82	+ if (hidden) {
	83	+ return null;
	84	+ }
	85	+
	86	+ // 로딩 중에도 클릭을 막아야 같은 요청이 두 번 나가지 않는다.
	87	+ const inactive = disabled \|\| loading;
	88	+
	89	+ return (
	90	+ <button
	91	+ ref={ref}
	92	+ type={htmlType}
	93	+ className={cx(
	94	+ styles.button,
	95	+ TYPE_CLASS[type],
	96	+ SIZE_CLASS[size],
	97	+ fullWidth && styles.fullWidth,
	98	+ className
	99	+ )}
	100	+ disabled={inactive}
	101	+ aria-busy={loading \|\| undefined}
	102	+ onClick={inactive ? undefined : onAction}
	103	+ onMouseEnter={onHoverChange ? () => onHoverChange(true) : undefined}
	104	+ onMouseLeave={onHoverChange ? () => onHoverChange(false) : undefined}
	105	+ >
	106	+ {loading ? (
	107	+ // 스피너 비주얼은 시안에 없어 자리만 잡아둔다. 아이콘과 같은 크기를 차지하므로
	108	+ // 로딩으로 바뀔 때 버튼 폭이 흔들리지 않는다.
	109	+ <span className={styles.spinner} aria-hidden="true" />
	110	+ ) : (
	111	+ leadingIcon && (
	112	+ <span className={styles.icon} aria-hidden="true">
	113	+ {leadingIcon}
	114	+ </span>
	115	+ )
	116	+ )}
	117	+
	118	+ <span className={styles.label}>{label}</span>
	119	+
	120	+ {trailingIcon && (
	121	+ <span className={styles.icon} aria-hidden="true">
	122	+ {trailingIcon}
	123	+ </span>
	124	+ )}
	125	+ </button>
	126	+ );
	127	+}

da813ce

@fox/core/components/fox-button/index.ts (added)

+++ @fox/core/components/fox-button/index.ts

...	...	@@ -0,0 +1,6 @@
	1	+export {
	2	+ FoxButton,
	3	+ type FoxButtonProps,
	4	+ type FoxButtonType,
	5	+ type FoxButtonSize,
	6	+} from "./fox-button";

da813ce

@fox/core/components/index.ts (added)

+++ @fox/core/components/index.ts

...	...	@@ -0,0 +1,1 @@
	1	+export * from "./fox-button";

faaf03e

da813ce

@fox/dev-test/component-registry.tsx

--- @fox/dev-test/component-registry.tsx

+++ @fox/dev-test/component-registry.tsx


 import type { ReactNode } from "react";
+import { FoxButton } from "../core/components/fox-button";
 
 /**
  * 컴포넌트 예제 하나. 사이드바의 "컴포넌트" 분류에 항목으로 뜬다.

   variants: { label: string; node: ReactNode }[];
 }
 
+// 예제용 아이콘 — 시안의 실제 아이콘이 아니라 자리 확인용 도형이다.
+// `currentColor`로 그려야 버튼이 계열별로 색을 입힐 수 있다(슬롯이 `color`를 내려준다).
+// 크기는 슬롯이 `form-icon-*` 토큰으로 정하므로 100%로 채우기만 한다.
+function DemoIcon() {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+      <path d="M6 3l5 5-5 5" />
+    </svg>
+  );
+}
+
 /**
  * 컴포넌트를 만들 때마다 여기에 한 항목씩 추가한다. 사이드바·본문은 이 배열만 보고
  * 그리므로 다른 파일을 고칠 필요가 없다.
- *
- * ```tsx
- * import { Button } from "../core/components/button";
- *
- * export const COMPONENT_EXAMPLES: ComponentExample[] = [
- *   {
- *     id: "button",
- *     name: "Button",
- *     description: "기본 액션 버튼",
- *     variants: [
- *       { label: "primary", node: <Button variant="primary">확인</Button> },
- *       { label: "disabled", node: <Button disabled>확인</Button> },
- *     ],
- *   },
- * ];
- * ```
  */
-export const COMPONENT_EXAMPLES: ComponentExample[] = [];
+export const COMPONENT_EXAMPLES: ComponentExample[] = [
+  {
+    id: "fox-button",
+    name: "FoxButton",
+    description:
+      "Figma 시안(관리자페이지 node 390:439)을 토큰만으로 옮겼습니다. 너비는 내용에 따라 가변이고 높이만 고정입니다. hover·pressed는 마우스를 올리거나 눌러 확인하세요. error 계열은 시안 미정이라 비어 있습니다.",
+    variants: [
+      {
+        label: "계열 (type) — hover·pressed 확인 가능",
+        node: (
+          <>
+            <FoxButton size="md" label="default" />
+            <FoxButton size="md" type="primary" label="primary" />
+            <FoxButton size="md" type="secondary" label="secondary" />
+            <FoxButton size="md" type="error" label="error (시안 미정)" />
+          </>
+        ),
+      },
+      {
+        label: "크기 (size)",
+        node: (
+          <>
+            <FoxButton size="lg" label="lg" />
+            <FoxButton size="md" label="md" />
+            <FoxButton size="sm" label="sm" />
+            <FoxButton size="xsm" label="xsm" />
+          </>
+        ),
+      },
+      {
+        label: "아이콘",
+        node: (
+          <>
+            <FoxButton size="md" label="leading" leadingIcon={<DemoIcon />} />
+            <FoxButton size="md" label="trailing" trailingIcon={<DemoIcon />} />
+            <FoxButton size="md" label="both" leadingIcon={<DemoIcon />} trailingIcon={<DemoIcon />} />
+          </>
+        ),
+      },
+      {
+        label: "상태 — disabled / loading (둘 다 클릭이 막힌다)",
+        node: (
+          <>
+            <FoxButton size="md" label="normal" onAction={() => undefined} />
+            <FoxButton size="md" label="disabled" disabled />
+            <FoxButton size="md" label="loading" loading />
+            <FoxButton size="md" label="loading + icon" loading leadingIcon={<DemoIcon />} />
+          </>
+        ),
+      },
+      {
+        label: "fullWidth",
+        node: <FoxButton size="md" label="fullWidth" fullWidth />,
+      },
+      {
+        label: "htmlType — 폼 안에서의 역할",
+        node: (
+          <>
+            <FoxButton size="md" label="button (기본)" />
+            <FoxButton size="md" label="submit" htmlType="submit" />
+            <FoxButton size="md" label="reset" htmlType="reset" />
+          </>
+        ),
+      },
+      {
+        label: "hidden — 렌더되지 않는다(아래는 비어 있는 것이 정상)",
+        node: <FoxButton size="md" label="hidden" hidden />,
+      },
+    ],
+  },
+];

da813ce

@fox/styles/_fox-button.scss (added)

+++ @fox/styles/_fox-button.scss

...	...	@@ -0,0 +1,194 @@
	1	+// FoxButton 스타일 — 시안: 관리자페이지 Figma, node 390:439 (`btn`)
	2	+//
	3	+// 모든 디자인 값은 토큰으로만 지목한다. 시안의 Figma 변수가 우리 토큰과 1:1로
	4	+// 대응하므로 예외가 필요 없었고, 아래 세 가지만 토큰이 아니다(사용자 승인 후 사용):
	5	+//
	6	+// 1. `line-height: 1` / `letter-spacing: -0.025em`
	7	+// 시안 텍스트 스타일 `label/*-strong`의 값이다(lineHeight 1, letterSpacing -2.5%).
	8	+// Figma에서 텍스트 스타일로만 존재하고 변수로 export되지 않아 토큰이 없다.
	9	+// 네 크기가 모두 같은 값이라 스케일이 아니고 규칙 하나로 끝난다.
	10	+// 2. `box-sizing: border-box`
	11	+// 높이가 고정인데 secondary·default가 1px 테두리를 가져, 없으면 계열별로 바깥
	12	+// 높이가 2px 어긋난다. 디자인 값이 아니라 레이아웃 메커니즘이다.
	13	+// 3. `cursor` / `white-space` / `flex-shrink` 등 구조·상호작용 규칙.
	14	+//
	15	+// 이 파일은 CSS를 출력하므로 `fox-button.module.scss` 한 곳에서만 `@use`한다.
	16	+// 전역 진입점(`index.scss`)에 넣으면 안 된다.
	17	+
	18	+@use "abstracts" as fox;
	19	+
	20	+.button {
	21	+ box-sizing: border-box;
	22	+ display: inline-flex;
	23	+ align-items: center;
	24	+ justify-content: center;
	25	+ border: none;
	26	+ cursor: pointer;
	27	+
	28	+ // 시안 label/*-strong. 크기별 font-size는 아래 size 클래스가 정한다.
	29	+ font-family: fox.font-family(body);
	30	+ font-weight: fox.font-weight(medium);
	31	+ line-height: 1;
	32	+ letter-spacing: -0.025em;
	33	+ white-space: nowrap;
	34	+}
	35	+
	36	+.button:disabled {
	37	+ cursor: default;
	38	+}
	39	+
	40	+.fullWidth {
	41	+ inline-size: 100%;
	42	+}
	43	+
	44	+// 라벨이 길어도 아이콘을 밀어내지 않게 라벨만 줄어들 수 있게 둔다.
	45	+.label {
	46	+ min-inline-size: 0;
	47	+}
	48	+
	49	+// 아이콘 슬롯. 크기는 size 클래스가, 색은 type 클래스가 정한다 —
	50	+// 안에 들어오는 SVG는 `currentColor`로 그려야 계열별 색이 적용된다.
	51	+.icon,
	52	+.spinner {
	53	+ display: inline-flex;
	54	+ flex-shrink: 0;
	55	+ align-items: center;
	56	+ justify-content: center;
	57	+}
	58	+
	59	+.icon > * {
	60	+ inline-size: 100%;
	61	+ block-size: 100%;
	62	+}
	63	+
	64	+// ── 크기 ────────────────────────────────────────────────────────────────────
	65	+// 높이만 고정이고 너비는 내용에 따라 가변이다(시안도 좌우 padding만 지정).
	66	+.sizeLg {
	67	+ block-size: fox.form(height-lg);
	68	+ padding-inline: fox.form(padding-lg);
	69	+ border-radius: fox.form(radius-lg);
	70	+ gap: fox.gap(2);
	71	+ font-size: fox.font-size(label-lg);
	72	+
	73	+ .icon,
	74	+ .spinner {
	75	+ inline-size: fox.form(icon-lg);
	76	+ block-size: fox.form(icon-lg);
	77	+ }
	78	+}
	79	+
	80	+.sizeMd {
	81	+ block-size: fox.form(height-md);
	82	+ padding-inline: fox.form(padding-md);
	83	+ border-radius: fox.form(radius-md);
	84	+ gap: fox.gap(2);
	85	+ font-size: fox.font-size(label-md);
	86	+
	87	+ .icon,
	88	+ .spinner {
	89	+ inline-size: fox.form(icon-md);
	90	+ block-size: fox.form(icon-md);
	91	+ }
	92	+}
	93	+
	94	+.sizeSm {
	95	+ block-size: fox.form(height-sm);
	96	+ padding-inline: fox.form(padding-sm);
	97	+ border-radius: fox.form(radius-sm);
	98	+ gap: fox.gap(2);
	99	+ font-size: fox.font-size(label-sm);
	100	+
	101	+ .icon,
	102	+ .spinner {
	103	+ inline-size: fox.form(icon-sm);
	104	+ block-size: fox.form(icon-sm);
	105	+ }
	106	+}
	107	+
	108	+// xsm만 gap이 한 단계 좁다(시안 확인).
	109	+.sizeXsm {
	110	+ block-size: fox.form(height-xsm);
	111	+ padding-inline: fox.form(padding-xsm);
	112	+ border-radius: fox.form(radius-xsm);
	113	+ gap: fox.gap(1);
	114	+ font-size: fox.font-size(label-xsm);
	115	+
	116	+ .icon,
	117	+ .spinner {
	118	+ inline-size: fox.form(icon-xsm);
	119	+ block-size: fox.form(icon-xsm);
	120	+ }
	121	+}
	122	+
	123	+// ── 계열 ────────────────────────────────────────────────────────────────────
	124	+// 아이콘 색은 라벨 색과 별개 토큰으로 지정돼 있어(시안) 각각 지목한다 —
	125	+// 지금은 두 값이 같지만 토큰이 갈라지면 시안을 따라가야 한다.
	126	+.typePrimary {
	127	+ background: fox.color(button-primary-surface);
	128	+ color: fox.color(button-primary-font);
	129	+
	130	+ .icon {
	131	+ color: fox.color(icon-neutral-static-inverse);
	132	+ }
	133	+
	134	+ &:hover:not(:disabled) {
	135	+ background: fox.color(button-primary-surface-hover);
	136	+ }
	137	+
	138	+ &:active:not(:disabled) {
	139	+ background: fox.color(button-primary-surface-pressed);
	140	+ }
	141	+}
	142	+
	143	+.typeSecondary {
	144	+ border: fox.border(1) solid fox.color(button-secondary-border);
	145	+ background: fox.color(button-secondary-surface);
	146	+ color: fox.color(button-secondary-font);
	147	+
	148	+ .icon {
	149	+ color: fox.color(icon-theme-primary-strong);
	150	+ }
	151	+
	152	+ &:hover:not(:disabled) {
	153	+ background: fox.color(button-secondary-surface-hover);
	154	+ }
	155	+
	156	+ &:active:not(:disabled) {
	157	+ background: fox.color(button-secondary-surface-pressed);
	158	+ }
	159	+}
	160	+
	161	+.typeDefault {
	162	+ border: fox.border(1) solid fox.color(button-default-border);
	163	+ background: fox.color(button-default-surface);
	164	+ color: fox.color(button-default-font);
	165	+
	166	+ .icon {
	167	+ color: fox.color(icon-neutral-default);
	168	+ }
	169	+
	170	+ &:hover:not(:disabled) {
	171	+ background: fox.color(button-default-surface-hover);
	172	+ }
	173	+
	174	+ &:active:not(:disabled) {
	175	+ background: fox.color(button-default-surface-pressed);
	176	+ }
	177	+}
	178	+
	179	+// ⚠️ error 계열은 시안 미정이라 규칙을 두지 않는다. 확정되면 여기에 채운다.
	180	+.typeError {
	181	+}
	182	+
	183	+// ── 비활성 ──────────────────────────────────────────────────────────────────
	184	+// 계열과 무관하게 같은 모양이고 테두리가 없다(시안에서 disabled-border 미사용).
	185	+// `.button:disabled`가 계열 클래스보다 특이도가 높아 뒤에 두지 않아도 이긴다.
	186	+.button:disabled {
	187	+ border: none;
	188	+ background: fox.color(button-disabled-surface);
	189	+ color: fox.color(button-disabled-font);
	190	+
	191	+ .icon {
	192	+ color: fox.color(icon-neutral-disabled-strong);
	193	+ }
	194	+}

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,4 +1,5 @@
1	1	import type { ReactNode } from "react";
	2	+import { FoxButton } from "../core/components/fox-button";
2	3
3	4	/**
4	5	* 컴포넌트 예제 하나. 사이드바의 "컴포넌트" 분류에 항목으로 뜬다.
...	...	@@ -17,24 +18,89 @@
17	18	variants: { label: string; node: ReactNode }[];
18	19	}
19	20
	21	+// 예제용 아이콘 — 시안의 실제 아이콘이 아니라 자리 확인용 도형이다.
	22	+// `currentColor`로 그려야 버튼이 계열별로 색을 입힐 수 있다(슬롯이 `color`를 내려준다).
	23	+// 크기는 슬롯이 `form-icon-*` 토큰으로 정하므로 100%로 채우기만 한다.
	24	+function DemoIcon() {
	25	+ return (
	26	+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
	27	+ <path d="M6 3l5 5-5 5" />
	28	+ </svg>
	29	+ );
	30	+}
	31	+
20	32	/**
21	33	* 컴포넌트를 만들 때마다 여기에 한 항목씩 추가한다. 사이드바·본문은 이 배열만 보고
22	34	* 그리므로 다른 파일을 고칠 필요가 없다.
23		- *
24		- * ```tsx
25		- * import { Button } from "../core/components/button";
26		- *
27		- * export const COMPONENT_EXAMPLES: ComponentExample[] = [
28		- * {
29		- * id: "button",
30		- * name: "Button",
31		- * description: "기본 액션 버튼",
32		- * variants: [
33		- * { label: "primary", node: <Button variant="primary">확인</Button> },
34		- * { label: "disabled", node: <Button disabled>확인</Button> },
35		- * ],
36		- * },
37		- * ];
38		- * ```
39	35	*/
40		-export const COMPONENT_EXAMPLES: ComponentExample[] = [];
	36	+export const COMPONENT_EXAMPLES: ComponentExample[] = [
	37	+ {
	38	+ id: "fox-button",
	39	+ name: "FoxButton",
	40	+ description:
	41	+ "Figma 시안(관리자페이지 node 390:439)을 토큰만으로 옮겼습니다. 너비는 내용에 따라 가변이고 높이만 고정입니다. hover·pressed는 마우스를 올리거나 눌러 확인하세요. error 계열은 시안 미정이라 비어 있습니다.",
	42	+ variants: [
	43	+ {
	44	+ label: "계열 (type) — hover·pressed 확인 가능",
	45	+ node: (
	46	+ <>
	47	+ <FoxButton size="md" label="default" />
	48	+ <FoxButton size="md" type="primary" label="primary" />
	49	+ <FoxButton size="md" type="secondary" label="secondary" />
	50	+ <FoxButton size="md" type="error" label="error (시안 미정)" />
	51	+ </>
	52	+ ),
	53	+ },
	54	+ {
	55	+ label: "크기 (size)",
	56	+ node: (
	57	+ <>
	58	+ <FoxButton size="lg" label="lg" />
	59	+ <FoxButton size="md" label="md" />
	60	+ <FoxButton size="sm" label="sm" />
	61	+ <FoxButton size="xsm" label="xsm" />
	62	+ </>
	63	+ ),
	64	+ },
	65	+ {
	66	+ label: "아이콘",
	67	+ node: (
	68	+ <>
	69	+ <FoxButton size="md" label="leading" leadingIcon={<DemoIcon />} />
	70	+ <FoxButton size="md" label="trailing" trailingIcon={<DemoIcon />} />
	71	+ <FoxButton size="md" label="both" leadingIcon={<DemoIcon />} trailingIcon={<DemoIcon />} />
	72	+ </>
	73	+ ),
	74	+ },
	75	+ {
	76	+ label: "상태 — disabled / loading (둘 다 클릭이 막힌다)",
	77	+ node: (
	78	+ <>
	79	+ <FoxButton size="md" label="normal" onAction={() => undefined} />
	80	+ <FoxButton size="md" label="disabled" disabled />
	81	+ <FoxButton size="md" label="loading" loading />
	82	+ <FoxButton size="md" label="loading + icon" loading leadingIcon={<DemoIcon />} />
	83	+ </>
	84	+ ),
	85	+ },
	86	+ {
	87	+ label: "fullWidth",
	88	+ node: <FoxButton size="md" label="fullWidth" fullWidth />,
	89	+ },
	90	+ {
	91	+ label: "htmlType — 폼 안에서의 역할",
	92	+ node: (
	93	+ <>
	94	+ <FoxButton size="md" label="button (기본)" />
	95	+ <FoxButton size="md" label="submit" htmlType="submit" />
	96	+ <FoxButton size="md" label="reset" htmlType="reset" />
	97	+ </>
	98	+ ),
	99	+ },
	100	+ {
	101	+ label: "hidden — 렌더되지 않는다(아래는 비어 있는 것이 정상)",
	102	+ node: <FoxButton size="md" label="hidden" hidden />,
	103	+ },
	104	+ ],
	105	+ },
	106	+];

Delete comment