@uniai-fe/uds-primitives 0.3.48 → 0.3.49

package/dist/styles.css

@@ -667,6 +667,11 @@
   );
   --table-grid-row-highlight-background-color: rgba(229, 238, 255, 0.52);
   --table-cell-background-color: var(--color-surface-static-white);
+  --table-cell-z-index: 100;
+  --table-cell-sticky-top: 0px;
+  --table-cell-sticky-left: auto;
+  --table-cell-sticky-right: auto;
+  --table-cell-sticky-bottom: auto;
   --table-cell-content-gap: var(--spacing-gap-2);
   --table-line-cell-height-head: 44px;
   --table-line-cell-height-body: 56px;
@@ -4465,18 +4470,26 @@ figure.chip {
 .table[data-layout=line] :where(.table-native-cell):where(.table-th) {
   --table-cell-padding-inline: var(--table-line-cell-padding-inline);
   --table-cell-padding-block: var(--table-line-cell-padding-block);
+  height: calc(attr(rowspan number, 1) * var(--table-line-cell-height-head));
+}
+.table[data-layout=line] :where(.table-native-cell):where(.table-th) :where(.table-cell-content) {
   border-bottom: 1px solid var(--table-border-color);
 }
 .table[data-layout=line] :where(.table-native-cell):where(.table-td) {
   --table-cell-padding-inline: var(--table-line-cell-padding-inline);
   --table-cell-padding-block: var(--table-line-cell-padding-block);
+  height: calc(attr(rowspan number, 1) * var(--table-line-cell-height-body));
+}
+.table[data-layout=line] :where(.table-native-cell):where(.table-td) :where(.table-cell-content) {
   border-bottom: 1px solid var(--table-border-color);
 }
 .table[data-layout=line] :where(.table-head) :where(.table-native-cell):where(.table-th) {
   height: var(--table-line-cell-height-head);
-  border-top: 1px solid var(--table-border-color);
   background-color: var(--table-line-head-background-color);
 }
+.table[data-layout=line] :where(.table-head) :where(.table-native-cell) :where(.table-cell-content) {
+  border-top: 1px solid var(--table-border-color);
+}
 .table[data-layout=line] :where(.table-body) :where(.table-native-cell):where(.table-td) {
   height: var(--table-line-cell-height-body);
 }
@@ -4489,7 +4502,7 @@ figure.chip {
 .table[data-layout=line] :where(.table-foot) :where(.table-native-cell):where(.table-td) {
   height: var(--table-line-cell-height-body);
 }
-.table[data-layout=line] :where(.table-native-cell[rowspan]) {
+.table[data-layout=line] :where(.table-native-cell[rowspan]) :where(.table-cell-content) {
   border-right: 1px solid var(--table-border-color);
 }
 .table[data-layout=grid] {
@@ -4502,11 +4515,17 @@ figure.chip {
   --table-cell-padding-block: var(--table-grid-cell-padding-block);
   height: var(--table-grid-cell-height);
 }
+.table[data-layout=grid] :where(.table-native-cell):where(.table-th)[rowspan] {
+  height: calc(attr(rowspan number, 1) * var(--table-grid-cell-height));
+}
 .table[data-layout=grid] :where(.table-native-cell):where(.table-td) {
   --table-cell-padding-inline: var(--table-grid-cell-padding-inline);
   --table-cell-padding-block: var(--table-grid-cell-padding-block);
   height: var(--table-grid-cell-height);
 }
+.table[data-layout=grid] :where(.table-native-cell):where(.table-td)[rowspan] {
+  height: calc(attr(rowspan number, 1) * var(--table-grid-cell-height));
+}
 .table[data-layout=grid] :where(.table-head) :where(.table-native-cell):where(.table-th) {
   background-color: var(--table-grid-head-background-color);
 }
@@ -4574,21 +4593,28 @@ figure.chip {
 .table[data-layout=grid]:not([data-has-footer=true]) :where(.table-body:last-of-type) :where(.table-row:last-child) > :where(.table-native-cell:last-child) :where(.table-cell-content) {
   border-bottom-right-radius: inherit;
 }
-.table :where(.table-row) > :where(.table-native-cell:first-child):where(.table-th) {
+.table :where(.table-native-cell):where(.table-th) {
   position: sticky;
-  left: 0;
+  top: var(--table-cell-sticky-top);
+  left: var(--table-cell-sticky-left);
+  right: var(--table-cell-sticky-right);
+  bottom: var(--table-cell-sticky-bottom);
+  z-index: var(--table-cell-z-index);
 }
-.table :where(.table-head) :where(.table-row) > :where(.table-native-cell:first-child):where(.table-th) {
-  z-index: 150;
+.table :where(.table-head) :where(.table-row) > :where(.table-native-cell):where(.table-th) {
+  --table-cell-z-index: 300;
 }
-.table :where(.table-body) :where(.table-row) > :where(.table-native-cell:first-child):where(.table-th) {
-  z-index: 100;
+.table :where(.table-head) :where(.table-row) > :where(.table-native-cell):where(.table-th):where(.table-cell-sticky) {
+  --table-cell-z-index: 400;
 }
-.table :where(.table-foot) :where(.table-row) > :where(.table-native-cell:first-child):where(.table-th) {
-  z-index: 50;
+.table :where(.table-body) :where(.table-row) > :where(.table-native-cell):where(.table-th) {
+  --table-cell-z-index: 200;
+}
+.table :where(.table-body) :where(.table-row) > :where(.table-native-cell):where(.table-th):where(.table-cell-sticky) {
+  --table-cell-z-index: 300;
 }
-.table :where(.table-head) :where(.table-row:first-child) > :where(.table-native-cell:first-child):where(.table-th) {
-  z-index: 200;
+.table :where(.table-foot) :where(.table-row) > :where(.table-native-cell):where(.table-th) {
+  --table-cell-z-index: 200;
 }
 .table :where(.table-foot .table-cell-content) {
   color: var(--table-td-text-color);
@@ -4605,6 +4631,8 @@ figure.chip {
 
 .table-scroll-wrapper {
   width: 100%;
+}
+.table-scroll-wrapper[data-layout=grid] {
   border-radius: var(--table-grid-border-radius);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.3.48",
+  "version": "0.3.49",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

package/src/components/dropdown/markup/Template.tsx

@@ -2,28 +2,23 @@
 
 import { useEffect, useMemo, useState } from "react";
 
-import type { DropdownTemplateProps } from "../types/props";
+import type {
+  DropdownTemplateItem,
+  DropdownTemplateProps,
+  DropdownTemplateValue,
+} from "../types/props";
 
 import DropdownRoot from "./foundation/Root";
 import DropdownContainer from "./foundation/Container";
 import DropdownMenuItem from "./foundation/MenuItem";
 import DropdownMenuList from "./foundation/MenuList";
 import DropdownTrigger from "./foundation/Trigger";
-
-const isSameIdList = (previousIds: string[], nextIds: string[]) =>
-  previousIds.length === nextIds.length &&
-  previousIds.every((selectedId, index) => selectedId === nextIds[index]);
-
-const normalizeSelectedIdsByMode = (
-  selectedIds: string[],
-  multiple: boolean,
-) => {
-  if (multiple) {
-    return selectedIds;
-  }
-
-  return selectedIds.length > 0 ? [selectedIds[0]] : [];
-};
+import {
+  isSameSelectedValue,
+  isSameSelectedValueList,
+  normalizeSelectedValuesByMode,
+  toSelectedValueKey,
+} from "../../../utils/selected-values";
 
 /**
  * Dropdown reference template; trigger/panel/menu 조합을 제공한다.
@@ -50,90 +45,91 @@ const DropdownTemplate = ({
   menuListProps,
   alt,
 }: DropdownTemplateProps) => {
+  /**
+   * item value 해석 함수
+   * - value가 없으면 id를 fallback value로 사용한다.
+   */
+  const getItemValue = (item: DropdownTemplateItem): DropdownTemplateValue =>
+    item.value ?? item.id;
+
   /**
    * 1) 선택 정책(single/multiple) 결정
    * - item 중 하나라도 multiple=true이면 multiple 정책으로 해석한다.
-   * - multiple 정책에서는 item id 배열 전체를 유지한다.
-   * - single 정책에서는 언제나 최대 1개 id만 유지한다.
+   * - multiple 정책에서는 item value 배열 전체를 유지한다.
+   * - single 정책에서는 언제나 최대 1개 value만 유지한다.
    */
   const isMultiple = items.some(item => item.multiple);
 
   /**
    * 2) 초기 선택값 계산
    * - source of truth: items[].selected
-   * - multiple: selected=true인 모든 id를 초기값으로 사용한다.
-   * - single: selected=true가 여러 개여도 첫 번째 id 하나만 사용한다.
+   * - multiple: selected=true인 모든 value를 초기값으로 사용한다.
+   * - single: selected=true가 여러 개여도 첫 번째 value 하나만 사용한다.
    * - useMemo로 계산해 동일 inputs에서 불필요한 재계산을 줄인다.
    */
-  const selectedIdsFromItems = useMemo(() => {
-    const initialSelectedIds = items
+  const selectedValuesFromItems = useMemo(() => {
+    const initialSelectedValues = items
       .filter(item => item.selected)
-      .map(item => item.id);
+      .map(item => getItemValue(item));
 
-    return normalizeSelectedIdsByMode(initialSelectedIds, isMultiple);
+    return normalizeSelectedValuesByMode(initialSelectedValues, isMultiple);
   }, [isMultiple, items]);
 
   /**
    * 3) 내부 선택 state 선언
    * - Template은 items[].selected를 초기값으로 받아 내부 상태를 관리한다.
-   * - 초기값은 selectedIdsFromItems를 그대로 사용한다.
+   * - 초기값은 selectedValuesFromItems를 그대로 사용한다.
    */
-  const [uncontrolledSelectedIds, setUncontrolledSelectedIds] = useState<
-    string[]
-  >(() => selectedIdsFromItems);
+  const [uncontrolledSelectedValues, setUncontrolledSelectedValues] = useState<
+    DropdownTemplateValue[]
+  >(() => selectedValuesFromItems);
 
   /**
    * 4) options(items) 변경 동기화
-   * - 내부 state를 items 변경에 맞춰 정합성 보정한다.
-   *   1) 기존 선택 id 중 현재 items에 존재하는 id만 필터링한다.
-   *   2) 유효 id가 남아 있으면 그대로 유지한다(single은 1개만 유지).
-   *   3) 유효 id가 없으면 selectedIdsFromItems(초기 선택 규칙)로 재초기화한다.
-   * - 이 effect는 외부 데이터 재조회/필터 변경 시 stale id를 자동 정리하는 역할을 한다.
+   * - source of truth를 items[].selected로 고정해 외부 선택 상태를 즉시 반영한다.
+   * - single/multiple 정책은 normalizeSelectedValuesByMode로 통일 적용한다.
    */
   useEffect(() => {
-    setUncontrolledSelectedIds(previousSelectedIds => {
-      const itemIdSet = new Set(items.map(item => item.id));
-      const filteredIds = previousSelectedIds.filter(selectedId =>
-        itemIdSet.has(selectedId),
-      );
-      const nextCandidateIds =
-        filteredIds.length > 0 ? filteredIds : selectedIdsFromItems;
-      const nextSelectedIds = normalizeSelectedIdsByMode(
-        nextCandidateIds,
+    setUncontrolledSelectedValues(previousSelectedValues => {
+      const nextSelectedValues = normalizeSelectedValuesByMode(
+        selectedValuesFromItems,
         isMultiple,
       );
 
       // 내용이 동일하면 기존 참조를 재사용해 불필요한 상태 갱신 루프를 차단한다.
-      if (isSameIdList(previousSelectedIds, nextSelectedIds)) {
-        return previousSelectedIds;
+      if (isSameSelectedValueList(previousSelectedValues, nextSelectedValues)) {
+        return previousSelectedValues;
       }
 
-      return nextSelectedIds;
+      return nextSelectedValues;
     });
-  }, [isMultiple, items, selectedIdsFromItems]);
+  }, [isMultiple, selectedValuesFromItems]);
 
   /**
-   * 5) 최종 선택 id 계산
-   * - 내부 state(uncontrolledSelectedIds)를 single/multiple 정책으로 정규화한다.
+   * 5) 최종 선택 value 계산
+   * - 내부 state(uncontrolledSelectedValues)를 single/multiple 정책으로 정규화한다.
    * - 렌더/이벤트/selected 스타일 계산은 이 값만 참조한다.
    */
-  const resolvedSelectedIds = normalizeSelectedIdsByMode(
-    uncontrolledSelectedIds,
+  const resolvedSelectedValues = normalizeSelectedValuesByMode(
+    uncontrolledSelectedValues,
     isMultiple,
   );
+  const selectedValueKeySet = useMemo(
+    () =>
+      new Set(resolvedSelectedValues.map(value => toSelectedValueKey(value))),
+    [resolvedSelectedValues],
+  );
 
   /**
    * 6) empty panel 분기
    * - item이 비어 있으면 alt 또는 기본 문구를 disabled item으로 렌더링한다.
    * - 별도 li를 만들지 않고 MenuItem을 재사용해 구조를 통일한다.
    */
-  const hasItems = items.length > 0;
-
   /**
    * 7) item 선택 처리
-   * - 클릭된 item(id) 기준으로 다음 선택 배열을 계산한다.
+   * - 클릭된 item(value) 기준으로 다음 선택 배열을 계산한다.
    * - multiple: 토글(add/remove)
-   * - single: 클릭한 id 하나로 교체
+   * - single: 클릭한 value 하나로 교체
    * - 내부 state를 즉시 반영한다.
    * - onChange(payload)로 "현재 결과 전체"를 전달한다.
    */
@@ -150,26 +146,32 @@ const DropdownTemplate = ({
     }
 
     /**
-     * 7-2) 다음 selectedIds 계산
+     * 7-2) 다음 selectedValues 계산
      * - wasSelected: 토글 기준 값
-     * - nextSelectedIds: 모드 정책을 적용한 다음 상태
+     * - nextSelectedValues: 모드 정책을 적용한 다음 상태
      * - nextSelectedItems: payload 전달용 상세 데이터
      */
-    const wasSelected = resolvedSelectedIds.includes(itemId);
-    const nextSelectedIds = isMultiple
+    const currentValue = getItemValue(currentItem);
+    const wasSelected = selectedValueKeySet.has(
+      toSelectedValueKey(currentValue),
+    );
+    const nextSelectedValues = isMultiple
       ? wasSelected
-        ? resolvedSelectedIds.filter(selectedId => selectedId !== itemId)
-        : [...resolvedSelectedIds, itemId]
-      : [itemId];
+        ? resolvedSelectedValues.filter(
+            selectedValue => !isSameSelectedValue(selectedValue, currentValue),
+          )
+        : [...resolvedSelectedValues, currentValue]
+      : [currentValue];
     const nextSelectedItems = items.filter(item =>
-      nextSelectedIds.includes(item.id),
+      nextSelectedValues.some(selectedValue =>
+        isSameSelectedValue(selectedValue, getItemValue(item)),
+      ),
     );
-
     /**
      * 7-3) 내부 state 업데이트
      * - Template 내부 선택 상태를 즉시 반영한다.
      */
-    setUncontrolledSelectedIds(nextSelectedIds);
+    setUncontrolledSelectedValues(nextSelectedValues);
 
     /**
      * 7-4) 선택 결과 이벤트(onChange)
@@ -178,8 +180,11 @@ const DropdownTemplate = ({
      */
     onChange?.({
       currentItem,
+      currentValue,
       isSelected: isMultiple ? !wasSelected : true,
-      selectedIds: nextSelectedIds,
+      // 변경: 1회성 중간 상수는 제거하고 payload 직전에서 ids를 인라인 계산한다.
+      selectedIds: nextSelectedItems.map(item => item.id),
+      selectedValues: nextSelectedValues,
       selectedItems: nextSelectedItems,
       multiple: isMultiple,
     });
@@ -188,7 +193,7 @@ const DropdownTemplate = ({
   /**
    * 8) 렌더 구성
    * - Root → Trigger → Container → MenuList depth를 유지한다.
-   * - 각 item은 resolvedSelectedIds 기준으로 selected 스타일을 결정한다.
+   * - 각 item은 resolvedSelectedValues 기준으로 selected 스타일을 결정한다.
    * - disabled item은 select 이벤트를 차단하고 상태만 노출한다.
    */
   return (
@@ -196,7 +201,7 @@ const DropdownTemplate = ({
       <DropdownTrigger asChild>{trigger}</DropdownTrigger>
       <DropdownContainer {...containerProps} size={size} width={width}>
         <DropdownMenuList {...menuListProps}>
-          {hasItems ? (
+          {items.length > 0 ? (
             <>
               {items.map(item => (
                 <DropdownMenuItem
@@ -207,7 +212,9 @@ const DropdownTemplate = ({
                   left={item.left}
                   right={item.right}
                   multiple={item.multiple}
-                  isSelected={resolvedSelectedIds.includes(item.id)}
+                  isSelected={selectedValueKeySet.has(
+                    toSelectedValueKey(getItemValue(item)),
+                  )}
                   onSelect={event => {
                     if (item.disabled) {
                       event.preventDefault();

package/src/components/dropdown/types/props.ts

@@ -8,6 +8,11 @@ import type { HTMLAttributes, ReactNode, RefObject } from "react";
 import type { CheckboxProps } from "../../checkbox/types";
 import type { DropdownPanelWidth, DropdownSize } from "./base";
 
+/**
+ * Dropdown template value 타입
+ */
+export type DropdownTemplateValue = string | number;
+
 /**
  * Dropdown Container props
  * @property {DropdownSize} [size="medium"] option 높이 스케일
@@ -89,6 +94,7 @@ export interface DropdownContextValue {
 /**
  * Dropdown template item
  * @property {string} id 고유 식별자
+ * @property {DropdownTemplateValue} [value] 선택 상태 판정 value(미지정 시 id를 fallback으로 사용)
  * @property {ReactNode} label 옵션 라벨
  * @property {ReactNode} [description] 보조 텍스트
  * @property {boolean} [disabled] 비활성 여부
@@ -102,6 +108,11 @@ export interface DropdownTemplateItem {
    * 고유 식별자
    */
   id: string;
+  /**
+   * 선택 상태 판정 value
+   * - 미지정 시 id를 fallback value로 사용한다.
+   */
+  value?: DropdownTemplateValue;
   /**
    * 옵션 라벨
    */
@@ -135,8 +146,10 @@ export interface DropdownTemplateItem {
 /**
  * Dropdown template change payload
  * @property {DropdownTemplateItem} currentItem 현재 상호작용한 item
+ * @property {DropdownTemplateValue} currentValue 현재 상호작용한 item value
  * @property {boolean} isSelected currentItem 선택 여부
  * @property {string[]} selectedIds 선택된 item id 목록
+ * @property {DropdownTemplateValue[]} selectedValues 선택된 item value 목록
  * @property {DropdownTemplateItem[]} selectedItems 선택된 item 목록
  * @property {boolean} multiple 다중 선택 모드 여부
  */
@@ -145,6 +158,10 @@ export interface DropdownTemplateChangePayload {
    * 현재 상호작용한 item
    */
   currentItem: DropdownTemplateItem;
+  /**
+   * 현재 상호작용한 item value
+   */
+  currentValue: DropdownTemplateValue;
   /**
    * currentItem 선택 여부
    */
@@ -153,6 +170,10 @@ export interface DropdownTemplateChangePayload {
    * 선택된 item id 목록
    */
   selectedIds: string[];
+  /**
+   * 선택된 item value 목록
+   */
+  selectedValues: DropdownTemplateValue[];
   /**
    * 선택된 item 목록
    */

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

@@ -10,13 +10,11 @@ import Container from "./foundation/Container";
 import { useSelectDropdownOpenState } from "../hooks";
 import type { SelectDropdownOption } from "../types/option";
 import type { SelectDefaultComponentProps } from "../types/props";
-
-const isSameIdList = (previousIds: string[], nextIds: string[]) =>
-  previousIds.length === nextIds.length &&
-  previousIds.every((selectedId, index) => selectedId === nextIds[index]);
-
-const normalizeSingleSelectedIds = (selectedIds: string[]) =>
-  selectedIds.length > 0 ? [selectedIds[0]] : [];
+import {
+  isSameSelectedValue,
+  normalizeSingleSelectedValue,
+  toSelectedValueKey,
+} from "../../../utils/selected-values";
 
 const toInputText = (value?: ReactNode): string => {
   if (typeof value === "string" || typeof value === "number") {
@@ -131,61 +129,68 @@ export function SelectDefault<OptionData = unknown>({
     ];
   }, [customOptionId, customOptions, items]);
 
-  // 5) 선택 id로 option을 즉시 조회할 수 있도록 map을 만든다.
-  const optionMap = useMemo(
-    () => new Map(mergedOptions.map(option => [option.id, option])),
-    [mergedOptions],
-  );
-
-  // 6) uncontrolled 초기 선택값은 items[].selected의 첫 번째 항목만 사용한다.
-  const selectedIdsFromItems = useMemo(() => {
-    const initialSelectedIds = items
+  // 5) uncontrolled 초기 선택값은 items[].selected의 첫 번째 value만 사용한다.
+  const selectedValueFromItems = useMemo(() => {
+    const initialSelectedValues = items
       .filter(option => option.selected)
-      .map(option => option.id);
-    return normalizeSingleSelectedIds(initialSelectedIds);
+      .map(option => option.value);
+
+    return normalizeSingleSelectedValue(initialSelectedValues);
   }, [items]);
 
-  // 7) 내부 선택 state를 선언한다.
-  const [selectedOptionIds, setSelectedOptionIds] = useState<string[]>(
-    () => selectedIdsFromItems,
-  );
+  // 6) 내부 선택 state를 선언한다.
+  const [uncontrolledSelectedValue, setUncontrolledSelectedValue] = useState<
+    string | number | undefined
+  >(() => selectedValueFromItems);
 
-  // 8) 외부 items 변경 시 동일 규칙으로 내부 선택 state를 재동기화한다.
+  // 7) 외부 items 변경 시 value 규칙으로 내부 선택 state를 재동기화한다.
   useEffect(() => {
-    setSelectedOptionIds(previousSelectedIds => {
-      if (isSameIdList(previousSelectedIds, selectedIdsFromItems)) {
-        return previousSelectedIds;
+    setUncontrolledSelectedValue(previousSelectedValue => {
+      if (isSameSelectedValue(previousSelectedValue, selectedValueFromItems)) {
+        return previousSelectedValue;
       }
-      return selectedIdsFromItems;
+      return selectedValueFromItems;
     });
-  }, [selectedIdsFromItems]);
+  }, [selectedValueFromItems]);
 
-  // 9) 단일 선택이므로 첫 번째 id를 현재 선택 option으로 본다.
-  const selectedOption =
-    selectedOptionIds.length > 0
-      ? optionMap.get(selectedOptionIds[0])
-      : undefined;
+  // 8) value 기반으로 현재 선택 option을 계산한다.
+  const selectedOption = useMemo(
+    () =>
+      mergedOptions.find(option =>
+        isSameSelectedValue(option.value, uncontrolledSelectedValue),
+      ),
+    [mergedOptions, uncontrolledSelectedValue],
+  );
 
-  // 10) custom mode는 customOptions 존재 + custom option 선택 상태로 판단한다.
+  // 9) custom mode는 customOptions 존재 + custom option value 선택 상태로 판단한다.
   const isCustomInputActive = Boolean(
-    customOptions && selectedOption?.id === customOptionId,
+    customOptions &&
+    toSelectedValueKey(selectedOption?.value) ===
+      toSelectedValueKey(SELECT_CUSTOM_OPTION_VALUE),
   );
 
-  // 11) 외부 displayLabel이 있으면 우선 사용하고, 없으면 선택 option label을 사용한다.
+  useEffect(() => {
+    // 변경: custom mode에서 일반 옵션으로 이탈하면 내부 직접 입력값을 초기화한다.
+    if (!isCustomInputActive) {
+      setCustomLabelValue("");
+    }
+  }, [isCustomInputActive]);
+
+  // 10) 외부 displayLabel이 있으면 우선 사용하고, 없으면 선택 option label을 사용한다.
   const resolvedDisplayLabel =
     displayLabel ?? (isCustomInputActive ? undefined : selectedOption?.label);
 
-  // 12) open 제어형/비제어형 계약은 공용 hook으로 통합 처리한다.
+  // 11) open 제어형/비제어형 계약은 공용 hook으로 통합 처리한다.
   const { open: dropdownOpen, setOpen } = useSelectDropdownOpenState({
     open,
     defaultOpen,
     onOpen,
   });
 
-  // 13) disabled/readOnly 상태에서는 open/option 선택 인터랙션을 모두 차단한다.
+  // 12) disabled/readOnly 상태에서는 open/option 선택 인터랙션을 모두 차단한다.
   const isInteractionBlocked = disabled || readOnly;
 
-  // 14) open 상태 변경 처리: 차단 상태면 닫힘 고정, 아니면 nextOpen 반영.
+  // 13) open 상태 변경 처리: 차단 상태면 닫힘 고정, 아니면 nextOpen 반영.
   const handleOpenChange = (nextOpen: boolean) => {
     if (isInteractionBlocked) {
       setOpen(false);
@@ -194,7 +199,7 @@ export function SelectDefault<OptionData = unknown>({
     setOpen(nextOpen);
   };
 
-  // 15) option 선택 처리: onSelectOption 호출 후, 변경이 있을 때만 onSelectChange를 호출한다.
+  // 14) option 선택 처리: onSelectOption 호출 후, value가 변경될 때만 onSelectChange를 호출한다.
   const handleOptionSelect = (
     option: SelectDropdownOption<OptionData>,
     event: Event,
@@ -204,19 +209,22 @@ export function SelectDefault<OptionData = unknown>({
     }
 
     const previousOption = selectedOption;
-    const hasChanged = previousOption?.id !== option.id;
+    const hasChanged = !isSameSelectedValue(
+      previousOption?.value,
+      option.value,
+    );
 
     onSelectOption?.(option, previousOption, event);
 
     if (hasChanged) {
-      setSelectedOptionIds([option.id]);
+      setUncontrolledSelectedValue(option.value);
       onSelectChange?.(option, previousOption, event);
     }
 
     setOpen(false);
   };
 
-  // 16) label input 값은 custom mode에서만 사용자 입력값/controlled inputProps.value를 사용한다.
+  // 15) label input 값은 custom mode에서만 사용자 입력값/controlled inputProps.value를 사용한다.
   const labelInputValue = isCustomInputActive
     ? typeof inputProps?.value === "string" ||
       typeof inputProps?.value === "number"
@@ -224,7 +232,7 @@ export function SelectDefault<OptionData = unknown>({
       : customLabelValue
     : toInputText(resolvedDisplayLabel);
 
-  // 17) 렌더: Container → Dropdown.Root → Trigger → Menu.List 구조를 유지한다.
+  // 16) 렌더: Container → Dropdown.Root → Trigger → Menu.List 구조를 유지한다.
   return (
     <Container
       className={clsx("select-trigger-container", className)}
@@ -301,7 +309,10 @@ export function SelectDefault<OptionData = unknown>({
                     left={option.left}
                     right={option.right}
                     multiple={Boolean(option.multiple)}
-                    isSelected={selectedOption?.id === option.id}
+                    isSelected={isSameSelectedValue(
+                      selectedOption?.value,
+                      option.value,
+                    )}
                     onSelect={event => {
                       if (option.disabled) {
                         event.preventDefault();