open-index/open-npm huggingface dataset:
npm package: @gabrielyoon7/layout-component
Description: A layout component for React (with woowacourse)
Latest version: 0.0.11

# @gabrielyoon7/layout-container

## 설치 방법

```bash
// npm
npm install @gabrielyoon7/layout-component

// yarn
yarn add @gabrielyoon7/layout-component
```

[스토리북](https://65068c38c8cef469d3e5e634-zeukkiflsp.chromatic.com/)
[npm](https://www.npmjs.com/package/@gabrielyoon7/layout-component)

## Container

### 소개

이 컴포넌트는 가로 너비 제어를 위한 컨테이너 역할을 하는 React 컴포넌트입니다. 이 컴포넌트를 사용하면 UI 디자인에서 최소 및 최대 가로 너비를 설정하고, 자식 컴포넌트를 감싸서 가로 중앙 정렬을 쉽게 구현할
수 있습니다.

```typescript jsx
import {Container} from "@gabrielyoon7/layout-component";

function MyComponent() {
  return (
    <Container maxWidth="xl">
      <div>컨테이너</div>
    </Container>
  )
}

```

[Container 스토리북 보러가기](https://65068c38c8cef469d3e5e634-zeukkiflsp.chromatic.com/?path=/docs/components-container--docs)

## Grid

### 소개

이 컴포넌트는 그리드 레이아웃을 구현하기 위한 React 컴포넌트입니다. 이 컴포넌트를 사용하면 UI 디자인에서 그리드 레이아웃을 쉽게 구현할 수 있습니다.

```typescript jsx
import {Grid} from "@gabrielyoon7/layout-component";

function MyComponent() {
  return (
    <Grid columns={3} row={3} gap={3}>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
    </Grid>
  )
}

```

[Grid 스토리북 보러가기](https://65068c38c8cef469d3e5e634-zeukkiflsp.chromatic.com/?path=/docs/components-grid--docs)

## Flex

### 소개

이 컴포넌트는 Flex 레이아웃을 구현하기 위한 React 컴포넌트입니다. 이 컴포넌트를 사용하면 UI 디자인에서 Flex 레이아웃을 쉽게 구현할 수 있습니다.

```typescript jsx
import {Flex} from "@gabrielyoon7/layout-component";

function MyComponent() {
  return (
    <Flex direction="row" justify="center" align="center" gap={2}>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </Flex>
  )
}

```

[Flex 스토리북 보러가기](https://65068c38c8cef469d3e5e634-zeukkiflsp.chromatic.com/?path=/docs/components-flex--docs)

## SplitPane

### 소개

이 컴포넌트는 SplitPane 레이아웃을 구현하기 위한 React 컴포넌트입니다. 이 컴포넌트를 사용하면 UI 디자인에서 SplitPane 레이아웃을 쉽게 구현할 수 있습니다.

```typescript jsx
import {SplitPane} from "@gabrielyoon7/layout-component";

function MyComponent() {
  return (
    <SplitPane defaultSize="50%" minSize="10%" maxSize="90%">
      <div style={{backgroundColor: 'yellow', height: '100px'}}/>
      <div style={{backgroundColor: 'yellowgreen', height: '100px'}}/>
    </SplitPane>
  )
}

```

[SplitPane 스토리북 보러가기](https://65068c38c8cef469d3e5e634-zeukkiflsp.chromatic.com/?path=/docs/components-splitpane--docs)
npm package: @gabrielyoon7/simple-modal
Description: ``` yarn add @gabrielyoon7/simple-modal ```
Latest version: 0.0.6

# React Payments 용 모달

## 설치 방법

```
yarn add @gabrielyoon7/simple-modal
```

## 사용 방법

```
import { Modal } from '@gabrielyoon7/simple-modal';
```

```
<Modal
 modalOpen={/* 모달을 열고 닫는 기준이 될 boolean 상태 (필수) */}
 closeModal={/* 백드롭을 눌렀을 때 모달을 닫는 함수. (필수가 아님) */}
>
  /* 모달에 표시하고 싶은 엘리먼트 */
</Modal>
```

## 사용 예제

```
import React, { useState } from 'react';
import { Modal } from '@gabrielyoon7/simple-modal';

function App() {
  const [isOpen, setOpen] = useState(false);

  const openModal = () => {
    setOpen(true);
  }

  const closeModal = () => {
    setOpen(false);
  }

  return (
    <div className="App">
      <button onClick={openModal}>모달 열기</button>
      <Modal modalOpen={isOpen} closeModal={closeModal}>
        <div>하이</div>
      </Modal>
    </div>
  );
}

export default App;

```

## 참고사항

React.ReactPortal을 활용하여 구현하였으므로, React DOM에서 감지가 되지 않을 수 있습니다.

따라서 테스트 라이브러리에서 접근이 어려운 경우가 있습니다. 이 경우에는 HTML DOM으로 접근하면 문제 없이 사용이 가능합니다.