Commit @0f6c0e79d11fcf68f0c56e4021efb3308f8e88e6

임동욱 08-18

merge: FoxChip·FoxSelectText·FoxSegmentedControl·FoxToggleQuantity 계열 통합

카탈로그 등록 파일에서 충돌 일곱 구역이 났다. 양쪽이 같은 배열 끝에 항목을 붙였는데
git이 서로 다른 항목의 앞뒤를 맞물려 갈라 놓아, 구역별로 이어 붙이면 남의 항목 머리에
내 항목 꼬리가 붙는다.

그래서 충돌 파일을 손보지 않고 양쪽 원본을 꺼내 항목 단위로 다시 합쳤다. 중괄호를 세어
최상위 항목을 잘라내므로 JSX 안의 괄호나 타입 표기의 대괄호에 속지 않는다.

  - 겹치는 항목 없음: 우리 12개(breadcrumb·pagination·carousel 3·bullet-list·badge 3·
    table·tab·spinner), 상대 6개(chip·chip-area·select-text·segmented-control 2·
    toggle-quantity)
  - fox-select는 상대만 고쳤으므로(다중 선택 지원) 그쪽 판을 쓴다
  - fox-toggle-switch는 둘 다 고친 것으로 보였지만 뒤에 항목이 붙으며 닫는 괄호가 옮겨진
    것뿐이라 실제 충돌이 아니다

components.scss는 자동 병합되며 `@use "fox-toggle-switch"`가 두 번 들어가 Sass가 같은
네임스페이스 중복으로 컴파일을 멈췄다. 중복을 지웠다.

검증: 카탈로그 45개 항목이 모두 뜨고 양쪽 새 컴포넌트가 화면에 그려진다. 파티셜 50개가
빠짐없이 등록돼 있고 배럴도 폴더 수와 같다. sass 630규칙 · tsc · eslint 통과.

Co-Authored-By: Claude Opus 5

@0f6c0e79d11fcf68f0c56e4021efb3308f8e88e6

0f6c0e7

@fox/core/components/fox-chip-area/fox-chip-area.tsx (added)

+++ @fox/core/components/fox-chip-area/fox-chip-area.tsx

...	...	@@ -0,0 +1,101 @@
	1	+"use client";
	2	+
	3	+import {
	4	+ Children,
	5	+ Fragment,
	6	+ cloneElement,
	7	+ isValidElement,
	8	+ type ReactElement,
	9	+ type ReactNode,
	10	+ type Ref,
	11	+} from "react";
	12	+import { cx } from "../../utils";
	13	+import type { FoxChipSize } from "../fox-chip";
	14	+
	15	+export interface FoxChipAreaProps {
	16	+ /**
	17	+ * 자식 칩의 `size`를 전부 이 값으로 덮어쓴다. 넘기지 않으면 자식이 각자 정한다.
	18	+ *
	19	+ * `FoxTagList`와 달리 `type`은 덮어쓰지 않는다 — 한 줄에 계열이 섞이는 것이 칩에서는
	20	+ * 정상이기 때문이다(예: `기간 ∨` 옆에 `전체`·`입금`). 크기만 통일한다.
	21	+ */
	22	+ size?: FoxChipSize;
	23	+ /** 묶음을 읽어 줄 이름. 화면에 보이는 제목이 이미 있으면 `labelledBy`를 쓴다. */
	24	+ label?: string;
	25	+ /** 묶음 이름 역할을 하는 요소의 id. `label`보다 우선한다 — 화면의 글자와 어긋나지 않는다. */
	26	+ labelledBy?: string;
	27	+ /** `FoxChip`들. */
	28	+ children?: ReactNode;
	29	+ /** 배치 조정용. */
	30	+ className?: string;
	31	+ ref?: Ref<HTMLDivElement>;
	32	+}
	33	+
	34	+type Overrides = { size?: FoxChipSize };
	35	+
	36	+/**
	37	+ * 자식 칩에 묶음 값을 강제로 덮어쓴다.
	38	+ *
	39	+ * - 호스트 요소(`div` 등)는 건드리지 않는다 — DOM에 없는 속성이 넘어가면 React가 경고한다.
	40	+ * - `Children.map`은 프래그먼트 안으로 들어가지 않아 직접 내려간다. 그러지 않으면
	41	+ * `<>…</>`로 감싼 칩들이 덮어쓰기를 피해 가고 Fragment에 `size`가 붙어 경고가 난다.
	42	+ *
	43	+ * `FoxTagList`의 같은 함수와 규칙이 같다 — 다른 점은 덮어쓰는 값이 `size` 하나라는 것뿐이다.
	44	+ */
	45	+function overrideChildren(children: ReactNode, overrides: Overrides): ReactNode {
	46	+ return Children.map(children, (child) => {
	47	+ if (!isValidElement(child)) {
	48	+ return child;
	49	+ }
	50	+
	51	+ if (child.type === Fragment) {
	52	+ const fragment = child as ReactElement<{ children?: ReactNode }>;
	53	+ return overrideChildren(fragment.props.children, overrides);
	54	+ }
	55	+
	56	+ if (typeof child.type === "string") {
	57	+ return child;
	58	+ }
	59	+
	60	+ return cloneElement(child as ReactElement<Record<string, unknown>>, overrides);
	61	+ });
	62	+}
	63	+
	64	+/**
	65	+ * @fox 칩 묶음. 배치와 `size` 통일만 책임지고 상태를 갖지 않는다 — 무엇이 켜져 있는지는
	66	+ * 각 칩이(또는 칩에게 값을 주는 호출부가) 소유한다.
	67	+ *
	68	+ * 방향 수식어가 없다 — 칩은 가로로 나란히 놓이는 것이 유일한 배치다.
	69	+ *
	70	+ * `role="radiogroup"`이 아니라 `role="group"`이다 — 하나만 고르는 묶음이 아니고, 각 칩이
	71	+ * 독립적으로 Tab을 받는 버튼이다(`FoxTagList`와 같은 근거).
	72	+ *
	73	+ * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
	74	+ * (또는 개별 파티셜)로 한 번 불러와야 한다.
	75	+ */
	76	+export function FoxChipArea({
	77	+ size,
	78	+ label,
	79	+ labelledBy,
	80	+ children,
	81	+ className,
	82	+ ref,
	83	+}: FoxChipAreaProps) {
	84	+ // 값을 준 것만 넣는다 — `undefined`를 그대로 넘기면 자식이 스스로 정한 값을 지운다.
	85	+ const overrides: Overrides = {};
	86	+ if (size !== undefined) {
	87	+ overrides.size = size;
	88	+ }
	89	+
	90	+ return (
	91	+ <div
	92	+ ref={ref}
	93	+ role="group"
	94	+ aria-label={labelledBy ? undefined : label}
	95	+ aria-labelledby={labelledBy}
	96	+ className={cx("fox-chip-area", className)}
	97	+ >
	98	+ {overrideChildren(children, overrides)}
	99	+ </div>
	100	+ );
	101	+}

0f6c0e7

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

+++ @fox/core/components/fox-chip-area/index.ts

...	...	@@ -0,0 +1,1 @@
	1	+export { FoxChipArea, type FoxChipAreaProps } from "./fox-chip-area";

0f6c0e7

@fox/core/components/fox-chip-select-option/fox-chip-select-option.tsx (added)

+++ @fox/core/components/fox-chip-select-option/fox-chip-select-option.tsx

...	...	@@ -0,0 +1,171 @@
	1	+"use client";
	2	+
	3	+import { useId, type ReactNode, type Ref } from "react";
	4	+import { cx } from "../../utils";
	5	+import { FoxCheckbox } from "../fox-checkbox";
	6	+import { FoxCheckboxGroup } from "../fox-checkbox-group";
	7	+import { FoxRadio } from "../fox-radio";
	8	+import { FoxRadioGroup } from "../fox-radio-group";
	9	+
	10	+export type FoxChipSelectionMode = "single" \| "multiple";
	11	+
	12	+/** 칩 목록의 항목 하나. 그리는 일은 `FoxCheckbox`·`FoxRadio`가 한다. */
	13	+export interface FoxChipItem {
	14	+ value: string;
	15	+ label: ReactNode;
	16	+ /** 이 항목만 고를 수 없게 한다. */
	17	+ disabled?: boolean;
	18	+}
	19	+
	20	+export interface FoxChipSelectOptionProps {
	21	+ /** 목록을 여는 요소의 `aria-controls`가 가리킬 값. */
	22	+ id?: string;
	23	+ /** 목록에 이름을 주는 요소의 id — 보통 칩 자신이다. */
	24	+ labelledBy?: string;
	25	+ /**
	26	+ * 하나만 고를지 여러 개를 고를지. 항목의 모양이 여기서 갈린다 —
	27	+ * `single`은 라디오 목록, `multiple`은 체크박스 목록이다.
	28	+ */
	29	+ selectionMode?: FoxChipSelectionMode;
	30	+ options: FoxChipItem[];
	31	+ /**
	32	+ * 라디오 묶음의 `name`. `single`에서만 쓰이고, 넘기지 않으면 자동으로 만든다.
	33	+ *
	34	+ * 같은 화면에 칩 목록이 둘 이상 열릴 일은 없지만, `name`이 겹치면 브라우저가 한 묶음으로
	35	+ * 보고 서로를 끄기 때문에 자동 생성이라도 반드시 있어야 한다.
	36	+ */
	37	+ name?: string;
	38	+ /** 지금 켜진 값들. `single`이면 길이가 0 또는 1이다 — 두 계열의 상태를 한 모양으로 받는다. */
	39	+ values?: string[];
	40	+ /** 항목을 켜거나 끌 때 호출된다. 무엇을 어떻게 반영할지는 받는 쪽이 정한다. */
	41	+ onSelect?: (value: string) => void;
	42	+ /**
	43	+ * 모바일에만 보이는 확인 버튼의 글자. 버튼 자체는 언제나 렌더되고 **CSS가 데스크톱에서
	44	+ * 숨긴다** — 조건부 렌더로 하면 창 폭이 바뀔 때마다 DOM이 들락거려서, 열린 채로 화면을
	45	+ * 돌리면 포커스가 날아간다.
	46	+ */
	47	+ confirmLabel?: string;
	48	+ /** 확인 버튼을 눌렀을 때. 보통 목록을 닫는다. */
	49	+ onConfirm?: () => void;
	50	+ /**
	51	+ * 항목(체크박스·라디오)의 크기. 여는 칩의 크기를 그대로 받는다 — 두 컴포넌트의 크기
	52	+ * 이름이 같고 글자 크기도 같은 값이라(lg 17px, md 15px) 그대로 이어진다. 칩만 크고
	53	+ * 목록은 작으면 같은 필터인데 두 벌처럼 보인다.
	54	+ */
	55	+ size?: "lg" \| "md";
	56	+ /** 배치 조정용. 모양이 달라야 하면 여기 말고 모디파이어를 추가한다. */
	57	+ className?: string;
	58	+ ref?: Ref<HTMLDivElement>;
	59	+}
	60	+
	61	+/**
	62	+ * @fox 칩의 `select`가 열렸을 때 뜨는 목록. 배치만 책임지고 상태를 갖지 않는다 —
	63	+ * 열림 여부·고른 값은 전부 목록을 여는 칩이 소유한다.
	64	+ *
	65	+ * `FoxSelectOption`과 다른 컴포넌트다. 저쪽은 `role="listbox"` + `role="option"`이고
	66	+ * 항목이 글자 한 줄이지만, 이쪽은 시안이 체크박스·라디오 목록이라 이미 있는
	67	+ * `FoxCheckboxGroup`·`FoxRadioGroup`을 그대로 쓴다. 네이티브 입력이라 단일 선택의
	68	+ * 화살표 이동·폼 전송을 브라우저가 처리하고, 항목 모양이 다른 화면의 체크박스와 어긋나지
	69	+ * 않는다.
	70	+ *
	71	+ * 항목이 진짜 입력이라 `FoxSelectOption`처럼 `mousedown`을 막지 않는다 — 눌러서 그 입력에
	72	+ * 포커스가 가는 것이 맞다. 목록이 닫히지 않는 이유는 포커스가 여는 쪽과 같은 조상 안에
	73	+ * 머물러서다(칩의 focusout 처리가 그것을 본다).
	74	+ *
	75	+ * ⚠️ 스스로 위치를 잡지 못한다 — `position: absolute`라 위치 기준이 되는 조상이 필요하다.
	76	+ * `FoxChip` 안에서는 `fox-chip-select`가 그 역할을 한다.
	77	+ *
	78	+ * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
	79	+ * (또는 개별 파티셜)로 한 번 불러와야 한다.
	80	+ */
	81	+export function FoxChipSelectOption({
	82	+ id,
	83	+ labelledBy,
	84	+ selectionMode = "single",
	85	+ options,
	86	+ name,
	87	+ values = [],
	88	+ onSelect,
	89	+ confirmLabel = "확인",
	90	+ onConfirm,
	91	+ size = "md",
	92	+ className,
	93	+ ref,
	94	+}: FoxChipSelectOptionProps) {
	95	+ const generatedName = useId();
	96	+ const groupName = name ?? generatedName;
	97	+
	98	+ const isMultiple = selectionMode === "multiple";
	99	+
	100	+ return (
	101	+ <div
	102	+ ref={ref}
	103	+ id={id}
	104	+ // 목록 전체는 그냥 묶음이다. 단일 선택의 `radiogroup` 의미는 안쪽
	105	+ // `FoxRadioGroup`이 갖는다 — 확인 버튼이 그 묶음 밖에 있어야 하기 때문이다.
	106	+ role="group"
	107	+ aria-labelledby={labelledBy}
	108	+ className={cx("fox-chip-select-option", className)}
	109	+ >
	110	+ <div className="fox-chip-select-option__list">
	111	+ {isMultiple ? (
	112	+ <FoxCheckboxGroup
	113	+ orientation="vertical"
	114	+ labelledBy={labelledBy}
	115	+ // 항목 사이 간격만 묶음 기본값과 다르다 — 스타일 파일의 같은 이름 규칙 참고.
	116	+ className="fox-chip-select-option__group"
	117	+ >
	118	+ {options.map((option) => (
	119	+ <FoxCheckbox
	120	+ key={option.value}
	121	+ size={size}
	122	+ value={option.value}
	123	+ label={option.label}
	124	+ checked={values.includes(option.value)}
	125	+ disabled={option.disabled}
	126	+ onChange={() => onSelect?.(option.value)}
	127	+ />
	128	+ ))}
	129	+ </FoxCheckboxGroup>
	130	+ ) : (
	131	+ <FoxRadioGroup
	132	+ orientation="vertical"
	133	+ name={groupName}
	134	+ labelledBy={labelledBy}
	135	+ className="fox-chip-select-option__group"
	136	+ >
	137	+ {options.map((option) => (
	138	+ <FoxRadio
	139	+ key={option.value}
	140	+ size={size}
	141	+ value={option.value}
	142	+ label={option.label}
	143	+ checked={values.includes(option.value)}
	144	+ disabled={option.disabled}
	145	+ onChange={() => onSelect?.(option.value)}
	146	+ />
	147	+ ))}
	148	+ </FoxRadioGroup>
	149	+ )}
	150	+ </div>
	151	+
	152	+ {/*
	153	+ 확인 버튼은 다중 선택에만 있다. 이 버튼이 하는 일은 "고르기를 마쳤다"고 알려 목록을
	154	+ 닫는 것인데, 단일 선택은 하나 고르는 순간 목록이 닫히므로 버튼이 할 일이 없다 — 남겨
	155	+ 두면 눌러도 아무 일이 없는 버튼이 모바일 화면 아래를 차지한다.
	156	+
	157	+ 값이 반영되는 시점은 플랫폼과 무관하게 같다(고르는 즉시). 모바일에서 달라지는 것은
	158	+ 닫는 수단이 하나 더 생기는 것뿐이고, 데스크톱에서는 CSS가 이 버튼을 숨긴다.
	159	+ */}
	160	+ {isMultiple ? (
	161	+ <button
	162	+ type="button"
	163	+ className="fox-chip-select-option__confirm"
	164	+ onClick={onConfirm}
	165	+ >
	166	+ {confirmLabel}
	167	+ </button>
	168	+ ) : null}
	169	+ </div>
	170	+ );
	171	+}

0f6c0e7

@fox/core/components/fox-chip-select-option/index.ts (added)

+++ @fox/core/components/fox-chip-select-option/index.ts

...	...	@@ -0,0 +1,6 @@
	1	+export {
	2	+ FoxChipSelectOption,
	3	+ type FoxChipItem,
	4	+ type FoxChipSelectOptionProps,
	5	+ type FoxChipSelectionMode,
	6	+} from "./fox-chip-select-option";

0f6c0e7

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

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

...	...	@@ -0,0 +1,415 @@
	1	+"use client";
	2	+
	3	+import {
	4	+ useEffect,
	5	+ useId,
	6	+ useRef,
	7	+ useState,
	8	+ type KeyboardEvent,
	9	+ type ReactNode,
	10	+ type Ref,
	11	+} from "react";
	12	+import { cx } from "../../utils";
	13	+import {
	14	+ FoxChipSelectOption,
	15	+ type FoxChipItem,
	16	+ type FoxChipSelectionMode,
	17	+} from "../fox-chip-select-option";
	18	+
	19	+export type FoxChipType = "check" \| "select" \| "action";
	20	+export type FoxChipSize = "lg" \| "md";
	21	+
	22	+// 목록이 소유하는 타입이라 그쪽에 두고 여기서 다시 내보낸다 — 호출부는 칩만 알면 된다.
	23	+export type { FoxChipItem, FoxChipSelectionMode };
	24	+
	25	+export interface FoxChipProps {
	26	+ /**
	27	+ * 아이콘의 유무와 누를 때 벌어지는 일을 정한다.
	28	+ *
	29	+ * - `check`: 켜고 끄는 조각. 켜졌을 때만 글자 앞에 체크 아이콘이 붙는다.
	30	+ * - `select`: 눌러서 목록을 여는 조각. 글자 뒤에 아래 화살표가 늘 붙고, 글자 앞
	31	+ * 아이콘은 `icon`을 넘긴 때만 나온다. 값을 고르면 켜짐으로 보인다.
	32	+ * - `action`: 아이콘 없이 켜고 끄는 조각. 상태별 모양은 `check`와 같다.
	33	+ */
	34	+ type?: FoxChipType;
	35	+ size?: FoxChipSize;
	36	+ /**
	37	+ * 조각에 보이는 글자.
	38	+ *
	39	+ * `select`·단일 선택에서는 아무것도 고르지 않았을 때의 문구다 — 값을 고르면 그 옵션의
	40	+ * 라벨이 대신 보인다(고른 것이 무엇인지가 조각 위에 남아야 필터로 쓸 수 있다).
	41	+ *
	42	+ * ⚠️ 다중 선택에서는 언제나 이 글자가 그대로 보인다. 고른 것이 여럿이라 하나를 골라
	43	+ * 보여 줄 수 없고, 개수를 붙이는 형식(`기간 2`)은 시안에 없어 임의로 만들지 않았다.
	44	+ * 켜짐(남색 채움)이 "무언가 걸려 있다"는 표시를 대신한다. 확인 필요.
	45	+ */
	46	+ label: ReactNode;
	47	+ /**
	48	+ * 보이는 글자를 대신할 읽어 줄 이름. 넘기지 않으면 글자가 그대로 이름이 된다.
	49	+ *
	50	+ * 조각 여러 개가 같은 글자를 쓰는 자리에 적어 준다 — 예를 들어 기간·지역 필터가 나란히
	51	+ * 있고 둘 다 "전체"라면, 소리로는 구분되지 않는다.
	52	+ */
	53	+ ariaLabel?: string;
	54	+ disabled?: boolean;
	55	+ /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
	56	+ hidden?: boolean;
	57	+
	58	+ // ── check·action 전용 ────────────────────────────────────────────────────────
	59	+ /** 주면 제어 컴포넌트가 된다 — 켜짐 여부를 호출부가 소유하고 조각이 스스로 바꾸지 않는다. */
	60	+ checked?: boolean;
	61	+ /** 비제어로 쓸 때의 초기 켜짐 여부. `checked`를 주면 무시된다. */
	62	+ defaultChecked?: boolean;
	63	+ /**
	64	+ * 켜지거나 꺼질 때 호출된다.
	65	+ *
	66	+ * ⚠️ 이름이 `onChange`가 아니다. 이 패키지의 기준은 "네이티브 요소를 감싸면 `onChange`,
	67	+ * 감싸는 요소가 없는 커스텀 위젯이면 `on…Change`"인데, 이 조각은 네이티브
	68	+ * `<input type="checkbox">`가 아니라 `aria-pressed`를 든 버튼이라 뒤쪽이다
	69	+ * (`FoxSelect.onValueChange`와 같은 이유).
	70	+ */
	71	+ onCheckedChange?: (checked: boolean) => void;
	72	+
	73	+ // ── select 전용 ─────────────────────────────────────────────────────────────
	74	+ /** 글자 앞에 붙는 아이콘. 넘기지 않으면 자리를 만들지 않는다. `select`에서만 쓴다. */
	75	+ icon?: ReactNode;
	76	+ /** 열었을 때 보여 줄 목록. 비어 있으면 목록을 열지 않는다. */
	77	+ options?: FoxChipItem[];
	78	+ /**
	79	+ * 하나만 고를지 여러 개를 고를지 정한다. 값 prop이 계열마다 다르다 —
	80	+ * `single`은 `value`·`defaultValue`·`onValueChange`(문자열), `multiple`은
	81	+ * `values`·`defaultValues`·`onValuesChange`(문자열 배열)를 쓴다.
	82	+ *
	83	+ * 목록 항목의 모양도 여기서 갈린다(단일은 라디오, 다중은 체크박스). 고른 뒤 닫히는
	84	+ * 규칙도 마찬가지다 — 컴포넌트 주석의 "닫히는 규칙" 참고.
	85	+ */
	86	+ selectionMode?: FoxChipSelectionMode;
	87	+ /** 단일 선택에서만 쓴다. 주면 제어 컴포넌트가 된다 — 고른 값을 호출부가 소유한다. */
	88	+ value?: string;
	89	+ /** 단일 선택에서만 쓴다. 비제어일 때의 초기 값. `value`를 주면 무시된다. */
	90	+ defaultValue?: string;
	91	+ /** 단일 선택에서만 쓴다. 값이 바뀔 때 호출된다. */
	92	+ onValueChange?: (value: string) => void;
	93	+ /** 다중 선택에서만 쓴다. 주면 제어 컴포넌트가 된다. */
	94	+ values?: string[];
	95	+ /** 다중 선택에서만 쓴다. 비제어일 때의 초기 값들. `values`를 주면 무시된다. */
	96	+ defaultValues?: string[];
	97	+ / 다중 선택에서만 쓴다. 켜고 끌 때마다 바뀐 뒤의 전체 목록*이 넘어온다. /
	98	+ onValuesChange?: (values: string[]) => void;
	99	+ /** 모바일에만 보이는 확인 버튼의 글자. */
	100	+ confirmLabel?: string;
	101	+
	102	+ id?: string;
	103	+ /** 배치 조정용. 모양이 달라야 하면 여기 말고 `type`이나 모디파이어를 추가한다. */
	104	+ className?: string;
	105	+ /** 조각(버튼)을 가리킨다 — 호출부가 포커스를 옮길 때 쓴다. */
	106	+ ref?: Ref<HTMLButtonElement>;
	107	+}
	108	+
	109	+/** `Record`로 고정해 계열을 추가하면 항목 누락이 타입 에러가 되게 한다. */
	110	+const TYPE_CLASS: Record<FoxChipType, string> = {
	111	+ check: "fox-chip--check",
	112	+ select: "fox-chip--select",
	113	+ action: "fox-chip--action",
	114	+};
	115	+
	116	+const SIZE_CLASS: Record<FoxChipSize, string> = {
	117	+ lg: "fox-chip--lg",
	118	+ md: "fox-chip--md",
	119	+};
	120	+
	121	+/**
	122	+ * @fox 칩. 알약보다 각진 작은 조각이고 켜짐 여부를 갖는다 — 이것이 `FoxTag`와의 차이다.
	123	+ * 태그는 눌러서 사라지거나 어디로 넘어가는 조각이라 상태가 남지 않고, 칩은 누른 결과가
	124	+ * 자기 자신에게 남는다.
	125	+ *
	126	+ * 켜짐은 계열에 따라 다른 것에서 온다: `check`·`action`은 눌러서 직접 켜고 끄고,
	127	+ * `select`는 값을 고르면 켜진 것으로 보인다. 어느 쪽이든 모양 규칙은 한 벌이다.
	128	+ *
	129	+ * `check`·`action`은 `aria-pressed`를 든 버튼이다 — 체크박스가 아니다. 폼으로 값을
	130	+ * 보내야 하면 호출부가 `<input type="hidden">`을 함께 놓는다(칩은 여러 개가 한 묶음으로
	131	+ * 하나의 값을 이루는 자리에 쓰여서, 이름 한 개를 칩 하나에 묶을 수 없다).
	132	+ *
	133	+ * `select`는 `FoxSelect`와 달리 콤보박스가 아니다. 열리는 `FoxChipSelectOption`이
	134	+ * listbox가 아니라 체크박스·라디오 목록이라, 칩은 그것을 여닫는 버튼(`aria-expanded`)일
	135	+ * 뿐이고 항목 이동은 네이티브 입력이 알아서 한다. `aria-activedescendant`로 가상 커서를
	136	+ * 옮기던 규칙이 여기에는 없다.
	137	+ *
	138	+ * ── 닫히는 규칙 (`select`) ───────────────────────────────────────────────────
	139	+ *
	140	+ * `selectionMode`가 정한다. 데스크톱 기준이다.
	141	+ *
	142	+ * - `single`: 하나를 고르면 그 자리에서 반영되고 목록이 닫힌다. 더 고를 것이 없으니
	143	+ * 닫지 않을 이유가 없다.
	144	+ * - `multiple`: 켜고 꺼도 목록이 열린 채로 남는다. 여러 개를 연달아 고르는 것이 목적이라
	145	+ * 하나 누를 때마다 닫히면 쓸 수 없다. 닫는 것은 바깥을 누르는 것이고(Escape·Tab으로
	146	+ * 빠져나가는 것도 같다), 그때까지의 체크는 이미 `onValuesChange`로 반영돼 있다 — 닫기가
	147	+ * 곧 확정이 아니라서 취소 개념이 없다.
	148	+ *
	149	+ * 모바일에는 목록 맨 아래에 확인 버튼이 붙는다(시안 주석 "모바일만 노출"). 그 버튼은 값을
	150	+ * 확정하는 것이 아니라 닫기만 한다 — 위와 같은 이유로 이미 반영돼 있기 때문이다.
	151	+ * 데스크톱에서는 CSS가 그 버튼을 숨긴다.
	152	+ *
	153	+ * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
	154	+ * (또는 개별 파티셜)로 한 번 불러와야 한다.
	155	+ */
	156	+export function FoxChip({
	157	+ type = "check",
	158	+ size = "lg",
	159	+ label,
	160	+ ariaLabel,
	161	+ disabled = false,
	162	+ hidden = false,
	163	+ checked,
	164	+ defaultChecked = false,
	165	+ onCheckedChange,
	166	+ icon,
	167	+ options,
	168	+ selectionMode = "single",
	169	+ value,
	170	+ defaultValue,
	171	+ onValueChange,
	172	+ values,
	173	+ defaultValues,
	174	+ onValuesChange,
	175	+ confirmLabel,
	176	+ id,
	177	+ className,
	178	+ ref,
	179	+}: FoxChipProps) {
	180	+ const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
	181	+ const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
	182	+ const [uncontrolledValues, setUncontrolledValues] = useState<string[]>(defaultValues ?? []);
	183	+ const [open, setOpen] = useState(false);
	184	+ const rootRef = useRef<HTMLDivElement>(null);
	185	+ const triggerRef = useRef<HTMLButtonElement>(null);
	186	+
	187	+ const isSelect = type === "select";
	188	+ const isMultiple = selectionMode === "multiple";
	189	+ const items = options ?? [];
	190	+
	191	+ const currentValue = value ?? uncontrolledValue;
	192	+ const currentValues = values ?? uncontrolledValues;
	193	+
	194	+ // 두 계열의 상태를 한 모양(배열)으로 모아 목록에 넘긴다 — 목록은 계열마다 다른 prop을
	195	+ // 알 필요가 없다.
	196	+ const selectedValues = isMultiple
	197	+ ? currentValues
	198	+ : currentValue
	199	+ ? [currentValue]
	200	+ : [];
	201	+
	202	+ const selectedItem = !isMultiple
	203	+ ? items.find((item) => item.value === currentValue)
	204	+ : undefined;
	205	+
	206	+ const generatedId = useId();
	207	+ const chipId = id ?? generatedId;
	208	+ const listId = `${chipId}-list`;
	209	+
	210	+ // 켜짐의 출처가 계열마다 다르다. select는 고른 값이 하나라도 있으면 켜진 것이고(다중에서도
	211	+ // 개수와 무관하게 켜짐/꺼짐 둘뿐이다), 나머지는 호출부가 준 `checked`(없으면 내부 상태)다.
	212	+ const isChecked = isSelect ? selectedValues.length > 0 : (checked ?? uncontrolledChecked);
	213	+
	214	+ useEffect(() => {
	215	+ if (!open) return;
	216	+ function handlePointerDown(event: PointerEvent) {
	217	+ if (!rootRef.current?.contains(event.target as Node)) {
	218	+ setOpen(false);
	219	+ }
	220	+ }
	221	+ // 포인터만 보면 Tab으로 빠져나갈 때 목록이 열린 채 남는다. 포커스가 아무 데도 가지
	222	+ // 않은 경우(relatedTarget이 null)는 위 pointerdown이 이미 처리한다.
	223	+ //
	224	+ // 목록 안의 체크박스·라디오로 포커스가 옮겨 가는 것은 닫기가 아니다 — 그것들도
	225	+ // `rootRef` 안이라 아래 조건에 걸리지 않는다.
	226	+ function handleFocusOut(event: FocusEvent) {
	227	+ const next = event.relatedTarget as Node \| null;
	228	+ if (next && !rootRef.current?.contains(next)) {
	229	+ setOpen(false);
	230	+ }
	231	+ }
	232	+ document.addEventListener("pointerdown", handlePointerDown);
	233	+ const root = rootRef.current;
	234	+ root?.addEventListener("focusout", handleFocusOut);
	235	+ return () => {
	236	+ document.removeEventListener("pointerdown", handlePointerDown);
	237	+ root?.removeEventListener("focusout", handleFocusOut);
	238	+ };
	239	+ }, [open]);
	240	+
	241	+ function toggle() {
	242	+ const next = !isChecked;
	243	+ if (checked === undefined) setUncontrolledChecked(next);
	244	+ onCheckedChange?.(next);
	245	+ }
	246	+
	247	+ /**
	248	+ * 항목 하나를 고른다. 닫기까지 여기서 갈린다 — 컴포넌트 주석의 "닫히는 규칙" 참고.
	249	+ *
	250	+ * 제어 컴포넌트일 때는 내부 값을 건드리지 않는다 — 건드리면 호출부가 값을 거부해도
	251	+ * 내부에만 반영되어 둘이 조용히 갈라진다.
	252	+ */
	253	+ function select(next: string) {
	254	+ if (isMultiple) {
	255	+ // 이미 켜져 있으면 끈다. 순서는 `options`가 정한 순서를 따라가게 다시 추린다 —
	256	+ // 누른 순서대로 쌓으면 같은 조합인데도 배열이 달라져 비교·저장이 흔들린다.
	257	+ const nextValues = currentValues.includes(next)
	258	+ ? currentValues.filter((item) => item !== next)
	259	+ : items
	260	+ .filter((item) => item.value === next \|\| currentValues.includes(item.value))
	261	+ .map((item) => item.value);
	262	+
	263	+ if (values === undefined) setUncontrolledValues(nextValues);
	264	+ onValuesChange?.(nextValues);
	265	+ // 목록을 닫지 않는다. 여러 개를 연달아 고르는 것이 목적이라, 하나 누를 때마다 닫히면
	266	+ // 쓸 수 없다. 닫는 것은 바깥 클릭·Escape·Tab이고 그건 위 effect와 키 처리가 맡는다.
	267	+ return;
	268	+ }
	269	+
	270	+ if (value === undefined) setUncontrolledValue(next);
	271	+ onValueChange?.(next);
	272	+ // 단일 선택은 고르는 순간 할 일이 끝나므로 닫는다.
	273	+ close();
	274	+ }
	275	+
	276	+ function close() {
	277	+ setOpen(false);
	278	+ // 목록 안에 포커스가 있었다면 갈 곳이 사라진다 — 여는 버튼으로 돌려놓는다.
	279	+ triggerRef.current?.focus();
	280	+ }
	281	+
	282	+ function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
	283	+ if (disabled \|\| !isSelect) return;
	284	+
	285	+ if (!open) {
	286	+ if (event.key === "ArrowDown") {
	287	+ event.preventDefault();
	288	+ setOpen(true);
	289	+ }
	290	+ // Enter·Space는 막지 않는다 — 네이티브 버튼의 클릭이 그대로 열어 준다.
	291	+ return;
	292	+ }
	293	+
	294	+ if (event.key === "Escape") {
	295	+ event.preventDefault();
	296	+ close();
	297	+ }
	298	+ }
	299	+
	300	+ // 훅을 전부 부른 뒤에 빠져나간다 — 위쪽에서 반환하면 훅 호출 순서가 깨진다.
	301	+ if (hidden) {
	302	+ return null;
	303	+ }
	304	+
	305	+ // 호출부 ref와 내부 ref를 함께 채운다 — 목록을 닫을 때 포커스를 돌려놓으려면 안에서도
	306	+ // 버튼을 쥐어야 한다.
	307	+ const attachTrigger = (node: HTMLButtonElement \| null) => {
	308	+ triggerRef.current = node;
	309	+ if (typeof ref === "function") {
	310	+ ref(node);
	311	+ } else if (ref) {
	312	+ (ref as { current: HTMLButtonElement \| null }).current = node;
	313	+ }
	314	+ };
	315	+
	316	+ const chip = (
	317	+ <button
	318	+ ref={isSelect ? attachTrigger : ref}
	319	+ type="button"
	320	+ id={chipId}
	321	+ disabled={disabled}
	322	+ aria-label={ariaLabel}
	323	+ // select는 목록을 여닫는 버튼이다 — listbox가 아니라 체크박스·라디오 묶음을 열므로
	324	+ // `role="combobox"`가 아니라 그냥 버튼 + `aria-expanded`다.
	325	+ aria-expanded={isSelect ? open : undefined}
	326	+ // 목록은 열렸을 때만 렌더되므로, 닫힌 동안 없는 id를 가리키지 않게 한다.
	327	+ aria-controls={isSelect && open ? listId : undefined}
	328	+ aria-pressed={isSelect ? undefined : isChecked}
	329	+ className={cx(
	330	+ "fox-chip",
	331	+ TYPE_CLASS[type],
	332	+ SIZE_CLASS[size],
	333	+ isChecked && "fox-chip--checked",
	334	+ // 목록을 감싸는 자리가 따로 있어서, select는 바깥 div가 className을 받는다.
	335	+ !isSelect && className
	336	+ )}
	337	+ onClick={isSelect ? () => setOpen((current) => !current) : toggle}
	338	+ onKeyDown={handleKeyDown}
	339	+ >
	340	+ {/* 앞 아이콘. check는 켜졌을 때만 체크를, select는 호출부가 준 것을 놓는다. */}
	341	+ {type === "check" && isChecked ? (
	342	+ <span className="fox-chip__icon" aria-hidden="true">
	343	+ <CheckMark />
	344	+ </span>
	345	+ ) : null}
	346	+ {isSelect && icon ? (
	347	+ <span className="fox-chip__icon" aria-hidden="true">
	348	+ {icon}
	349	+ </span>
	350	+ ) : null}
	351	+
	352	+ <span className="fox-chip__label">{selectedItem?.label ?? label}</span>
	353	+
	354	+ {isSelect ? (
	355	+ <span className="fox-chip__icon fox-chip__arrow" aria-hidden="true">
	356	+ <ChevronMark />
	357	+ </span>
	358	+ ) : null}
	359	+ </button>
	360	+ );
	361	+
	362	+ if (!isSelect) {
	363	+ return chip;
	364	+ }
	365	+
	366	+ // `FoxChipSelectOption`은 `position: absolute`라 위치 기준이 되는 조상이 필요하다.
	367	+ return (
	368	+ <div ref={rootRef} className={cx("fox-chip-select", className)}>
	369	+ {chip}
	370	+ {open && items.length > 0 ? (
	371	+ <FoxChipSelectOption
	372	+ id={listId}
	373	+ labelledBy={chipId}
	374	+ // 칩의 크기를 그대로 물려준다 — 크기 이름이 같고, 항목의 글자 크기도 칩과 같은
	375	+ // 값으로 떨어진다(lg 17px, md 15px).
	376	+ size={size}
	377	+ selectionMode={selectionMode}
	378	+ options={items}
	379	+ values={selectedValues}
	380	+ onSelect={select}
	381	+ confirmLabel={confirmLabel}
	382	+ onConfirm={close}
	383	+ />
	384	+ ) : null}
	385	+ </div>
	386	+ );
	387	+}
	388	+
	389	+// 시안 아이콘 둘. `fill`을 시안의 리터럴(흰색·#6D7882) 대신 `currentColor`로 두면 색을
	390	+// 상태 규칙이 정한다 — 남색 배경 위에서 흰색으로, 비활성에서 흐린 회색으로 따라간다.
	391	+// `width`·`height`를 쓰지 않는다 — 크기는 슬롯이 정하고 SVG는 100%로 따라온다.
	392	+
	393	+// check 계열의 체크 표시.
	394	+function CheckMark() {
	395	+ return (
	396	+ <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
	397	+ <path
	398	+ d="M14.5306 5.03057L6.5306 13.0306C6.46092 13.1005 6.37813 13.156 6.28696 13.1938C6.1958 13.2317 6.09806 13.2512 5.99935 13.2512C5.90064 13.2512 5.8029 13.2317 5.71173 13.1938C5.62057 13.156 5.53778 13.1005 5.4681 13.0306L1.9681 9.53057C1.89833 9.4608 1.84299 9.37798 1.80524 9.28683C1.76748 9.19568 1.74805 9.09798 1.74805 8.99932C1.74805 8.90066 1.76748 8.80296 1.80524 8.71181C1.84299 8.62066 1.89833 8.53783 1.9681 8.46807C2.03786 8.3983 2.12069 8.34296 2.21184 8.30521C2.30299 8.26745 2.40069 8.24802 2.49935 8.24802C2.59801 8.24802 2.69571 8.26745 2.78686 8.30521C2.87801 8.34296 2.96083 8.3983 3.0306 8.46807L5.99997 11.4374L13.4693 3.96932C13.6102 3.82842 13.8013 3.74927 14.0006 3.74927C14.1999 3.74927 14.391 3.82842 14.5318 3.96932C14.6727 4.11021 14.7519 4.30131 14.7519 4.50057C14.7519 4.69983 14.6727 4.89092 14.5318 5.03182L14.5306 5.03057Z"
	399	+ fill="currentColor"
	400	+ />
	401	+ </svg>
	402	+ );
	403	+}
	404	+
	405	+// select 계열의 아래 화살표.
	406	+function ChevronMark() {
	407	+ return (
	408	+ <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
	409	+ <path
	410	+ d="M13.5306 6.53061L8.5306 11.5306C8.46092 11.6005 8.37813 11.656 8.28696 11.6939C8.1958 11.7317 8.09806 11.7512 7.99935 11.7512C7.90064 11.7512 7.8029 11.7317 7.71173 11.6939C7.62057 11.656 7.53778 11.6005 7.4681 11.5306L2.4681 6.53061C2.3272 6.38972 2.24805 6.19862 2.24805 5.99936C2.24805 5.80011 2.3272 5.60901 2.4681 5.46811C2.60899 5.32722 2.80009 5.24806 2.99935 5.24806C3.19861 5.24806 3.3897 5.32722 3.5306 5.46811L7.99997 9.93749L12.4693 5.46749C12.6102 5.32659 12.8013 5.24744 13.0006 5.24744C13.1999 5.24744 13.391 5.32659 13.5318 5.46749C13.6727 5.60838 13.7519 5.79948 13.7519 5.99874C13.7519 6.198 13.6727 6.38909 13.5318 6.52999L13.5306 6.53061Z"
	411	+ fill="currentColor"
	412	+ />
	413	+ </svg>
	414	+ );
	415	+}

0f6c0e7

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

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

...	...	@@ -0,0 +1,7 @@
	1	+export {
	2	+ FoxChip,
	3	+ type FoxChipItem,
	4	+ type FoxChipProps,
	5	+ type FoxChipSize,
	6	+ type FoxChipType,
	7	+} from "./fox-chip";

0f6c0e7

@fox/core/components/fox-segmented-control-item/fox-segmented-control-item.tsx (added)

+++ @fox/core/components/fox-segmented-control-item/fox-segmented-control-item.tsx

...	...	@@ -0,0 +1,92 @@
	1	+"use client";
	2	+
	3	+import { type ChangeEvent, type ComponentPropsWithRef, type ReactNode } from "react";
	4	+import { cx } from "../../utils";
	5	+
	6	+export type FoxSegmentedControlItemSize = "lg" \| "md" \| "sm" \| "xsm";
	7	+
	8	+/**
	9	+ * 네이티브 `<input type="radio">`가 받는 것을 그대로 넘겨받는다 — name·value·checked·
	10	+ * defaultChecked·disabled·required·form 등. 의미가 겹치는 것만 걷어내고 아래에서 다시 정의한다.
	11	+ */
	12	+type NativeRadioProps = Omit<
	13	+ ComponentPropsWithRef<"input">,
	14	+ "type" \| "size" \| "className" \| "children" \| "hidden" \| "onChange"
	15	+>;
	16	+
	17	+export interface FoxSegmentedControlItemProps extends NativeRadioProps {
	18	+ size?: FoxSegmentedControlItemSize;
	19	+ label: ReactNode;
	20	+ /** 글자 앞에 붙는 아이콘. 넘기지 않으면 자리를 만들지 않는다. */
	21	+ icon?: ReactNode;
	22	+ /**
	23	+ * 이 칸이 선택될 때 부른다. 값이 첫 인자다 — 네이티브 `onChange`를 `Omit`으로 걷어내고
	24	+ * 그 자리를 대신한다(`FoxRadio`와 같은 방식).
	25	+ */
	26	+ onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
	27	+ /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
	28	+ hidden?: boolean;
	29	+ /** 배치 조정용. 모양이 달라야 하면 여기 말고 모디파이어를 추가한다. */
	30	+ className?: string;
	31	+}
	32	+
	33	+/** `Record`로 고정해 크기를 추가하면 항목 누락이 타입 에러가 되게 한다. */
	34	+const SIZE_CLASS: Record<FoxSegmentedControlItemSize, string> = {
	35	+ lg: "fox-segmented-control-item--lg",
	36	+ md: "fox-segmented-control-item--md",
	37	+ sm: "fox-segmented-control-item--sm",
	38	+ xsm: "fox-segmented-control-item--xsm",
	39	+};
	40	+
	41	+/**
	42	+ * @fox 세그먼티드 컨트롤의 칸 하나. 상태를 갖지 않는다 — 켜짐 여부는 네이티브
	43	+ * `<input type="radio">`가 소유한다.
	44	+ *
	45	+ * `name`이 같은 칸끼리는 브라우저가 그룹으로 묶어 단일 선택·화살표 이동·폼 전송을 처리한다.
	46	+ * `FoxSegmentedControl`이 하는 일은 그 `name`을 통일하고 테두리로 감싸는 것뿐이다.
	47	+ *
	48	+ * 루트가 `<label>`이라 글자나 아이콘 어디를 눌러도 선택된다. 배경·글자색은 CSS가 input의
	49	+ * `:checked`·`:disabled`를 보고 그리므로, 비제어로 써도 모양이 어긋나지 않는다.
	50	+ *
	51	+ * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
	52	+ * (또는 개별 파티셜)로 한 번 불러와야 한다.
	53	+ */
	54	+export function FoxSegmentedControlItem({
	55	+ size = "lg",
	56	+ label,
	57	+ icon,
	58	+ onChange,
	59	+ hidden = false,
	60	+ className,
	61	+ ...rest
	62	+}: FoxSegmentedControlItemProps) {
	63	+ if (hidden) {
	64	+ return null;
	65	+ }
	66	+
	67	+ // 라디오는 켜질 때만 change가 뛴다(꺼질 때는 안 뛴다). 그래도 명시적으로 걸러 두면
	68	+ // 브라우저가 달라져도 "선택될 때"라는 계약이 흔들리지 않는다(`FoxRadio`와 같은 근거).
	69	+ const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
	70	+ if (event.target.checked) {
	71	+ onChange?.(event.target.value, event);
	72	+ }
	73	+ };
	74	+
	75	+ return (
	76	+ <label className={cx("fox-segmented-control-item", SIZE_CLASS[size], className)}>
	77	+ {/* `:has()`가 찾을 대상이고 형제 선택자의 기준이기도 하므로 맨 앞에 둔다. */}
	78	+ <input
	79	+ {...rest}
	80	+ type="radio"
	81	+ className="fox-segmented-control-item__input"
	82	+ onChange={handleChange}
	83	+ />
	84	+ {icon ? (
	85	+ <span className="fox-segmented-control-item__icon" aria-hidden="true">
	86	+ {icon}
	87	+ </span>
	88	+ ) : null}
	89	+ <span className="fox-segmented-control-item__label">{label}</span>
	90	+ </label>
	91	+ );
	92	+}

0f6c0e7

@fox/core/components/fox-segmented-control-item/index.ts (added)

+++ @fox/core/components/fox-segmented-control-item/index.ts

...	...	@@ -0,0 +1,5 @@
	1	+export {
	2	+ FoxSegmentedControlItem,
	3	+ type FoxSegmentedControlItemProps,
	4	+ type FoxSegmentedControlItemSize,
	5	+} from "./fox-segmented-control-item";

0f6c0e7

@fox/core/components/fox-segmented-control/fox-segmented-control.tsx (added)

+++ @fox/core/components/fox-segmented-control/fox-segmented-control.tsx

...	...	@@ -0,0 +1,112 @@
	1	+"use client";
	2	+
	3	+import {
	4	+ Children,
	5	+ Fragment,
	6	+ cloneElement,
	7	+ isValidElement,
	8	+ type ReactElement,
	9	+ type ReactNode,
	10	+ type Ref,
	11	+} from "react";
	12	+import { cx } from "../../utils";
	13	+import type { FoxSegmentedControlItemSize } from "../fox-segmented-control-item";
	14	+
	15	+export type FoxSegmentedControlSize = FoxSegmentedControlItemSize;
	16	+
	17	+export interface FoxSegmentedControlProps {
	18	+ /** 자식 칸의 `size`를 전부 이 값으로 덮어쓴다. 묶음의 모서리 크기도 이 값이 정한다. */
	19	+ size?: FoxSegmentedControlSize;
	20	+ /**
	21	+ * 자식 칸의 `name`을 전부 이 값으로 덮어쓴다. 묶음 안에서 `name`이 어긋나면 브라우저가
	22	+ * 다른 묶음으로 보고 여러 칸이 동시에 켜지므로, 묶음이 단일 진실 공급원이다.
	23	+ */
	24	+ name?: string;
	25	+ /** 묶음을 읽어 줄 이름. 화면에 보이는 제목이 이미 있으면 `labelledBy`를 쓴다. */
	26	+ label?: string;
	27	+ /** 묶음 이름 역할을 하는 요소의 id. `label`보다 우선한다 — 화면의 글자와 어긋나지 않는다. */
	28	+ labelledBy?: string;
	29	+ /** `FoxSegmentedControlItem`들. */
	30	+ children?: ReactNode;
	31	+ /** 배치 조정용. */
	32	+ className?: string;
	33	+ ref?: Ref<HTMLDivElement>;
	34	+}
	35	+
	36	+const SIZE_CLASS: Record<FoxSegmentedControlSize, string> = {
	37	+ lg: "fox-segmented-control--lg",
	38	+ md: "fox-segmented-control--md",
	39	+ sm: "fox-segmented-control--sm",
	40	+ xsm: "fox-segmented-control--xsm",
	41	+};
	42	+
	43	+type Overrides = { name?: string; size?: FoxSegmentedControlSize };
	44	+
	45	+/**
	46	+ * 자식 칸에 묶음 값을 강제로 덮어쓴다.
	47	+ *
	48	+ * - 호스트 요소(`div` 등)는 건드리지 않는다 — DOM에 없는 속성이 넘어가면 React가 경고한다.
	49	+ * - `Children.map`은 프래그먼트 안으로 들어가지 않아 직접 내려간다. 그러지 않으면
	50	+ * `<>…</>`로 감싼 칸들이 덮어쓰기를 피해 가고 Fragment에 `name`이 붙어 경고가 난다.
	51	+ *
	52	+ * `FoxRadioGroup`의 같은 함수와 규칙이 같다.
	53	+ */
	54	+function overrideChildren(children: ReactNode, overrides: Overrides): ReactNode {
	55	+ return Children.map(children, (child) => {
	56	+ if (!isValidElement(child)) {
	57	+ return child;
	58	+ }
	59	+
	60	+ if (child.type === Fragment) {
	61	+ const fragment = child as ReactElement<{ children?: ReactNode }>;
	62	+ return overrideChildren(fragment.props.children, overrides);
	63	+ }
	64	+
	65	+ if (typeof child.type === "string") {
	66	+ return child;
	67	+ }
	68	+
	69	+ return cloneElement(child as ReactElement<Record<string, unknown>>, overrides);
	70	+ });
	71	+}
	72	+
	73	+/**
	74	+ * @fox 세그먼티드 컨트롤. 칸들을 테두리 하나로 감싸고 `name`·`size`를 통일한다. 상태를
	75	+ * 갖지 않는다 — 어느 칸이 켜졌는지는 각 칸의 네이티브 `<input type="radio">`가 소유한다.
	76	+ *
	77	+ * `size`는 두 곳에 쓰인다: 묶음의 모서리 크기(`form-radius-*`)와 자식 칸의 크기다. 둘이
	78	+ * 어긋나면 칸 배경이 둥근 모서리와 맞지 않으므로 값을 하나로 묶어 둔다.
	79	+ *
	80	+ * 방향 수식어가 없다 — 칸들은 가로로 붙어 늘어서는 것이 유일한 배치다.
	81	+ *
	82	+ * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
	83	+ * (또는 개별 파티셜)로 한 번 불러와야 한다.
	84	+ */
	85	+export function FoxSegmentedControl({
	86	+ size = "lg",
	87	+ name,
	88	+ label,
	89	+ labelledBy,
	90	+ children,
	91	+ className,
	92	+ ref,
	93	+}: FoxSegmentedControlProps) {
	94	+ // 크기는 묶음이 언제나 정한다 — 모서리와 칸 높이가 갈라지면 안 된다. `name`은 값을 준
	95	+ // 때만 넣는다(`undefined`를 그대로 넘기면 자식이 스스로 정한 값을 지운다).
	96	+ const overrides: Overrides = { size };
	97	+ if (name !== undefined) {
	98	+ overrides.name = name;
	99	+ }
	100	+
	101	+ return (
	102	+ <div
	103	+ ref={ref}
	104	+ role="radiogroup"
	105	+ aria-label={labelledBy ? undefined : label}
	106	+ aria-labelledby={labelledBy}
	107	+ className={cx("fox-segmented-control", SIZE_CLASS[size], className)}
	108	+ >
	109	+ {overrideChildren(children, overrides)}
	110	+ </div>
	111	+ );
	112	+}

0f6c0e7

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

+++ @fox/core/components/fox-segmented-control/index.ts

...	...	@@ -0,0 +1,5 @@
	1	+export {
	2	+ FoxSegmentedControl,
	3	+ type FoxSegmentedControlProps,
	4	+ type FoxSegmentedControlSize,
	5	+} from "./fox-segmented-control";

e67a86e

0f6c0e7

@fox/core/components/fox-select-option/fox-select-option.tsx

--- @fox/core/components/fox-select-option/fox-select-option.tsx

+++ @fox/core/components/fox-select-option/fox-select-option.tsx

...	...	@@ -8,6 +8,14 @@
8	8	id?: string;
9	9	/** 목록에 이름을 주는 요소의 id — 보통 셀렉트의 라벨이다. */
10	10	labelledBy?: string;
	11	+ /**
	12	+ * 여러 항목을 동시에 고를 수 있는 목록(`aria-multiselectable`).
	13	+ *
	14	+ * 모양은 달라지지 않는다 — 고른 항목 표시는 항목이 각자 `aria-selected`로 하고, 이 속성은
	15	+ * "몇 개까지 고를 수 있는지"를 보조기술에 알리는 것뿐이다. 이게 없으면 여러 개가 켜져
	16	+ * 있어도 하나만 고르는 목록으로 읽혀, 두 번째를 고르면 첫 번째가 꺼진 줄 안다.
	17	+ */
	18	+ multiselectable?: boolean;
11	19	/** `FoxSelectOptionItem`들. */
12	20	children?: ReactNode;
13	21	/** 배치 조정용. 모양이 달라야 하면 여기 말고 모디파이어를 추가한다. */
...	...	@@ -32,6 +40,7 @@
32	40	export function FoxSelectOption({
33	41	id,
34	42	labelledBy,
	43	+ multiselectable = false,
35	44	children,
36	45	className,
37	46	ref,
...	...	@@ -42,6 +51,9 @@
42	51	id={id}
43	52	role="listbox"
44	53	aria-labelledby={labelledBy}
	54	+ // 기본값(하나만 고르는 목록)일 때는 속성을 아예 붙이지 않는다 — `false`를 적어 두는
	55	+ // 것과 결과는 같지만, 없는 쪽이 DOM에서 읽기 쉽다.
	56	+ aria-multiselectable={multiselectable \|\| undefined}
45	57	className={cx("fox-select-option", className)}
46	58	onMouseDown={(event) => event.preventDefault()}
47	59	>

0f6c0e7

@fox/core/components/fox-select-text/fox-select-text.tsx (added)

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

...	...	@@ -0,0 +1,264 @@
	1	+"use client";
	2	+
	3	+import {
	4	+ useEffect,
	5	+ useId,
	6	+ useRef,
	7	+ useState,
	8	+ type KeyboardEvent,
	9	+ type ReactNode,
	10	+ type Ref,
	11	+} from "react";
	12	+import { cx } from "../../utils";
	13	+import type { FoxSelectItem } from "../fox-select";
	14	+import { FoxSelectOption } from "../fox-select-option";
	15	+import { FoxSelectOptionItem } from "../fox-select-option-item";
	16	+
	17	+export type FoxSelectTextSize = "lg" \| "md" \| "sm";
	18	+
	19	+export interface FoxSelectTextProps {
	20	+ size: FoxSelectTextSize;
	21	+ /** `FoxSelect`와 같은 데이터 모양이다 — 열리는 목록이 같은 조각이므로 타입도 같이 쓴다. */
	22	+ options: FoxSelectItem[];
	23	+ /** 주면 제어 컴포넌트가 된다 — 호출부가 소유하고, 이 요소가 스스로 바꾸지 않는다. */
	24	+ value?: string;
	25	+ /** 비제어로 쓸 때의 초기 값. `value`를 주면 무시된다. */
	26	+ defaultValue?: string;
	27	+ /** 값이 바뀔 때 호출된다(`FoxSelect.onValueChange`와 같은 이름·같은 근거). */
	28	+ onValueChange?: (value: string) => void;
	29	+ /** 아무 옵션도 선택되지 않았을 때 보여줄 문구. */
	30	+ placeholder?: ReactNode;
	31	+ disabled?: boolean;
	32	+ /**
	33	+ * 글자를 대신할 읽어 줄 이름.
	34	+ *
	35	+ * 폼 라벨이 없는 컴포넌트라 보이는 글자가 곧 이름이다. 그런데 그 글자가 고른 값
	36	+ * ("2026년 8월")이라 무엇을 고르는 자리인지는 소리로 전달되지 않는다 — `"조회 기간"`처럼
	37	+ * 적어 준다.
	38	+ */
	39	+ ariaLabel?: string;
	40	+ /** 이름 역할을 하는 요소의 id. `ariaLabel`보다 우선한다. */
	41	+ labelledBy?: string;
	42	+ id?: string;
	43	+ /** 배치 조정용. 모양이 달라야 하면 여기 말고 모디파이어를 추가한다. */
	44	+ className?: string;
	45	+ /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
	46	+ hidden?: boolean;
	47	+ /** 트리거를 가리킨다 — 호출부가 포커스를 옮길 때 쓴다. */
	48	+ ref?: Ref<HTMLButtonElement>;
	49	+}
	50	+
	51	+const SIZE_CLASS: Record<FoxSelectTextSize, string> = {
	52	+ lg: "fox-select-text--lg",
	53	+ md: "fox-select-text--md",
	54	+ sm: "fox-select-text--sm",
	55	+};
	56	+
	57	+/**
	58	+ * @fox 글자만 있는 셀렉트. 테두리도 고정 높이도 없고, 고른 값이 그대로 글자로 보인다.
	59	+ *
	60	+ * `FoxSelect`와 같은 콤보박스지만 폼 한 칸이 아니다 — 라벨·힌트·에러·필수 표시가 없고,
	61	+ * lg는 글자가 heading/md(제목용 20px bold)다. 화면의 제목이나 목록 위 정렬 기준처럼 "지금
	62	+ * 무엇을 보고 있는지"를 글자로 보여 주면서 그 자리에서 바꾸게 하는 자리에 쓴다
	63	+ * (예: `2026년 8월 ∨`, `최신순 ∨`). 값을 입력받아 서버로 보내는 자리라면 `FoxSelect`다.
	64	+ *
	65	+ * 열리는 목록은 `FoxSelect`와 같은 `FoxSelectOption`·`FoxSelectOptionItem`을 쓴다 — 트리거
	66	+ * 모양만 다르고 목록은 같아야 한다.
	67	+ *
	68	+ * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
	69	+ * (또는 개별 파티셜)로 한 번 불러와야 한다.
	70	+ */
	71	+export function FoxSelectText({
	72	+ size,
	73	+ options,
	74	+ value,
	75	+ defaultValue,
	76	+ onValueChange,
	77	+ placeholder = "선택해주세요",
	78	+ disabled = false,
	79	+ ariaLabel,
	80	+ labelledBy,
	81	+ id,
	82	+ className,
	83	+ hidden = false,
	84	+ ref,
	85	+}: FoxSelectTextProps) {
	86	+ const [open, setOpen] = useState(false);
	87	+ const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
	88	+ const [activeIndex, setActiveIndex] = useState(-1);
	89	+ const rootRef = useRef<HTMLDivElement>(null);
	90	+
	91	+ const currentValue = value ?? uncontrolledValue;
	92	+ const selectedIndex = options.findIndex((option) => option.value === currentValue);
	93	+ const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : undefined;
	94	+
	95	+ const generatedId = useId();
	96	+ const triggerId = id ?? generatedId;
	97	+ const listboxId = `${triggerId}-listbox`;
	98	+ // 값이 아니라 순번으로 만든다 — 옵션 값에 공백·특수문자가 들어와도 id가 깨지지 않는다.
	99	+ const optionId = (index: number) => `${triggerId}-opt-${index}`;
	100	+
	101	+ useEffect(() => {
	102	+ if (!open) return;
	103	+ function handlePointerDown(event: PointerEvent) {
	104	+ if (!rootRef.current?.contains(event.target as Node)) {
	105	+ setOpen(false);
	106	+ }
	107	+ }
	108	+ // 포인터만 보면 Tab으로 빠져나갈 때 목록이 열린 채 남는다. 포커스가 아무 데도 가지
	109	+ // 않은 경우(relatedTarget이 null)는 위 pointerdown이 이미 처리한다 — 여기서 닫으면
	110	+ // 옵션을 누르는 순간에도 닫혀 클릭이 성사되지 않는다(`FoxSelect`와 같은 근거).
	111	+ function handleFocusOut(event: FocusEvent) {
	112	+ const next = event.relatedTarget as Node \| null;
	113	+ if (next && !rootRef.current?.contains(next)) {
	114	+ setOpen(false);
	115	+ }
	116	+ }
	117	+ document.addEventListener("pointerdown", handlePointerDown);
	118	+ const root = rootRef.current;
	119	+ root?.addEventListener("focusout", handleFocusOut);
	120	+ return () => {
	121	+ document.removeEventListener("pointerdown", handlePointerDown);
	122	+ root?.removeEventListener("focusout", handleFocusOut);
	123	+ };
	124	+ }, [open]);
	125	+
	126	+ function openList() {
	127	+ setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
	128	+ setOpen(true);
	129	+ }
	130	+
	131	+ function commit(next: string) {
	132	+ // 제어 컴포넌트일 때는 내부 값을 건드리지 않는다 — 건드리면 호출부가 값을 거부해도
	133	+ // 내부에만 반영되어 둘이 조용히 갈라진다.
	134	+ if (value === undefined) setUncontrolledValue(next);
	135	+ onValueChange?.(next);
	136	+ setOpen(false);
	137	+ }
	138	+
	139	+ function moveActive(delta: number) {
	140	+ setActiveIndex((current) => {
	141	+ const count = options.length;
	142	+ if (count === 0) return current;
	143	+ return (current + delta + count) % count;
	144	+ });
	145	+ }
	146	+
	147	+ function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
	148	+ if (disabled) return;
	149	+
	150	+ if (!open) {
	151	+ if (event.key === "ArrowDown" \|\| event.key === "ArrowUp") {
	152	+ event.preventDefault();
	153	+ openList();
	154	+ }
	155	+ // Enter·Space는 막지 않는다 — 네이티브 버튼의 클릭이 그대로 열어 준다.
	156	+ return;
	157	+ }
	158	+
	159	+ switch (event.key) {
	160	+ case "ArrowDown":
	161	+ event.preventDefault();
	162	+ moveActive(1);
	163	+ break;
	164	+ case "ArrowUp":
	165	+ event.preventDefault();
	166	+ moveActive(-1);
	167	+ break;
	168	+ case "Home":
	169	+ event.preventDefault();
	170	+ setActiveIndex(0);
	171	+ break;
	172	+ case "End":
	173	+ event.preventDefault();
	174	+ setActiveIndex(options.length - 1);
	175	+ break;
	176	+ case "Enter":
	177	+ case " ":
	178	+ event.preventDefault();
	179	+ if (activeIndex >= 0) {
	180	+ commit(options[activeIndex].value);
	181	+ }
	182	+ break;
	183	+ case "Escape":
	184	+ event.preventDefault();
	185	+ setOpen(false);
	186	+ break;
	187	+ default:
	188	+ break;
	189	+ }
	190	+ }
	191	+
	192	+ // 훅을 전부 부른 뒤에 빠져나간다 — 위쪽에서 반환하면 훅 호출 순서가 깨진다.
	193	+ if (hidden) {
	194	+ return null;
	195	+ }
	196	+
	197	+ return (
	198	+ // `FoxSelectOption`은 `position: absolute`라 위치 기준이 되는 조상이 필요하다
	199	+ // (`fox-select__control`과 같은 역할).
	200	+ <div ref={rootRef} className={cx("fox-select-text", SIZE_CLASS[size], className)}>
	201	+ <button
	202	+ ref={ref}
	203	+ type="button"
	204	+ id={triggerId}
	205	+ role="combobox"
	206	+ disabled={disabled}
	207	+ aria-haspopup="listbox"
	208	+ aria-expanded={open}
	209	+ // 목록은 열렸을 때만 렌더되므로, 닫힌 동안 없는 id를 가리키지 않게 한다.
	210	+ aria-controls={open ? listboxId : undefined}
	211	+ // 화살표로 옮겨 다니는 옵션을 보조기술에 알린다. 이게 없으면 `--active` 강조가
	212	+ // 시각 전용이라 스크린리더 사용자는 이동을 알 수 없다.
	213	+ aria-activedescendant={open && activeIndex >= 0 ? optionId(activeIndex) : undefined}
	214	+ aria-label={labelledBy ? undefined : ariaLabel}
	215	+ aria-labelledby={labelledBy}
	216	+ className="fox-select-text__trigger"
	217	+ onClick={() => (open ? setOpen(false) : openList())}
	218	+ onKeyDown={handleKeyDown}
	219	+ >
	220	+ <span className="fox-select-text__value">{selectedOption?.label ?? placeholder}</span>
	221	+ <span className="fox-select-text__icon" aria-hidden="true">
	222	+ <ChevronMark />
	223	+ </span>
	224	+ </button>
	225	+
	226	+ {open ? (
	227	+ <FoxSelectOption
	228	+ id={listboxId}
	229	+ labelledBy={labelledBy}
	230	+ className="fox-select-text__list"
	231	+ >
	232	+ {options.map((option, index) => (
	233	+ <FoxSelectOptionItem
	234	+ key={option.value}
	235	+ id={optionId(index)}
	236	+ label={option.label}
	237	+ icon={option.icon}
	238	+ danger={option.danger}
	239	+ selected={option.value === currentValue}
	240	+ active={index === activeIndex}
	241	+ onHover={() => setActiveIndex(index)}
	242	+ onSelect={() => commit(option.value)}
	243	+ />
	244	+ ))}
	245	+ </FoxSelectOption>
	246	+ ) : null}
	247	+ </div>
	248	+ );
	249	+}
	250	+
	251	+// 시안 아이콘. `FoxChip`의 것과 같은 글리프다 — 이 패키지는 컴포넌트마다 자기 글리프를
	252	+// 안에 두고(`FoxTag`·`FoxSelect`도 그렇다), 아이콘 모듈을 따로 만들지 않는다.
	253	+// `fill`은 시안의 리터럴 대신 `currentColor`로 두어 색을 크기 규칙이 정하게 한다.
	254	+// `width`·`height`를 쓰지 않는다 — 크기는 슬롯이 정하고 SVG는 100%로 따라온다.
	255	+function ChevronMark() {
	256	+ return (
	257	+ <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
	258	+ <path
	259	+ d="M13.5306 6.53061L8.5306 11.5306C8.46092 11.6005 8.37813 11.656 8.28696 11.6939C8.1958 11.7317 8.09806 11.7512 7.99935 11.7512C7.90064 11.7512 7.8029 11.7317 7.71173 11.6939C7.62057 11.656 7.53778 11.6005 7.4681 11.5306L2.4681 6.53061C2.3272 6.38972 2.24805 6.19862 2.24805 5.99936C2.24805 5.80011 2.3272 5.60901 2.4681 5.46811C2.60899 5.32722 2.80009 5.24806 2.99935 5.24806C3.19861 5.24806 3.3897 5.32722 3.5306 5.46811L7.99997 9.93749L12.4693 5.46749C12.6102 5.32659 12.8013 5.24744 13.0006 5.24744C13.1999 5.24744 13.391 5.32659 13.5318 5.46749C13.6727 5.60838 13.7519 5.79948 13.7519 5.99874C13.7519 6.198 13.6727 6.38909 13.5318 6.52999L13.5306 6.53061Z"
	260	+ fill="currentColor"
	261	+ />
	262	+ </svg>
	263	+ );
	264	+}

0f6c0e7

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

+++ @fox/core/components/fox-select-text/index.ts

...	...	@@ -0,0 +1,5 @@
	1	+export {
	2	+ FoxSelectText,
	3	+ type FoxSelectTextProps,
	4	+ type FoxSelectTextSize,
	5	+} from "./fox-select-text";

e67a86e

0f6c0e7

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

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

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


 "use client";
 
 import {
+  Fragment,
   useEffect,
   useId,
   useRef,

 import { FoxSelectOptionItem } from "../fox-select-option-item";
 
 export type FoxSelectSize = "sm" | "md" | "lg";
+export type FoxSelectSelectionMode = "single" | "multiple";
 
 /** 옵션 하나의 데이터. 그리는 일은 `FoxSelectOptionItem`이 한다. */
 export interface FoxSelectItem {

 export interface FoxSelectProps {
   size: FoxSelectSize;
   options: FoxSelectItem[];
-  /** 주면 제어 컴포넌트가 된다 — 호출부가 소유하고, select가 스스로 바꾸지 않는다. */
+  /**
+   * 하나만 고를지 여러 개를 고를지 정한다. 값 prop이 계열마다 다르다 —
+   * `single`은 `value`·`defaultValue`·`onValueChange`(문자열), `multiple`은
+   * `values`·`defaultValues`·`onValuesChange`(문자열 배열)를 쓴다.
+   *
+   * `multiple`이면 트리거에 고른 옵션의 라벨이 **쉼표로 이어져** 보이고, 하나를 골라도
+   * 목록이 닫히지 않는다 — 여러 개를 연달아 고르는 것이 목적이라 누를 때마다 닫히면 쓸 수
+   * 없다. 닫는 것은 바깥 클릭·Escape·Tab이다(`FoxChip`의 select와 같은 규칙).
+   */
+  selectionMode?: FoxSelectSelectionMode;
+  /** 단일 선택에서만 쓴다. 주면 제어 컴포넌트가 된다 — 호출부가 소유하고, select가 스스로 바꾸지 않는다. */
   value?: string;
   /**
    * 비제어로 쓸 때의 초기 값. `value`를 주면 무시된다.

    * 게다가 `FoxEmail`·`FoxPhoneNumber`가 이 이름으로 호출하고 있어 바꾸면 함께 깨진다.
    */
   onValueChange?: (value: string) => void;
+  /** 다중 선택에서만 쓴다. 주면 제어 컴포넌트가 된다. */
+  values?: string[];
+  /** 다중 선택에서만 쓴다. 비제어일 때의 초기 값들. `values`를 주면 무시된다. */
+  defaultValues?: string[];
+  /** 다중 선택에서만 쓴다. 켜고 끌 때마다 **바뀐 뒤의 전체 목록**이 넘어온다. */
+  onValuesChange?: (values: string[]) => void;
   /** 아무 옵션도 선택되지 않았을 때 트리거에 보여줄 문구. */
   placeholder?: ReactNode;
   /** Figma 시안의 error 상태. */

 export function FoxSelect({
   size,
   options,
+  selectionMode = "single",
   value,
   defaultValue,
   onValueChange,
+  values,
+  defaultValues,
+  onValuesChange,
   placeholder = "선택해주세요",
   error,
   disabled = false,

   ref,
 }: FoxSelectProps) {
   const isDisabled = disabled || readOnly;
+  const isMultiple = selectionMode === "multiple";
   const [open, setOpen] = useState(false);
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+  const [uncontrolledValues, setUncontrolledValues] = useState<string[]>(defaultValues ?? []);
   const [activeIndex, setActiveIndex] = useState(-1);
   const rootRef = useRef<HTMLDivElement>(null);
 
   const currentValue = value ?? uncontrolledValue;
-  const selectedIndex = options.findIndex((option) => option.value === currentValue);
-  const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : undefined;
+  const currentValues = values ?? uncontrolledValues;
+
+  const isSelected = (optionValue: string) =>
+    isMultiple ? currentValues.includes(optionValue) : optionValue === currentValue;
+
+  // 화살표가 어디서 시작할지 정한다. 다중 선택에서는 켜진 것 중 첫 번째다.
+  const selectedIndex = options.findIndex((option) => isSelected(option.value));
+  const selectedOptions = options.filter((option) => isSelected(option.value));
+
+  // 트리거에 보이는 것. 다중이면 고른 라벨을 쉼표로 잇는다 — 라벨이 ReactNode일 수 있어
+  // `join`을 쓰지 못하므로 사이에 구분자를 끼워 넣는다.
+  const displayValue =
+    selectedOptions.length === 0 ? (
+      placeholder
+    ) : isMultiple ? (
+      selectedOptions.map((option, index) => (
+        <Fragment key={option.value}>
+          {index > 0 ? ", " : null}
+          {option.label}
+        </Fragment>
+      ))
+    ) : (
+      selectedOptions[0].label
+    );
 
   const generatedId = useId();
   const triggerId = id ?? generatedId;

     setOpen(true);
   }
 
+  /**
+   * 제어 컴포넌트일 때는 내부 값을 건드리지 않는다 — 건드리면 호출부가 값을 거부해도
+   * 내부에만 반영되어 둘이 조용히 갈라진다.
+   */
   function commit(next: string) {
-    // 제어 컴포넌트일 때는 내부 값을 건드리지 않는다 — 건드리면 호출부가 값을 거부해도
-    // 내부에만 반영되어 둘이 조용히 갈라진다.
+    if (isMultiple) {
+      // 이미 켜져 있으면 끈다. 순서는 `options`가 정한 순서를 따라가게 다시 추린다 —
+      // 누른 순서대로 쌓으면 같은 조합인데도 배열이 달라져 비교·저장이 흔들리고, 트리거에
+      // 이어 붙는 글자 순서도 목록과 어긋난다.
+      const nextValues = currentValues.includes(next)
+        ? currentValues.filter((item) => item !== next)
+        : options
+            .filter((option) => option.value === next || currentValues.includes(option.value))
+            .map((option) => option.value);
+
+      if (values === undefined) setUncontrolledValues(nextValues);
+      onValuesChange?.(nextValues);
+      // 목록을 닫지 않는다 — 여러 개를 연달아 고르는 것이 목적이다.
+      return;
+    }
+
     if (value === undefined) setUncontrolledValue(next);
     onValueChange?.(next);
     setOpen(false);

           aria-readonly={readOnly || undefined}
           className={cx(
             "fox-select__trigger",
-            selectedOption && "fox-select__trigger--completed"
+            selectedOptions.length > 0 && "fox-select__trigger--completed"
           )}
           onClick={() => (open ? setOpen(false) : openList())}
           onKeyDown={handleTriggerKeyDown}
         >
-          <span className="fox-select__value">{selectedOption?.label ?? placeholder}</span>
+          <span className="fox-select__value">{displayValue}</span>
           <ChevronIcon className="fox-select__icon" />
         </button>
 
         {open ? (
-          <FoxSelectOption id={listboxId} labelledBy={label ? labelId : undefined}>
+          <FoxSelectOption
+            id={listboxId}
+            labelledBy={label ? labelId : undefined}
+            multiselectable={isMultiple}
+          >
             {options.map((option, index) => (
               <FoxSelectOptionItem
                 key={option.value}

                 label={option.label}
                 icon={option.icon}
                 danger={option.danger}
-                selected={option.value === currentValue}
+                selected={isSelected(option.value)}
                 active={index === activeIndex}
                 onHover={() => setActiveIndex(index)}
                 onSelect={() => commit(option.value)}

0f6c0e7

@fox/core/components/fox-toggle-quantity/fox-toggle-quantity.tsx (added)

+++ @fox/core/components/fox-toggle-quantity/fox-toggle-quantity.tsx

...	...	@@ -0,0 +1,171 @@
	1	+"use client";
	2	+
	3	+import { useState, type Ref } from "react";
	4	+import { cx } from "../../utils";
	5	+
	6	+export interface FoxToggleQuantityProps {
	7	+ /** 주면 제어 컴포넌트가 된다 — 호출부가 소유하고, 이 요소가 스스로 바꾸지 않는다. */
	8	+ value?: number;
	9	+ /** 비제어로 쓸 때의 초기 값. `value`를 주면 무시된다. */
	10	+ defaultValue?: number;
	11	+ /**
	12	+ * 값이 바뀔 때 호출된다. 이미 `min`·`max`로 자른 뒤의 값이 넘어온다.
	13	+ *
	14	+ * ⚠️ 이름이 `onChange`가 아니다 — 네이티브 입력을 감싸는 게 아니라 버튼 둘로 만든 커스텀
	15	+ * 위젯이라 `FoxSelect.onValueChange`와 같은 쪽이다.
	16	+ */
	17	+ onValueChange?: (value: number) => void;
	18	+ /** 내려갈 수 있는 하한. 값이 여기 닿으면 빼기 버튼이 비활성된다. */
	19	+ min?: number;
	20	+ /** 올라갈 수 있는 상한. 넘기지 않으면 상한이 없어 더하기 버튼이 비활성되지 않는다. */
	21	+ max?: number;
	22	+ /** 한 번에 오르내리는 폭. */
	23	+ step?: number;
	24	+ /**
	25	+ * 폼으로 값을 보낼 이름. 주면 같은 값을 담은 `<input type="hidden">`을 함께 렌더한다.
	26	+ *
	27	+ * `FoxChip`은 이걸 열지 않는다 — 칩은 여러 개가 한 묶음으로 하나의 값을 이뤄서 이름 하나를
	28	+ * 칩 하나에 묶을 수 없기 때문이다. 이쪽은 값이 정확히 하나라 그 문제가 없다.
	29	+ */
	30	+ name?: string;
	31	+ /** 두 버튼을 모두 비활성한다. `min`·`max`에 의한 개별 비활성과는 별개다. */
	32	+ disabled?: boolean;
	33	+ /** 묶음을 읽어 줄 이름. 화면에 보이는 제목이 이미 있으면 `labelledBy`를 쓴다. */
	34	+ label?: string;
	35	+ /** 묶음 이름 역할을 하는 요소의 id. `label`보다 우선한다. */
	36	+ labelledBy?: string;
	37	+ /** 빼기 버튼을 읽어 줄 이름. */
	38	+ decreaseLabel?: string;
	39	+ /** 더하기 버튼을 읽어 줄 이름. */
	40	+ increaseLabel?: string;
	41	+ /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */
	42	+ hidden?: boolean;
	43	+ /** 배치 조정용. 시안의 폭(140px)을 바꿔야 할 때도 여기로 준다. */
	44	+ className?: string;
	45	+ ref?: Ref<HTMLDivElement>;
	46	+}
	47	+
	48	+/**
	49	+ * @fox 수량 조절기. 빼기 버튼 · 숫자 · 더하기 버튼이 회색 판 위에 놓인다.
	50	+ *
	51	+ * 값은 제어·비제어 둘 다 된다(`FoxSelect`와 같은 방식). `min`·`max`에 닿으면 해당 버튼이
	52	+ * 네이티브 `disabled`가 되므로, 누를 수 없다는 것이 커서와 보조기술에 함께 전달된다.
	53	+ *
	54	+ * 숫자는 입력칸이 아니라 읽기 전용 글자다 — 시안에 입력칸의 테두리도 배경도 없다. 그래서
	55	+ * `role="spinbutton"`을 붙이지 않고 `role="group"` 안의 버튼 둘로 두고, 바뀐 값은
	56	+ * `aria-live`로 알린다. 키보드로 값을 직접 치는 자리가 필요해지면 시안에 먼저 추가한다.
	57	+ *
	58	+ * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"`
	59	+ * (또는 개별 파티셜)로 한 번 불러와야 한다.
	60	+ */
	61	+export function FoxToggleQuantity({
	62	+ value,
	63	+ defaultValue = 0,
	64	+ onValueChange,
	65	+ min = 0,
	66	+ max,
	67	+ step = 1,
	68	+ name,
	69	+ disabled = false,
	70	+ label,
	71	+ labelledBy,
	72	+ decreaseLabel = "수량 줄이기",
	73	+ increaseLabel = "수량 늘리기",
	74	+ hidden = false,
	75	+ className,
	76	+ ref,
	77	+}: FoxToggleQuantityProps) {
	78	+ const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
	79	+
	80	+ const currentValue = value ?? uncontrolledValue;
	81	+
	82	+ // 훅을 전부 부른 뒤에 빠져나간다 — 위쪽에서 반환하면 훅 호출 순서가 깨진다.
	83	+ if (hidden) {
	84	+ return null;
	85	+ }
	86	+
	87	+ // 호출부가 범위 밖의 값을 줄 수도 있으므로 표시 직전에 한 번 자른다 — 자르지 않으면
	88	+ // 버튼 비활성 여부와 보이는 숫자가 어긋난다.
	89	+ const clamp = (next: number) => Math.min(max ?? Infinity, Math.max(min, next));
	90	+
	91	+ const atMin = currentValue <= min;
	92	+ const atMax = max !== undefined && currentValue >= max;
	93	+
	94	+ function commit(next: number) {
	95	+ const clamped = clamp(next);
	96	+ if (clamped === currentValue) {
	97	+ return;
	98	+ }
	99	+ // 제어 컴포넌트일 때는 내부 값을 건드리지 않는다 — 건드리면 호출부가 값을 거부해도
	100	+ // 내부에만 반영되어 둘이 조용히 갈라진다.
	101	+ if (value === undefined) setUncontrolledValue(clamped);
	102	+ onValueChange?.(clamped);
	103	+ }
	104	+
	105	+ return (
	106	+ <div
	107	+ ref={ref}
	108	+ role="group"
	109	+ aria-label={labelledBy ? undefined : label}
	110	+ aria-labelledby={labelledBy}
	111	+ className={cx("fox-toggle-quantity", className)}
	112	+ >
	113	+ <button
	114	+ type="button"
	115	+ className="fox-toggle-quantity__button"
	116	+ disabled={disabled \|\| atMin}
	117	+ aria-label={decreaseLabel}
	118	+ onClick={() => commit(currentValue - step)}
	119	+ >
	120	+ <span className="fox-toggle-quantity__icon" aria-hidden="true">
	121	+ <MinusMark />
	122	+ </span>
	123	+ </button>
	124	+
	125	+ {/* 값이 바뀐 것을 소리로도 알린다 — 버튼 이름은 "수량 줄이기"라 결과를 담지 않는다. */}
	126	+ <span className="fox-toggle-quantity__value" aria-live="polite">
	127	+ {clamp(currentValue)}
	128	+ </span>
	129	+
	130	+ <button
	131	+ type="button"
	132	+ className="fox-toggle-quantity__button"
	133	+ disabled={disabled \|\| atMax}
	134	+ aria-label={increaseLabel}
	135	+ onClick={() => commit(currentValue + step)}
	136	+ >
	137	+ <span className="fox-toggle-quantity__icon" aria-hidden="true">
	138	+ <PlusMark />
	139	+ </span>
	140	+ </button>
	141	+
	142	+ {name ? <input type="hidden" name={name} value={clamp(currentValue)} /> : null}
	143	+ </div>
	144	+ );
	145	+}
	146	+
	147	+// 시안 아이콘 둘. `fill`을 시안의 리터럴(#58616A) 대신 `currentColor`로 두면 색을 버튼
	148	+// 규칙이 정한다(그쪽에서 같은 값을 `primitive(neutral-60)`으로 가리킨다).
	149	+// `width`·`height`를 쓰지 않는다 — 크기는 슬롯이 정하고 SVG는 100%로 따라온다.
	150	+
	151	+function MinusMark() {
	152	+ return (
	153	+ <svg viewBox="0 0 20 20" fill="none" aria-hidden="true">
	154	+ <path
	155	+ d="M17.5 10C17.5 10.1658 17.4342 10.3247 17.3169 10.4419C17.1997 10.5592 17.0408 10.625 16.875 10.625H3.125C2.95924 10.625 2.80027 10.5592 2.68306 10.4419C2.56585 10.3247 2.5 10.1658 2.5 10C2.5 9.83424 2.56585 9.67527 2.68306 9.55806C2.80027 9.44085 2.95924 9.375 3.125 9.375H16.875C17.0408 9.375 17.1997 9.44085 17.3169 9.55806C17.4342 9.67527 17.5 9.83424 17.5 10Z"
	156	+ fill="currentColor"
	157	+ />
	158	+ </svg>
	159	+ );
	160	+}
	161	+
	162	+function PlusMark() {
	163	+ return (
	164	+ <svg viewBox="0 0 20 20" fill="none" aria-hidden="true">
	165	+ <path
	166	+ d="M17.5 10C17.5 10.1658 17.4342 10.3247 17.3169 10.4419C17.1997 10.5592 17.0408 10.625 16.875 10.625H10.625V16.875C10.625 17.0408 10.5592 17.1997 10.4419 17.3169C10.3247 17.4342 10.1658 17.5 10 17.5C9.83424 17.5 9.67527 17.4342 9.55806 17.3169C9.44085 17.1997 9.375 17.0408 9.375 16.875V10.625H3.125C2.95924 10.625 2.80027 10.5592 2.68306 10.4419C2.56585 10.3247 2.5 10.1658 2.5 10C2.5 9.83424 2.56585 9.67527 2.68306 9.55806C2.80027 9.44085 2.95924 9.375 3.125 9.375H9.375V3.125C9.375 2.95924 9.44085 2.80027 9.55806 2.68306C9.67527 2.56585 9.83424 2.5 10 2.5C10.1658 2.5 10.3247 2.56585 10.4419 2.68306C10.5592 2.80027 10.625 2.95924 10.625 3.125V9.375H16.875C17.0408 9.375 17.1997 9.44085 17.3169 9.55806C17.4342 9.67527 17.5 9.83424 17.5 10Z"
	167	+ fill="currentColor"
	168	+ />
	169	+ </svg>
	170	+ );
	171	+}

0f6c0e7

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

+++ @fox/core/components/fox-toggle-quantity/index.ts

...	...	@@ -0,0 +1,1 @@
	1	+export { FoxToggleQuantity, type FoxToggleQuantityProps } from "./fox-toggle-quantity";

e67a86e

0f6c0e7

@fox/core/components/index.ts

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

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


 export * from "./fox-check-icon";
 export * from "./fox-checkbox";
 export * from "./fox-checkbox-group";
+export * from "./fox-chip";
+export * from "./fox-chip-area";
+export * from "./fox-chip-select-option";
 export * from "./fox-conditional-option";
 export * from "./fox-email";
 export * from "./fox-file-upload";

 export * from "./fox-radio";
 export * from "./fox-radio-group";
 export * from "./fox-radio-icon";
+export * from "./fox-segmented-control";
+export * from "./fox-segmented-control-item";
 export * from "./fox-select";
 export * from "./fox-select-option";
 export * from "./fox-select-option-item";
+export * from "./fox-select-text";
 export * from "./fox-spinner";
 export * from "./fox-tab";
 export * from "./fox-tab-item";

 export * from "./fox-tag-list";
 export * from "./fox-text-area";
 export * from "./fox-text-button";
+export * from "./fox-toggle-quantity";
 export * from "./fox-toggle-switch";
+

e67a86e

0f6c0e7

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

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

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

...	...	@@ -50,6 +50,12 @@
50	50	import { FoxTab } from "../core/components/fox-tab";
51	51	import { FoxTabItem } from "../core/components/fox-tab-item";
52	52	import { FoxSpinner } from "../core/components/fox-spinner";
	53	+import { FoxChip, type FoxChipItem } from "../core/components/fox-chip";
	54	+import { FoxChipArea } from "../core/components/fox-chip-area";
	55	+import { FoxSelectText } from "../core/components/fox-select-text";
	56	+import { FoxSegmentedControl } from "../core/components/fox-segmented-control";
	57	+import { FoxSegmentedControlItem } from "../core/components/fox-segmented-control-item";
	58	+import { FoxToggleQuantity } from "../core/components/fox-toggle-quantity";
53	59	import styles from "./dev-test.module.scss";
54	60
55	61	export interface ComponentExample {
...	...	@@ -560,6 +566,36 @@
560	566	);
561	567	}
562	568
	569	+const CHIP_PERIOD_OPTIONS: FoxChipItem[] = [
	570	+ { value: "7d", label: "최근 7일" },
	571	+ { value: "1m", label: "최근 1개월" },
	572	+ { value: "3m", label: "최근 3개월" },
	573	+ { value: "custom", label: "직접 입력" },
	574	+];
	575	+
	576	+const SELECT_TEXT_MONTHS: FoxSelectItem[] = [
	577	+ { value: "2026-06", label: "2026년 6월" },
	578	+ { value: "2026-07", label: "2026년 7월" },
	579	+ { value: "2026-08", label: "2026년 8월" },
	580	+];
	581	+
	582	+const SELECT_TEXT_SORTS: FoxSelectItem[] = [
	583	+ { value: "latest", label: "최신순" },
	584	+ { value: "oldest", label: "오래된순" },
	585	+ { value: "amount", label: "금액 높은순" },
	586	+];
	587	+
	588	+// FoxChip select 계열의 앞 아이콘 자리를 확인하기 위한 달력 도형(시안이 그 자리에 달력을
	589	+// 쓴다). `currentColor`로 그려야 상태별 글자 색을 따라간다.
	590	+function DemoCalendar() {
	591	+ return (
	592	+ <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3" aria-hidden="true">
	593	+ <rect x="2" y="3" width="12" height="11" rx="1.5" />
	594	+ <path d="M2 6.5h12M5.5 1.5v3M10.5 1.5v3" />
	595	+ </svg>
	596	+ );
	597	+}
	598	+
563	599	/** 컴포넌트를 만들 때마다 항목 하나를 추가한다 — 다른 파일은 고치지 않는다. */
564	600	export const COMPONENT_EXAMPLES: ComponentExample[] = [
565	601	{
...	...	@@ -985,7 +1021,7 @@
985	1021	},
986	1022	],
987	1023	},
988		- {
	1024	+ {
989	1025	id: "fox-form-label",
990	1026	name: "FoxFormLabel",
991	1027	description:
...	...	@@ -1222,6 +1258,22 @@
1222	1258	</div>
1223	1259	),
1224	1260	},
	1261	+ {
	1262	+ label:
	1263	+ "selectionMode=\"multiple\" — 고른 라벨이 쉼표로 이어지고, 목록은 바깥을 눌러야 닫힙니다",
	1264	+ node: (
	1265	+ <div className={styles.demoFields}>
	1266	+ <FoxSelect size="md" label="아무것도 안 고름" selectionMode="multiple" options={SELECT_ITEMS} />
	1267	+ <FoxSelect
	1268	+ size="md"
	1269	+ label="여러 개 고름"
	1270	+ selectionMode="multiple"
	1271	+ options={SELECT_ITEMS}
	1272	+ defaultValues={SELECT_ITEMS.slice(0, 2).map((option) => option.value)}
	1273	+ />
	1274	+ </div>
	1275	+ ),
	1276	+ },
1225	1277	],
1226	1278	},
1227	1279	{
...	...	@@ -1409,7 +1461,7 @@
1409	1461	},
1410	1462	],
1411	1463	},
1412		- {
	1464	+ {
1413	1465	id: "fox-conditional-option",
1414	1466	name: "FoxConditionalOption",
1415	1467	description:
...	...	@@ -1912,7 +1964,8 @@
1912	1964	),
1913	1965	},
1914	1966	],
1915		- }, {
	1967	+ },
	1968	+ {
1916	1969	id: "fox-check-icon",
1917	1970	name: "FoxCheckIcon",
1918	1971	description:
...	...	@@ -2848,4 +2901,358 @@
2848	2901	},
2849	2902	],
2850	2903	},
	2904	+ {
	2905	+ id: "fox-chip",
	2906	+ name: "FoxChip",
	2907	+ description:
	2908	+ "Figma 시안(chip 264:424) 켜짐 여부를 갖는 작은 조각입니다 — type은 아이콘의 유무와 누를 때 벌어지는 일만 정하고, 상태별 모양(기본·hover·켜짐·비활성)은 세 계열이 똑같습니다. check는 켜졌을 때만 앞에 체크가 붙고, select는 뒤 화살표가 늘 있으며 앞 아이콘은 icon을 넘긴 때만 나옵니다. action은 아이콘이 없습니다. select는 selectionMode로 단일·다중을 고릅니다 — 단일은 하나 고르면 그 자리에서 반영되고 닫히지만, 다중은 열린 채로 남고 바깥을 눌러야 닫힙니다(닫기가 곧 확정이 아니라 체크할 때마다 이미 반영됩니다). 열리는 목록은 FoxSelectOption이 아니라 전용 FoxChipSelectOption이고, 항목이 단일이면 라디오·다중이면 체크박스입니다. 그래서 칩은 콤보박스가 아니라 목록을 여닫는 버튼(aria-expanded)일 뿐이고, 항목 사이 이동은 네이티브 입력이 알아서 합니다. 아래 예제는 전부 실제로 눌러서 확인할 수 있습니다 — hover(파란 테두리 + 연한 파랑 배경)는 마우스를 올려야 보이고, 켜짐 위에서는 hover가 걸리지 않습니다(시안에 없어 임의로 만들지 않았습니다).",
	2909	+ variants: [
	2910	+ {
	2911	+ label: "check — 눌러서 켜고 끕니다. 켜지면 앞에 체크가 붙고 남색으로 채워집니다",
	2912	+ node: (
	2913	+ <>
	2914	+ <FoxChip label="레이블" />
	2915	+ <FoxChip label="레이블" defaultChecked />
	2916	+ </>
	2917	+ ),
	2918	+ },
	2919	+ {
	2920	+ label: "select — 눌러 목록을 엽니다. 고르면 켜짐이 되고 글자가 고른 값으로 바뀝니다",
	2921	+ node: (
	2922	+ <>
	2923	+ <FoxChip type="select" label="기간" icon={<DemoCalendar />} options={CHIP_PERIOD_OPTIONS} />
	2924	+ <FoxChip type="select" label="기간" options={CHIP_PERIOD_OPTIONS} />
	2925	+ <FoxChip
	2926	+ type="select"
	2927	+ label="기간"
	2928	+ icon={<DemoCalendar />}
	2929	+ options={CHIP_PERIOD_OPTIONS}
	2930	+ defaultValue="1m"
	2931	+ />
	2932	+ </>
	2933	+ ),
	2934	+ },
	2935	+ {
	2936	+ label:
	2937	+ "select · 다중 선택 — 켜고 꺼도 목록이 열린 채로 남고, 바깥을 눌러야 닫힙니다 (칩 글자는 그대로)",
	2938	+ node: (
	2939	+ <>
	2940	+ <FoxChip
	2941	+ type="select"
	2942	+ selectionMode="multiple"
	2943	+ label="기간"
	2944	+ icon={<DemoCalendar />}
	2945	+ options={CHIP_PERIOD_OPTIONS}
	2946	+ />
	2947	+ <FoxChip
	2948	+ type="select"
	2949	+ selectionMode="multiple"
	2950	+ label="기간"
	2951	+ icon={<DemoCalendar />}
	2952	+ options={CHIP_PERIOD_OPTIONS}
	2953	+ defaultValues={["7d", "3m"]}
	2954	+ />
	2955	+ </>
	2956	+ ),
	2957	+ },
	2958	+ {
	2959	+ label: "action — 아이콘 없이 켜고 끕니다 (켜져도 체크가 붙지 않습니다)",
	2960	+ node: (
	2961	+ <>
	2962	+ <FoxChip type="action" label="레이블" />
	2963	+ <FoxChip type="action" label="레이블" defaultChecked />
	2964	+ </>
	2965	+ ),
	2966	+ },
	2967	+ {
	2968	+ label: "크기 — lg 높이 40 / md 높이 28. 아이콘도 20 / 16으로 함께 바뀝니다",
	2969	+ node: (
	2970	+ <>
	2971	+ <FoxChip size="lg" label="레이블" defaultChecked />
	2972	+ <FoxChip size="md" label="레이블" defaultChecked />
	2973	+ <FoxChip size="lg" type="select" label="기간" icon={<DemoCalendar />} options={CHIP_PERIOD_OPTIONS} />
	2974	+ <FoxChip size="md" type="select" label="기간" icon={<DemoCalendar />} options={CHIP_PERIOD_OPTIONS} />
	2975	+ </>
	2976	+ ),
	2977	+ },
	2978	+ {
	2979	+ label: "비활성 — 꺼짐 / 켜짐. 켜짐 여부와 무관하게 한 벌입니다(시안 확인 완료)",
	2980	+ node: (
	2981	+ <>
	2982	+ <FoxChip label="레이블" disabled />
	2983	+ <FoxChip label="레이블" disabled defaultChecked />
	2984	+ <FoxChip type="select" label="기간" icon={<DemoCalendar />} options={CHIP_PERIOD_OPTIONS} disabled />
	2985	+ <FoxChip type="action" label="레이블" disabled defaultChecked />
	2986	+ </>
	2987	+ ),
	2988	+ },
	2989	+ ],
	2990	+ },
	2991	+ {
	2992	+ id: "fox-chip-area",
	2993	+ name: "FoxChipArea",
	2994	+ description:
	2995	+ "Figma 시안(chip-area 264:1671) 칩 여러 개의 배치와 size 통일만 책임집니다. 시안이 주는 규칙이 inline-flex · align-items: center · gap 4px 세 줄뿐이라 스타일 파일도 그만큼입니다. FoxTagList와 달리 type은 덮어쓰지 않습니다 — 한 줄에 계열이 섞이는 것이 칩에서는 정상이기 때문입니다(기간 select 옆에 action 칩들). role이 radiogroup이 아니라 group입니다 — 하나만 고르는 묶음이 아니고 각 칩이 독립적으로 Tab을 받는 버튼입니다. 줄바꿈이 없습니다(flex-wrap 없음) — 시안이 한 줄만 그리므로 폭이 모자라면 넘칩니다.",
	2996	+ variants: [
	2997	+ {
	2998	+ label: "기본 — 칩 사이 간격 4px, 계열이 섞여도 됩니다",
	2999	+ node: (
	3000	+ <FoxChipArea size="md" label="거래 구분">
	3001	+ <FoxChip type="select" label="기간" icon={<DemoCalendar />} options={CHIP_PERIOD_OPTIONS} />
	3002	+ <FoxChip type="action" label="전체" defaultChecked />
	3003	+ <FoxChip type="action" label="입금" />
	3004	+ <FoxChip type="action" label="출금" />
	3005	+ <FoxChip type="action" label="환불" />
	3006	+ </FoxChipArea>
	3007	+ ),
	3008	+ },
	3009	+ {
	3010	+ label: "size — 자식이 준 값은 무시되고 묶음 값으로 통일된다",
	3011	+ node: (
	3012	+ <FoxChipArea size="md" label="md 크기">
	3013	+ {/* 일부러 어긋난 size를 준다 — 셋 다 md로 나와야 정상 */}
	3014	+ <FoxChip label="레이블" size="lg" />
	3015	+ <FoxChip label="레이블" size="lg" defaultChecked />
	3016	+ <FoxChip label="레이블" />
	3017	+ </FoxChipArea>
	3018	+ ),
	3019	+ },
	3020	+ {
	3021	+ label: "size를 넘기지 않으면 — 자식이 각자 정한 값이 그대로 남는다",
	3022	+ node: (
	3023	+ <FoxChipArea label="크기 섞임">
	3024	+ <FoxChip label="lg" size="lg" />
	3025	+ <FoxChip label="md" size="md" />
	3026	+ </FoxChipArea>
	3027	+ ),
	3028	+ },
	3029	+ {
	3030	+ label: "프래그먼트로 감싼 자식에도 통일이 걸린다",
	3031	+ node: (
	3032	+ <FoxChipArea size="lg" label="프래그먼트">
	3033	+ <>
	3034	+ <FoxChip label="레이블" size="md" />
	3035	+ <FoxChip label="레이블" size="md" defaultChecked />
	3036	+ </>
	3037	+ </FoxChipArea>
	3038	+ ),
	3039	+ },
	3040	+ ],
	3041	+ },
	3042	+ {
	3043	+ id: "fox-select-text",
	3044	+ name: "FoxSelectText",
	3045	+ description:
	3046	+ "Figma 시안(select-txt 112:508) 글자만 있는 셀렉트입니다. FoxSelect와 같은 콤보박스이고 열리는 목록도 같은 FoxSelectOption을 쓰지만, 폼 한 칸이 아닙니다 — 라벨·힌트·에러·필수 표시가 없고 테두리도 고정 높이도 없습니다. 배경 계열도 다릅니다: FoxSelect는 중립(흰 바탕 + 테두리)인데 이쪽은 강조 계열이라 기본이 투명이고 hover·pressed에서만 연한 파랑이 깔립니다 — 그래서 아래 예제의 기본 상태는 배경이 없는 것이 정상이고, 마우스를 올리고 눌러야 색이 보입니다. 크기가 글자 계열까지 바꾸는 것도 여기뿐입니다: lg는 heading/md(제목용 20px bold), md·sm은 label/*-strong(본문용 medium)입니다. '지금 무엇을 보고 있는지'를 글자로 보여 주면서 그 자리에서 바꾸게 하는 자리에 씁니다.",
	3047	+ variants: [
	3048	+ {
	3049	+ label: "크기 — lg(제목 20px bold) / md(15px medium) / sm(13px medium)",
	3050	+ node: (
	3051	+ <>
	3052	+ <FoxSelectText size="lg" ariaLabel="조회 기간" options={SELECT_TEXT_MONTHS} defaultValue="2026-08" />
	3053	+ <FoxSelectText size="md" ariaLabel="정렬 기준" options={SELECT_TEXT_SORTS} defaultValue="latest" />
	3054	+ <FoxSelectText size="sm" ariaLabel="정렬 기준" options={SELECT_TEXT_SORTS} defaultValue="latest" />
	3055	+ </>
	3056	+ ),
	3057	+ },
	3058	+ {
	3059	+ label: "아무것도 고르지 않으면 placeholder — 골라 보세요",
	3060	+ node: (
	3061	+ <>
	3062	+ <FoxSelectText size="lg" ariaLabel="조회 기간" options={SELECT_TEXT_MONTHS} placeholder="기간 선택" />
	3063	+ <FoxSelectText size="md" ariaLabel="정렬 기준" options={SELECT_TEXT_SORTS} />
	3064	+ </>
	3065	+ ),
	3066	+ },
	3067	+ {
	3068	+ label: "제목 옆에 놓기 — inline이라 줄 전체를 차지하지 않습니다",
	3069	+ node: (
	3070	+ <span style={{ display: "inline-flex", alignItems: "center", gap: "0.8rem" }}>
	3071	+ <FoxSelectText size="lg" ariaLabel="조회 기간" options={SELECT_TEXT_MONTHS} defaultValue="2026-08" />
	3072	+ <FoxSelectText size="sm" ariaLabel="정렬 기준" options={SELECT_TEXT_SORTS} defaultValue="amount" />
	3073	+ </span>
	3074	+ ),
	3075	+ },
	3076	+ {
	3077	+ label: "비활성 — 시안에 없어 색은 기본과 같고 hover·pressed만 죽습니다",
	3078	+ node: (
	3079	+ <>
	3080	+ <FoxSelectText size="lg" ariaLabel="조회 기간" options={SELECT_TEXT_MONTHS} defaultValue="2026-08" disabled />
	3081	+ <FoxSelectText size="md" ariaLabel="정렬 기준" options={SELECT_TEXT_SORTS} defaultValue="latest" disabled />
	3082	+ </>
	3083	+ ),
	3084	+ },
	3085	+ {
	3086	+ label: "세로 flex 안에 놓아도 목록 폭이 늘어나지 않는다 (트리거는 부모가 늘립니다)",
	3087	+ node: (
	3088	+ <div className={styles.demoStack}>
	3089	+ <FoxSelectText size="md" ariaLabel="조회 기간" options={SELECT_TEXT_MONTHS} defaultValue="2026-08" />
	3090	+ <FoxSelectText size="sm" ariaLabel="정렬 기준" options={SELECT_TEXT_SORTS} defaultValue="latest" />
	3091	+ </div>
	3092	+ ),
	3093	+ },
	3094	+ ],
	3095	+ },
	3096	+ {
	3097	+ id: "fox-segmented-control-item",
	3098	+ name: "FoxSegmentedControlItem",
	3099	+ description:
	3100	+ "Figma 시안(segmented-control-item) 세그먼티드 컨트롤의 칸 하나입니다. 상태를 갖지 않습니다 — 켜짐 여부는 네이티브 input[type=radio]가 소유하므로, name만 같으면 단일 선택·화살표 이동·폼 전송을 브라우저가 처리합니다(FoxRadio와 같은 구조). 루트가 label이라 글자든 아이콘이든 어디를 눌러도 선택됩니다. 아래 예제는 묶는 테두리 없이 칸만 보여 주는 것이라 실제 사용 모습은 FoxSegmentedControl 쪽을 보세요 — 칸 오른쪽의 구분선이 이 컴포넌트 것이고, 감싸는 테두리와 모서리는 묶음 것입니다. 켜짐과 비활성은 구분선을 지웁니다 hover·pressed는 꺼져 있을 때만 걸립니다.",
	3101	+ variants: [
	3102	+ {
	3103	+ label: "크기 — lg 56 / md 40 / sm 28 / xsm 24 (아이콘도 24/20/16/12로 함께)",
	3104	+ node: (
	3105	+ <>
	3106	+ <FoxSegmentedControlItem name="sci-lg" size="lg" label="목록" icon={<DemoStar />} defaultChecked />
	3107	+ <FoxSegmentedControlItem name="sci-md" size="md" label="목록" icon={<DemoStar />} defaultChecked />
	3108	+ <FoxSegmentedControlItem name="sci-sm" size="sm" label="목록" icon={<DemoStar />} defaultChecked />
	3109	+ <FoxSegmentedControlItem name="sci-xsm" size="xsm" label="목록" icon={<DemoStar />} defaultChecked />
	3110	+ </>
	3111	+ ),
	3112	+ },
	3113	+ {
	3114	+ label: "상태 — 꺼짐 / 켜짐 / 비활성+꺼짐 / 비활성+켜짐 (마우스를 올리고 눌러 보세요)",
	3115	+ node: (
	3116	+ <>
	3117	+ <FoxSegmentedControlItem name="sci-a" size="md" label="꺼짐" />
	3118	+ <FoxSegmentedControlItem name="sci-b" size="md" label="켜짐" defaultChecked />
	3119	+ <FoxSegmentedControlItem name="sci-c" size="md" label="비활성" disabled />
	3120	+ <FoxSegmentedControlItem name="sci-d" size="md" label="비활성 켜짐" disabled defaultChecked />
	3121	+ </>
	3122	+ ),
	3123	+ },
	3124	+ {
	3125	+ label: "아이콘 없이 — 넘기지 않으면 자리를 만들지 않습니다",
	3126	+ node: (
	3127	+ <>
	3128	+ <FoxSegmentedControlItem name="sci-e" size="md" label="글자만" />
	3129	+ <FoxSegmentedControlItem name="sci-f" size="md" label="아이콘" icon={<DemoStar />} />
	3130	+ </>
	3131	+ ),
	3132	+ },
	3133	+ ],
	3134	+ },
	3135	+ {
	3136	+ id: "fox-segmented-control",
	3137	+ name: "FoxSegmentedControl",
	3138	+ description:
	3139	+ "Figma 시안(segmented-control) 칸들을 테두리 하나로 감싸고 name·size를 통일합니다. 상태를 갖지 않습니다 — 어느 칸이 켜졌는지는 각 칸의 네이티브 라디오가 소유하므로 아래 예제는 전부 실제로 눌러서 바꿀 수 있고, 화살표 키로도 이동합니다. size는 묶음의 모서리와 칸의 높이를 함께 정합니다: 둘이 어긋나면 칸 배경이 둥근 모서리와 맞지 않아서, 자식이 준 size는 무시되고 묶음 값으로 통일됩니다. overflow: hidden으로 채워진 칸 배경을 모서리에 맞춰 잘라 냅니다. name도 묶음이 단일 진실 공급원입니다 — 한 칸만 빼먹어 두 개가 켜지는 실수가 생기지 않습니다.",
	3140	+ variants: [
	3141	+ {
	3142	+ label: "크기 — lg(모서리 12) / md(8) / sm(4) / xsm(4)",
	3143	+ node: (
	3144	+ <div className={styles.demoStackStart}>
	3145	+ <FoxSegmentedControl size="lg" name="sc-lg" label="보기 방식 lg">
	3146	+ <FoxSegmentedControlItem label="전체" value="all" defaultChecked />
	3147	+ <FoxSegmentedControlItem label="입금" value="in" />
	3148	+ <FoxSegmentedControlItem label="출금" value="out" />
	3149	+ </FoxSegmentedControl>
	3150	+ <FoxSegmentedControl size="md" name="sc-md" label="보기 방식 md">
	3151	+ <FoxSegmentedControlItem label="전체" value="all" defaultChecked />
	3152	+ <FoxSegmentedControlItem label="입금" value="in" />
	3153	+ <FoxSegmentedControlItem label="출금" value="out" />
	3154	+ </FoxSegmentedControl>
	3155	+ <FoxSegmentedControl size="sm" name="sc-sm" label="보기 방식 sm">
	3156	+ <FoxSegmentedControlItem label="전체" value="all" defaultChecked />
	3157	+ <FoxSegmentedControlItem label="입금" value="in" />
	3158	+ <FoxSegmentedControlItem label="출금" value="out" />
	3159	+ </FoxSegmentedControl>
	3160	+ <FoxSegmentedControl size="xsm" name="sc-xsm" label="보기 방식 xsm">
	3161	+ <FoxSegmentedControlItem label="전체" value="all" defaultChecked />
	3162	+ <FoxSegmentedControlItem label="입금" value="in" />
	3163	+ <FoxSegmentedControlItem label="출금" value="out" />
	3164	+ </FoxSegmentedControl>
	3165	+ </div>
	3166	+ ),
	3167	+ },
	3168	+ {
	3169	+ label: "아이콘 + 글자 — 첫 칸·마지막 칸이 켜져도 배경이 모서리를 넘지 않습니다",
	3170	+ node: (
	3171	+ <FoxSegmentedControl size="md" name="sc-icon" label="정렬 방식">
	3172	+ <FoxSegmentedControlItem label="목록" value="list" icon={<DemoStar />} defaultChecked />
	3173	+ <FoxSegmentedControlItem label="카드" value="card" icon={<DemoStar />} />
	3174	+ <FoxSegmentedControlItem label="표" value="table" icon={<DemoStar />} />
	3175	+ </FoxSegmentedControl>
	3176	+ ),
	3177	+ },
	3178	+ {
	3179	+ label: "size — 자식이 준 값은 무시되고 묶음 값으로 통일된다",
	3180	+ node: (
	3181	+ <FoxSegmentedControl size="sm" name="sc-override" label="크기 통일">
	3182	+ {/* 일부러 어긋난 size를 준다 — 셋 다 sm으로 나와야 정상 */}
	3183	+ <FoxSegmentedControlItem label="전체" value="all" size="lg" defaultChecked />
	3184	+ <FoxSegmentedControlItem label="입금" value="in" size="xsm" />
	3185	+ <FoxSegmentedControlItem label="출금" value="out" />
	3186	+ </FoxSegmentedControl>
	3187	+ ),
	3188	+ },
	3189	+ {
	3190	+ label: "칸 하나만 비활성 — 나머지는 그대로 고를 수 있습니다",
	3191	+ node: (
	3192	+ <FoxSegmentedControl size="md" name="sc-disabled" label="일부 비활성">
	3193	+ <FoxSegmentedControlItem label="전체" value="all" defaultChecked />
	3194	+ <FoxSegmentedControlItem label="입금" value="in" />
	3195	+ <FoxSegmentedControlItem label="준비중" value="soon" disabled />
	3196	+ </FoxSegmentedControl>
	3197	+ ),
	3198	+ },
	3199	+ {
	3200	+ label: "칸 두 개 / 다섯 개 — 개수와 무관하게 규칙이 같습니다",
	3201	+ node: (
	3202	+ <div className={styles.demoStackStart}>
	3203	+ <FoxSegmentedControl size="md" name="sc-two" label="두 칸">
	3204	+ <FoxSegmentedControlItem label="켜짐" value="on" defaultChecked />
	3205	+ <FoxSegmentedControlItem label="꺼짐" value="off" />
	3206	+ </FoxSegmentedControl>
	3207	+ <FoxSegmentedControl size="md" name="sc-five" label="다섯 칸">
	3208	+ <FoxSegmentedControlItem label="1월" value="1" />
	3209	+ <FoxSegmentedControlItem label="2월" value="2" />
	3210	+ <FoxSegmentedControlItem label="3월" value="3" defaultChecked />
	3211	+ <FoxSegmentedControlItem label="4월" value="4" />
	3212	+ <FoxSegmentedControlItem label="5월" value="5" />
	3213	+ </FoxSegmentedControl>
	3214	+ </div>
	3215	+ ),
	3216	+ },
	3217	+ ],
	3218	+ },
	3219	+ {
	3220	+ id: "fox-toggle-quantity",
	3221	+ name: "FoxToggleQuantity",
	3222	+ description:
	3223	+ "Figma 시안(toggle-quantity) 수량 조절기입니다. 회색 판 위에 빼기 버튼·숫자·더하기 버튼이 놓이고, 크기 수식어가 없습니다 — 시안이 한 벌만 줍니다. 값은 제어·비제어 둘 다 되고(FoxSelect와 같은 방식) min·max에 닿으면 해당 버튼이 네이티브 disabled가 되므로 누를 수 없다는 것이 커서와 보조기술에 함께 전달됩니다. 숫자는 입력칸이 아니라 읽기 전용 글자입니다 — 시안에 입력칸의 테두리도 배경도 없어서 role=spinbutton을 붙이지 않고, 대신 값에 aria-live를 걸어 바뀐 숫자를 읽어 줍니다. 숫자가 flex: 1 0 0이라 남는 자리를 혼자 가져가므로 값이 한 자리든 세 자리든 버튼 위치가 흔들리지 않습니다. 버튼은 FoxIconButton이 아닙니다 — 크기·모서리·아이콘 슬롯은 sm과 같지만 배경이 투명이 아니라 흰색이어야 회색 판 위에서 보입니다.",
	3224	+ variants: [
	3225	+ {
	3226	+ label: "기본 — 눌러서 바꿔 보세요 (min 0, 상한 없음)",
	3227	+ node: <FoxToggleQuantity label="수량" defaultValue={1} />,
	3228	+ },
	3229	+ {
	3230	+ label: "min에 닿으면 빼기가, max에 닿으면 더하기가 비활성됩니다 (min 1 / max 3)",
	3231	+ node: (
	3232	+ <>
	3233	+ <FoxToggleQuantity label="최소값" min={1} max={3} defaultValue={1} />
	3234	+ <FoxToggleQuantity label="중간값" min={1} max={3} defaultValue={2} />
	3235	+ <FoxToggleQuantity label="최대값" min={1} max={3} defaultValue={3} />
	3236	+ </>
	3237	+ ),
	3238	+ },
	3239	+ {
	3240	+ label: "step — 한 번에 10씩",
	3241	+ node: <FoxToggleQuantity label="10단위" step={10} max={100} defaultValue={10} />,
	3242	+ },
	3243	+ {
	3244	+ label: "자릿수가 늘어도 버튼 위치가 흔들리지 않습니다",
	3245	+ node: (
	3246	+ <>
	3247	+ <FoxToggleQuantity label="한 자리" defaultValue={9} />
	3248	+ <FoxToggleQuantity label="세 자리" defaultValue={999} />
	3249	+ </>
	3250	+ ),
	3251	+ },
	3252	+ {
	3253	+ label: "disabled — 둘 다 막습니다 (min·max에 의한 개별 비활성과는 별개)",
	3254	+ node: <FoxToggleQuantity label="비활성" defaultValue={5} disabled />,
	3255	+ },
	3256	+ ],
	3257	+ },
2851	3258	];

e67a86e

0f6c0e7

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

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

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


 }
 
 // 그룹 예제용. 그룹이 블록 레벨이라 정렬·줄바꿈을 보려면 폭이 정해진 무대가 필요하다.
+//
+// ⚠️ 세로 flex의 기본 `align-items: stretch`가 자식을 가로로 늘린다. 인라인 컨트롤
+// (`inline-flex`·`inline-block`인 것들)을 여러 줄로 쌓아 비교할 때는 아래 `demoStackStart`를
+// 쓴다 — 이걸 쓰면 컴포넌트가 제 폭을 잃어 실제 모습과 다르게 보인다.
 .demoStack {
   display: flex;
   flex-direction: column;

   inline-size: 100%;
 }
 
+// 인라인 컨트롤을 세로로 쌓아 비교할 때. 자식이 늘어나지 않아 제 폭 그대로 보인다.
+.demoStackStart {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: fox.gap(4);
+}
+
 .demoOutline {
   padding: fox.padding(3);
   border: fox.border(1) dashed fox.color(border-neutral-subtle);

0f6c0e7

@fox/styles/_fox-chip-area.scss (added)

+++ @fox/styles/_fox-chip-area.scss

...	...	@@ -0,0 +1,27 @@
	1	+// FoxChipArea — 시안: 통합관리자페이지 디자인시스템 Figma chip-area
	2	+//
	3	+// 칩 여러 개를 나란히 놓는 자리다. 시안이 주는 규칙이 세 줄뿐이라 이 파일도 세 줄로 끝난다 —
	4	+// 칩 사이 간격 말고는 아무것도 정하지 않는다.
	5	+//
	6	+// 마크업 계약 (React 밖 소비자용):
	7	+// <div class="fox-chip-area" role="group" aria-label="거래 구분">
	8	+// <button type="button" class="fox-chip fox-chip--md fox-chip--action">…</button>
	9	+// <button type="button" class="fox-chip fox-chip--md fox-chip--action">…</button>
	10	+// </div>
	11	+//
	12	+// `inline-flex`라 묶음이 내용만큼만 넓다 — 옆에 다른 것을 놓을 수 있다. 줄 전체를 차지해야
	13	+// 하면 호출부가 `className`으로 폭을 준다(그것이 `className`을 여는 유일한 이유다).
	14	+//
	15	+// `align-items: center`가 필요한 이유는 칩의 크기(높이)가 섞일 수 있어서다. `FoxChipArea`의
	16	+// `size`로 통일하면 섞이지 않지만, 통일하지 않고 쓰는 것도 막지 않는다.
	17	+//
	18	+// ⚠️ 줄바꿈이 없다(`flex-wrap`을 주지 않는다) — 시안이 한 줄만 그린다. 폭이 모자라면 칩이
	19	+// 눌리는 게 아니라 넘친다. 칩이 여러 줄로 흘러야 하는 자리가 나오면 시안에 먼저 추가한다.
	20	+
	21	+@use "@fox/styles/abstracts" as fox;
	22	+
	23	+.fox-chip-area {
	24	+ display: inline-flex;
	25	+ align-items: center;
	26	+ gap: fox.gap(2);
	27	+}

0f6c0e7

@fox/styles/_fox-chip-select-option.scss (added)

+++ @fox/styles/_fox-chip-select-option.scss

...	...	@@ -0,0 +1,112 @@
	1	+// FoxChipSelectOption — 시안: 통합관리자페이지 디자인시스템 Figma chip-select-option
	2	+//
	3	+// 칩의 `select`가 열렸을 때 뜨는 목록이다. `fox-select-option`과 다른 컴포넌트다 —
	4	+// 저쪽은 글자 한 줄짜리 listbox고, 이쪽은 시안이 체크박스·라디오 목록이라 이미 있는
	5	+// `fox-checkbox-group`·`fox-radio-group`을 그대로 담는다.
	6	+//
	7	+// 마크업 계약 (React 밖 소비자용):
	8	+// <div class="fox-chip-select-option" role="group">
	9	+// <div class="fox-chip-select-option__list">
	10	+// <div class="fox-checkbox-group fox-checkbox-group--vertical">…</div>
	11	+// </div>
	12	+// <button type="button" class="fox-chip-select-option__confirm">확인</button>
	13	+// </div>
	14	+//
	15	+// 폭은 내용이 정한다. 시안이 280px을 주지만 고정하지 않는다(사용자 결정) — 항목 글자가
	16	+// 길면 잘리고 짧으면 남는데, 어느 쪽도 목록이 스스로 해결할 수 있는 문제가 아니기 때문이다.
	17	+// 여는 칩의 폭도 따라가지 않는다: 칩은 글자만큼만 좁아서 거기 맞추면 읽을 수 없다
	18	+// (`fox-select-option`의 `inset-inline: 0`을 쓰지 않는 이유이기도 하다).
	19	+//
	20	+// 폭을 못박아야 하는 자리가 생기면 호출부가 `className`으로 준다.
	21	+//
	22	+// ⚠️ 확인 버튼은 다중 선택 + 모바일에서만 보인다. 조건이 둘이고 걸리는 자리가 다르다:
	23	+//
	24	+// - 다중 선택에만 있다 — React가 정한다. 단일 선택은 하나 고르는 순간 목록이 닫혀서 이
	25	+// 버튼이 할 일이 없다(눌러도 아무 일이 없는 버튼이 화면 아래를 차지하게 된다).
	26	+// - 모바일에만 보인다(시안 주석 "모바일만 노출") — 이건 CSS가 정한다. 조건부 렌더로
	27	+// 하면 창 폭이 바뀔 때마다 DOM이 들락거려서, 열린 채로 화면을 돌리면 포커스가 날아간다.
	28	+//
	29	+// 값이 반영되는 시점은 플랫폼과 무관하게 같다(고르는 즉시). 모바일에서 달라지는 것은 닫는
	30	+// 수단이 하나 더 생기는 것뿐이고, 데스크톱에서 닫는 것은 바깥 클릭이다.
	31	+//
	32	+// ⚠️ `overflow: hidden`이 필요하다. 확인 버튼이 `align-self: stretch`라 판 좌우 끝까지
	33	+// 닿는데, 판의 둥근 모서리 밖으로 사각형 배경이 삐져나온다. 버튼에 모서리를 따로 주는 대신
	34	+// 판에서 한 번 잘라 낸다(`fox-segmented-control`과 같은 방식).
	35	+//
	36	+// 토큰이 아닌 값:
	37	+// - ⚠️ `max-block-size: 24rem`(240px): 항목이 많을 때의 상한. `fox-select-option`이 같은
	38	+// 이유로 잡아 둔 임시값을 그대로 따랐다(그 파일의 TODO 참고). 확정되면 함께 고친다.
	39	+// - box-sizing / position / display / flex / overflow / z-index / cursor: 구조 규칙.
	40	+
	41	+@use "@fox/styles/abstracts" as fox;
	42	+
	43	+.fox-chip-select-option {
	44	+ box-sizing: border-box;
	45	+ position: absolute;
	46	+ inset-inline-start: 0;
	47	+ inset-block-start: calc(100% + #{fox.gap(2)});
	48	+ z-index: 10;
	49	+ display: flex;
	50	+ flex-direction: column;
	51	+ align-items: flex-start;
	52	+ // 내용이 폭을 정한다(파일 상단 주석 참고). `max-content`라 항목 글자가 줄바꿈되지 않고,
	53	+ // 위치 기준인 `.fox-chip-select`가 좁아도 거기 눌리지 않는다.
	54	+ inline-size: max-content;
	55	+ // 확인 버튼의 사각 배경을 둥근 모서리로 잘라 낸다(파일 상단 ⚠️ 참고).
	56	+ overflow: hidden;
	57	+ border: fox.border(1) solid fox.color(border-neutral-subtle);
	58	+ border-radius: fox.radius(3);
	59	+ background: fox.color(surface-neutral-default);
	60	+
	61	+ // 항목이 놓이는 자리. 판에는 여백을 줄 수 없어(확인 버튼이 끝까지 닿아야 한다) 여기서 준다.
	62	+ &__list {
	63	+ box-sizing: border-box;
	64	+ padding-block: fox.padding(8);
	65	+ padding-inline: fox.padding(9);
	66	+ // 판이 `align-items: flex-start`라 그냥 두면 내용만큼만 넓다. 시안이 이 자리에
	67	+ // `align-self: stretch`를 준다 — 판 폭이 확인 버튼 때문에 더 넓어져도 여백이 따라간다.
	68	+ align-self: stretch;
	69	+ // ⚠️ 확정 전 임시값 — 파일 상단 승인 목록 참고.
	70	+ max-block-size: 24rem;
	71	+ overflow-y: auto;
	72	+ }
	73	+
	74	+ // 모바일 전용. 판 좌우 끝까지 닿는다(`align-self: stretch`).
	75	+ &__confirm {
	76	+ box-sizing: border-box;
	77	+ display: flex;
	78	+ justify-content: center;
	79	+ align-items: center;
	80	+ align-self: stretch;
	81	+ flex-shrink: 0;
	82	+ block-size: fox.form(height-lg);
	83	+ padding-inline: fox.form(padding-lg);
	84	+ gap: fox.gap(2);
	85	+ border: none;
	86	+ background: fox.color(button-primary-surface);
	87	+ cursor: pointer;
	88	+
	89	+ color: fox.color(button-primary-font);
	90	+ font-family: fox.font-family(body);
	91	+ font-size: fox.font-size(label-lg);
	92	+ font-weight: fox.font-weight(medium);
	93	+ line-height: 1;
	94	+ letter-spacing: -0.025em;
	95	+
	96	+ // 데스크톱에서는 숨긴다(파일 상단 ⚠️ 참고).
	97	+ @include fox.pc {
	98	+ display: none;
	99	+ }
	100	+ }
	101	+}
	102	+
	103	+// 항목 사이 간격만 묶음의 기본값과 다르다 — 체크박스·라디오 묶음의 세로 기본이 `gap-7`(24px)
	104	+// 인데 이 시안은 `gap-5`(16px)다. 나머지(세로 배치·왼쪽 정렬)는 묶음 것과 같아서 건드리지
	105	+// 않는다. 묶음이 `className`을 여는 목적("배치 조정용")에 정확히 해당한다.
	106	+//
	107	+// 클래스 둘을 겹쳐 적는다 — 묶음의 `--vertical`과 특정도가 같아, 겹치지 않으면 파일을
	108	+// @use 하는 순서가 승부를 가른다.
	109	+.fox-checkbox-group.fox-chip-select-option__group,
	110	+.fox-radio-group.fox-chip-select-option__group {
	111	+ gap: fox.gap(5);
	112	+}

0f6c0e7

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

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

...	...	@@ -0,0 +1,171 @@
	1	+// FoxChip — 시안: 통합관리자페이지 디자인시스템 Figma chip
	2	+//
	3	+// 각진 작은 조각이고 켜짐 여부를 갖는다 — 이것이 `fox-tag`와의 차이다. 태그는 눌러서
	4	+// 사라지거나 어디로 넘어가는 조각이라 상태가 남지 않고, 칩은 누른 결과가 자기 자신에게 남는다.
	5	+// 그래서 알약(`radius: max`)이 아니라 폼 요소와 같은 모서리(`form-radius-*`)를 쓴다.
	6	+//
	7	+// 마크업 계약 (React 밖 소비자용):
	8	+// <button type="button" class="fox-chip fox-chip--md fox-chip--check" aria-pressed="false">
	9	+// <span class="fox-chip__label">레이블</span>
	10	+// </button>
	11	+// <button type="button" class="fox-chip fox-chip--md fox-chip--check fox-chip--checked"
	12	+// aria-pressed="true">
	13	+// <span class="fox-chip__icon">…체크 svg…</span> <!-- 켜졌을 때만 -->
	14	+// <span class="fox-chip__label">레이블</span>
	15	+// </button>
	16	+// <div class="fox-chip-select"> <!-- 목록의 위치 기준 -->
	17	+// <button type="button" class="fox-chip fox-chip--lg fox-chip--select" role="combobox"
	18	+// aria-haspopup="listbox" aria-expanded="false">
	19	+// <span class="fox-chip__icon">…앞 아이콘 svg…</span> <!-- 넘긴 때만 -->
	20	+// <span class="fox-chip__label">레이블</span>
	21	+// <span class="fox-chip__icon fox-chip__arrow">…화살표 svg…</span>
	22	+// </button>
	23	+// <ul class="fox-select-option fox-chip-select__list" role="listbox">…</ul> <!-- 열렸을 때만 -->
	24	+// </div>
	25	+//
	26	+// 켜짐을 `aria-pressed`가 아니라 `--checked` 클래스가 표시한다. 계열마다 켜짐의 출처가
	27	+// 달라서다 — check·action은 `aria-pressed`를 들지만 select는 `role="combobox"`라 그 속성을
	28	+// 쓸 수 없다(고른 값이 있으면 켜진 것으로 본다). 클래스 하나로 모으면 모양 규칙이 한 벌로 끝난다.
	29	+//
	30	+// 상태 규칙은 계열과 무관하게 같다 — 계열이 정하는 것은 아이콘의 유무와 자리뿐이고, 아이콘이
	31	+// 앞이냐 뒤냐는 마크업 순서가 정한다(`fox-tag`와 같은 방식. `order`나 `row-reverse`를 쓰지
	32	+// 않는다).
	33	+//
	34	+// ⚠️ hover는 꺼져 있을 때만 걸린다. 시안이 켜짐 위의 hover를 그리지 않았고, 임의로 만들면
	35	+// 남색 채움이 눌린 채로 흔들린다. 선택자에 `:not(.fox-chip--checked)`를 박아 못박는다.
	36	+//
	37	+// ⚠️ 비활성은 켜짐 여부와 무관하게 한 벌이다(시안 확인 완료 — 비활성+꺼짐 시안이 따로 없다).
	38	+// 체크 아이콘은 계속 `--checked`가 정하므로 비활성+켜짐이면 흐린 회색 체크가 남는다.
	39	+//
	40	+// 크기가 바꾸는 것: 높이·좌우 여백·모서리·글자 크기·아이콘 크기. gap은 두 크기가 같다(`gap-2`).
	41	+// 아이콘만 크기를 따라가는 점이 `fox-tag`와 다르다 — 태그는 세 크기가 모두 16px이지만
	42	+// 시안의 칩은 md 16px(`icon-3`) / lg 20px(`icon-4`)다.
	43	+//
	44	+// 토큰이 아닌 값(`fox-button`·`fox-tag`와 동일한 근거로 승인된 항목):
	45	+// - line-height / letter-spacing: 시안 텍스트 스타일 label/*의 값이나 Figma가 변수로
	46	+// export하지 않는다. 두 크기가 모두 `-0.025em`이라 규칙 하나로 끝난다(md는 label/md
	47	+// 15px→-0.375px, lg는 label/lg 17px→-0.425px — 시안 확인 완료). px이 아니라 em인 이유는
	48	+// 글자 크기가 크기 수식어마다, 그리고 브레이크포인트마다 달라지기 때문이다 — px으로
	49	+// 박으면 그 자리에서 비율이 어긋난다.
	50	+// - box-sizing / display / flex / cursor / white-space / aspect-ratio: 구조·상호작용 규칙.
	51	+// - `--checked`의 `border-color: transparent`: 시안이 켜짐에 테두리를 주지 않는다. 테두리를
	52	+// 지우는 대신 투명하게 두는 이유는 배경이 그 자리까지 칠해져 모양은 같으면서, 높이·좌우
	53	+// 여백이 계열·상태에 상관없이 한 값으로 유지되기 때문이다.
	54	+// - `fox-chip-select__list`의 위치·폭: 구조 규칙(아래 주석 참고).
	55	+
	56	+@use "@fox/styles/abstracts" as fox;
	57	+
	58	+.fox-chip {
	59	+ // 안쪽 여백과 테두리가 바깥 크기를 늘리지 않게 한다 — 고정 높이가 흔들리지 않는다.
	60	+ box-sizing: border-box;
	61	+ display: inline-flex;
	62	+ align-items: center;
	63	+ border: fox.border(1) solid fox.color(border-neutral-default);
	64	+ background: fox.color(action-default);
	65	+ cursor: pointer;
	66	+
	67	+ color: fox.color(font-neutral-default);
	68	+ font-family: fox.font-family(body);
	69	+ font-weight: fox.font-weight(regular);
	70	+ line-height: 1;
	71	+ letter-spacing: -0.025em;
	72	+ white-space: nowrap;
	73	+
	74	+ // 글자만 줄어들게 해 아이콘이 밀리지 않게 한다.
	75	+ &__label {
	76	+ min-inline-size: 0;
	77	+ }
	78	+
	79	+ &__icon {
	80	+ display: inline-flex;
	81	+ flex-shrink: 0;
	82	+ align-items: center;
	83	+ justify-content: center;
	84	+ // 시안이 아이콘에 정사각 비율을 못박는다. 자리가 좁아 눌려도 글리프가 찌그러지지 않는다.
	85	+ aspect-ratio: 1 / 1;
	86	+ }
	87	+
	88	+ // 넘긴 SVG가 슬롯을 꽉 채운다 — 크기는 슬롯이 정하고 SVG는 따라온다.
	89	+ &__icon > * {
	90	+ inline-size: 100%;
	91	+ block-size: 100%;
	92	+ }
	93	+
	94	+ // 화살표만 글자보다 한 단계 흐리다(시안 #6D7882 = font-neutral-disabled-strong). 기본
	95	+ // 상태에서만이다 — 아래 상태 규칙이 색을 물려주므로 남색 배경 위에서 회색으로 남지 않는다.
	96	+ &__arrow {
	97	+ color: fox.color(font-neutral-disabled-strong);
	98	+ }
	99	+
	100	+ // ── 크기 ────────────────────────────────────────────────────────────────────
	101	+ &--lg {
	102	+ block-size: fox.form(height-md);
	103	+ padding-inline: fox.padding(4);
	104	+ gap: fox.gap(2);
	105	+ border-radius: fox.form(radius-md);
	106	+ font-size: fox.font-size(label-lg);
	107	+ }
	108	+
	109	+ &--lg &__icon {
	110	+ inline-size: fox.icon(4);
	111	+ block-size: fox.icon(4);
	112	+ }
	113	+
	114	+ &--md {
	115	+ block-size: fox.form(height-sm);
	116	+ padding-inline: fox.padding(3);
	117	+ gap: fox.gap(2);
	118	+ border-radius: fox.form(radius-xsm);
	119	+ font-size: fox.font-size(label-md);
	120	+ }
	121	+
	122	+ &--md &__icon {
	123	+ inline-size: fox.icon(3);
	124	+ block-size: fox.icon(3);
	125	+ }
	126	+
	127	+ // ── 상태 ────────────────────────────────────────────────────────────────────
	128	+ // 순서가 규칙이다: hover → checked → disabled. 뒤에 오는 것이 이긴다.
	129	+
	130	+ // 꺼져 있을 때만 걸린다(파일 상단 ⚠️ 참고).
	131	+ &:not(&--checked):hover:not(:disabled) {
	132	+ border-color: fox.color(border-theme-secondary);
	133	+ background: fox.color(action-secondary-hover);
	134	+ color: fox.color(font-theme-secondary);
	135	+ }
	136	+
	137	+ &--checked {
	138	+ // 배경이 테두리 자리까지 칠해져 모양은 테두리 없는 것과 같다(상단 승인 항목 참고).
	139	+ border-color: transparent;
	140	+ background: fox.color(action-secondary-active);
	141	+ color: fox.color(font-neutral-static-inverse);
	142	+ }
	143	+
	144	+ &:disabled {
	145	+ border-color: fox.color(border-neutral-disabled);
	146	+ background: fox.color(element-neutral-disabled);
	147	+ color: fox.color(font-neutral-disabled-strong);
	148	+ cursor: default;
	149	+ }
	150	+
	151	+ // 화살표는 기본 상태에서만 흐리고, 상태가 바뀌면 글자 색을 그대로 따라간다.
	152	+ &:not(&--checked):hover:not(:disabled) &__arrow,
	153	+ &--checked &__arrow,
	154	+ &:disabled &__arrow {
	155	+ color: inherit;
	156	+ }
	157	+}
	158	+
	159	+// select 계열을 감싸는 자리. `fox-select-option`이 `position: absolute`라 위치 기준이 되는
	160	+// 조상이 필요하다(`fox-select__control`과 같은 역할).
	161	+//
	162	+// `inline-block`인 이유는 칩이 글자만큼만 넓어야 하기 때문이다 — 블록이면 줄 전체를 차지해
	163	+// 칩 여러 개를 나란히 놓을 수 없다.
	164	+.fox-chip-select {
	165	+ position: relative;
	166	+ display: inline-block;
	167	+}
	168	+
	169	+// 목록의 폭·위치 규칙은 여기에 없다 — `fox-chip-select-option`이 280px 고정 폭을 스스로
	170	+// 갖는다. 예전에는 `fox-select-option`을 빌려 쓰면서 폭을 여기서 덮어썼는데, 전용 목록이
	171	+// 생기면서 그 덮어쓰기가 필요 없어졌다.

0f6c0e7

@fox/styles/_fox-segmented-control-item.scss (added)

+++ @fox/styles/_fox-segmented-control-item.scss

...	...	@@ -0,0 +1,197 @@
	1	+// FoxSegmentedControlItem — 시안: 통합관리자페이지 디자인시스템 Figma segmented-control-item
	2	+//
	3	+// 세그먼티드 컨트롤의 칸 하나다. 묶는 테두리와 모서리는 `fox-segmented-control`이 갖고,
	4	+// 이 파일은 칸 안쪽(높이·여백·글자·아이콘·상태 배경)과 칸 사이 구분선만 책임진다.
	5	+//
	6	+// 마크업 계약 (React 밖 소비자용):
	7	+// <label class="fox-segmented-control-item fox-segmented-control-item--lg">
	8	+// <input type="radio" class="fox-segmented-control-item__input" name="view" value="list">
	9	+// <span class="fox-segmented-control-item__icon">…svg…</span> <!-- 넘긴 때만 -->
	10	+// <span class="fox-segmented-control-item__label">목록</span>
	11	+// </label>
	12	+//
	13	+// 루트가 `<label>`이라 어디를 눌러도 브라우저가 선택을 처리한다. 상태는 전부 네이티브
	14	+// `<input type="radio">`가 소유한다 — `name`이 같으면 단일 선택·화살표 이동·폼 전송까지
	15	+// 브라우저가 알아서 한다(규약 3, `fox-radio`와 같은 구조).
	16	+//
	17	+// input은 순서상 맨 앞에 와야 한다. 시각적으로만 숨기고 포커스는 살려 둔다 —
	18	+// `display: none`으로 지우면 키보드로 도달할 수 없다.
	19	+//
	20	+// 켜짐·비활성을 `:has()`로 본다. `fox-radio`는 표시가 input의 형제라 `~`로 닿지만,
	21	+// 여기서는 색이 바뀌는 것이 input을 감싼 루트라 형제 선택자로는 닿을 수 없다
	22	+// (`fox-checkbox`가 루트 커서를 바꿀 때 쓰는 방식과 같다).
	23	+//
	24	+// ── 구분선 ────────────────────────────────────────────────────────────────────
	25	+// 칸마다 오른쪽에만 선을 둔다. 칸 N과 N+1 사이의 선은 N이 갖는다.
	26	+//
	27	+// ⚠️ 마지막 칸의 선은 지운다(투명). 시안에 없는 처리지만, 두면 묶음 자신의 테두리 바로
	28	+// 안쪽에 같은 색 선이 하나 더 생겨 두 줄로 보인다. 지우지 않고 투명으로 두는 이유는 폭이
	29	+// 남아 있어야 칸 너비가 위치에 따라 흔들리지 않기 때문이다.
	30	+//
	31	+// 켜짐·비활성은 선을 갖지 않는다 — 배경이 채워지는 상태라 시안이 `border-right`를 주지 않는다.
	32	+//
	33	+// ── 상태 ──────────────────────────────────────────────────────────────────────
	34	+// ⚠️ hover·pressed는 꺼져 있을 때만 걸린다. 시안이 켜짐 위의 hover를 그리지 않았고, 임의로
	35	+// 만들면 채워진 남색이 눌린 채로 흔들린다.
	36	+//
	37	+// 크기가 바꾸는 것: 높이·좌우 여백·글자 크기·아이콘 크기, 그리고 xsm만 간격(`gap-1`)이다.
	38	+//
	39	+// 토큰이 아닌 값(`fox-button`·`fox-tag`와 동일한 근거로 승인된 항목):
	40	+// - letter-spacing: 시안 텍스트 스타일 label/*-strong의 값이나 Figma가 변수로 export하지
	41	+// 않는다. 네 크기가 모두 `-0.025em`이라 규칙 하나로 끝난다(17px→-0.425px,
	42	+// 15px→-0.375px, 13px→-0.325px, 11px→-0.275px). px이 아니라 em인 이유는 글자 크기가 크기
	43	+// 수식어마다, 그리고 브레이크포인트마다 달라지기 때문이다.
	44	+// - 포커스 링의 `outline-offset` 음수: 묶음이 `overflow: hidden`이라 바깥으로 그리면
	45	+// 잘린다. 안쪽으로 그려야 첫 칸·마지막 칸에서도 온전히 보인다.
	46	+// - box-sizing / position / display / flex / cursor / white-space / aspect-ratio:
	47	+// 구조·상호작용 규칙.
	48	+
	49	+@use "@fox/styles/abstracts" as fox;
	50	+
	51	+.fox-segmented-control-item {
	52	+ // 여백과 구분선이 바깥 크기를 늘리지 않게 한다 — 고정 높이가 흔들리지 않는다.
	53	+ box-sizing: border-box;
	54	+ // 숨긴 input의 위치 기준.
	55	+ position: relative;
	56	+ display: inline-flex;
	57	+ justify-content: center;
	58	+ align-items: center;
	59	+ border-inline-end: fox.border(1) solid fox.color(button-default-border);
	60	+ background: fox.color(action-secondary);
	61	+ cursor: pointer;
	62	+
	63	+ color: fox.color(font-neutral-default);
	64	+ font-family: fox.font-family(body);
	65	+ font-weight: fox.font-weight(medium);
	66	+ line-height: 1;
	67	+ letter-spacing: -0.025em;
	68	+ text-align: center;
	69	+ white-space: nowrap;
	70	+
	71	+ // 시각적으로만 숨긴다. `opacity: 0`은 포커스를 유지하므로 키보드로 도달할 수 있고,
	72	+ // 클릭은 루트 `<label>`이 받는다.
	73	+ &__input {
	74	+ position: absolute;
	75	+ inline-size: 0;
	76	+ block-size: 0;
	77	+ margin: 0;
	78	+ opacity: 0;
	79	+ pointer-events: none;
	80	+ }
	81	+
	82	+ &__icon {
	83	+ display: inline-flex;
	84	+ flex-shrink: 0;
	85	+ align-items: center;
	86	+ justify-content: center;
	87	+ // 시안이 아이콘에 정사각 비율을 못박는다. 자리가 좁아 눌려도 글리프가 찌그러지지 않는다.
	88	+ aspect-ratio: 1 / 1;
	89	+ }
	90	+
	91	+ // 넘긴 SVG가 슬롯을 꽉 채운다 — 크기는 슬롯이 정하고 SVG는 따라온다.
	92	+ &__icon > * {
	93	+ inline-size: 100%;
	94	+ block-size: 100%;
	95	+ }
	96	+
	97	+ // 글자만 줄어들게 해 아이콘이 밀리지 않게 한다.
	98	+ &__label {
	99	+ min-inline-size: 0;
	100	+ }
	101	+
	102	+ // ── 크기 ────────────────────────────────────────────────────────────────────
	103	+ &--lg {
	104	+ block-size: fox.form(height-lg);
	105	+ padding-inline: fox.form(padding-lg);
	106	+ gap: fox.gap(2);
	107	+ font-size: fox.font-size(label-lg);
	108	+ }
	109	+
	110	+ &--lg &__icon {
	111	+ inline-size: fox.form(icon-lg);
	112	+ block-size: fox.form(icon-lg);
	113	+ }
	114	+
	115	+ &--md {
	116	+ block-size: fox.form(height-md);
	117	+ padding-inline: fox.form(padding-md);
	118	+ gap: fox.gap(2);
	119	+ font-size: fox.font-size(label-md);
	120	+ }
	121	+
	122	+ &--md &__icon {
	123	+ inline-size: fox.form(icon-md);
	124	+ block-size: fox.form(icon-md);
	125	+ }
	126	+
	127	+ &--sm {
	128	+ block-size: fox.form(height-sm);
	129	+ padding-inline: fox.form(padding-sm);
	130	+ gap: fox.gap(2);
	131	+ font-size: fox.font-size(label-sm);
	132	+ }
	133	+
	134	+ &--sm &__icon {
	135	+ inline-size: fox.form(icon-sm);
	136	+ block-size: fox.form(icon-sm);
	137	+ }
	138	+
	139	+ // xsm만 간격이 한 단계 좁다.
	140	+ &--xsm {
	141	+ block-size: fox.form(height-xsm);
	142	+ padding-inline: fox.form(padding-xsm);
	143	+ gap: fox.gap(1);
	144	+ font-size: fox.font-size(label-xsm);
	145	+ }
	146	+
	147	+ &--xsm &__icon {
	148	+ inline-size: fox.form(icon-xsm);
	149	+ block-size: fox.form(icon-xsm);
	150	+ }
	151	+}
	152	+
	153	+// ── 상태 ──────────────────────────────────────────────────────────────────────
	154	+// 순서가 규칙이다: hover·pressed → 켜짐 → 비활성. 뒤에 오는 것이 이긴다. `fox-radio`처럼
	155	+// 중첩 밖에 평평하게 적는다 — `:has()` 안에 전체 클래스 이름이 그대로 보여야 읽힌다.
	156	+
	157	+// 꺼져 있고 쓸 수 있을 때만 걸린다(파일 상단 ⚠️ 참고).
	158	+.fox-segmented-control-item:not(:has(.fox-segmented-control-item__input:checked)):not(
	159	+ :has(.fox-segmented-control-item__input:disabled)
	160	+ ):hover {
	161	+ background: fox.color(action-secondary-hover);
	162	+}
	163	+
	164	+// 시안의 pressed는 `:active`가 받는다.
	165	+.fox-segmented-control-item:not(:has(.fox-segmented-control-item__input:checked)):not(
	166	+ :has(.fox-segmented-control-item__input:disabled)
	167	+ ):active {
	168	+ background: fox.color(action-secondary-pressed);
	169	+}
	170	+
	171	+// 켜짐. 글자와 아이콘이 함께 반전색이 된다 — 아이콘은 `currentColor`로 그려야 따라온다.
	172	+.fox-segmented-control-item:has(.fox-segmented-control-item__input:checked) {
	173	+ border-inline-end-color: transparent;
	174	+ background: fox.color(action-secondary-active);
	175	+ color: fox.color(font-neutral-static-inverse);
	176	+}
	177	+
	178	+.fox-segmented-control-item:has(.fox-segmented-control-item__input:disabled) {
	179	+ border-inline-end-color: transparent;
	180	+ background: fox.color(element-neutral-disabled);
	181	+ color: fox.color(font-neutral-disabled-strong);
	182	+ cursor: default;
	183	+}
	184	+
	185	+// 마지막 칸은 구분선을 지운다(파일 상단 ⚠️ 참고). 켜짐·비활성 규칙과 특이도가 같아 지지
	186	+// 않도록 그 뒤에 둔다 — 어차피 셋 다 같은 값이라 누가 이겨도 결과는 같다.
	187	+.fox-segmented-control-item:last-child {
	188	+ border-inline-end-color: transparent;
	189	+}
	190	+
	191	+// ── 포커스 ────────────────────────────────────────────────────────────────────
	192	+// input이 시각적으로 숨겨져 브라우저 기본 링이 보이지 않으므로 여기서 대신 그린다.
	193	+// 안쪽으로 그리는 이유는 파일 상단 승인 목록 참고.
	194	+.fox-segmented-control-item:has(.fox-segmented-control-item__input:focus-visible) {
	195	+ outline: fox.border(2) solid fox.color(border-theme-primary);
	196	+ outline-offset: calc(-1 * #{fox.border(2)});
	197	+}

0f6c0e7

@fox/styles/_fox-segmented-control.scss (added)

+++ @fox/styles/_fox-segmented-control.scss

...	...	@@ -0,0 +1,51 @@
	1	+// FoxSegmentedControl — 시안: 통합관리자페이지 디자인시스템 Figma segmented-control
	2	+//
	3	+// 칸들을 테두리 하나로 감싸는 자리다. 시안이 주는 규칙이 배치 두 줄과 크기별 모서리뿐이라
	4	+// 이 파일도 그만큼이다 — 칸 안쪽은 `fox-segmented-control-item`이 전부 갖는다.
	5	+//
	6	+// 마크업 계약 (React 밖 소비자용):
	7	+// <div class="fox-segmented-control fox-segmented-control--lg" role="radiogroup"
	8	+// aria-label="보기 방식">
	9	+// <label class="fox-segmented-control-item fox-segmented-control-item--lg">…</label>
	10	+// <label class="fox-segmented-control-item fox-segmented-control-item--lg">…</label>
	11	+// </div>
	12	+//
	13	+// `inline-flex`라 묶음이 내용만큼만 넓다 — 옆에 다른 것을 놓을 수 있다. 줄 전체를 차지해야
	14	+// 하면 호출부가 `className`으로 폭을 준다(그것이 `className`을 여는 유일한 이유다).
	15	+//
	16	+// ⚠️ `overflow: hidden`이 필요하다. 켜진 칸과 비활성 칸은 배경이 채워지는데, 첫 칸·마지막
	17	+// 칸에서 그 사각형 배경이 묶음의 둥근 모서리 밖으로 삐져나온다. 칸마다 모서리를 주는 대신
	18	+// 묶음에서 한 번 잘라 낸다 — 칸이 몇 개든, 어느 칸이 켜지든 규칙이 하나로 끝난다.
	19	+//
	20	+// 크기가 바꾸는 것은 모서리뿐이다. 높이·여백·글자는 칸이 갖는다 — 그래서 묶음과 칸의
	21	+// `size`가 어긋나면 안 되고, React 쪽에서 묶음이 자식 값을 덮어쓴다.
	22	+//
	23	+// 토큰이 아닌 값:
	24	+// - box-sizing / display / flex / overflow: 구조 규칙.
	25	+
	26	+@use "@fox/styles/abstracts" as fox;
	27	+
	28	+.fox-segmented-control {
	29	+ box-sizing: border-box;
	30	+ display: inline-flex;
	31	+ align-items: center;
	32	+ // 채워진 칸 배경을 둥근 모서리로 잘라 낸다(파일 상단 ⚠️ 참고).
	33	+ overflow: hidden;
	34	+ border: fox.border(1) solid fox.color(border-neutral-default);
	35	+
	36	+ &--lg {
	37	+ border-radius: fox.form(radius-lg);
	38	+ }
	39	+
	40	+ &--md {
	41	+ border-radius: fox.form(radius-md);
	42	+ }
	43	+
	44	+ &--sm {
	45	+ border-radius: fox.form(radius-sm);
	46	+ }
	47	+
	48	+ &--xsm {
	49	+ border-radius: fox.form(radius-xsm);
	50	+ }
	51	+}

0f6c0e7

@fox/styles/_fox-select-text.scss (added)

+++ @fox/styles/_fox-select-text.scss

...	...	@@ -0,0 +1,163 @@
	1	+// FoxSelectText — 시안: 통합관리자페이지 디자인시스템 Figma select-txt
	2	+//
	3	+// 글자만 있는 셀렉트다. 테두리도 고정 높이도 없고, 배경만 세 상태로 바뀐다.
	4	+//
	5	+// 마크업 계약 (React 밖 소비자용):
	6	+// <div class="fox-select-text fox-select-text--lg"> <!-- 목록의 위치 기준 -->
	7	+// <button type="button" class="fox-select-text__trigger" id="st" role="combobox"
	8	+// aria-haspopup="listbox" aria-expanded="true" aria-controls="st-listbox">
	9	+// <span class="fox-select-text__value">2026년 8월</span>
	10	+// <span class="fox-select-text__icon">…화살표 svg…</span>
	11	+// </button>
	12	+// <ul class="fox-select-option fox-select-text__list" id="st-listbox" role="listbox">
	13	+// <li class="fox-select-option-item" …>…</li>
	14	+// </ul> <!-- 열렸을 때만 -->
	15	+// </div>
	16	+//
	17	+// `fox-select`와 무엇이 다른가: 폼 한 칸이 아니다. 라벨·힌트·에러·필수 표시가 없고,
	18	+// 배경 계열도 다르다 — `fox-select`는 중립(`action-default`, 흰 바탕에 테두리)이지만 이쪽은
	19	+// 강조(`action-primary`) 계열이라 기본이 투명이고 hover·pressed에서만 연한 파랑이 깔린다.
	20	+// 크기가 글자 계열까지 바꾸는 것도 여기뿐이다 — lg는 heading/md(제목용 20px bold,
	21	+// `font-family-title`), md·sm은 label/*-strong(본문용 medium)이다. 폼 한 칸이라면 크기를
	22	+// 바꿨다고 제목 폰트가 될 이유가 없다. 즉 이것은 "지금 무엇을 보고 있는지"를 글자로 보여
	23	+// 주면서 그 자리에서 바꾸게 하는 컨트롤이다.
	24	+//
	25	+// 크기가 바꾸는 것: 여백·간격·글자(계열·크기·굵기·줄높이)·아이콘 크기·글자 색. 모서리만
	26	+// 세 크기가 같다(`form-radius-xsm`).
	27	+//
	28	+// ⚠️ lg만 위아래 여백이 없다(`padding: 0 var(--padding-2)`). md·sm은 사방에 준다 — 시안이
	29	+// 그렇게 준다. lg는 줄높이가 140%라 그 자체로 위아래 여백을 만든다.
	30	+//
	31	+// ⚠️ 비활성은 시안에 없다. 색을 임의로 만들지 않고 hover·pressed만 막는다 — 네이티브
	32	+// `disabled`를 주면 커서와 클릭만 죽고 모양은 기본과 같다(`fox-tag`와 같은 처리).
	33	+//
	34	+// 토큰이 아닌 값(`fox-button`·`fox-tag`와 동일한 근거로 승인된 항목):
	35	+// - letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로 export하지 않는다. 세 크기가
	36	+// 모두 `-0.025em`이라 규칙 하나로 끝난다(20px→-0.5px, 15px→-0.375px, 13px→-0.325px).
	37	+// px이 아니라 em인 이유는 글자 크기가 크기 수식어마다, 그리고 브레이크포인트마다
	38	+// 달라지기 때문이다 — px으로 박으면 그 자리에서 비율이 어긋난다.
	39	+// - line-height 1.4 / 1: 시안의 140% / 100%. 비율이라 토큰 스케일에 대응이 없다.
	40	+// - box-sizing / display / flex / cursor / white-space / aspect-ratio: 구조·상호작용 규칙.
	41	+// - `fox-select-text__list`의 위치·폭: 구조 규칙(아래 주석 참고).
	42	+
	43	+@use "@fox/styles/abstracts" as fox;
	44	+
	45	+// 목록의 위치 기준. `inline-block`인 이유는 글자만큼만 넓어야 하기 때문이다 — 블록이면 줄
	46	+// 전체를 차지해 제목 옆에 다른 것을 놓을 수 없다.
	47	+.fox-select-text {
	48	+ position: relative;
	49	+ display: inline-block;
	50	+
	51	+ &__trigger {
	52	+ // 여백이 바깥 크기를 늘리지 않게 한다.
	53	+ box-sizing: border-box;
	54	+ display: inline-flex;
	55	+ align-items: center;
	56	+ border: none;
	57	+ border-radius: fox.form(radius-xsm);
	58	+ background: fox.color(action-primary);
	59	+ cursor: pointer;
	60	+
	61	+ letter-spacing: -0.025em;
	62	+ white-space: nowrap;
	63	+
	64	+ &:hover:not(:disabled) {
	65	+ background: fox.color(action-primary-hover);
	66	+ }
	67	+
	68	+ // 시안의 pressed는 `:active`가 받는다.
	69	+ &:active:not(:disabled) {
	70	+ background: fox.color(action-primary-pressed);
	71	+ }
	72	+
	73	+ &:disabled {
	74	+ cursor: default;
	75	+ }
	76	+ }
	77	+
	78	+ // 글자만 줄어들게 해 화살표가 밀리지 않게 한다.
	79	+ &__value {
	80	+ min-inline-size: 0;
	81	+ }
	82	+
	83	+ &__icon {
	84	+ display: inline-flex;
	85	+ flex-shrink: 0;
	86	+ align-items: center;
	87	+ justify-content: center;
	88	+ // 시안이 아이콘에 정사각 비율을 못박는다. 자리가 좁아 눌려도 글리프가 찌그러지지 않는다.
	89	+ aspect-ratio: 1 / 1;
	90	+ }
	91	+
	92	+ // 넘긴 SVG가 슬롯을 꽉 채운다 — 크기는 슬롯이 정하고 SVG는 따라온다.
	93	+ &__icon > * {
	94	+ inline-size: 100%;
	95	+ block-size: 100%;
	96	+ }
	97	+
	98	+ // ── 크기 ────────────────────────────────────────────────────────────────────
	99	+ // lg만 제목 계열이다(파일 상단 주석 참고).
	100	+ &--lg &__trigger {
	101	+ padding-block: 0;
	102	+ padding-inline: fox.padding(2);
	103	+ gap: fox.gap(2);
	104	+ color: fox.color(font-neutral-strong);
	105	+ font-family: fox.font-family(title);
	106	+ font-size: fox.font-size(heading-md);
	107	+ font-weight: fox.font-weight(bold);
	108	+ line-height: 1.4;
	109	+ }
	110	+
	111	+ &--lg &__icon {
	112	+ inline-size: fox.form(icon-md);
	113	+ block-size: fox.form(icon-md);
	114	+ }
	115	+
	116	+ &--md &__trigger {
	117	+ padding: fox.padding(2);
	118	+ gap: fox.gap(2);
	119	+ color: fox.color(font-neutral-default);
	120	+ font-family: fox.font-family(body);
	121	+ font-size: fox.font-size(label-md);
	122	+ font-weight: fox.font-weight(medium);
	123	+ line-height: 1;
	124	+ }
	125	+
	126	+ &--md &__icon {
	127	+ inline-size: fox.form(icon-sm);
	128	+ block-size: fox.form(icon-sm);
	129	+ }
	130	+
	131	+ // sm만 여백과 간격이 한 단계 좁다.
	132	+ &--sm &__trigger {
	133	+ padding: fox.padding(1);
	134	+ gap: fox.gap(1);
	135	+ color: fox.color(font-neutral-default);
	136	+ font-family: fox.font-family(body);
	137	+ font-size: fox.font-size(label-sm);
	138	+ font-weight: fox.font-weight(medium);
	139	+ line-height: 1;
	140	+ }
	141	+
	142	+ &--sm &__icon {
	143	+ inline-size: fox.form(icon-xsm);
	144	+ block-size: fox.form(icon-xsm);
	145	+ }
	146	+}
	147	+
	148	+// `fox-select-option`의 기본값은 `inset-inline: 0`, 즉 여는 요소와 같은 폭이다. 폼 한 칸을
	149	+// 채우는 셀렉트에서는 맞지만 이쪽은 글자만큼만 좁아서 목록이 읽을 수 없게 눌린다. 왼쪽만
	150	+// 맞추고 폭은 내용이 정하게 한다.
	151	+//
	152	+// ⚠️ `min-inline-size: 100%`(트리거보다 좁아지지 말 것)를 걸지 않는다. 퍼센트는 위치 기준인
	153	+// `.fox-select-text`의 폭을 보는데, 이 요소는 `inline-block`이라 세로 flex·grid 안에 놓이면
	154	+// 부모의 `align-items: stretch`에 늘어난다. 그러면 목록이 그 늘어난 폭을 그대로 물려받아
	155	+// 화면을 가로지른다 — 목록 폭이 호출부 레이아웃에 끌려다니게 된다. 내용 폭만 보면 어디에
	156	+// 놓이든 목록은 같은 크기다.
	157	+//
	158	+// 클래스 둘을 겹쳐 적는다 — 한쪽이 `inset-inline` 단축, 이쪽이 `inset-inline-end` 낱개라
	159	+// 특정도가 같으면 파일을 @use 하는 순서가 승부를 가른다. 겹쳐 두면 순서와 무관하게 이긴다.
	160	+.fox-select-option.fox-select-text__list {
	161	+ inset-inline-end: auto;
	162	+ inline-size: max-content;
	163	+}

0f6c0e7

@fox/styles/_fox-toggle-quantity.scss (added)

+++ @fox/styles/_fox-toggle-quantity.scss

...	...	@@ -0,0 +1,115 @@
	1	+// FoxToggleQuantity — 시안: 통합관리자페이지 디자인시스템 Figma toggle-quantity
	2	+//
	3	+// 회색 판 위에 빼기 버튼 · 숫자 · 더하기 버튼이 놓인다. 크기 수식어가 없다 — 시안이 한 벌만
	4	+// 준다.
	5	+//
	6	+// 마크업 계약 (React 밖 소비자용):
	7	+// <div class="fox-toggle-quantity" role="group" aria-label="수량">
	8	+// <button type="button" class="fox-toggle-quantity__button" aria-label="수량 줄이기" disabled>
	9	+// <span class="fox-toggle-quantity__icon">…빼기 svg…</span>
	10	+// </button>
	11	+// <span class="fox-toggle-quantity__value" aria-live="polite">1</span>
	12	+// <button type="button" class="fox-toggle-quantity__button" aria-label="수량 늘리기">
	13	+// <span class="fox-toggle-quantity__icon">…더하기 svg…</span>
	14	+// </button>
	15	+// </div>
	16	+//
	17	+// 숫자가 `flex: 1 0 0`이라 남는 자리를 혼자 가져간다 — 버튼 둘은 크기가 고정이므로 값이
	18	+// 한 자리든 세 자리든 버튼 위치가 흔들리지 않는다.
	19	+//
	20	+// ⚠️ 버튼이 `fox-icon-button`이 아니다. `fox-icon-button--sm`과 크기(28)·모서리(4)·아이콘
	21	+// 슬롯(20)이 전부 같지만 배경이 다르다 — 아이콘 버튼의 `default` 계열은
	22	+// `button-default-surface`(투명)인데 이 시안은 `action-default`(불투명 흰색)다. 회색 판
	23	+// 위에 놓이므로 투명이면 판 색이 그대로 비쳐 버튼이 사라진다. 아이콘 버튼에 흰 배경 계열이
	24	+// 생기면 그때 이 규칙을 걷어내고 갈아탄다.
	25	+//
	26	+// 비활성은 배경만 바뀐다 — 시안이 disabled에 `border`를 적지 않아 테두리를 지운다(투명으로
	27	+// 두어 폭은 남긴다. 지우면 28×28이 26×26이 되어 판 안에서 자리가 밀린다).
	28	+//
	29	+// 토큰이 아닌 값:
	30	+// - ⚠️ `inline-size: 14rem`: 시안의 폭(140px)을 일단 그대로 적용해 둔 것이다. Figma가
	31	+// 변수로 export하지 않았고 토큰 스케일에도 140이 없어서 원시값으로 남아 있다. 토큰이
	32	+// 생기면 `fox.*()`로 바꾸고, 폭을 고정하지 않는 쪽으로 정해지면 여기서 뺀다.
	33	+// 그때까지 폭을 바꿔야 하는 자리는 호출부가 `className`으로 덮는다.
	34	+// - letter-spacing: 시안 텍스트 스타일 label/lg-em의 값이나 Figma가 변수로 export하지
	35	+// 않는다. `-0.025em`이면 17px에서 -0.425px로 시안과 같고, 글자 크기가 브레이크포인트마다
	36	+// 달라져도 비율이 유지된다(다른 컴포넌트와 같은 근거).
	37	+// - 아이콘 색 `fox.primitive(neutral-60)`: 시안 값 `#58616A`를 가진 semantic 토큰이 없다
	38	+// (icon 계열에 있는 것은 neutral-70인 `icon-neutral-default`와 neutral-50인
	39	+// `icon-neutral-subtle`뿐이다). 그래서 시안이 가리키는 원시값을 직접 쓴다 —
	40	+// `fox-select-option`이 그림자 색에 `alpha-black10`을 직접 쓰는 것과 같은 방식이다.
	41	+//
	42	+// ⚠️ 원시값이라 다크 모드에서 뒤집히지 않는다 — 밝은 회색 아이콘이 어두운 버튼 위에
	43	+// 그대로 남는다(`action-default`는 다크에서 neutral-100이라 대비는 확보된다). 반전이
	44	+// 필요해지면 Figma에서 icon 계열에 neutral-60을 추가한 뒤 그 토큰으로 바꾼다.
	45	+// - box-sizing / display / flex / cursor / aspect-ratio: 구조·상호작용 규칙.
	46	+
	47	+@use "@fox/styles/abstracts" as fox;
	48	+
	49	+.fox-toggle-quantity {
	50	+ // 안쪽 여백이 바깥 폭을 늘리지 않게 한다 — 시안의 140px은 테두리까지 포함한 값이다.
	51	+ box-sizing: border-box;
	52	+ display: flex;
	53	+ justify-content: center;
	54	+ align-items: center;
	55	+ // ⚠️ 시안 값을 일단 적용해 둔 상태다 — 파일 상단 주석 참고.
	56	+ inline-size: 14rem;
	57	+ padding: fox.padding(2);
	58	+ gap: fox.gap(2);
	59	+ border-radius: fox.radius(4);
	60	+ background: fox.color(surface-neutral-gray);
	61	+
	62	+ &__button {
	63	+ box-sizing: border-box;
	64	+ display: flex;
	65	+ flex-shrink: 0;
	66	+ justify-content: center;
	67	+ align-items: center;
	68	+ inline-size: fox.form(height-sm);
	69	+ block-size: fox.form(height-sm);
	70	+ // 시안이 버튼에 정사각 비율을 못박는다. 자리가 좁아 눌려도 모양이 무너지지 않는다.
	71	+ aspect-ratio: 1 / 1;
	72	+ padding: 0;
	73	+ border: fox.border(1) solid fox.color(button-default-border);
	74	+ border-radius: fox.form(radius-sm);
	75	+ background: fox.color(action-default);
	76	+ // 시안 값을 가진 semantic 토큰이 없어 원시값을 직접 쓴다(파일 상단 승인 항목 참고).
	77	+ color: fox.primitive(neutral-60);
	78	+ cursor: pointer;
	79	+
	80	+ &:disabled {
	81	+ // 테두리를 지우지 않고 투명으로 둔다(파일 상단 주석 참고).
	82	+ border-color: transparent;
	83	+ background: fox.color(button-disabled-surface);
	84	+ cursor: default;
	85	+ }
	86	+ }
	87	+
	88	+ &__icon {
	89	+ display: inline-flex;
	90	+ flex-shrink: 0;
	91	+ align-items: center;
	92	+ justify-content: center;
	93	+ inline-size: fox.icon(4);
	94	+ block-size: fox.icon(4);
	95	+ aspect-ratio: 1 / 1;
	96	+ }
	97	+
	98	+ // 넘긴 SVG가 슬롯을 꽉 채운다 — 크기는 슬롯이 정하고 SVG는 따라온다.
	99	+ &__icon > * {
	100	+ inline-size: 100%;
	101	+ block-size: 100%;
	102	+ }
	103	+
	104	+ // 남는 자리를 혼자 가져간다 — `flex-basis: 0`이라 글자 길이가 버튼 위치를 밀지 않는다.
	105	+ &__value {
	106	+ flex: 1 0 0;
	107	+ color: fox.color(font-neutral-strong);
	108	+ font-family: fox.font-family(body);
	109	+ font-size: fox.font-size(label-lg);
	110	+ font-weight: fox.font-weight(bold);
	111	+ line-height: 1;
	112	+ letter-spacing: -0.025em;
	113	+ text-align: center;
	114	+ }
	115	+}

e67a86e

0f6c0e7

@fox/styles/components.scss

--- @fox/styles/components.scss

+++ @fox/styles/components.scss


 @use "fox-check-icon";
 @use "fox-checkbox";
 @use "fox-checkbox-group";
+@use "fox-chip";
+@use "fox-chip-area";
+@use "fox-chip-select-option";
 @use "fox-conditional-option";
 @use "fox-email";
 @use "fox-file-upload";

 @use "fox-radio";
 @use "fox-radio-group";
 @use "fox-radio-icon";
+@use "fox-segmented-control";
+@use "fox-segmented-control-item";
 @use "fox-select";
 @use "fox-select-option";
 @use "fox-select-option-item";
+@use "fox-select-text";
 @use "fox-tag";
 @use "fox-tag-list";
 @use "fox-text-area";

 @use "fox-tab";
 @use "fox-tab-item";
 @use "fox-spinner";
+@use "fox-toggle-quantity";

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,6 +1,7 @@
1	1	"use client";
2	2
3	3	import {
	4	+ Fragment,
4	5	useEffect,
5	6	useId,
6	7	useRef,
...	...	@@ -15,6 +16,7 @@
15	16	import { FoxSelectOptionItem } from "../fox-select-option-item";
16	17
17	18	export type FoxSelectSize = "sm" \| "md" \| "lg";
	19	+export type FoxSelectSelectionMode = "single" \| "multiple";
18	20
19	21	/** 옵션 하나의 데이터. 그리는 일은 `FoxSelectOptionItem`이 한다. */
20	22	export interface FoxSelectItem {
...	...	@@ -29,7 +31,17 @@
29	31	export interface FoxSelectProps {
30	32	size: FoxSelectSize;
31	33	options: FoxSelectItem[];
32		- /** 주면 제어 컴포넌트가 된다 — 호출부가 소유하고, select가 스스로 바꾸지 않는다. */
	34	+ /**
	35	+ * 하나만 고를지 여러 개를 고를지 정한다. 값 prop이 계열마다 다르다 —
	36	+ * `single`은 `value`·`defaultValue`·`onValueChange`(문자열), `multiple`은
	37	+ * `values`·`defaultValues`·`onValuesChange`(문자열 배열)를 쓴다.
	38	+ *
	39	+ * `multiple`이면 트리거에 고른 옵션의 라벨이 쉼표로 이어져 보이고, 하나를 골라도
	40	+ * 목록이 닫히지 않는다 — 여러 개를 연달아 고르는 것이 목적이라 누를 때마다 닫히면 쓸 수
	41	+ * 없다. 닫는 것은 바깥 클릭·Escape·Tab이다(`FoxChip`의 select와 같은 규칙).
	42	+ */
	43	+ selectionMode?: FoxSelectSelectionMode;
	44	+ /** 단일 선택에서만 쓴다. 주면 제어 컴포넌트가 된다 — 호출부가 소유하고, select가 스스로 바꾸지 않는다. */
33	45	value?: string;
34	46	/**
35	47	* 비제어로 쓸 때의 초기 값. `value`를 주면 무시된다.
...	...	@@ -49,6 +61,12 @@
49	61	* 게다가 `FoxEmail`·`FoxPhoneNumber`가 이 이름으로 호출하고 있어 바꾸면 함께 깨진다.
50	62	*/
51	63	onValueChange?: (value: string) => void;
	64	+ /** 다중 선택에서만 쓴다. 주면 제어 컴포넌트가 된다. */
	65	+ values?: string[];
	66	+ /** 다중 선택에서만 쓴다. 비제어일 때의 초기 값들. `values`를 주면 무시된다. */
	67	+ defaultValues?: string[];
	68	+ / 다중 선택에서만 쓴다. 켜고 끌 때마다 바뀐 뒤의 전체 목록*이 넘어온다. /
	69	+ onValuesChange?: (values: string[]) => void;
52	70	/** 아무 옵션도 선택되지 않았을 때 트리거에 보여줄 문구. */
53	71	placeholder?: ReactNode;
54	72	/** Figma 시안의 error 상태. */
...	...	@@ -97,9 +115,13 @@
97	115	export function FoxSelect({
98	116	size,
99	117	options,
	118	+ selectionMode = "single",
100	119	value,
101	120	defaultValue,
102	121	onValueChange,
	122	+ values,
	123	+ defaultValues,
	124	+ onValuesChange,
103	125	placeholder = "선택해주세요",
104	126	error,
105	127	disabled = false,
...	...	@@ -115,14 +137,38 @@
115	137	ref,
116	138	}: FoxSelectProps) {
117	139	const isDisabled = disabled \|\| readOnly;
	140	+ const isMultiple = selectionMode === "multiple";
118	141	const [open, setOpen] = useState(false);
119	142	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
	143	+ const [uncontrolledValues, setUncontrolledValues] = useState<string[]>(defaultValues ?? []);
120	144	const [activeIndex, setActiveIndex] = useState(-1);
121	145	const rootRef = useRef<HTMLDivElement>(null);
122	146
123	147	const currentValue = value ?? uncontrolledValue;
124		- const selectedIndex = options.findIndex((option) => option.value === currentValue);
125		- const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : undefined;
	148	+ const currentValues = values ?? uncontrolledValues;
	149	+
	150	+ const isSelected = (optionValue: string) =>
	151	+ isMultiple ? currentValues.includes(optionValue) : optionValue === currentValue;
	152	+
	153	+ // 화살표가 어디서 시작할지 정한다. 다중 선택에서는 켜진 것 중 첫 번째다.
	154	+ const selectedIndex = options.findIndex((option) => isSelected(option.value));
	155	+ const selectedOptions = options.filter((option) => isSelected(option.value));
	156	+
	157	+ // 트리거에 보이는 것. 다중이면 고른 라벨을 쉼표로 잇는다 — 라벨이 ReactNode일 수 있어
	158	+ // `join`을 쓰지 못하므로 사이에 구분자를 끼워 넣는다.
	159	+ const displayValue =
	160	+ selectedOptions.length === 0 ? (
	161	+ placeholder
	162	+ ) : isMultiple ? (
	163	+ selectedOptions.map((option, index) => (
	164	+ <Fragment key={option.value}>
	165	+ {index > 0 ? ", " : null}
	166	+ {option.label}
	167	+ </Fragment>
	168	+ ))
	169	+ ) : (
	170	+ selectedOptions[0].label
	171	+ );
126	172
127	173	const generatedId = useId();
128	174	const triggerId = id ?? generatedId;
...	...	@@ -163,9 +209,27 @@
163	209	setOpen(true);
164	210	}
165	211
	212	+ /**
	213	+ * 제어 컴포넌트일 때는 내부 값을 건드리지 않는다 — 건드리면 호출부가 값을 거부해도
	214	+ * 내부에만 반영되어 둘이 조용히 갈라진다.
	215	+ */
166	216	function commit(next: string) {
167		- // 제어 컴포넌트일 때는 내부 값을 건드리지 않는다 — 건드리면 호출부가 값을 거부해도
168		- // 내부에만 반영되어 둘이 조용히 갈라진다.
	217	+ if (isMultiple) {
	218	+ // 이미 켜져 있으면 끈다. 순서는 `options`가 정한 순서를 따라가게 다시 추린다 —
	219	+ // 누른 순서대로 쌓으면 같은 조합인데도 배열이 달라져 비교·저장이 흔들리고, 트리거에
	220	+ // 이어 붙는 글자 순서도 목록과 어긋난다.
	221	+ const nextValues = currentValues.includes(next)
	222	+ ? currentValues.filter((item) => item !== next)
	223	+ : options
	224	+ .filter((option) => option.value === next \|\| currentValues.includes(option.value))
	225	+ .map((option) => option.value);
	226	+
	227	+ if (values === undefined) setUncontrolledValues(nextValues);
	228	+ onValuesChange?.(nextValues);
	229	+ // 목록을 닫지 않는다 — 여러 개를 연달아 고르는 것이 목적이다.
	230	+ return;
	231	+ }
	232	+
169	233	if (value === undefined) setUncontrolledValue(next);
170	234	onValueChange?.(next);
171	235	setOpen(false);
...	...	@@ -259,17 +323,21 @@
259	323	aria-readonly={readOnly \|\| undefined}
260	324	className={cx(
261	325	"fox-select__trigger",
262		- selectedOption && "fox-select__trigger--completed"
	326	+ selectedOptions.length > 0 && "fox-select__trigger--completed"
263	327	)}
264	328	onClick={() => (open ? setOpen(false) : openList())}
265	329	onKeyDown={handleTriggerKeyDown}
266	330	>
267		- <span className="fox-select__value">{selectedOption?.label ?? placeholder}</span>
	331	+ <span className="fox-select__value">{displayValue}</span>
268	332	<ChevronIcon className="fox-select__icon" />
269	333	</button>
270	334
271	335	{open ? (
272		- <FoxSelectOption id={listboxId} labelledBy={label ? labelId : undefined}>
	336	+ <FoxSelectOption
	337	+ id={listboxId}
	338	+ labelledBy={label ? labelId : undefined}
	339	+ multiselectable={isMultiple}
	340	+ >
273	341	{options.map((option, index) => (
274	342	<FoxSelectOptionItem
275	343	key={option.value}
...	...	@@ -277,7 +345,7 @@
277	345	label={option.label}
278	346	icon={option.icon}
279	347	danger={option.danger}
280		- selected={option.value === currentValue}
	348	+ selected={isSelected(option.value)}
281	349	active={index === activeIndex}
282	350	onHover={() => setActiveIndex(index)}
283	351	onSelect={() => commit(option.value)}

...	...	@@ -15,6 +15,9 @@
15	15	export * from "./fox-check-icon";
16	16	export * from "./fox-checkbox";
17	17	export * from "./fox-checkbox-group";
	18	+export * from "./fox-chip";
	19	+export * from "./fox-chip-area";
	20	+export * from "./fox-chip-select-option";
18	21	export * from "./fox-conditional-option";
19	22	export * from "./fox-email";
20	23	export * from "./fox-file-upload";
...	...	@@ -27,9 +30,12 @@
27	30	export * from "./fox-radio";
28	31	export * from "./fox-radio-group";
29	32	export * from "./fox-radio-icon";
	33	+export * from "./fox-segmented-control";
	34	+export * from "./fox-segmented-control-item";
30	35	export * from "./fox-select";
31	36	export * from "./fox-select-option";
32	37	export * from "./fox-select-option-item";
	38	+export * from "./fox-select-text";
33	39	export * from "./fox-spinner";
34	40	export * from "./fox-tab";
35	41	export * from "./fox-tab-item";
...	...	@@ -40,4 +46,6 @@
40	46	export * from "./fox-tag-list";
41	47	export * from "./fox-text-area";
42	48	export * from "./fox-text-button";
	49	+export * from "./fox-toggle-quantity";
43	50	export * from "./fox-toggle-switch";
	51	+

...	...	@@ -417,6 +417,10 @@
417	417	}
418	418
419	419	// 그룹 예제용. 그룹이 블록 레벨이라 정렬·줄바꿈을 보려면 폭이 정해진 무대가 필요하다.
	420	+//
	421	+// ⚠️ 세로 flex의 기본 `align-items: stretch`가 자식을 가로로 늘린다. 인라인 컨트롤
	422	+// (`inline-flex`·`inline-block`인 것들)을 여러 줄로 쌓아 비교할 때는 아래 `demoStackStart`를
	423	+// 쓴다 — 이걸 쓰면 컴포넌트가 제 폭을 잃어 실제 모습과 다르게 보인다.
420	424	.demoStack {
421	425	display: flex;
422	426	flex-direction: column;
...	...	@@ -424,6 +428,14 @@
424	428	inline-size: 100%;
425	429	}
426	430
	431	+// 인라인 컨트롤을 세로로 쌓아 비교할 때. 자식이 늘어나지 않아 제 폭 그대로 보인다.
	432	+.demoStackStart {
	433	+ display: flex;
	434	+ flex-direction: column;
	435	+ align-items: flex-start;
	436	+ gap: fox.gap(4);
	437	+}
	438	+
427	439	.demoOutline {
428	440	padding: fox.padding(3);
429	441	border: fox.border(1) dashed fox.color(border-neutral-subtle);

...	...	@@ -12,6 +12,9 @@
12	12	@use "fox-check-icon";
13	13	@use "fox-checkbox";
14	14	@use "fox-checkbox-group";
	15	+@use "fox-chip";
	16	+@use "fox-chip-area";
	17	+@use "fox-chip-select-option";
15	18	@use "fox-conditional-option";
16	19	@use "fox-email";
17	20	@use "fox-file-upload";
...	...	@@ -21,9 +24,12 @@
21	24	@use "fox-radio";
22	25	@use "fox-radio-group";
23	26	@use "fox-radio-icon";
	27	+@use "fox-segmented-control";
	28	+@use "fox-segmented-control-item";
24	29	@use "fox-select";
25	30	@use "fox-select-option";
26	31	@use "fox-select-option-item";
	32	+@use "fox-select-text";
27	33	@use "fox-tag";
28	34	@use "fox-tag-list";
29	35	@use "fox-text-area";
...	...	@@ -44,3 +50,4 @@
44	50	@use "fox-tab";
45	51	@use "fox-tab-item";
46	52	@use "fox-spinner";
	53	+@use "fox-toggle-quantity";

Delete comment