21 storybook에서 컴포넌트 정리할 때

source: categories/study/vue-experiance/vue-experiance_9-11.md

21. storybook에서 컴포넌트 정리할 때

1.1 라이브러리 적용했을 때 특정 객체, 함수가 없다는 에러뜰 때. 예시. vue-moment

• https://www.npmjs.com/package/vue-moment#thismoment

위와 같이 vue-moment 라이브러리 적용하면 전역으로 this.$moment 설정된다.
이거 스토리북에서 인식되게하려면!?

import VueMoment from 'vue-moment';
import Vue from "vue";
Vue.use(VueMoment);

~~~.stories.mdx 같은 파일에 위 코드를 넣어주면된다.
그럼 문제가 해결된다.

1.2 뷰 스토리북에서 컴포넌트 in 컴포넌트 (멀티 컴포넌트 정리)

아래와 같이 Template을 정의해 각 스토리별로 bind해주면된다.

import { Meta, Story, Canvas } from '@storybook/addon-docs';
import Popup from '../components/renew/Popup';
import BtnAnchor from '../components/renew/BtnAnchor';
import '@/assets/scss/style.scss';

<Meta
    title="renew/Popup"
    component={Popup}
 />

export const Template = (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { Popup, BtnAnchor },
    template: `<Popup v-bind="$props">
      <template #cont>팝업내용</template>
      <template #buttons>
        <btn-anchor :type="'button'" :class-name="'bg_white'">아니오</btn-anchor>
        <btn-anchor :type="'button'" :class-name="'bg_yellow'">예</btn-anchor>
      </template>
    </Popup>`,
});

# Popup

`Popup` 컴포넌트입니다.

## default

<Canvas>
  <Story name="default">
    {Template.bind({})}
   </Story>
</Canvas>