@ceed/ads 1.29.1 → 1.30.0-next.1

package/dist/components/inputs/IconButton.md

@@ -2,9 +2,7 @@
 
 ## Introduction
 
-IconButton is a compact, icon-only button component designed for actions where a visual symbol alone is sufficient to communicate meaning. It is ideal for toolbars, table row actions, card headers, navigation bars, and any context where space efficiency is critical.
-
-Because IconButton omits visible text, it relies entirely on the icon's clarity and supplementary accessibility attributes to convey its purpose. Always pair it with `aria-label` or a Tooltip to ensure all users can understand the button's function.
+IconButton 컴포넌트는 아이콘만으로 구성된 버튼입니다. 공간 효율적이며, 직관적인 액션을 제공하는 UI 요소로 주로 툴바, 헤더, 카드 등에서 사용됩니다. 텍스트 없이도 의미를 전달할 수 있는 명확한 아이콘과 함께 사용하세요.
 
 ```tsx
 <IconButton {...args} />
@@ -24,26 +22,56 @@ Because IconButton omits visible text, it relies entirely on the icon's clarity
 ```tsx
 import { IconButton } from '@ceed/ads';
 import AddIcon from '@mui/icons-material/Add';
-import DeleteIcon from '@mui/icons-material/Delete';
 
 function MyComponent() {
   return (
-    <div style={{ display: 'flex', gap: '0.5rem' }}>
-      <IconButton aria-label="Add item" onClick={handleAdd}>
+    <div>
+      <IconButton onClick={() => console.log('clicked')}>
         <AddIcon />
       </IconButton>
 
-      <IconButton color="danger" aria-label="Delete item" onClick={handleDelete}>
+      <IconButton color="danger" onClick={() => console.log('delete')}>
         <DeleteIcon />
       </IconButton>
+
+      <IconButton disabled>
+        <EditIcon />
+      </IconButton>
     </div>
   );
 }
 ```
 
-## Colors
+## Examples
+
+### Basic Usage
+
+기본적인 IconButton 사용법입니다.
+
+```tsx
+<div style={{
+  display: 'flex',
+  gap: '1rem',
+  alignItems: 'center'
+}}>
+<IconButton>
+  <Add />
+</IconButton>
+<IconButton>
+  <Edit />
+</IconButton>
+<IconButton>
+  <Delete />
+</IconButton>
+<IconButton>
+  <Settings />
+</IconButton>
+</div>
+```
+
+### Colors
 
-IconButton supports five semantic colors: `primary` (default), `neutral`, `danger`, `success`, and `warning`. Choose a color that reflects the nature of the action.
+다양한 색상을 적용할 수 있습니다.
 
 ```tsx
 <div style={{
@@ -69,9 +97,9 @@ IconButton supports five semantic colors: `primary` (default), `neutral`, `dange
 </div>
 ```
 
-## Variants
+### Variants
 
-Four visual variants are available: `solid` (filled background), `soft` (tinted background), `outlined` (border only), and `plain` (no background). Use `outlined` or `plain` for secondary actions, and `solid` for primary or high-emphasis actions.
+다양한 스타일 변형을 제공합니다.
 
 ```tsx
 <div style={{
@@ -94,9 +122,9 @@ Four visual variants are available: `solid` (filled background), `soft` (tinted
 </div>
 ```
 
-## Sizes
+### Sizes
 
-The `size` prop controls the button dimensions. Available sizes are `sm`, `md` (default), and `lg`. Ensure touch targets meet the minimum 44px recommended size for touch interfaces.
+크기를 조절할 수 있습니다.
 
 ```tsx
 <div style={{
@@ -116,9 +144,9 @@ The `size` prop controls the button dimensions. Available sizes are `sm`, `md` (
 </div>
 ```
 
-## States
+### States
 
-IconButton supports multiple interactive states including normal, disabled, and loading. Use `disabled` to prevent interaction and `loading` to indicate an in-progress async operation.
+다양한 상태를 표현할 수 있습니다.
 
 ```tsx
 <div style={{
@@ -174,9 +202,9 @@ IconButton supports multiple interactive states including normal, disabled, and
 </div>
 ```
 
-## With Badge
+### With Badge
 
-Combine IconButton with Badge to display notification counts, status indicators, or unread markers alongside the button.
+Badge와 함께 사용하여 알림 수나 상태를 표시할 수 있습니다.
 
 ```tsx
 <div style={{
@@ -202,9 +230,9 @@ Combine IconButton with Badge to display notification counts, status indicators,
 </div>
 ```
 
-## With Tooltip
+### With Tooltip
 
-Wrap IconButton in a Tooltip to provide a text description on hover. This is especially important for icon-only buttons since the icon alone may not be self-explanatory for all users.
+Tooltip과 함께 사용하여 버튼의 기능을 설명할 수 있습니다.
 
 ```tsx
 <div style={{
@@ -235,40 +263,9 @@ Wrap IconButton in a Tooltip to provide a text description on hover. This is esp
 </div>
 ```
 
-## Circular Variants
-
-IconButton renders as a circular shape by default, making it visually distinct from rectangular text buttons and well-suited for floating action buttons and compact action rows.
-
-```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem',
-  alignItems: 'center'
-}}>
-<div>
-  <h4>Default</h4>
-  <div style={{
-    display: 'flex',
-    gap: '1rem',
-    alignItems: 'center'
-  }}>
-  <IconButton>
-    <Add />
-  </IconButton>
-  <IconButton variant="outlined">
-    <Edit />
-  </IconButton>
-  <IconButton variant="soft">
-    <Delete />
-  </IconButton>
-</div>
-</div>
-</div>
-```
-
-## Action Buttons
+### Action Buttons
 
-A practical example of IconButton used for common CRUD operations with distinct colors signaling the nature of each action.
+실제 액션을 수행하는 버튼들의 예제입니다.
 
 ```tsx
 <div style={{
@@ -296,115 +293,69 @@ A practical example of IconButton used for common CRUD operations with distinct
 
 ## Common Use Cases
 
-### Table Row Actions
-
-```tsx
-import { IconButton, Tooltip } from '@ceed/ads';
-import EditIcon from '@mui/icons-material/Edit';
-import DeleteIcon from '@mui/icons-material/Delete';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-
-function RowActions({ onView, onEdit, onDelete }) {
-  return (
-    <div style={{ display: 'flex', gap: '0.25rem' }}>
-      <Tooltip title="View details">
-        <IconButton size="sm" variant="plain" color="neutral" onClick={onView}>
-          <VisibilityIcon />
-        </IconButton>
-      </Tooltip>
-      <Tooltip title="Edit">
-        <IconButton size="sm" variant="plain" color="neutral" onClick={onEdit}>
-          <EditIcon />
-        </IconButton>
-      </Tooltip>
-      <Tooltip title="Delete">
-        <IconButton size="sm" variant="plain" color="danger" onClick={onDelete}>
-          <DeleteIcon />
-        </IconButton>
-      </Tooltip>
-    </div>
-  );
-}
-```
-
-### Dialog Close Button
+### Toolbar Actions
 
 ```tsx
-import CloseIcon from '@mui/icons-material/Close';
-
-<IconButton
-  variant="plain"
-  color="neutral"
-  size="sm"
-  aria-label="Close dialog"
-  onClick={onClose}
-  sx={{ position: 'absolute', top: 8, right: 8 }}
->
-  <CloseIcon />
-</IconButton>
+<div style={{ display: 'flex', gap: '0.5rem' }}>
+  <IconButton onClick={handleAdd} title="Add item">
+    <AddIcon />
+  </IconButton>
+  <IconButton onClick={handleEdit} color="neutral" title="Edit">
+    <EditIcon />
+  </IconButton>
+  <IconButton onClick={handleDelete} color="danger" title="Delete">
+    <DeleteIcon />
+  </IconButton>
+</div>
 ```
 
-### Navigation Back Button
+### Navigation
 
 ```tsx
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-
-<IconButton
-  variant="outlined"
-  color="neutral"
-  aria-label="Go back"
-  onClick={() => router.back()}
->
+<IconButton onClick={() => router.back()} variant="outlined">
   <ArrowBackIcon />
 </IconButton>
 ```
 
-## Best Practices
-
-1. **Always provide an accessible label.** Since there is no visible text, use `aria-label` or wrap with a Tooltip to describe the action.
+### Settings & More Options
 
 ```tsx
-// ✅ Accessible icon button
-<IconButton aria-label="Delete item" color="danger">
-  <DeleteIcon />
+<IconButton onClick={handleSettings} color="neutral">
+  <SettingsIcon />
 </IconButton>
-
-// ❌ No accessible label
-<IconButton color="danger">
-  <DeleteIcon />
+<IconButton onClick={handleMoreOptions}>
+  <MoreVertIcon />
 </IconButton>
 ```
 
-2. **Use semantic colors to convey intent.** Match the color to the action's nature: `danger` for destructive actions, `success` for confirmations, `neutral` for general-purpose actions.
+### Social Actions
 
 ```tsx
-// ✅ Color matches the action
-<IconButton color="danger" aria-label="Delete">
-  <DeleteIcon />
+<IconButton onClick={handleLike} color="danger">
+  <FavoriteIcon />
 </IconButton>
-
-// ❌ Misleading color
-<IconButton color="success" aria-label="Delete">
-  <DeleteIcon />
+<IconButton onClick={handleShare} color="primary">
+  <ShareIcon />
 </IconButton>
 ```
 
-3. **Use the `loading` prop for async operations.** This prevents double-clicks and provides visual feedback during network requests or processing.
+## Best Practices
 
-```tsx
-// ✅ Shows loading spinner during async action
-<IconButton loading={isSaving} aria-label="Save" onClick={handleSave}>
-  <SaveIcon />
-</IconButton>
-```
+1. **명확한 아이콘**: 사용자가 쉽게 이해할 수 있는 명확하고 직관적인 아이콘을 사용하세요.
+
+2. **적절한 크기**: 터치 인터페이스를 고려하여 최소 44px 이상의 터치 영역을 확보하세요.
+
+3. **접근성**:
+   - `title` 속성이나 `aria-label`을 제공하여 스크린 리더 사용자를 위한 설명을 추가하세요.
+   - Tooltip과 함께 사용하여 기능을 명확히 설명하세요.
 
-4. **Prefer universally recognized icons.** Choose icons that are widely understood (e.g., trash can for delete, pencil for edit, plus for add). Avoid ambiguous symbols without a Tooltip.
+4. **일관된 스타일**: 같은 맥락에서는 일관된 variant와 색상을 사용하세요.
 
-5. **Maintain consistent sizing within the same context.** Use the same `size` and `variant` for all IconButtons in a toolbar or action group to keep the interface clean and predictable.
+5. **의미 있는 색상**:
+   - 빨간색(danger): 삭제, 취소 등의 위험한 액션
+   - 초록색(success): 저장, 승인 등의 긍정적인 액션
+   - 회색(neutral): 일반적인 액션
 
-## Accessibility
+6. **피드백 제공**: 클릭 시 명확한 피드백을 제공하여 사용자가 액션이 실행되었음을 알 수 있도록 하세요.
 
-- **`aria-label` is essential**: Every IconButton must have either an `aria-label`, `aria-labelledby`, or a wrapping Tooltip with `title` to provide a text alternative for screen readers.
-- **Keyboard interaction**: IconButton is focusable via `Tab` and can be activated with `Enter` or `Space`. Focus indicators are displayed by default.
-- **Disabled state**: When `disabled` is set, the button receives `aria-disabled="true"` and becomes non-interactive. It remains visible in the DOM for screen readers to announce.
-- **Touch targets**: Ensure the rendered button is at least 44x44 pixels for touch accessibility. The `sm` size may need additional padding in touch-heavy interfaces.
+7. **로딩 상태**: 비동기 작업 시 `loading` prop을 사용하여 사용자에게 진행 상황을 알려주세요.

package/dist/components/inputs/Input.md

@@ -2,11 +2,6 @@
 
 Input 컴포넌트는 사용자로부터 텍스트 입력을 받기 위한 기본 컴포넌트입니다. 다양한 스타일, 크기 및 기능을 지원합니다.
 
-> 💡 **Form 구성 시 내장 prop 사용을 권장합니다**
->
-> 이 컴포넌트는 `label`, `helperText` 등의 Form 요소를 자체적으로 지원합니다.
-> Form을 구성할 때 Typography로 별도의 label이나 helperText를 만드는 대신, 컴포넌트의 내장 prop을 사용하세요.
-
 ```tsx
 <Input />
 ```