스토리북 적용

Issue

• 1주차 피드백 사항
  • 스토리북을 사용하면 굳이 다이어그램을 그릴 필요 없음
• 컴포넌트 설계에 스토리북을 사용하면 컴포넌트의 props를 모두 볼 수 있음

설치

• 너무 다양한 설치 명령어
  • npx sb init
    • 우리가 사용한 명령어
    • npx : 일시적으로 필요한 패키지를 실행하는 데 유용
  • npx -p storybook sb init
    • 특정 패키지를 지정하고 해당 패키지를 사용하는 명령어를 실행할 때 사용
  • yarn dlx storybook
    • dlx: 특정 패키지를 일시적으로 다운로드하고 실행 (설치 없이 실행)

파일

• .storybook/main.tsstorybook의 애드온, 중요설정 등이 담겨있는 설정파일
• .storybook/preview.tsstorybook의 컴포넌트 표시에 대한 설정
• .stories.tsx컴포넌트를 표시하기 위한 파일

발생한 이슈

import된 이미지를 읽지 못함

• webpack에 img-loader설치
• 이미지에 type부여

tailwind 스타일이 적용되지 않음

• post-css 옵션 추가
• preview에 tailwind Import

수정된 main.ts

import type { StorybookConfig } from "@storybook/react-webpack5";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  staticDirs: ["../public"],
  addons: [
    "@storybook/addon-webpack5-compiler-swc",
    "@storybook/addon-onboarding",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
    "@storybook/addon-styling-webpack",
    {
      name: "@storybook/addon-styling-webpack",

      options: {
        rules: [
          {
            test: /\.css$/,
            sideEffects: true,
            use: [
              require.resolve("style-loader"),
              {
                loader: require.resolve("css-loader"),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve("postcss-loader"),
                options: {
                  implementation: require.resolve("postcss"),
                },
              },
            ],
          },
        ],
      },
    },
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
};
export default config;

수정된 preview.ts

import type { Preview } from "@storybook/react";
import "../src/styles/tailwind.css";

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

사용법

Button.stories.tsx

import React from "react";
import { fn } from "@storybook/test";
import Button from "./Button";

export const ActionsData = {
  onClick: fn(),
};

export default {
  component: Button,
  title: "common/Button",
  tags: ["autodocs"],
  excludeStories: /.*Data$/,
  args: {
    ...ActionsData,
  },
};

export const Main = {
  args: {
    size: "long",
    isEnabled: true,
    defaultText: "참여하기",
    disabledText: "참여불가",
  },
};

• 테스트 환경 작성
  • 필요하다면 목함수 생성
• tags: ["autodocs"] 를 이용하여 Docs 패널을 유용하게 활용함
• 
• args는 컴포넌트의 기본 props 값을 설정하는데 사용

느낀점

• 컴포넌트 별로 Props를 한눈에 볼 수 있음
• 디자이너와 소통이 편리
• UX/UI 를 테스트 할 수 있음
  • Jest의 렌더링 테스트와 다른점?
  • 이 부분에 대한 고민을 많이 하였음