@designbasekorea/ui 0.5.2 → 0.5.5

package/README.md

@@ -48,11 +48,8 @@ function App() {
         클릭하세요
       </Button>
       
-      <Card>
-        <Card.Header>카드 제목</Card.Header>
-        <Card.Body>
-          <Input placeholder="이름을 입력하세요" />
-        </Card.Body>
+      <Card title="카드 제목" description="카드 설명입니다.">
+        <Input placeholder="이름을 입력하세요" />
       </Card>
       
       <Accordion
@@ -173,7 +170,7 @@ export default App;
 ```tsx
 import { Button } from '@designbasekorea/ui';
 
-<Button variant="primary" size="l" onClick={() => console.log('클릭!')}>
+<Button variant="primary" size="l" onPress={() => console.log('클릭!')}>
   Primary 버튼
 </Button>
 
@@ -191,11 +188,12 @@ import { Button } from '@designbasekorea/ui';
 - `size`: 's' | 'm' | 'l'
 - `fullWidth`: boolean
 - `disabled`: boolean
-- `onClick`: () => void
+- `onPress`: () => void
 
 ### Input
 
 ```tsx
+import { CloseIcon, SearchIcon } from '@designbasekorea/icons';
 import { Input } from '@designbasekorea/ui';
 
 <Input 
@@ -207,12 +205,13 @@ import { Input } from '@designbasekorea/ui';
 <Input 
   type="email"
   label="이메일"
-  error="올바른 이메일을 입력하세요"
+  error
+  errorMessage="올바른 이메일을 입력하세요"
 />
 
 <Input 
-  prefix={<SearchIcon />}
-  suffix={<ClearIcon onClick={clearInput} />}
+  startIcon={SearchIcon}
+  endIcon={CloseIcon}
 />
 ```
 
@@ -220,10 +219,11 @@ import { Input } from '@designbasekorea/ui';
 - `type`: 'text' | 'email' | 'password' | 'number' | ...
 - `label`: string
 - `placeholder`: string
-- `error`: string
+- `error`: boolean
+- `errorMessage`: string
 - `disabled`: boolean
-- `prefix`: ReactNode
-- `suffix`: ReactNode
+- `startIcon`: React.ComponentType<IconProps>
+- `endIcon`: React.ComponentType<IconProps>
 
 ### AnimationBackground
 
@@ -271,30 +271,31 @@ import { AnimationBackground } from '@designbasekorea/ui';
 ```tsx
 import { Card } from '@designbasekorea/ui';
 
-<Card>
-  <Card.Header>
-    <h2>카드 제목</h2>
-  </Card.Header>
-  <Card.Body>
-    <p>카드 내용입니다.</p>
-  </Card.Body>
-  <Card.Footer>
-    <Button>확인</Button>
-  </Card.Footer>
+<Card
+  title="카드 제목"
+  description="카드 내용입니다."
+  actions={[
+    { label: '취소', variant: 'secondary' },
+    { label: '확인', variant: 'primary' }
+  ]}
+/>
+
+<Card image={{ src: '/image.jpg', alt: '썸네일' }} layout="horizontal">
+  <p>커스텀 콘텐츠</p>
 </Card>
 ```
 
 ### Modal
 
 ```tsx
-import { Modal } from '@designbasekorea/ui';
+import { Button, Modal, ModalBody, ModalFooter } from '@designbasekorea/ui';
 
 function MyComponent() {
   const [isOpen, setIsOpen] = useState(false);
   
   return (
     <>
-      <Button onClick={() => setIsOpen(true)}>
+      <Button onPress={() => setIsOpen(true)}>
         모달 열기
       </Button>
       
@@ -303,12 +304,13 @@ function MyComponent() {
         onClose={() => setIsOpen(false)}
         title="모달 제목"
       >
-        <p>모달 내용입니다.</p>
-        
-        <Modal.Footer>
-          <Button onClick={() => setIsOpen(false)}>닫기</Button>
+        <ModalBody>
+          <p>모달 내용입니다.</p>
+        </ModalBody>
+        <ModalFooter>
+          <Button onPress={() => setIsOpen(false)}>닫기</Button>
           <Button variant="primary">확인</Button>
-        </Modal.Footer>
+        </ModalFooter>
       </Modal>
     </>
   );
@@ -320,11 +322,11 @@ function MyComponent() {
 ```tsx
 import { Accordion } from '@designbasekorea/ui';
 
-      <Accordion
-        items={[
-          { id: 'item-1', title: '제목 1', content: '내용 1' }
-        ]}
-      />
+<Accordion
+  items={[
+    { id: 'item-1', title: '제목 1', content: '내용 1' }
+  ]}
+/>
 ```
 
 ### Toast
@@ -514,4 +516,3 @@ import { Button } from '@designbasekorea/ui';
 ## 📄 라이선스
 
 MIT
-