react-layout-timbel/README.md

모던한 React 컴포넌트 라이브러리입니다. Layout, Card, Button 컴포넌트를 포함합니다.

# React Layout Component Library

모던한 React 컴포넌트 라이브러리입니다. Layout, Card, Button 컴포넌트를 포함합니다.

## 설치

```bash
npm install react-layout-timbel
```

## 사용법

```tsx
import React from 'react';
import { Layout, Card, Button, Modal } from 'react-layout-timbel';

// CSS 파일들을 별도로 import해야 합니다
import 'react-layout-timbel/dist/Layout.css';
import 'react-layout-timbel/dist/Card.css';
import 'react-layout-timbel/dist/Button.css';
import 'react-layout-timbel/dist/Modal.css';

function App() {
  return (
    <Layout
      headerTitle="My Application"
      sidebarItems={['홈', '대시보드', '사용자', '설정']}
      theme="light"
    >
      <div style={{ padding: '2rem' }}>
        <Card title="환영합니다!" theme="light">
          <p>이것은 카드 컴포넌트입니다.</p>
          <Button primary>버튼</Button>
        </Card>
      </div>
    </Layout>
  );
}
```

## 컴포넌트

### Layout

반응형 헤더와 사이드바를 포함한 레이아웃 컴포넌트입니다.

#### Props

| Prop | 타입 | 기본값 | 설명 |
|------|------|--------|------|
| `headerTitle` | `string` | `'My Application'` | 헤더에 표시될 제목 |
| `sidebarWidth` | `string` | `'250px'` | 사이드바의 너비 |
| `children` | `ReactNode` | `'메인 콘텐츠 영역입니다.'` | 메인 콘텐츠 영역에 표시될 내용 |
| `sidebarItems` | `string[]` | `['홈', '대시보드', '사용자', '설정']` | 사이드바 메뉴 아이템들 |
| `theme` | `'light' \| 'dark'` | `'light'` | 레이아웃 테마 |

### Card

다양한 스타일과 옵션을 가진 카드 컴포넌트입니다.

#### Props

| Prop | 타입 | 기본값 | 설명 |
|------|------|--------|------|
| `title` | `string` | - | 카드 제목 |
| `children` | `ReactNode` | - | 카드 내용 |
| `imageUrl` | `string` | - | 카드 이미지 URL |
| `imageAlt` | `string` | `'Card image'` | 카드 이미지 대체 텍스트 |
| `theme` | `'light' \| 'dark'` | `'light'` | 카드 테마 |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | 카드 크기 |
| `shadow` | `boolean` | `true` | 그림자 효과 |
| `onClick` | `() => void` | - | 클릭 핸들러 |
| `clickable` | `boolean` | `false` | 클릭 가능 여부 |

### Button

사용자 상호작용을 위한 버튼 컴포넌트입니다.

#### Props

| Prop | 타입 | 기본값 | 설명 |
|------|------|--------|------|
| `children` | `ReactNode` | - | 버튼 텍스트 |
| `primary` | `boolean` | `false` | 주요 액션 버튼 |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | 버튼 크기 |
| `theme` | `'light' \| 'dark'` | `'light'` | 버튼 테마 |
| `disabled` | `boolean` | `false` | 비활성화 상태 |
| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | 버튼 타입 |
| `onClick` | `() => void` | - | 클릭 핸들러 |
| `icon` | `ReactNode` | - | 아이콘 |
| `iconPosition` | `'left' \| 'right'` | `'left'` | 아이콘 위치 |
| `fullWidth` | `boolean` | `false` | 전체 너비 사용 |
| `loading` | `boolean` | `false` | 로딩 상태 |

## 기능

- ✅ 반응형 디자인 (모바일 대응)
- ✅ 다크/라이트 테마 지원
- ✅ TypeScript 지원
- ✅ 모던한 UI/UX 디자인
- ✅ 접근성 고려
- ✅ 다양한 컴포넌트 (Layout, Card, Button)
- ✅ 커스터마이징 가능한 props

## 예제

### Layout 사용법

```tsx
<Layout headerTitle="My App">
  <div>메인 콘텐츠</div>
</Layout>
```

### Card 사용법

```tsx
<Card title="제목" theme="light" size="medium">
  <p>카드 내용입니다.</p>
</Card>
```

### Button 사용법

```tsx
<Button primary size="medium" theme="light">
  클릭하세요
</Button>
```

## 개발

```bash
# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

# 스토리북 실행
npm run storybook

# 라이브러리 빌드
npm run build:lib
```

## 새로운 컴포넌트 추가

### 자동 생성 (권장)

새로운 컴포넌트를 자동으로 생성하고 모든 설정을 업데이트합니다:

```bash
npm run add-component <컴포넌트이름>
```

예시:
```bash
npm run add-component modal
npm run add-component input
npm run add-component badge
```

### 수동 생성

컴포넌트만 생성:
```bash
npm run create-component <컴포넌트이름>
```

설정 파일만 업데이트:
```bash
npm run update-configs <컴포넌트이름>
```

### 생성되는 파일들

```
src/components/<ComponentName>/
├── index.tsx              # 컴포넌트 파일
├── <ComponentName>.css    # 스타일 파일
├── <ComponentName>.stories.ts  # 스토리북 파일
└── README.md              # 컴포넌트 문서
```

### 다음 단계

1. 컴포넌트 로직 수정 (`src/components/<ComponentName>/index.tsx`)
2. 스타일 수정 (`src/components/<ComponentName>/<ComponentName>.css`)
3. 스토리 수정 (`src/components/<ComponentName>/<ComponentName>.stories.ts`)
4. 스토리북에서 확인 (`npm run storybook`)
5. 빌드 테스트 (`npm run build:lib`)
6. npm에 퍼블리싱 (`npm publish`)

## 라이선스

MIT

## 기여하기

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request