Storybook을 사용해보자(5) - 폰트, 컬러, 아이콘까지 깔끔하게 정리하자

🌷 Storybook으로 문서화 해보자!

A프로젝트와 B프로젝트 우선순위를 가늠하는 빈 시간에 뭘 하면 좋을까 하다가 스토리북으로 작업해두었던 컴포넌트들을 깔끔하게 정리하고자 했다.

기본적으로 컴포넌트 정리를 갈무리 하고 폰트와 컬러를 정리하려고 헀는데, 예전에 보았던 스토리북 예제에서 color를 칩 형태로 일목요연하게 정리하는 것이 기억났다.

몇 번 구글링 하다가 이 컬러와 폰트를 깔끔하게 정리하는 걸 기본적으로 지원하는 것을 알게되어 해당 내용을 정리해보고자 한다.

👀 mdx

storybook에서 제공하는 이런 기능들은 mdx 파일에 작성하는 것이므로, 아마 전에 한 번 살펴봤던 것 같은데 mdx 확장자에 대해 알아보자.

MDX(Markdown + JSX)는 마크다운의 상위 집합으로, 마크다운 문서 안에서 JSX를 직접 작성할 수 있는 포맷이다.

이 포맷을 활용해 문서와 코드를 하나의 파일 안에 담을 수 있다.

📌 ColorPalette

ColorPalette는 프로젝트의 색상 요소를 문서화 할 수 있게 해준다.

ColorPalette

import { ColorPalette } from "@storybook/addon-docs/blocks"

• children: React.ReactNode
• ColorItem 컴포넌트들만 자식으로 받는다.

ColorItem

import { ColorItem } from "@storybook/addon-docs/blocks"

작성 예제

import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';

<Meta title="Colors" />

<ColorPalette>
  <ColorItem
    title="theme.color.greyscale"
    subtitle="Some of the greys"
    colors=
  />
  <ColorItem
    title="theme.color.primary"
    subtitle="Coral"
    colors=
  />
  <ColorItem
    title="theme.color.secondary"
    subtitle="Ocean"
    colors=
  />
  <ColorItem
    title="theme.color.positive"
    subtitle="Green"
    colors=
  />
  <ColorItem
    title="gradient"
    subtitle="Grayscale"
    colors=
  />
  <ColorItem
    title="gradient"
    subtitle="Grayscale"
    colors={['linear-gradient(65deg,white,black)']}
  />
</ColorPalette>

📌 Typeset

• https://nextjs-ko.org/docs/app/building-your-application/configuring/mdx
• https://zenn.dev/0b1tk/articles/326982609ff0a4
• https://storybook.js.org/docs/api/doc-blocks/doc-block-colorpalette
• https://storybook.js.org/docs/api/doc-blocks/doc-block-typeset
• https://storybook.js.org/docs/api/doc-blocks/doc-block-icongallery