[Storybook] Docs Canvas Height 변경 방법

 

문제 상황

스토리북(Storybook)을 사용하면서 Docs 탭에서 컴포넌트 미리보기가 작게 표시되어, 실제 UI를 확인하기 어려운 상황이 발생했습니다.
특히, 대표 컴포넌트의 미리보기 영역이 작아 컨트롤이나 세부 내용 확인이 힘들었는데요.

검색 시에도 어떤 키워드로 찾아야 할지 감이 오지 않아 공식 문서를 몇 번이나 뒤졌습니다.
결국 “Storybook Canvas Height Change”라는 키워드로 검색하여 해결법을 찾을 수 있었습니다.

해결 방법

스토리북에서는 스토리 메타 정보의 parameters 속성을 통해 추가적인 설정을 지정할 수 있습니다.
Docs 관련 설정은 docs 매개변수를 사용하며, 미리보기 영역의 높이를 조정하려면 아래와 같이 설정할 수 있습니다.

 

개별 스토리 파일에서 설정

import type { Meta } from '@storybook/react';
import Confirm from './Confirm';

const meta: Meta<typeof Confirm> = {
  component: Confirm,
  title: 'Components/Dialog/Confirm',
  tags: ['autodocs'],
  argTypes: {},
  parameters: {
    docs: {
      story: {
        inline: false, // 스토리를 인라인으로 표시하지 않음
        iframeHeight: 700, // 미리보기 영역의 iframe 높이를 700px로 설정
      },
    },
  },
};

export default meta;

 

위 설정을 통해 해당 스토리의 Docs 미리보기 영역이 700px 높이의 별도 페이지(iframe)로 표시됩니다.

 

전역 설정 (모든 스토리에 적용)

모든 스토리에 대해 동일한 설정을 적용하려면 .storybook/preview.ts 파일에 전역 매개변수를 추가하면 됩니다.

 

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

const preview: Preview = {
  parameters: {
    docs: {
      story: {
        inline: false, // 스토리를 인라인으로 표시하지 않음
        iframeHeight: 700, // Docs 미리보기 영역 높이 700px
      },
    },
  },
};

export default preview;

 

이렇게 하면 모든 스토리의 Docs 탭에서 미리보기 영역의 높기가 700px로 설정되어, UI 확인이 용이해집니다.

(추가) inline 설정 변경 시 주의 사항

기존 설정에서 inline: false를 사용하면 스토리의 컨트롤(Control) 영역이 동적으로 업데이트되지 않는 문제가 발생하는 것을 확인하였습니다.
이 경우 아래와 같이 height 속성을 사용하여 높이를 지정하는 방식으로 수정할 수 있습니다.

 

parameters: {
  docs: {
    story: {
      height: '500px', // 미리보기 영역의 높이를 500px로 지정
    },
  },
},

 

 

 

끝