React Layout Component Library

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

설치

npm install react-layout-timbel

사용법

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 사용법

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

Card 사용법

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

Button 사용법

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

개발

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

# 스토리북 실행
npm run storybook

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

새로운 컴포넌트 추가

자동 생성 (권장)

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

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

예시:

npm run add-component modal
npm run add-component input
npm run add-component badge

수동 생성

컴포넌트만 생성:

npm run create-component <컴포넌트이름>

설정 파일만 업데이트:

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