Package Exports

react-layout-timbel
react-layout-timbel/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-layout-timbel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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              # 컴포넌트 문서

다음 단계

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

라이선스

MIT

기여하기

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