@designbasekorea/ui 0.5.1 → 0.5.4

package/README.md

@@ -48,19 +48,15 @@ function App() {
         클릭하세요
       </Button>
       
-      <Card>
-        <Card.Header>카드 제목</Card.Header>
-        <Card.Body>
-          <Input placeholder="이름을 입력하세요" />
-        </Card.Body>
+      <Card title="카드 제목" description="카드 설명입니다.">
+        <Input placeholder="이름을 입력하세요" />
       </Card>
       
-      <Accordion>
-        <Accordion.Item value="item-1">
-          <Accordion.Header>제목 1</Accordion.Header>
-          <Accordion.Content>내용 1</Accordion.Content>
-        </Accordion.Item>
-      </Accordion>
+      <Accordion
+        items={[
+          { id: 'item-1', title: '제목 1', content: '내용 1' }
+        ]}
+      />
     </div>
   );
 }
@@ -165,6 +161,7 @@ export default App;
 - **Rating** - 별점
 - **Stepper** - 단계 표시
 - **Popover** - 팝오버
+- **AnimationBackground** - 애니메이션 배경 (그라디언트, 펄스, 파도, 파티클, 별, 오로라 + 테마/그리드)
 
 ## 🎯 컴포넌트 사용 예시
 
@@ -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>
 
@@ -181,21 +178,22 @@ import { Button } from '@designbasekorea/ui';
   비활성 버튼
 </Button>
 
-<Button variant="outline" size="s" fullWidth>
+<Button variant="tertiary" size="s" fullWidth>
   전체 너비 버튼
 </Button>
 ```
 
 **Props**:
-- `variant`: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
-- `size`: 'sm' | 'md' | 'lg'
+- `variant`: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger'
+- `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,40 +219,83 @@ 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
+
+애니메이션 배경 (그라디언트, 펄스, 파도, 파티클, 별, 오로라). 테마(light/dark)와 그리드 오버레이 지원.
+
+```tsx
+import { AnimationBackground } from '@designbasekorea/ui';
+
+// 그라디언트
+<AnimationBackground type="gradient" colors={['#667eea', '#764ba2', '#f093fb']}>
+  <div>콘텐츠</div>
+</AnimationBackground>
+
+// 오로라 (다크/라이트 테마)
+<AnimationBackground type="aurora" theme="dark" intensity="vivid" colors={['#6366f1', '#a855f7', '#ec4899']} />
+
+// Light Aurora Mesh (라이트 테마 + 은은한 그리드)
+<AnimationBackground
+  type="aurora"
+  theme="light"
+  colors={['#c084fc', '#f472b6', '#38bdf8']}
+  intensity="medium"
+  showGrid
+  gridOpacity={0.12}
+/>
+
+// Blueprint (다크 그라디언트 + 그리드)
+<AnimationBackground
+  type="gradient"
+  theme="dark"
+  colors={['#1e293b', '#0f172a']}
+  direction="up"
+  showGrid
+  gridColor="#60a5fa"
+  gridSize={20}
+  gridOpacity={0.2}
+/>
+```
+
+**타입**: `'gradient' | 'pulse' | 'wave' | 'particles' | 'stars' | 'aurora'`  
+**주요 Props**: `type`, `theme` ('light' | 'dark'), `colors`, `intensity` ('subtle' | 'medium' | 'vivid'), `showGrid`, `gridSize`, `gridColor`, `gridOpacity`, `speed`, `direction`, `particleCount`, `starCount`, `clickable`
 
 ### Card
 
 ```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>
       
@@ -262,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>
     </>
   );
@@ -279,21 +322,11 @@ function MyComponent() {
 ```tsx
 import { Accordion } from '@designbasekorea/ui';
 
-<Accordion>
-  <Accordion.Item value="item-1">
-    <Accordion.Header>첫 번째 항목</Accordion.Header>
-    <Accordion.Content>
-      첫 번째 항목의 내용입니다.
-    </Accordion.Content>
-  </Accordion.Item>
-  
-  <Accordion.Item value="item-2">
-    <Accordion.Header>두 번째 항목</Accordion.Header>
-    <Accordion.Content>
-      두 번째 항목의 내용입니다.
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion>
+<Accordion
+  items={[
+    { id: 'item-1', title: '제목 1', content: '내용 1' }
+  ]}
+/>
 ```
 
 ### Toast
@@ -431,7 +464,16 @@ npm run storybook
 
 ## 🔄 버전 히스토리
 
-### 0.1.0 (Latest)
+### 0.5.1 (Latest)
+- ✅ AnimationBackground: 레이어 구조(CanvasLayer, CSSGradientLayer, MeshAuroraLayer, GridOverlay)
+- ✅ theme(light/dark), showGrid, gridSize, gridColor, gridOpacity 지원
+- ✅ Light Aurora Mesh / Blueprint 스타일 및 그리드 라인 전 영역 표시
+- ✅ 타입 정리: gradient, pulse, wave, particles, stars, aurora (레인보우·파이어·오션·선셋 제거)
+
+### 0.5.0
+- ✅ Select 모바일 바텀시트 지원 (useMobileBottomSheet)
+
+### 0.1.0
 - ✅ 20+ React 컴포넌트 제공
 - ✅ 테마 시스템 통합
 - ✅ TypeScript 지원
@@ -458,14 +500,14 @@ import { Button } from '@designbasekorea/ui';
 
 | UI | Tokens | Theme |
 |----|--------|-------|
-| 0.1.0+ | 0.1.7+ | 0.1.11+ |
+| 0.5.1+ | 0.2.x | 0.2.x |
 
 호환되는 버전을 함께 사용하세요.
 
 ### 3. React 버전
 
-- React `18.0.0+` 필요
-- React DOM `18.0.0+` 필요
+- React `19.0.0+` 필요 (peerDependencies)
+- React DOM `19.0.0+` 필요
 
 ## 🤝 기여
 
@@ -474,4 +516,3 @@ import { Button } from '@designbasekorea/ui';
 ## 📄 라이선스
 
 MIT
-