# haru-study-layout

> 하루스터디에서 사용하는 공용 컴포넌트에 대한 라이브러리입니다.

Latest version **1.0.1** (published 2023-10-19) · 0 weekly downloads

## Install

```sh
npm install haru-study-layout
pnpm add haru-study-layout
yarn add haru-study-layout
bun add haru-study-layout
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-10-19 |
| First published | 2023-10-19 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 150.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | nlom0218.dev |

## Links

- npm: https://www.npmjs.com/package/haru-study-layout
- npm.io page: https://npm.io/package/haru-study-layout

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [styled-components](https://npm.io/package/styled-components.md) ^6.1.0

## Recent versions

- 1.0.1 (latest) — 2023-10-19
- 1.0.0 — 2023-10-19
- 0.0.1 — 2023-10-19

## README

# 하루스터디 Components

하루스터디에서 사용하는 공용 컴포넌트에 대한 라이브러리입니다.

## npm 바로가기

[https://www.npmjs.com/package/haru-study-layout](https://www.npmjs.com/package/haru-study-layout)

## Accordion

### 사용예시

```tsx
function App() {
  return (
    <Accordion>
      <Accordion.Item>
        <Accordion.Header>
          <h5>Title</h5>
        </Accordion.Header>
        <Accordion.Panel>Panel</Accordion.Panel>
      </Accordion.Item>
    </Accordion>
  );
}
```

### Accordion

아코디언 컴포넌트의 전체 레이아웃을 담당하는 컴포넌트입니다.

| props  |   타입    |               설명                | 필수 |
| :----: | :-------: | :-------------------------------: | :--: |
| $style | `CSSProp` | 커스튬 스타일을 위한 props입니다. |  X   |

### Accordion.Item

아코디언의 목록을 담당하는 컴포넌트입니다. 해당 컴포넌트는 props를 받지 않고 `Accordion.Header` 컴포넌트와 `Accordion.Panel` 컴포넌트를 감싸고 있어야 합니다.

### Accordion.Header

아코디언의 제목을 담당하는 컴포넌트입니다. 해당 컴포넌트에서는 `Accordion.Panel`의 제목과 `Accordion.Panel`을 열 수 있는 버튼을 포함합니다.

### Accordion.Panel

아코디언의 각 아이템에 해당하는 컴포넌트입니다. `Accordion.Header`의 펼쳐보기 버튼을 통해 볼 수 있습니다.

## Tabs

### 사용예시

```tsx
function App() {
  return (
    <Tabs>
      <Tabs.Item label="TAB1">CONTENTS1</Tabs.Item>
      <Tabs.Item label="TAB2">CONTENTS2</Tabs.Item>
      <Tabs.Item label="TAB3">CONTENTS3</Tabs.Item>
    </Tabs>
  );
}
```

### Tabs

탭스 컴포넌트의 전체 레이아웃을 담당하는 컴포넌트입니다.

### Tabs.Item

탭스의 아이템을 나타내는 컴포넌트입니다. 라벨을 props로 받으면 이 라벨은 서로 겹치지 않아야 됩니다.

| props |   타입   |              설명              | 필수 |
| :---: | :------: | :----------------------------: | :--: |
| label | `string` | Tabs.Item의 고유한 라벨입니다. |  O   |

---
_Source: https://npm.io/package/haru-study-layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._