Storybook 써보기

스토리북 설치

npx sb init

애셋 배치 준비

.storyboook 경로에 정적 파일을 넣을 public 폴더를 만들어준다.
그리고 main.tsx 파일에 들어가서 저장소를 설정해준다.

const config: StorybookConfig = {
  staticDirs: ["../public"],
};

스토리북 테마 설정

폰트 크기, 행 높이, 색상, 간격 등을 애플리케이션에서 통일하는 단계이다.

src/themes 경로에 파일을 추가해준다.

/* eslint-disable */

// fontSizes.ts
const fontSizes: any = [12, 14, 16, 20, 24, 32];

fontSizes.extraSmall = fontSizes[0];
fontSizes.small = fontSizes[1];
fontSizes.medium = fontSizes[2];
fontSizes.mediumLarge = fontSizes[3];
fontSizes.large = fontSizes[4];
fontSizes.extraLarge = fontSizes[5];

export default fontSizes;

// colors.ts
const colors = {
  primary: '#3f51b5',
  primaryDark: '#2c387e',
  primaryLight: '#6573c3',
} as const

export default colors

// index.ts
import colors from './colors'
export const theme = {
  space,
  fontSizes,
  letterSpacings,
  lineHeights,
  colors,
} as const

스토리북 설정 파일 수정 (.storybook/preview.js)

테마 적용, 리셋 CSS, Next.js의 이미지에 대한 부분을 변경한다.
next/image 는 스토리북 상에서는 작동하지 않아, 강제로 일반 이미지와 교체한다.

---

추후에 추가,,