[storybook] viewport 설정

 

스토리북을 사용하다보면 viewport를 조금 더 자유롭게 사용하거나 컴포넌트마다 기본적으로 설정되는 viewport를 다르게 설정해주고 싶은 경우가 있다.

 

다양한 view-port 지원

 

 

 

https://storybook.js.org/docs/essentials/viewport

Viewport • Storybook docs

 

기본적인 내용은 위 공식문서를 참고했다.

 

우선 viewport addon을 설치해줘야 한다.

npm i --save-dev @storybook/addon-viewport

 

 

 

이후 .storybook - preview.ts 파일에 들어가서

 

import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";

 

addon에 기본적으로 있는 여러 장치들의 값들을 가져와준후

 

 

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    viewport: {
      viewports:INITIAL_VIEWPORTS
    },
  },
};

 

preview부분의 viewport를 에드온의 viewports로 바꿔준다.

 

 

여기까지만 해도 스토리북에 들어가서 확인해보면 viewports들을 여러가지 장치로 바꿀 수 있게 되어있다.

 

 

커스텀

나만의 viewport나 지원하지 않는 장치를 만들고 싶다면 아래 처럼 customViewports를 만들어서 이어붙여주는 방법이 있다.

 

 

import type { Preview } from "@storybook/react";
import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
import "../src/styles/css/reset.css";

const customViewports = {
  largepc: {
    name: "LargePc",
    styles: {
      width: "25000px",
      height: "963px",
    },
  },
};

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    viewport: {
      viewports: { ...INITIAL_VIEWPORTS, ...customViewports },
    },
  },
};

export default preview;

 

 

 

 

개별 story에 viewport 적용하기

 

이제 각 스토리에 default값을 설정하는 법을 알아보자.

 

 

아래와 같이 Template에 연결된 viewport의 defaultViewport 를 inital의 이름으로 바꿔주면 된다.

 

export const Tablet = Template.bind({});

Tablet.parameters = {
  viewport: {
    defaultViewport: "ipad",
  },
};

export const Mobile = Template.bind({});

Mobile.parameters = {
  viewport: {
    defaultViewport: "iphone14",
  },
};

 

지원하는 장치들도 많은데 이는 공식문서에 들어가면 이름들을 확인할 수 있다.

 

조금 주의할 점은 이름들이 모두 소문자 , 스페이스바x이니 이점을 참고하자.

 

 

커스텀으로 만든 viewports또한 잘 적용이 된다.

export const Large_PC = Template.bind({});
Large_PC.parameters = {
  viewport: {
    defaultViewport: "largepc",
  },
};