[Storybook] Next.js + Tailwind CSS + TypeScript 스토리북 적용하기

시작하며...

이번 프로젝트에서 Storybook 을 적용하게 되었다.

 

이전 프로젝트에서는 공통 컴포넌트를 테스트 페이지를 만들어서, 사용하는 방법과 예시를 다른 팀원들에게 보여줬는데

이제 Storybook 을 사용하면 번거롭게 테스트 페이지를 만들 필요가 사라진다.

 

설치하기

먼저 Storybook 을 설치한다.

npx storybook@latest init

그러면 Storybook 이 설치되면서 실행이 된다.

 

storybook install

 

해당 프로젝트는 yarn 이라서 yarn stroybook 을 입력하면 스토리북이 실행이 된다.

만약 npm 이라면 npm run stroybook 를 입력하면 된다.

 

스토리북 작성하기

컴포넌트 주석달기

버튼 컴포넌트에 대해 Storybook 을 작성하기 전에 해당 버튼 컴포넌트의 interface 에 주석을 달아야 한다. 

 

주석

그래야 각 컴포넌트의 props 에 대한 설명이 Storybook 에 자동으로 적용되기 때문이다.

description

 

기본 스토리북 작성

**.stories.tsx 확장자명으로 Storybook 파일을 만들어 컴포넌트의 기본적인 내용을 적어준다.

 

스토리북 작성

 

Tailwind 적용시키기

그런데... 실행 결과를 보니깐 tailwind 가 적용되지 않았다.

tailwind 적용 안 됨

 

preview.ts

구글링을 하여 찾아보니 storybook 의 preview.ts 파일에서 globals.css 를 import 해줘야 한다.

 

global

 

왜냐하면 globals.css 파일에는 tailwind 관련된 지시문이 있어 이걸 가져와야 Storybook 에서 tailwind 를 적용할 수 있기 때문이다.

 

tailwind

 

결과

다시 확인해 보니 Tailwind 가 잘 적용된 것을 확인할 수 있다.

잘 적용됨

 

+) 다른 방식으로 작성

위에 작성한 방식 이외에도 다양한 형태로 컴포넌트의 Storybook 을 작성할 수 있다.

 

스토리북 작성

 

마치며...

Next.js + Tailwind css + TypeScript + Storybook 적용하는 방법에 대해 알아보았다.

 

컴포넌트 이외에도 프로젝트의 디자인 시스템을 Storybook 을 활용하여 작성할 수 있으니 공식문서를 활용해서 적용해 보는 것을 추천한다!

storybook