Commit @22f515f17fa7648ad92bf29f8414a25fcd943bd9

임동욱 08-20

refactor: 디자인 예시안의 데모 아이콘도 아이콘 폰트로 바꾼다

예시안 안에 손으로 그린 SVG 도형이 셋 남아 있었다(DemoIcon·DemoStar·DemoCalendar). 이 화면이
곧 사용법 안내라, 버튼·칩·셀렉트 슬롯에 SVG가 들어가 있으면 "아이콘은 이렇게 넣는다"로 잘못
읽힌다 — 실제로 혼동이 생겼다. 셋 다 `fox-ico` 클래스로 바꾼다(CaretRight·Star·CalendarBlank).
호출부 69곳은 그대로다.

폰트 아이콘은 `width`/`height`가 아니라 `font-size`가 크기를 정한다. FoxSelect 힌트 아이콘
15곳의 `style`도 함께 바꿨다.

아이콘 슬롯 prop 주석도 고친다 — "`currentColor`로 그린 SVG여야 한다"가 다섯 컴포넌트에 남아
있어 같은 혼동을 계속 만든다. 마크업 계약을 그대로 적는다.

`DemoThumb`(320×180)만 SVG로 둔다 — 아이콘이 아니라 카드·모달의 사진 자리를 채우는 그림이다.

확인: 예시안의 버튼 아이콘이 "Fox Icons Regular" 16×16으로 그려지고 글리프가 실린다.
칩의 달력도 CalendarBlank로 나온다. 예시안 어디에도 `

@22f515f17fa7648ad92bf29f8414a25fcd943bd9

ac05b33

22f515f

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

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

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


   htmlType?: "button" | "submit" | "reset";
   /** 배치 조정용. 모양이 달라야 하면 여기 말고 `type`을 추가한다. */
   className?: string;
-  /** `currentColor`로 그린 SVG여야 계열별 색이 적용된다. 크기는 슬롯이 정한다. */
+  /** 아이콘 폰트를 넘긴다 — `<i class="fox-ico fox-ico-House" aria-hidden="true" />`. 크기·색은 슬롯이 정한다. */
   leadingIcon?: ReactNode;
   trailingIcon?: ReactNode;
   label: string;

ac05b33

22f515f

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

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

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

...	...	@@ -12,7 +12,7 @@
12	12	size?: FoxCarouselButtonSize;
13	13	/** 네이티브 `type` — prop의 `type`이 시각 계열을 쓰므로 분리했다. */
14	14	htmlType?: "button" \| "submit" \| "reset";
15		- /** `currentColor`로 그린 SVG여야 상태별 색이 적용된다. 크기는 슬롯이 정한다. */
	15	+ /** 아이콘 폰트를 넘긴다 — `<i class="fox-ico fox-ico-House" aria-hidden="true" />`. 크기·색은 슬롯이 정한다. */
16	16	icon: ReactNode;
17	17	/** 글자가 보이지 않으므로 `aria-label`이 된다. 무엇을 하는 버튼인지 적는다. */
18	18	label: string;

ac05b33

22f515f

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

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

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

...	...	@@ -13,7 +13,7 @@
13	13	htmlType?: "button" \| "submit" \| "reset";
14	14	/** 배치 조정용. 모양이 달라야 하면 여기 말고 `type`을 추가한다. */
15	15	className?: string;
16		- /** `currentColor`로 그린 SVG여야 계열별 색이 적용된다. 크기는 슬롯이 정한다. */
	16	+ /** 아이콘 폰트를 넘긴다 — `<i class="fox-ico fox-ico-House" aria-hidden="true" />`. 크기·색은 슬롯이 정한다. */
17	17	icon: ReactNode;
18	18	/** 글자가 보이지 않으므로 `aria-label`이 된다. 무엇을 하는 버튼인지 적는다. */
19	19	label: string;

ac05b33

22f515f

@fox/core/components/fox-input/fox-input.tsx

--- @fox/core/components/fox-input/fox-input.tsx

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

...	...	@@ -45,7 +45,7 @@
45	45	message?: string;
46	46	/** 헬퍼 메시지 앞 아이콘. `currentColor`로 그려야 상태 색을 따라간다. */
47	47	messageIcon?: ReactNode;
48		- /** 입력 오른쪽 아이콘. `currentColor`로 그린 SVG여야 색이 적용된다. */
	48	+ /** 입력 오른쪽 아이콘. 아이콘 폰트를 넘긴다 — `<i class="fox-ico fox-ico-House" aria-hidden="true" />`. */
49	49	icon?: ReactNode;
50	50	/** 입력 오른쪽에 붙는 글자. 아이콘 슬롯과 달리 크기가 글자에 맞춰진다. */
51	51	suffix?: ReactNode;

ac05b33

22f515f

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

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

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


   htmlType?: "button" | "submit" | "reset";
   /** 배치 조정용. 모양이 달라야 하면 여기 말고 `type`을 추가한다. */
   className?: string;
-  /** `currentColor`로 그린 SVG여야 계열별 색이 적용된다. 크기는 슬롯이 정한다. */
+  /** 아이콘 폰트를 넘긴다 — `<i class="fox-ico fox-ico-House" aria-hidden="true" />`. 크기·색은 슬롯이 정한다. */
   leadingIcon?: ReactNode;
   trailingIcon?: ReactNode;
   label: string;

ac05b33

22f515f

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

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

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


   variants: { label: string; node: ReactNode }[];
 }
 
-// 자리 확인용 도형. `currentColor`로 그려야 계열별 색이 입혀진다. style은 FoxSelect
-// 힌트 아이콘처럼 크기를 줄여 써야 하는 자리에 쓴다.
+// 자리 확인용 아이콘. 이 예시안이 곧 사용법 안내라 아이콘 폰트(`fox-ico`)를 그대로 쓴다 —
+// 손으로 그린 SVG를 두면 "아이콘은 이렇게 넣는다"로 잘못 읽힌다.
+// 크기는 `font-size`가 정한다. style은 FoxSelect 힌트처럼 작게 써야 하는 자리에 쓴다.
 function DemoIcon({ style }: { style?: CSSProperties } = {}) {
-  return (
-    <svg
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      aria-hidden="true"
-      style={style}
-    >
-      <path d="M6 3l5 5-5 5" />
-    </svg>
-  );
+  return <i className="fox-ico fox-ico-CaretRight" aria-hidden="true" style={style} />;
 }
 
 function DemoStar() {
-  return (
-    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-      <path d="M8 1.6l1.9 4 4.4.6-3.2 3 .8 4.3L8 11.5l-3.9 2 .8-4.3-3.2-3 4.4-.6z" />
-    </svg>
-  );
+  return <i className="fox-ico fox-ico--fill fox-ico-Star" aria-hidden="true" />;
 }
 
 // overlay 계열은 어두운 반투명 배경이라 밝은 바탕 위에서는 대비를 볼 수 없다.

   { value: "amount", label: "금액 높은순" },
 ];
 
-// FoxChip select 계열의 앞 아이콘 자리를 확인하기 위한 달력 도형(시안이 그 자리에 달력을
-// 쓴다). `currentColor`로 그려야 상태별 글자 색을 따라간다.
+// FoxChip select 계열의 앞 아이콘 자리(시안이 그 자리에 달력을 쓴다).
 function DemoCalendar() {
-  return (
-    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3" aria-hidden="true">
-      <rect x="2" y="3" width="12" height="11" rx="1.5" />
-      <path d="M2 6.5h12M5.5 1.5v3M10.5 1.5v3" />
-    </svg>
-  );
+  return <i className="fox-ico fox-ico-CalendarBlank" aria-hidden="true" />;
 }
 
 function ModalDemo({

         label: "크기 (size)",
         node: (
           <div className={styles.demoFields}>
-            <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
-            <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
-            <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
+            <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
+            <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
+            <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
           </div>
         ),
       },

         label: "완료(값 선택됨)",
         node: (
           <div className={styles.demoFields}>
-            <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} defaultValue="a" hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
-            <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} defaultValue="a" hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
-            <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} defaultValue="a" hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
+            <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} defaultValue="a" hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
+            <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} defaultValue="a" hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
+            <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} defaultValue="a" hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
           </div>
         ),
       },

         label: "error",
         node: (
           <div className={styles.demoFields}>
-            <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} error hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
-            <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} error hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
-            <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} error hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
+            <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} error hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
+            <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} error hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
+            <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} error hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
           </div>
         ),
       },

         label: "disabled",
         node: (
           <div className={styles.demoFields}>
-            <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} disabled hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
-            <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} disabled hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
-            <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} disabled hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
+            <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} disabled hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
+            <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} disabled hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
+            <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} disabled hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
           </div>
         ),
       },

         label: "view (조회 전용)",
         node: (
           <div className={styles.demoFields}>
-            <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} defaultValue="a" readOnly hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
-            <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} defaultValue="a" readOnly hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
-            <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} defaultValue="a" readOnly hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
+            <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} defaultValue="a" readOnly hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
+            <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} defaultValue="a" readOnly hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
+            <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} defaultValue="a" readOnly hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
           </div>
         ),
       },

Add a comment

Open 0
Closed 0

List

...	...	@@ -75,29 +75,15 @@
75	75	variants: { label: string; node: ReactNode }[];
76	76	}
77	77
78		-// 자리 확인용 도형. `currentColor`로 그려야 계열별 색이 입혀진다. style은 FoxSelect
79		-// 힌트 아이콘처럼 크기를 줄여 써야 하는 자리에 쓴다.
	78	+// 자리 확인용 아이콘. 이 예시안이 곧 사용법 안내라 아이콘 폰트(`fox-ico`)를 그대로 쓴다 —
	79	+// 손으로 그린 SVG를 두면 "아이콘은 이렇게 넣는다"로 잘못 읽힌다.
	80	+// 크기는 `font-size`가 정한다. style은 FoxSelect 힌트처럼 작게 써야 하는 자리에 쓴다.
80	81	function DemoIcon({ style }: { style?: CSSProperties } = {}) {
81		- return (
82		- <svg
83		- viewBox="0 0 16 16"
84		- fill="none"
85		- stroke="currentColor"
86		- strokeWidth="2"
87		- aria-hidden="true"
88		- style={style}
89		- >
90		- <path d="M6 3l5 5-5 5" />
91		- </svg>
92		- );
	82	+ return <i className="fox-ico fox-ico-CaretRight" aria-hidden="true" style={style} />;
93	83	}
94	84
95	85	function DemoStar() {
96		- return (
97		- <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
98		- <path d="M8 1.6l1.9 4 4.4.6-3.2 3 .8 4.3L8 11.5l-3.9 2 .8-4.3-3.2-3 4.4-.6z" />
99		- </svg>
100		- );
	86	+ return <i className="fox-ico fox-ico--fill fox-ico-Star" aria-hidden="true" />;
101	87	}
102	88
103	89	// overlay 계열은 어두운 반투명 배경이라 밝은 바탕 위에서는 대비를 볼 수 없다.
...	...	@@ -593,15 +579,9 @@
593	579	{ value: "amount", label: "금액 높은순" },
594	580	];
595	581
596		-// FoxChip select 계열의 앞 아이콘 자리를 확인하기 위한 달력 도형(시안이 그 자리에 달력을
597		-// 쓴다). `currentColor`로 그려야 상태별 글자 색을 따라간다.
	582	+// FoxChip select 계열의 앞 아이콘 자리(시안이 그 자리에 달력을 쓴다).
598	583	function DemoCalendar() {
599		- return (
600		- <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3" aria-hidden="true">
601		- <rect x="2" y="3" width="12" height="11" rx="1.5" />
602		- <path d="M2 6.5h12M5.5 1.5v3M10.5 1.5v3" />
603		- </svg>
604		- );
	584	+ return <i className="fox-ico fox-ico-CalendarBlank" aria-hidden="true" />;
605	585	}
606	586
607	587	function ModalDemo({
...	...	@@ -1497,9 +1477,9 @@
1497	1477	label: "크기 (size)",
1498	1478	node: (
1499	1479	<div className={styles.demoFields}>
1500		- <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
1501		- <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
1502		- <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
	1480	+ <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
	1481	+ <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
	1482	+ <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
1503	1483	</div>
1504	1484	),
1505	1485	},
...	...	@@ -1507,9 +1487,9 @@
1507	1487	label: "완료(값 선택됨)",
1508	1488	node: (
1509	1489	<div className={styles.demoFields}>
1510		- <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} defaultValue="a" hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
1511		- <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} defaultValue="a" hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
1512		- <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} defaultValue="a" hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
	1490	+ <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} defaultValue="a" hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
	1491	+ <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} defaultValue="a" hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
	1492	+ <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} defaultValue="a" hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
1513	1493	</div>
1514	1494	),
1515	1495	},
...	...	@@ -1517,9 +1497,9 @@
1517	1497	label: "error",
1518	1498	node: (
1519	1499	<div className={styles.demoFields}>
1520		- <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} error hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
1521		- <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} error hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
1522		- <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} error hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
	1500	+ <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} error hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
	1501	+ <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} error hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
	1502	+ <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} error hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
1523	1503	</div>
1524	1504	),
1525	1505	},
...	...	@@ -1527,9 +1507,9 @@
1527	1507	label: "disabled",
1528	1508	node: (
1529	1509	<div className={styles.demoFields}>
1530		- <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} disabled hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
1531		- <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} disabled hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
1532		- <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} disabled hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
	1510	+ <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} disabled hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
	1511	+ <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} disabled hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
	1512	+ <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} disabled hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
1533	1513	</div>
1534	1514	),
1535	1515	},
...	...	@@ -1537,9 +1517,9 @@
1537	1517	label: "view (조회 전용)",
1538	1518	node: (
1539	1519	<div className={styles.demoFields}>
1540		- <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} defaultValue="a" readOnly hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
1541		- <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} defaultValue="a" readOnly hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
1542		- <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} defaultValue="a" readOnly hint="힌트 메시지" hintIcon={<DemoIcon style={{ width: 12, height: 12 }} />} />
	1520	+ <FoxSelect size="lg" label="레이블" options={SELECT_ITEMS} defaultValue="a" readOnly hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
	1521	+ <FoxSelect size="md" label="레이블" options={SELECT_ITEMS} defaultValue="a" readOnly hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
	1522	+ <FoxSelect size="sm" label="레이블" options={SELECT_ITEMS} defaultValue="a" readOnly hint="힌트 메시지" hintIcon={<DemoIcon style={{ fontSize: 12 }} />} />
1543	1523	</div>
1544	1524	),
1545	1525	},

...	...	@@ -14,7 +14,7 @@
14	14	htmlType?: "button" \| "submit" \| "reset";
15	15	/** 배치 조정용. 모양이 달라야 하면 여기 말고 `type`을 추가한다. */
16	16	className?: string;
17		- /** `currentColor`로 그린 SVG여야 계열별 색이 적용된다. 크기는 슬롯이 정한다. */
	17	+ /** 아이콘 폰트를 넘긴다 — `<i class="fox-ico fox-ico-House" aria-hidden="true" />`. 크기·색은 슬롯이 정한다. */
18	18	leadingIcon?: ReactNode;
19	19	trailingIcon?: ReactNode;
20	20	label: string;

Delete comment