@uniai-fe/uds-primitives 0.3.19 → 0.3.21

package/src/components/select/markup/Default.tsx

@@ -2,8 +2,8 @@
 
 import clsx from "clsx";
 import { forwardRef, useEffect, useMemo, useState } from "react";
+import type { ReactNode } from "react";
 
-import type { DropdownSize } from "../../dropdown/types";
 import { Dropdown } from "../../dropdown/markup";
 import { SelectTriggerBase, SelectTriggerSelected } from "./foundation";
 import Container from "./foundation/Container";
@@ -18,31 +18,49 @@ const isSameIdList = (previousIds: string[], nextIds: string[]) =>
 const normalizeSingleSelectedIds = (selectedIds: string[]) =>
   selectedIds.length > 0 ? [selectedIds[0]] : [];
 
+const toInputText = (value?: ReactNode): string => {
+  if (typeof value === "string" || typeof value === "number") {
+    return String(value);
+  }
+
+  return "";
+};
+
+const SELECT_CUSTOM_OPTION_BASE_ID = "__select_custom_input__";
+const SELECT_CUSTOM_OPTION_VALUE = "CUSTOM";
+
 /**
  * Select default trigger; 단일 선택 드롭다운을 렌더링한다.
  * @component
  * @param {SelectDefaultComponentProps} props default trigger props
- * @param {SelectDropdownOption[]} [props.options] dropdown option 목록
- * @param {string[]} [props.selectedOptionIds] 선택된 option id 리스트
- * @param {(payload: SelectOptionChangePayload) => void} [props.onChange] 선택 결과 변경 콜백
- * @param {(option: SelectDropdownOption) => void} [props.onOptionSelect] option 선택 콜백
- * @param {"primary" | "secondary" | "table"} [props.priority="primary"] priority 스케일
- * @param {"small" | "medium" | "large"} [props.size="medium"] size 스케일
- * @param {"default" | "focused" | "disabled"} [props.state="default"] 시각 상태
- * @param {boolean} [props.block] block 여부
- * @param {FormFieldWidth} [props.width] container width preset
+ * @param {string} [props.className] container className
+ * @param {ReactNode} [props.displayLabel] 강제 표시 라벨
+ * @param {ReactNode} [props.placeholder] 기본 placeholder
+ * @param {"primary" | "secondary" | "table"} [props.priority="primary"] trigger priority
+ * @param {"xsmall" | "small" | "medium" | "large"} [props.size="medium"] trigger size
+ * @param {"default" | "focused" | "error" | "disabled"} [props.state="default"] trigger state
+ * @param {boolean} [props.block] block 레이아웃 여부
+ * @param {FormFieldWidth} [props.width] container width
  * @param {boolean} [props.disabled] disabled 여부
  * @param {boolean} [props.readOnly] readOnly 여부
- * @param {SelectTriggerButtonType} [props.buttonType] trigger button type
- * @param {"small" | "medium" | "large"} [props.dropdownSize] dropdown panel size
- * @param {"match" | "fit-content" | "max-content" | string | number} [props.dropdownWidth="match"] dropdown panel width
- * @param {Omit<DropdownMenuProps, "open" | "defaultOpen" | "onOpenChange">} [props.dropdownRootProps] Dropdown.Root 전달 props
- * @param {Omit<DropdownContainerProps, "children" | "size" | "width">} [props.dropdownContainerProps] Dropdown.Container 전달 props
- * @param {DropdownMenuListProps} [props.dropdownMenuListProps] Dropdown.Menu.List 전달 props
- * @param {ReactNode} [props.alt] empty 상태 대체 콘텐츠
- * @param {boolean} [props.open] controlled open 상태
- * @param {boolean} [props.defaultOpen] uncontrolled 초기 open 상태
- * @param {(open: boolean) => void} [props.onOpenChange] open 상태 변경 콜백
+ * @param {"button" | "submit" | "reset"} [props.buttonType] trigger button type
+ * @param {SelectDropdownOption[]} props.items dropdown 아이템 목록
+ * @param {SelectCallbackParams} [props.onSelectOption] option interaction 콜백
+ * @param {SelectCallbackParams} [props.onSelectChange] selection change 콜백
+ * @param {SelectDropdownExtension} [props.dropdownOptions] dropdown 확장 옵션
+ * @param {boolean} [props.open] controlled open 값
+ * @param {boolean} [props.defaultOpen] uncontrolled 초기 open 값
+ * @param {(open: boolean) => void} [props.onOpen] open 변경 콜백
+ * @param {HTMLAttributes<HTMLElement>} [props.triggerProps] trigger native props
+ * @param {UseFormRegisterReturn} [props.register] value field register
+ * @param {UseFormRegisterReturn} [props.customRegister] custom label register
+ * @param {SelectCustomOptions} [props.customOptions] 직접입력 옵션 구성
+ * @param {SelectCustomInputProps} [props.inputProps] label input native 속성
+ * @example
+ * <Select.Default
+ *   items={[{ id: "apple", value: "APPLE", label: "사과" }]}
+ *   placeholder="품목을 선택하세요"
+ * />
  */
 const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
   (
@@ -55,168 +73,122 @@ const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
       state = "default",
       block,
       width,
-      isOpen,
       disabled,
       readOnly,
       buttonType,
-      options = [],
-      selectedOptionIds,
-      onChange,
-      onOptionSelect,
-      dropdownSize,
-      dropdownWidth = "match",
-      dropdownRootProps,
-      dropdownContainerProps,
-      dropdownMenuListProps,
-      alt,
+      items,
+      onSelectOption,
+      onSelectChange,
+      dropdownOptions,
       open,
       defaultOpen,
-      onOpenChange,
-      ...rest
+      onOpen,
+      triggerProps,
+      register,
+      customRegister,
+      customOptions,
+      inputProps,
     },
     ref,
   ) => {
-    /**
-     * 1) 레이아웃 기본값 계산
-     * - table priority는 셀 컨텍스트에서 full width가 기본 동작이므로
-     *   width 미지정 시 block=true처럼 동작하도록 보정한다.
-     * - 이 값은 trigger/container 양쪽에서 동일하게 사용한다.
-     */
+    // 1) table priority + width 미지정 조합에서는 block을 기본 동작으로 사용한다.
     const resolvedBlock =
       block || (priority === "table" && width === undefined);
+    // 1-1) xsmall은 primary 전용이므로 secondary/table에서는 small로 fallback한다.
+    const resolvedSize =
+      priority !== "primary" && size === "xsmall" ? "small" : size;
+
+    // 2) custom mode의 입력값은 내부 state로 유지한다.
+    const [customLabelValue, setCustomLabelValue] = useState("");
+
+    // 3) custom option id가 기존 item id와 충돌하지 않도록 안전한 id를 만든다.
+    const customOptionId = useMemo(() => {
+      const existingIdSet = new Set(items.map(option => option.id));
+      if (!existingIdSet.has(SELECT_CUSTOM_OPTION_BASE_ID)) {
+        return SELECT_CUSTOM_OPTION_BASE_ID;
+      }
+
+      let offset = 1;
+      let nextId = `${SELECT_CUSTOM_OPTION_BASE_ID}_${offset}`;
+      while (existingIdSet.has(nextId)) {
+        offset += 1;
+        nextId = `${SELECT_CUSTOM_OPTION_BASE_ID}_${offset}`;
+      }
+      return nextId;
+    }, [items]);
+
+    // 4) customOptions가 있으면 dropdown 마지막에 "직접 입력" 항목을 주입한다.
+    const mergedOptions = useMemo(() => {
+      if (!customOptions) {
+        return items;
+      }
+
+      return [
+        ...items,
+        {
+          id: customOptionId,
+          value: SELECT_CUSTOM_OPTION_VALUE,
+          label: customOptions.optionName ?? "직접 입력",
+          data: { isCustomInput: true },
+        } satisfies SelectDropdownOption,
+      ];
+    }, [customOptionId, customOptions, items]);
 
-    /**
-     * 2) 선택 상태 모드 결정
-     * - selectedOptionIds prop이 들어오면 controlled 모드(외부가 source of truth)
-     * - selectedOptionIds prop이 없으면 uncontrolled 모드(내부 state가 source of truth)
-     */
-    const isSelectionControlled = selectedOptionIds !== undefined;
-
-    /**
-     * 3) option 조회 최적화 맵 생성
-     * - 옵션 탐색(find/filter) 반복을 줄이기 위해 id 기반 맵을 만든다.
-     * - display label 계산, payload selectedOptions 계산, 렌더 시 선택 확인에 재사용한다.
-     */
+    // 5) 선택 id로 option을 즉시 조회할 수 있도록 map을 만든다.
     const optionMap = useMemo(
-      () => new Map(options.map(option => [option.id, option])),
-      [options],
+      () => new Map(mergedOptions.map(option => [option.id, option])),
+      [mergedOptions],
     );
 
-    /**
-     * 4) uncontrolled 초기 선택값 계산
-     * - options[].selected를 초기 선택 입력으로 사용한다.
-     * - single-select이므로 selected=true가 여러 개여도 첫 id 하나만 채택한다.
-     */
-    const selectedIdsFromOptions = useMemo(() => {
-      const initialSelectedIds = options
+    // 6) uncontrolled 초기 선택값은 items[].selected의 첫 번째 항목만 사용한다.
+    const selectedIdsFromItems = useMemo(() => {
+      const initialSelectedIds = items
         .filter(option => option.selected)
         .map(option => option.id);
       return normalizeSingleSelectedIds(initialSelectedIds);
-    }, [options]);
-
-    /**
-     * 5) uncontrolled 내부 state 선언
-     * - controlled 모드에서는 실제 UI source로 쓰이지 않는다.
-     * - uncontrolled 모드에서는 최종 선택 id를 내부 state가 소유한다.
-     */
-    const [uncontrolledSelectedOptionIds, setUncontrolledSelectedOptionIds] =
-      useState<string[]>(() => selectedIdsFromOptions);
-
-    /**
-     * 6) options 변경 시 내부 state 정합성 보정(uncontrolled 전용)
-     * - controlled 모드는 외부 selectedOptionIds를 신뢰하므로 내부 state를 건드리지 않는다.
-     * - uncontrolled 모드는 옵션 리스트가 바뀌면 stale id를 정리해야 한다.
-     *   1) 기존 선택 id가 현재 options에 존재하는지 필터링
-     *   2) 남아 있으면 single 정책으로 첫 id 하나만 유지
-     *   3) 남지 않으면 selectedIdsFromOptions(초기 선택 규칙)로 재동기화
-     */
-    useEffect(() => {
-      if (isSelectionControlled) {
-        return;
-      }
+    }, [items]);
 
-      setUncontrolledSelectedOptionIds(previousSelectedIds => {
-        const optionIdSet = new Set(options.map(option => option.id));
-        const filteredIds = previousSelectedIds.filter(selectedId =>
-          optionIdSet.has(selectedId),
-        );
-        const nextCandidateIds =
-          filteredIds.length > 0 ? filteredIds : selectedIdsFromOptions;
-        const nextSelectedIds = normalizeSingleSelectedIds(nextCandidateIds);
-
-        // 선택 결과가 동일하면 기존 배열 참조를 유지해 effect 루프를 방지한다.
-        if (isSameIdList(previousSelectedIds, nextSelectedIds)) {
+    // 7) 내부 선택 state를 선언한다.
+    const [selectedOptionIds, setSelectedOptionIds] = useState<string[]>(
+      () => selectedIdsFromItems,
+    );
+
+    // 8) 외부 items 변경 시 동일 규칙으로 내부 선택 state를 재동기화한다.
+    useEffect(() => {
+      setSelectedOptionIds(previousSelectedIds => {
+        if (isSameIdList(previousSelectedIds, selectedIdsFromItems)) {
           return previousSelectedIds;
         }
-
-        return nextSelectedIds;
+        return selectedIdsFromItems;
       });
-    }, [isSelectionControlled, options, selectedIdsFromOptions]);
-
-    /**
-     * 7) 최종 선택 id 계산
-     * - controlled: selectedOptionIds를 우선 사용
-     * - uncontrolled: 내부 state를 사용
-     * - single-select invariant 보장을 위해 항상 최대 1개 id만 반환한다.
-     */
-    const resolvedSelectedIds = useMemo(() => {
-      const sourceIds = isSelectionControlled
-        ? (selectedOptionIds ?? [])
-        : uncontrolledSelectedOptionIds;
-      return normalizeSingleSelectedIds(sourceIds);
-    }, [
-      isSelectionControlled,
-      selectedOptionIds,
-      uncontrolledSelectedOptionIds,
-    ]);
-    const selectedIdSet = useMemo(
-      () => new Set(resolvedSelectedIds),
-      [resolvedSelectedIds],
+    }, [selectedIdsFromItems]);
+
+    // 9) 단일 선택이므로 첫 번째 id를 현재 선택 option으로 본다.
+    const selectedOption =
+      selectedOptionIds.length > 0
+        ? optionMap.get(selectedOptionIds[0])
+        : undefined;
+
+    // 10) custom mode는 customOptions 존재 + custom option 선택 상태로 판단한다.
+    const isCustomInputActive = Boolean(
+      customOptions && selectedOption?.id === customOptionId,
     );
 
-    /**
-     * 8) 표시 라벨 계산
-     * - 외부 displayLabel이 있으면 최우선 사용
-     * - 없으면 현재 선택 id 기준으로 optionMap에서 label을 조회한다.
-     * - optionMap을 사용해 O(1) 조회로 단순화한다.
-     */
+    // 11) 외부 displayLabel이 있으면 우선 사용하고, 없으면 선택 option label을 사용한다.
     const resolvedDisplayLabel =
-      displayLabel ??
-      (resolvedSelectedIds.length > 0
-        ? optionMap.get(resolvedSelectedIds[0])?.label
-        : undefined);
-
-    /**
-     * 9) placeholder/label 표시 상태 계산
-     * - null/undefined/빈 문자열이면 placeholder로 간주한다.
-     */
-    const hasLabel =
-      resolvedDisplayLabel !== undefined &&
-      resolvedDisplayLabel !== null &&
-      resolvedDisplayLabel !== "";
-
-    /**
-     * 10) dropdown open 상태 관리
-     * - open/defaultOpen/onOpenChange 계약은 기존 useSelectDropdownOpenState를 그대로 사용한다.
-     * - 내부 state와 controlled open 상태를 동시에 지원한다.
-     */
+      displayLabel ?? (isCustomInputActive ? undefined : selectedOption?.label);
+
+    // 12) open 제어형/비제어형 계약은 공용 hook으로 통합 처리한다.
     const { open: dropdownOpen, setOpen } = useSelectDropdownOpenState({
-      open: open ?? isOpen,
+      open,
       defaultOpen,
-      onOpenChange,
+      onOpen,
     });
 
-    /**
-     * 11) 상호작용 차단 조건 계산
-     * - disabled/readOnly일 때는 open 토글과 option select를 모두 차단한다.
-     */
+    // 13) disabled/readOnly 상태에서는 open/option 선택 인터랙션을 모두 차단한다.
     const isInteractionBlocked = disabled || readOnly;
 
-    /**
-     * 12) open 상태 변경 핸들러
-     * - 차단 상태면 강제로 닫힘(false) 유지
-     * - 허용 상태면 전달받은 nextOpen 반영
-     */
+    // 14) open 상태 변경 처리: 차단 상태면 닫힘 고정, 아니면 nextOpen 반영.
     const handleOpenChange = (nextOpen: boolean) => {
       if (isInteractionBlocked) {
         setOpen(false);
@@ -225,60 +197,34 @@ const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
       setOpen(nextOpen);
     };
 
-    /**
-     * 13) option 선택 처리(single)
-     * - single-select 정책: 클릭된 option 하나를 최종 선택값으로 고정
-     * - uncontrolled 모드면 내부 state 갱신
-     * - onChange(payload)로 현재 선택 결과 전체를 전달
-     * - legacy onOptionSelect는 하위호환으로 유지
-     */
-    const handleOptionSelect = (option: SelectDropdownOption) => {
+    // 15) option 선택 처리: onSelectOption 호출 후, 변경이 있을 때만 onSelectChange를 호출한다.
+    const handleOptionSelect = (option: SelectDropdownOption, event: Event) => {
       if (isInteractionBlocked) {
         return;
       }
 
-      const nextSelectedOptionIds = [option.id];
-      const nextSelectedOptions = nextSelectedOptionIds
-        .map(selectedOptionId => optionMap.get(selectedOptionId))
-        .filter(
-          (
-            selectedOption,
-          ): selectedOption is NonNullable<typeof selectedOption> =>
-            Boolean(selectedOption),
-        );
-
-      if (!isSelectionControlled) {
-        setUncontrolledSelectedOptionIds(nextSelectedOptionIds);
-      }
+      const previousOption = selectedOption;
+      const hasChanged = previousOption?.id !== option.id;
 
-      onChange?.({
-        mode: "single",
-        selectedOptionIds: nextSelectedOptionIds,
-        selectedValues: nextSelectedOptions.map(
-          selectedOption => selectedOption.value,
-        ),
-        selectedOptions: nextSelectedOptions,
-        currentOption: option,
-        isSelected: true,
-      });
+      onSelectOption?.(option, previousOption, event);
+
+      if (hasChanged) {
+        setSelectedOptionIds([option.id]);
+        onSelectChange?.(option, previousOption, event);
+      }
 
-      onOptionSelect?.(option);
       setOpen(false);
     };
 
-    /**
-     * 14) dropdown 패널 렌더링 파생값
-     * - panelSize: trigger size와 동일 축을 기본으로 사용
-     * - hasOptions: empty 상태 분기
-     */
-    const panelSize = (dropdownSize ?? size) as DropdownSize;
-    const hasOptions = options.length > 0;
-
-    /**
-     * 15) 렌더
-     * - Container → Dropdown.Root → Trigger → Container → Menu.List depth 유지
-     * - empty 상태는 별도 구조를 만들지 않고 Dropdown.Menu.Item을 disabled로 재사용
-     */
+    // 16) label input 값은 custom mode에서만 사용자 입력값/controlled inputProps.value를 사용한다.
+    const labelInputValue = isCustomInputActive
+      ? typeof inputProps?.value === "string" ||
+        typeof inputProps?.value === "number"
+        ? String(inputProps.value)
+        : customLabelValue
+      : toInputText(resolvedDisplayLabel);
+
+    // 17) 렌더: Container → Dropdown.Root → Trigger → Menu.List 구조를 유지한다.
     return (
       <Container
         className={clsx("select-trigger-container", className)}
@@ -289,39 +235,63 @@ const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
           open={dropdownOpen}
           onOpenChange={handleOpenChange}
           modal={false}
-          {...dropdownRootProps}
+          {...dropdownOptions?.rootProps}
         >
-          {/* Dropdown.Trigger를 통해 Select trigger를 그대로 재사용한다. */}
           <Dropdown.Trigger asChild>
             <SelectTriggerBase
               ref={ref}
               priority={priority}
-              size={size}
+              size={resolvedSize}
               state={disabled ? "disabled" : state}
               block={resolvedBlock}
               open={dropdownOpen}
               disabled={disabled}
               readOnly={readOnly}
               buttonType={buttonType}
-              {...rest}
+              {...triggerProps}
             >
               <SelectTriggerSelected
                 label={resolvedDisplayLabel}
-                placeholder={placeholder}
-                isPlaceholder={!hasLabel}
+                placeholder={
+                  isCustomInputActive
+                    ? (customOptions?.placeholder ?? toInputText(placeholder))
+                    : placeholder
+                }
+                isPlaceholder={
+                  isCustomInputActive
+                    ? false
+                    : resolvedDisplayLabel === undefined ||
+                      resolvedDisplayLabel === null ||
+                      resolvedDisplayLabel === ""
+                }
+                // 변경: custom mode가 아닐 때는 label input을 읽기 전용으로 고정한다.
+                readOnly={readOnly || !isCustomInputActive}
+                register={register}
+                customRegister={
+                  isCustomInputActive ? customRegister : undefined
+                }
+                inputProps={inputProps}
+                valueText={labelInputValue}
+                valueFieldValue={
+                  isCustomInputActive && !customRegister
+                    ? labelInputValue
+                    : (selectedOption?.value ?? "")
+                }
+                // 변경: custom mode 진입 시 label input에 focus를 연결한다.
+                shouldFocusInput={isCustomInputActive}
+                onLabelChange={setCustomLabelValue}
               />
             </SelectTriggerBase>
           </Dropdown.Trigger>
           <Dropdown.Container
-            {...dropdownContainerProps}
-            size={panelSize}
-            width={dropdownWidth}
+            {...dropdownOptions?.containerProps}
+            size={dropdownOptions?.size ?? resolvedSize}
+            width={dropdownOptions?.width ?? "match"}
           >
-            <Dropdown.Menu.List {...dropdownMenuListProps}>
-              {hasOptions ? (
+            <Dropdown.Menu.List {...dropdownOptions?.menuListProps}>
+              {mergedOptions.length > 0 ? (
                 <>
-                  {/* Dropdown menu option들을 그대로 매핑해 선택 이벤트를 전달한다. */}
-                  {options.map(option => (
+                  {mergedOptions.map(option => (
                     <Dropdown.Menu.Item
                       key={option.id}
                       label={option.label}
@@ -330,21 +300,20 @@ const SelectDefault = forwardRef<HTMLElement, SelectDefaultComponentProps>(
                       left={option.left}
                       right={option.right}
                       multiple={Boolean(option.multiple)}
-                      isSelected={selectedIdSet.has(option.id)}
+                      isSelected={selectedOption?.id === option.id}
                       onSelect={event => {
                         if (option.disabled) {
                           event.preventDefault();
                           return;
                         }
-                        handleOptionSelect(option);
+                        handleOptionSelect(option, event);
                       }}
                     />
                   ))}
                 </>
               ) : (
                 <Dropdown.Menu.Item
-                  // 변경: 사용처 1회 상수 대신 인라인 fallback으로 empty label을 처리한다.
-                  label={alt ?? "선택할 항목이 없습니다."}
+                  label={dropdownOptions?.alt ?? "선택할 항목이 없습니다."}
                   disabled
                   className="dropdown-menu-alt"
                 />

package/src/components/select/markup/foundation/Base.tsx

@@ -12,7 +12,7 @@ import type { SelectTriggerBaseProps } from "../../types/trigger";
  * @component
  * @param {SelectTriggerBaseProps} props trigger base props
  * @param {"primary" | "secondary" | "table"} [props.priority="primary"] 스타일 우선순위
- * @param {"small" | "medium" | "large"} [props.size="medium"] 높이 스케일
+ * @param {"xsmall" | "small" | "medium" | "large"} [props.size="medium"] 높이 스케일
  * @param {"default" | "focused" | "error" | "disabled"} [props.state="default"] 시각 상태
  * @param {boolean} [props.open=false] dropdown open 상태
  * @param {boolean} [props.block=false] block 레이아웃 여부
@@ -47,7 +47,15 @@ const SelectTriggerBase = forwardRef<HTMLElement, SelectTriggerBaseProps>(
     },
     ref,
   ) => {
-    const Icon = SelectIcon.Chevron[priority][size];
+    // 변경: xsmall은 primary 전용 정책이므로 non-primary는 small로만 접근한다.
+    const resolvedSize =
+      priority !== "primary" && size === "xsmall" ? "small" : size;
+    const Icon =
+      priority === "primary"
+        ? SelectIcon.Chevron.primary[resolvedSize]
+        : SelectIcon.Chevron[priority][
+            resolvedSize === "xsmall" ? "small" : resolvedSize
+          ];
     const resolvedState = disabled || readOnly ? "disabled" : state;
     const {
       ["aria-haspopup"]: ariaHasPopup,
@@ -58,7 +66,7 @@ const SelectTriggerBase = forwardRef<HTMLElement, SelectTriggerBaseProps>(
     const sharedProps = {
       className: clsx("select-button", className),
       "data-priority": priority,
-      "data-size": size,
+      "data-size": resolvedSize,
       ...restProps,
       // 변경: Radix Dropdown.Trigger가 주입하는 data-state(open|closed)를 최종 단계에서 덮어써 visual state를 고정한다.
       "data-state": resolvedState,
@@ -87,7 +95,11 @@ const SelectTriggerBase = forwardRef<HTMLElement, SelectTriggerBaseProps>(
     return (
       <Slot.Base ref={ref} as={as} {...sharedProps} {...elementSpecificProps}>
         {children}
-        <figure className="select-icon" data-size={size} aria-hidden="true">
+        <figure
+          className="select-icon"
+          data-size={resolvedSize}
+          aria-hidden="true"
+        >
           <Icon />
         </figure>
       </Slot.Base>

package/src/components/select/markup/foundation/Icon.tsx

@@ -1,3 +1,4 @@
+import ChevronPrimaryXsmall from "../../img/chevron/primary/xsmall.svg";
 import ChevronPrimarySmall from "../../img/chevron/primary/small.svg";
 import ChevronPrimaryMedium from "../../img/chevron/primary/medium.svg";
 import ChevronPrimaryLarge from "../../img/chevron/primary/large.svg";
@@ -7,6 +8,7 @@ import ChevronSecondaryLarge from "../../img/chevron/secondary/large.svg";
 
 import Remove from "../../img/remove.svg";
 import type {
+  SelectChevronNonPrimaryIconSizeMap,
   SelectIconCollection,
   SelectIconPriorityMap,
   SelectIconRemovePriorityMap,
@@ -15,11 +17,13 @@ import type {
 
 /**
  * Select; Chevron 아이콘 - primary
+ * - xsmall
  * - small
  * - medium
  * - large
  */
 const SelectChevronPrimaryIcon: SelectIconSizeMap = {
+  xsmall: ChevronPrimaryXsmall,
   small: ChevronPrimarySmall,
   medium: ChevronPrimaryMedium,
   large: ChevronPrimaryLarge,
@@ -31,7 +35,7 @@ const SelectChevronPrimaryIcon: SelectIconSizeMap = {
  * - medium
  * - large
  */
-const SelectChevronSecondaryIcon: SelectIconSizeMap = {
+const SelectChevronSecondaryIcon: SelectChevronNonPrimaryIconSizeMap = {
   small: ChevronSecondarySmall,
   medium: ChevronSecondaryMedium,
   large: ChevronSecondaryLarge,
@@ -39,7 +43,7 @@ const SelectChevronSecondaryIcon: SelectIconSizeMap = {
 
 /**
  * Select; Chevron 아이콘 컬렉션
- * - primary (small, medium, large)
+ * - primary (xsmall, small, medium, large)
  * - secondary (small, medium, large)
  * - table (small, medium, large)
  */
@@ -52,11 +56,13 @@ const SelectChevronIcon: SelectIconPriorityMap = {
 
 /**
  * Select; Remove 아이콘 - primary
+ * - xsmall
  * - small
  * - medium
  * - large
  */
 const SelectMultipleRemoveIcon: SelectIconSizeMap = {
+  xsmall: Remove,
   small: Remove,
   medium: Remove,
   large: Remove,
@@ -64,7 +70,7 @@ const SelectMultipleRemoveIcon: SelectIconSizeMap = {
 
 /**
  * Select; Remove 아이콘 컬렉션
- * - primary/secondary/table (small, medium, large)
+ * - primary/secondary/table (xsmall, small, medium, large)
  */
 const SelectRemoveIcon: SelectIconRemovePriorityMap = {
   primary: SelectMultipleRemoveIcon,