@croquiscom/pds 16.56.0 → 16.56.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@croquiscom/pds",
-  "version": "16.56.0",
+  "version": "16.56.2",
   "description": "Design system for Zigzag's Partner Center",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",

package/pds-skills/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: pds
-description: Partner Design System (PDS) React 컴포넌트 라이브러리 사용 가이드. 다음 상황에서 이 스킬을 활성화하라: (1) @croquiscom/pds import가 있는 코드 작성/수정 시, (2) React UI 컴포넌트 구현 시 PDS 사용 여부 확인, (3) Modal, DataTable, Button, Stack 등 PDS 컴포넌트 props 검증 필요 시, (4) semantic_colors, spacing 등 Foundation 토큰 사용 시. PDS는 다른 라이브러리(MUI, Ant Design, Chakra)와 props 네이밍이 다르므로 이 문서의 Naming Differences 테이블을 반드시 따르라.
+description: "Partner Design System (PDS) React 컴포넌트 라이브러리 사용 가이드. 다음 상황에서 이 스킬을 활성화하라 - (1) @croquiscom/pds import가 있는 코드 작성/수정 시, (2) React UI 컴포넌트 구현 시 PDS 사용 여부 확인, (3) Modal, DataTable, Button, Stack 등 PDS 컴포넌트 props 검증 필요 시, (4) semantic_colors, spacing 등 Foundation 토큰 사용 시. PDS는 다른 라이브러리(MUI, Ant Design, Chakra)와 props 네이밍이 다르므로 이 문서의 Naming Differences 테이블을 반드시 따르라."
 ---
 
 # PDS Design System Skills
@@ -167,17 +167,32 @@ import { semantic_colors, spacing, shapes } from '@croquiscom/pds';
 
 ---
 
+## 아이콘 선택
+
+이모지 대신 정의된 PDS 아이콘 컴포넌트를 사용하라. 다른 오픈소스 라이브러리의 아이콘 이름을 추측하지 마라.
+
+- 아이콘 컴포넌트 선택: `resources/guides/guide-icon-mapping.md`
+  - **Read 전에 Grep**. 사용 맥락 키워드(예: `"닫기"`, `"더보기"`, `"알림"`, `"햄버거"`)로 검색하라.
+  - 표 첫 컬럼이 카테고리(`방향`, `액션`, `UI` 등 20종)이므로 매치 행만으로 분류·코드명·사용 맥락 즉시 파악.
+- 이모지/Unicode 기호 → 코드 매핑: `resources/guides/guide-icon-unicode-lookup.md`
+  - **Read 전에 Grep**. Unicode 문자나 이모지(예: `"⚠️"`, `"🔍"`, `"←"`, `"☰"`)로 직접 검색하라.
+  - 표 첫 컬럼이 Unicode 기호이므로 매치 행에 대응하는 PDS 아이콘 후보가 즉시 나온다.
+
+---
+
 ## Resources
 
 ### 가이드 문서 (`resources/guides/`)
 - `guide-common-mistakes.md`: 흔한 실수 (Common Mistakes)
 - `guide-foundation-usage.md`: Foundation 토큰 사용법
 - `guide-getting-started.md`: 시작하기
+- `guide-icon-mapping.md`: 아이콘 매핑 및 사용 가이드
+- `guide-icon-unicode-lookup.md`: 아이콘 Unicode 역방향 인덱스
 - `guide-style-utilities.md`: 스타일 유틸리티
 
 ### 컴포넌트 레퍼런스 (`resources/components/`)
 
-**인덱스**: `resources/index.txt` - 전체 컴포넌트 목록 (103개)
+**인덱스**: `resources/index.txt` - 전체 컴포넌트 목록 (105개)
 
 **파일 패턴** (Quick Reference의 "리소스" 컬럼 참조):
 - `{리소스}.props.txt` — Tier 1: Props 상세 (타입, 기본값, 설명)
@@ -194,8 +209,9 @@ import { semantic_colors, spacing, shapes } from '@croquiscom/pds';
 - [ ] Foundation 토큰을 사용했는가? (하드코딩 금지)
 - [ ] VStack/HStack 대신 Stack을 사용했는가?
 - [ ] CheckboxGroup, RadioGroup, Divider에 gap 대신 spacing을 사용했는가?
+- [ ] 이모지 대신 정의된 PDS 아이콘을 사용했는가? (mapping guide 참조)
 
 ---
 
-**문서 버전**: v16.56.0
-**마지막 업데이트**: 2026-04-08
+**문서 버전**: v16.56.2
+**마지막 업데이트**: 2026-05-04

package/pds-skills/resources/components/component-button-iconbutton.props.txt

@@ -7,7 +7,7 @@
 |------|------|----------|---------|-------------|
 | `kind` | `undefined "outlined_primary" "outlined_secondary" "outlined_negative"` | No | outlined_secondary | shape 속성이 'circle'의 경우 적용되지 않습니다. |
 | `icon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 없다면 currentColor가 지정됩니다. |
-| `size` | `undefined "medium" "large" "xsmall" "xlarge" "xxlarge" "xxsmall"` | No | medium |  |
+| `size` | `undefined "medium" "large" "xsmall" "xxsmall" "xlarge" "xxlarge"` | No | medium |  |
 | `shape` | `undefined "rectangle" "circle"` | No | rectangle |  |
 | `fill` | `boolean | undefined` | No |  |  |
 | `type` | `undefined "submit" "reset" "button"` | No | button |  |

package/pds-skills/resources/components/component-button-popoverbutton.props.txt

@@ -21,7 +21,7 @@
 | `fill` | `boolean | undefined` | No |  |  |
 | `startIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 버튼 좌측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
 | `endIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 버튼 우측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
-| `loading` | `boolean | undefined` | No | false |  |
 | `type` | `undefined "submit" "reset" "button"` | No | 'button' |  |
+| `loading` | `boolean | undefined` | No | false |  |
 | `asChild` | `boolean | undefined` | No | false | true로 설정 시, 기본 DOM 요소를 렌더링하지 않고 자식 컴포넌트에 props와 동작을 전달합니다.  reference: https://www.radix-ui.com/primitives/docs/guides/composition |
 | `unstableFocusVisible` | `boolean | undefined` | No |  | react-aria useFocusRing isFocusVisible 반환값을 제어할 수 있습니다. |

package/pds-skills/resources/components/component-dropdowncomposite.props.txt

@@ -6,7 +6,7 @@
 | Name | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `dropdownProps` | `DropdownCompositeDropdownOption<OptionValue>` | Yes |  |  |
-| `inputProps` | `Pick<InputProps, "value" | "onChange" | "placeholder" | "width">` | Yes |  |  |
+| `inputProps` | `Pick<InputProps, "value" | "onChange" | "width" | "placeholder">` | Yes |  |  |
 | `disabled` | `boolean | undefined` | No |  |  |
 | `onSubmit` | `(({ dropdownValue }: { dropdownValue?: OptionValue | undefined; }) => void) | undefined` | No |  |  |
 | `onReset` | `(({ dropdownValue }: { dropdownValue?: OptionValue | undefined; }) => void) | undefined` | No |  |  |

package/pds-skills/resources/components/component-dropdownfilter.props.txt

@@ -22,10 +22,10 @@
 | `onChange` | `((value: OptionValue[]) => void) | undefined` | No |  |  |
 | `className` | `string | undefined` | No |  |  |
 | `disabled` | `boolean | undefined` | No |  |  |
-| `status` | `undefined "error"` | No |  |  |
 | `zIndex` | `number | undefined` | No | getZIndex('dropdown') |  |
 | `autoPlacement` | `boolean | undefined` | No | true | floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무  - 자동 위치 상/하만 적용됩니다. |
 | `maxHeight` | `number | undefined` | No | DEFAULT_DROPDOWN_MAX_HEIGHT |  |
+| `status` | `undefined "error"` | No |  |  |
 | `width` | `CSSValueWithLength | undefined` | No |  |  |
 | `keyExtractor` | `((item: DropdownOption<OptionValue>, index: number) => string | number) | undefined` | No |  |  |
 | `labelHeight` | `CSSValueWithLength | undefined` | No |  |  |

package/pds-skills/resources/components/component-dropdowninput.props.txt

@@ -15,13 +15,13 @@
 | `keyExtractor` | `((item: DropdownInputOption<OptionValue>, index: number) => string | number) | undefined` | No |  |  |
 | `optionFilter` | `((inputValue: string, item: DropdownInputOption<OptionValue>, index: number) => boolean) | undefined` | No |  |  |
 | `size` | `undefined "medium" "large" "xsmall"` | No | 'medium' |  |
-| `disabled` | `boolean | undefined` | No |  |  |
 | `value` | `string | number | undefined` | No |  |  |
-| `status` | `undefined "error"` | No |  |  |
+| `disabled` | `boolean | undefined` | No |  |  |
 | `zIndex` | `number | undefined` | No | getZIndex('dropdown') |  |
 | `autoPlacement` | `boolean | undefined` | No | true | floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무  - 자동 위치 상/하만 적용됩니다. |
-| `placeholder` | `string | undefined` | No |  |  |
+| `status` | `undefined "error"` | No |  |  |
 | `width` | `CSSValueWithLength | undefined` | No |  |  |
+| `placeholder` | `string | undefined` | No |  |  |
 | `optionItemHeight` | `number | undefined` | No |  |  |
 | `enableVirtualScroll` | `boolean | undefined` | No | false |  |
 | `unstableFocusVisible` | `boolean | undefined` | No |  | react-aria useFocusRing isFocusVisible 반환값을 제어할 수 있습니다. |

package/pds-skills/resources/components/component-dropdownmultiselect.props.txt

@@ -13,12 +13,12 @@
 | `className` | `string | undefined` | No |  |  |
 | `size` | `undefined "medium" "large" "xsmall"` | No | 'medium' |  |
 | `disabled` | `boolean | undefined` | No |  |  |
-| `status` | `undefined "error"` | No |  |  |
 | `zIndex` | `number | undefined` | No | getZIndex('dropdown') |  |
 | `autoPlacement` | `boolean | undefined` | No | true | floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무  - 자동 위치 상/하만 적용됩니다. |
 | `optionsMatchRefWidth` | `boolean | undefined` | No | true |  |
-| `placeholder` | `string | undefined` | No |  |  |
+| `status` | `undefined "error"` | No |  |  |
 | `width` | `CSSValueWithLength | undefined` | No |  |  |
+| `placeholder` | `string | undefined` | No |  |  |
 | `keyExtractor` | `((item: DropdownOption<OptionValue>, index: number) => string | number) | undefined` | No |  |  |
 | `labelHeight` | `CSSValueWithLength | undefined` | No |  |  |
 | `optionItemHeight` | `number | undefined` | No |  |  |

package/pds-skills/resources/components/component-modal-alertmodal.props.txt

@@ -18,8 +18,8 @@
 | `__floatingPortalId` | `string | undefined` | No |  | @internal 내부 사용을 위한 floatingPortalId |
 | `className` | `string | undefined` | No |  |  |
 | `fill` | `boolean | undefined` | No | false |  |
-| `opened` | `boolean | undefined` | No |  |  |
 | `zIndex` | `number | undefined` | No | getZIndex('modal') |  |
+| `opened` | `boolean | undefined` | No |  |  |
 | `width` | `CSSValueWithLength | undefined` | No | 480 | Modal 너비를 지정할 수 있습니다. |
 | `canClickOutside` | `boolean | undefined` | No | true | outside 영역 클릭시 닫힘 사용 여부 |
 | `canCloseEscapeKey` | `boolean | undefined` | No | true | escapeKey 키이벤트 닫힘 사용 여부 |

package/pds-skills/resources/components/component-modal-confirmmodal.props.txt

@@ -14,17 +14,17 @@
 | `fill` | `boolean | undefined` | No | false |  |
 | `title` | `ReactNode` | Yes |  |  |
 | `onClose` | `(() => void | Promise<void>) | undefined` | No |  | onConfirm/onCancel이 호출된 직후 onClose가 호출됩니다. |
-| `opened` | `boolean | undefined` | No |  |  |
-| `text` | `ReactNode` | No |  |  |
 | `zIndex` | `number | undefined` | No | getZIndex('modal') |  |
+| `text` | `ReactNode` | No |  |  |
+| `opened` | `boolean | undefined` | No |  |  |
 | `width` | `CSSValueWithLength | undefined` | No | 480 | Modal 너비를 지정할 수 있습니다. |
 | `canClickOutside` | `boolean | undefined` | No | true | outside 영역 클릭시 닫힘 사용 여부 |
 | `canCloseEscapeKey` | `boolean | undefined` | No | true | escapeKey 키이벤트 닫힘 사용 여부 |
 | `returnFocus` | `boolean | undefined` | No | true | reference 요소로 포커스 반환 여부 |
 | `onExited` | `(() => void) | undefined` | No |  | Modal destroy시 전달합니다. |
-| `subtext` | `ReactNode` | No |  |  |
 | `dense` | `boolean | undefined` | No |  |  |
 | `confirmText` | `string | undefined` | No |  |  |
 | `confirmButtonProps` | `ModalButtonProps | undefined` | No |  |  |
 | `onConfirm` | `(() => void | Promise<void>) | undefined` | No |  | confirmButton 클릭 이벤트 |
+| `subtext` | `ReactNode` | No |  |  |
 | `__floatingPortalId` | `string | undefined` | No |  | @internal 내부 사용을 위한 floatingPortalId |

package/pds-skills/resources/components/component-modal-noticemodal.props.txt

@@ -14,8 +14,8 @@
 | `onCancel` | `((reason: ModalBaseCancelReason) => void) | undefined` | No |  | reason을 포함한 cancel 이벤트를 전달합니다.  - 'cancelClick' | 'escapeKeyPress' | 'overlayClick' |
 | `onChangeCheckReplay` | `((e: ChangeEvent<HTMLInputElement>) => void) | undefined` | No |  | 푸터 영역 좌측 체크박스 change 이벤트를 전달합니다. |
 | `className` | `string | undefined` | No |  |  |
-| `opened` | `boolean | undefined` | No |  |  |
 | `zIndex` | `number | undefined` | No | getZIndex('modal') |  |
+| `opened` | `boolean | undefined` | No |  |  |
 | `canClickOutside` | `boolean | undefined` | No | true | outside 영역 클릭시 닫힘 사용 여부 |
 | `canCloseEscapeKey` | `boolean | undefined` | No | true | escapeKey 키이벤트 닫힘 사용 여부 |
 | `returnFocus` | `boolean | undefined` | No | true | reference 요소로 포커스 반환 여부 |

package/pds-skills/resources/components/component-numericinput.props.txt

@@ -7,8 +7,8 @@
 |------|------|----------|---------|-------------|
 | `size` | `undefined "medium" "large" "xsmall"` | No | 'medium'
 'medium' |  |
-| `leftAddon` | `string | undefined` | No |  | Input prefix 요소 |
 | `status` | `undefined "info" "error" "success"` | No | 'info' |  |
+| `leftAddon` | `string | undefined` | No |  | Input prefix 요소 |
 | `width` | `CSSValueWithLength | undefined` | No |  |  |
 | `startElement` | `ReactNode | ReactElement<IconProps, string | JSXElementConstructor<any>>` | No |  | 좌측 영역에 렌더링 될 요소 |
 | `endElement` | `ReactNode | ReactElement<IconProps, string | JSXElementConstructor<any>>` | No |  | 우측 영역에 렌더링 될 요소 |

package/pds-skills/resources/components/component-stack-stack.props.txt

@@ -15,8 +15,8 @@
 | `justify` | `JustifyContent | undefined` | No |  |  |
 | `gap` | `Gap<string | number> | undefined` | No |  |  |
 | `className` | `string | undefined` | No |  |  |
-| `height` | `CSSValueWithLength | undefined` | No |  |  |
 | `width` | `CSSValueWithLength | undefined` | No |  |  |
+| `height` | `CSSValueWithLength | undefined` | No |  |  |
 | `p` | `CSSValueWithLength | undefined` | No |  |  |
 | `mt` | `CSSValueWithLength | undefined` | No |  |  |
 | `m` | `CSSValueWithLength | undefined` | No |  |  |

package/pds-skills/resources/components/component-timerangepicker.props.txt

@@ -15,8 +15,8 @@
 | `onClose` | `(() => void) | undefined` | No |  |  |
 | `disabled` | `boolean | undefined` | No |  |  |
 | `zIndex` | `number | undefined` | No | getZIndex('picker') |  |
-| `readOnly` | `boolean | undefined` | No | false |  |
 | `width` | `CSSValueWithLength | undefined` | No | 100% | Input 너비를 지정할 수 있습니다. |
+| `readOnly` | `boolean | undefined` | No | false |  |
 | `onOpen` | `(() => void) | undefined` | No |  |  |
 | `showRemoveButton` | `boolean | undefined` | No | false | Input 우측에 값 지우기 버튼 표시 여부  true: 값이 있을 때 마우스 호버 시 지우기(X) 버튼 표시 false: 항상 시계 아이콘만 표시 값이 없을 때는 설정과 관계없이 시계 아이콘이 표시됩니다. |
 | `incrementMinute` | `number | undefined` | No | 1 | 지정된 배수 단위로 분 설정이 가능합니다. |

package/pds-skills/resources/components/component-upload-fileuploadbutton.props.txt

@@ -8,5 +8,5 @@
 | `label` | `ReactNode` | Yes | '파일 업로드' |  |
 | `multiple` | `boolean | undefined` | No | false |  |
 | `loading` | `boolean | undefined` | No |  |  |
-| `buttonProps` | `Omit<ButtonProps, "loading" | "disabled" | "onClick"> | undefined` | No |  |  |
+| `buttonProps` | `Omit<ButtonProps, "disabled" | "onClick" | "loading"> | undefined` | No |  |  |
 | `onFileUpload` | `((file: File | File[]) => void) | undefined` | No |  |  |