Storybook

Storybook์ด๋ž€?

UI ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐœ๋ฐœํ•  ๋•Œ ์ฒด๊ณ„์ ์ด๊ณ  ํšจ์œจ์ ์œผ๋กœ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ์œ ์šฉํ•  ํˆด

๋‹ค์–‘ํ•œ ์ƒํƒœ(์Šคํ† ๋ฆฌ)์— ๋”ฐ๋ผ ๋ณ€๊ฒฝ๋˜๋Š” ์Šคํƒ€์ผ์„ ๋ฌธ์„œ ํ˜•ํƒœ๋กœ ๊ด€๋ฆฌํ•œ๋‹ค.

์žฅ์ 

  • ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐœ๋ณ„์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ณ  ๋‹ค์–‘ํ•œ ์‹œ๋‚˜๋ฆฌ์˜ค์—์„œ์˜ ๋™์ž‘์„ ๊ฐ„ํŽธํ•˜๊ฒŒ ํ™•์ธ ๊ฐ€๋Šฅ

  • ์Šคํ† ๋ฆฌ๋ถ์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ฐ˜๊ฐ•์ œ๋กœ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๊ณ ๋ คํ•œ ๊น”๋”ํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ž‘์„ฑํ•˜๊ฒŒ๋œ๋‹ค.

  • ๋ฌธ์„œํ˜•ํƒœ๋กœ ๊ด€๋ฆฌ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋”์šฑ ์‰ฝ๊ฒŒ ์ดํ•ดํ•˜๊ณ  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.

  • ์•ฑ๊ณผ ๋ณ„๊ฐœ๋กœ ๋ฐฐํฌํ• ์ˆ˜ ์žˆ์–ด ์ž‘์—…๋ฌผ์„ ๊ณต์œ ํ•˜๊ธฐ ์‰ฝ๋‹ค.

  • ๋””์ž์ด๋„ˆ์™€ ์†Œํ†ตํ•˜๊ธฐ ์‰ฌ์›Œ์ง„๋‹ค.

  • ๋†’์€ ํ’ˆ์งˆ์˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•˜๋Š”๋ฐ ๋„์›€์ด ๋œ๋‹ค.

๋‹จ์ 

  • ํ•™์Šต๊ณก์„ ์ด ๊ฝค ๋†’์€ ํŽธ์ด๋‹ค.

  • ์ง€์†์ ์œผ๋กœ ๊ด€๋ฆฌ๊ฐ€ ํ•„์š”ํ•˜๋ฉฐ, ์Šคํ† ๋ฆฌ๋ถ ํŒŒ์ผ์ด ๋Š˜์–ด๋‚ ์ˆ˜๋ก ๊ด€๋ฆฌํ•˜๊ธฐ ์–ด๋ ค์›Œ์ง„๋‹ค.

  • ํ…Œ์ŠคํŠธ ์ž‘์„ฑ๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๊ฐœ๋ฐœ ์™ธ ๋ถ€๊ฐ€์ ์ธ ์‹œ๊ฐ„์ด ํ•„์š”ํ•ด ์ „์ฒด ๊ฐœ๋ฐœ ์‹œ๊ฐ„์ด ์ฆ๊ฐ€ํ•˜๊ฒŒ ๋œ๋‹ค.

Install

npx sb init

Run

์Šคํ† ๋ฆฌ๋ถ์„ ์‹คํ–‰์‹œ์ผœ ๋ณ„๋„์˜ ์›น์—์„œ ๋ฌธ์„œํ™”๋œ ์Šคํ† ๋ฆฌ๋ถ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

default porrt 6006

npm run storybook 

Config

์Šคํ† ๋ฆฌ๋ถ์„ ์„ค์น˜๊ฐ€ ์™„๋ฃŒ๋˜๋ฉด ๋ฃจํŠธ ๊ฒฝ๋กœ์— ์Šคํ† ๋ฆฌ๋ถ ํ™˜๊ฒฝ์„ค์ • ํŒŒ์ผ(main.ts, preivew.ts)์ด ๋‹ด๊ธด .storybook ๋””๋ ‰ํ† ๋ฆฌ๊ฐ€ ์ถ”๊ฐ€๋œ๋‹ค.

main.ts

์Šคํ† ๋ฆฌ๋ถ์˜ ๋ฉ”์ธ ์„ค์ • ํŒŒ์ผ, ์Šคํ† ๋ฆฌ๋ถ์˜ ํ™˜๊ฒฝ ์„ค์ •๊ณผ ๋‹ค์–‘ํ•œ ์˜ต์…˜์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • stories โ†’ ๋กœ๋“œํ•  ์Šคํ† ๋ฆฌ๋ถ ํŒŒ์ผ์„ ์ง€์ •

  • addon โ†’ ์‚ฌ์šฉํ•  addon์„ ๋“ฑ๋กํ•œ๋‹ค. (๋“ฑ๋กํ•œ ์ˆœ์„œ์— ๋”ฐ๋ผ ์Šคํ† ๋ฆฌ๋ถ ๋ฌธ์„œ์— ํ‘œ์‹œ๋œ๋‹ค.)

  • typescript โ†’ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์™€ ๊ด€๋ จ๋œ ์˜ต์…˜

  • framework โ†’ ์Šคํ† ๋ฆฌ๋ถ์—์„œ ์‚ฌ์šฉํ•  ํ”„๋ ˆ์ž„์›Œํฌ ์ง€์ •

  • core โ†’ ์Šคํ† ๋ฆฌ๋ถ์˜ ์„ธ๋ถ€์ ์œผ๋กœ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋Š” ์˜ต์…˜

  • docs โ†’ ์Šคํ† ๋ฆฌ๋ถ ๋ฌธ์„œํ™”์™€ ๊ด€๋ จ๋œ ์˜ต์…˜

  • webpackFinal โ†’ ์Šคํ† ๋ฆฌ๋ถ์—์„œ ์‚ฌ์šฉํ•  ์›นํŒฉ ์„ค์ •์„ ๋ณ€๊ฒฝํ•˜๋Š” ์˜ต์…˜

  • staticDirs โ†’ ์ •์  ํŒŒ์ผ์ด ์žˆ๋Š” ๊ฒฝ๋กœ๋ฅผ ์ง€์ •

import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  stories: [{ directory: '../src', files: '**/*.stories.{ts,tsx}'}],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-controls',
    '@storybook/addon-a11y',
    '@storybook/addon-actions',
    '@storybook/addon-interactions',
  ],
  typescript: {
    check: false, // ํƒ€์ž… ์ฒดํฌ X
  },
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  core: {
    disableTelemetry: true, // ์‚ฌ์šฉ์ž ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์ง‘ํ•˜์ง€ ์•Š๋„๋ก ์„ค์ •
  },
  docs: {
    autodocs: 'tag', // ํƒœ๊ทธ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ž๋™ํ™” ๋ฌธ์„œ ์ƒ์„ฑ
  },
  webpackFinal: async (config: any) => {
    // tsconfig์— ์„ค์ •๋œ ๊ฒฝ๋กœ ์„ค์ •์„ ์Šคํ† ๋ฆฌ๋ถ์—๋„ ์ ์šฉ
    config.resolve.plugins.push(new TsconfigPathsPlugin({}));
    return config;
  },
  staticDirs: ['../public'],
};
export default config;

addon์ด๋ž€ ์Šคํ† ๋ฆฌ๋ถ ๊ธฐ๋Šฅ์„ ํ™•์žฅํ•˜๋Š” ๋ชจ๋“ˆ๋กœ ํŠน์ • ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ๊ธฐ๋ณธ ๊ธฐ๋Šฅ์„ ๊ฐœ์„ ํ•˜์—ฌ ๋ณด๋‹ค ์œ ์šฉํ•˜๊ฒŒ ์Šคํ† ๋ฆฌ๋ถ์„ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์›€์„ ์ค€๋‹ค.

preview.ts

ํ™”๋ฉด์— ํ‘œ์‹œ๋˜๋Š” ์Šคํ† ๋ฆฌ๋ถ์„ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ํ•  ์ˆ˜ ์žˆ๋Š” ์„ค์ • ํŒŒ์ผ

  • parameters โ†’ ์ปจํŠธ๋กค๋Ÿฌ, ์•ก์…˜, ์ธํ„ฐ๋ž™์…˜ ๋“ฑ์˜ ์Šคํ† ๋ฆฌ์˜ ์ƒํ˜ธ์ž‘์šฉ๋“ค์„ ์ „์—ญ์œผ๋กœ ์ œ์–ด

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

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on.*' }, // on์œผ๋กœ ์‹œ์ž‘ํ•˜๋Š” ์ด๋ฒคํŠธ๋“ค์˜ ๋กœ๊ทธ ์ˆ˜์ง‘
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;

With Typescript

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๊ฒŒ๋˜๋ฉด ์Šคํ† ๋ฆฌ๋ถ์˜ ๋ฌธ์„œํ™” ์ž‘์—…์ด ์—„์ฒญ ๊ฐ„ํŽธํ•ด์ง„๋‹ค.

์Šคํ† ๋ฆฌ๋ถ์€ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ, ์ปดํฌ๋„ŒํŠธ์— ์ •์˜๋œ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ธ์‹ํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ์˜ ์ •๋ณด๋ฅผ ์ž๋™์œผ๋กœ ์ž…๋ ฅํ•ด์ฃผ๋ฏ€๋กœ description, default, control๊ณผ ๊ฐ™์€ ์ •๋ณด๋ฅผ ์ž…๋ ฅํ•ด ์ค„ ํ•„์š”๊ฐ€ ์—†์–ด์ง€๊ธฐ์— ์ƒ์‚ฐ์„ฑ์ด ํ–ฅ์ƒ๋œ๋‹ค.

Optional props Issue

์Šคํ† ๋ฆฌ๋ถ์—์„œ optional props๋ฅผ ์ฝ์„ ๋•Œ undefined ๊ฐ’๋„ ์˜ต์…˜์— ํฌํ•จ์‹œ์ผœ ํ‘œ์‹œํ•ด์ฃผ๋Š” ์ด์Šˆ๊ฐ€ ์žˆ์—ˆ๋‹ค.

undefined ์˜ต์…˜์ด ๋“ค์–ด๊ฐ€๋ฉด์„œ ์ž๋™์œผ๋กœ ์„ค์ •๋œ control type๋„ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ฒผ๋‹ค.

์›์ธ์€ ์Šคํ† ๋ฆฌ๋ถ ์„ค์ • ํŒŒ์ผ์ธ main.ts์—์„œ ์„ค์ •๋œ reactDocgen์—์„œ ์‚ฌ์šฉ๋˜๋Š” react-docgen-typescript ์„ค์ • ๋ฌธ์ œ์˜€๋‹ค.

react-docgen-typescript๋Š” ์ปดํฌ๋„ŒํŠธ์˜ props๋ฅผ ์ž๋™์œผ๋กœ ๋ฌธ์„œํ™”ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๋Š”๋ฐ, ์ด๋•Œ optional props๊ฐ€ undefined ๊ฐ’์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ฌธ์„œํ™”์— ํฌํ•จ์‹œํ‚จ๋‹ค.

typescript: {
  check: false,
  checkOptions: {},
  reactDocgen: 'react-docgen-typescript',
  reactDocgenTypescriptOptions: {
    shouldExtractLiteralValuesFromEnum: true,
    propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
  },
},

๊ด€๋ จ ์˜ต์…˜์„ ์ œ๊ฑฐํ•˜ ์Šคํ† ๋ฆฌ๋ถ์„ ์žฌ์‹คํ–‰์„ ํ•ด๋ณด๋‹ˆ undefined ๊ฐ’์„ ์ œ์™ธํ•œ ๊ฐ’๋“ค์ด ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ํ‘œ์‹œ๋˜์—ˆ๋‹ค.

typescript: {
  check: false,
},

react-docgen-typescript๋ž€?

typescript๋กœ ์ž‘์„ฑ๋œ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ์˜ props ์ •๋ณด๋ฅผ ์ถ”์ถœํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ jsDoc ์ฃผ์„์„ ํ™œ์šฉํ•˜๋Š” ๋“ฑ์˜ ๋ณด๋‹ค ์ •๊ตํ•˜๊ฒŒ props ์ •๋ณด๋ฅผ ์ถ”์ถœํ•ด์ค€๋‹ค.

ํ•ด๋‹น ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์“ฐ์ง€ ์•Š์•„๋„ ์Šคํ† ๋ฆฌ๋ถ์€ ๋‚ด๋ถ€์ ์œผ๋กœ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ปดํŒŒ์ผํ•ด์„œ props ํƒ€์ž… ์ •๋ณด๋ฅผ ์ถ”์ถœํ•ด์ค€๋‹ค.

Last updated