[Storybook] Decorators의 viewMode 파라미터로 현재 창이 canvas인지 docs인지 확인하여 스타일 적용하기

...

export default {
  title: 'Components/MyComponents',
  parameters: {
    docs: {
      description: {
        component: 'MyComponents입니다.',
      },
    },
  },
  decorators: [
    (story, { viewMode }) => ({
      components: { story },
      setup() {
        return { viewMode };
      },
      methods: {
        getStyle() {
          return `height: ${viewMode === 'story' ? 1500 : 50}px`
        },
      },
      template: '<div :style="getStyle()"><story /></div>',
    }),
  ],
};

....

 

Reference

• https://storybook.js.org/docs/vue/writing-stories/decorators#story-decorators