# Whiting Story

### [Decorators](https://storybook.js.org/docs/react/writing-stories/decorators#gatsby-focus-wrapper)

{% tabs %}
{% tab title="Center.js" %}

```javascript
import React from 'react'
import './Center.sass'

const Center = ({ children, ...restProps }) => {
  return <div className="center">{children}</div>
}

export default Center

```

{% endtab %}

{% tab title="Center.sass " %}

```css
.center 
  display: flex
  justify-content: center
```

{% endtab %}
{% endtabs %}

&#x20;컨테이너 역할을 하는 Center 컴포넌트를 생성 후 버튼 스토리 컴포넌트에 적용한다.&#x20;

```javascript
export const RedButton = () => (
  <Center>
    <Button2 red>Red</Button2>
  </Center>
)
```

&#x20;위의 방법처럼 직접적으로 추가할 수 있고 아래 처럼 [Decorators](https://storybook.js.org/docs/react/writing-stories/decorators#gatsby-focus-wrapper)을 사용해서 한번에 적용할 수 있다.&#x20;

```javascript
import React from 'react'
import Button2 from './Button2'
import Center from '../Center/Center'

export default {
  title: 'Form/Button2',
  component: Button2,
  decorators: [(story) => <Center>{story()}</Center>],
}

export const Primary = () => <Button2 primary>Primary</Button2>
```

![가운데 정렬이 된다. ](https://831271375-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSRg9KgNRIGErVFy_6g%2F-MW3GSDZSLfg5KC2jJBN%2F-MW3KJofFmXBZ87PPfng%2Fimage.png?alt=media\&token=4dfcb4a8-1393-404d-9034-2edf0f4c32cf)

### Args

args 를 사용해서 전달하려는 속성을 객체로 한 번에 전달 할 수있다.&#x20;

```javascript
const Template = (args) => <Input {...args} />

export const SmallA = Template.bind({})
SmallA.args = {
  size: 'small',
  placeholder: 'SmallA',
}
```

```javascript
import React from 'react'
import Input from './Input'

export default {
  title: 'Form/Input',
  component: Input,
}

export const Small = () => <Input size="small" placeholder="Small size" />
export const Medium = () => <Input size="medium" placeholder="Medium size" />
export const Large = () => <Input size="large" placeholder="Large size" />

// Storybook에 보여지는 파일 이름 변경
Small.storyName = 'Small Input'

const Template = (args) => <Input {...args} />

export const SmallA = Template.bind({})
SmallA.args = {
  size: 'small',
  placeholder: 'SmallA',
}

export const SmallB = Template.bind({})
SmallB.args = {
  ...SmallA.args,
  placeholder: 'SmallB',
}

export const mediumA = Template.bind({})
mediumA.args = {
  size: 'medium',
  placeholder: 'mediumA',
}

```

![](https://831271375-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSRg9KgNRIGErVFy_6g%2F-MW0zqk5Ow9_KIW9BHen%2F-MW16roPkIjOceICzy3g%2Fimage.png?alt=media\&token=9682eae6-89b8-4294-bad7-fb9cd57b2bcc)

### 스토리 묶기&#x20;

![Button 컴포넌트와 Input 컴포넌트를 같이 사용한다. ](https://831271375-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSRg9KgNRIGErVFy_6g%2F-MW3NJ1_IQfIzFb3CVQT%2F-MW3NZX36wX1udvOFtAC%2Fimage.png?alt=media\&token=51e234a2-4f6c-44da-8ea3-42accecba74e)

생성한 컴포넌트를 같이 사용할 수 있다.&#x20;

```javascript
import React from 'react'
import { Primary } from '../Button2/Button2.stories'
import { Medium } from '../Input/Input.stories'

export default {
  title: 'Form/container/Subscription',
}

export const PrimarySubscription = () => {
  return (
    <>
      <Primary />
      <Medium />
    </>
  )
}

```

##