[Storybook] Change Docs Canvas Height

문제 상황

• 스토리북 컴포넌트 Docs 에서 대표 컴포넌트 미리보기 화면 높이 크기가 작아서 아래와 같이 UI 확인이 어려운 경우가 발생하였다.
  

• 오류가 나는 상황이 아니라 검색 과정에서 어려움을 겪었다. (저 미리보기 영역을 어떻게 검색해야할 지 키워드가 안떠올랐다. story, component, overview , ….) 공식문서를 뒤지고 뒤진 끝에… Storybook Canvas Height Change라고 검색하여 해결법을 찾았다!

해결 방법

• 스토리 메타 정보 parameters 속성에서 스토리의 추가적인 매개변수를 설정할 수 있다.

  • docs 매개변수를 사용하여 문서화 관련 설정을 지정한다.
  • docs.story.inline: false: 스토리를 인라인으로 표시하지 않고 별도의 페이지에 표시
  • docs.story.iframeHeight: 700: 스토리가 표시될 iframe의 높이를 설정

• 스토리파일 수정

const meta: Meta<typeof Confirm> = {
  component: Confirm,
  title: 'Components/Dialog/Confirm',
  tags: ['autodocs'],
  argTypes: {},
  parameters: {
    docs: {
      story: {
        inline: false,
        iframeHeight: 700,
      },
    },
  },
};
export default meta;

• 해당 컴포넌트 뿐만 아니라 모든 컴포넌트에서 전역으로 설정해주려면 preview.ts 파일에 해당 속성을 추가해주면 된다.
• .storybook/preview.ts

import type { Preview } from '@storybook/react';
import './tailwind.css';

const preview: Preview = {
  parameters: {
    docs: {
      story: {
        inline: false,
        iframeHeight: 700,
      },
    },
  },
};

export default preview;

• 해결 완료!
  

• (추가) inline: false를 작성하면 control을 동적으로 확인할 수 없는 문제를 확인하였다.

• 아래와 같이 수정

...
  parameters: {
    docs: {
      story: {
        height: '500px',
      },
    },
  },
 ...

References

https://github.com/storybookjs/storybook/issues/13765