[Storybook] 시작하기

🦩진행 환경

storybook v8.x 를 사용했습니다.
React with Vite 환경에서 진행했습니다.
tailwindcss v4.x 을 프로젝트에서 사용합니다.

마찬가지로 아래의 링크의 Get Started를 통해 환경 구성을 하였습니다.

공식문서를 따라하고 학습한 후 간단하게 개념을 정리한 포스트입니다.

Storybook: Frontend workshop for UI development

 

1️⃣이미 만들어진 Button 컴포넌트와 Story 까보기

원래는 <stories>디렉토리에 같이 있던 Button.tsx와 button.css를 components로 옮긴 모습

npm run storybook

위의 명령어를 통해 storybook을 켜고 나면 왼쪽과 같은 프로젝트 폴더구조가 나옵니다.

(다만 구분의 편의와 추후의 npm 패키지 배포를 위해 components 디렉토리를 임의로 만들어 button.css와 Button.tsx를 넣었습니다. 원래는 stories 디렉터리 안에 존재합니다)

---

그리고 이와 같은 로컬이 열리게 됩니다.

그럼 이제 코드를 통해 어떤 코드가 무엇에 해당하는지 적어보도록 할게요.

현재 보고 있는 것이 Button 컴포넌트이기에 Button.stories.ts 와 Button.tsx 두 가지만 보도록 하겠습니다.

 

먼저 Button.stories.ts의 코드의 metadata를 보면...

 

이런 모습입니다.

 

각각은 주석에 적힌 대로의 역할을 하고 있습니다.

title을 통해 경로를 설정할 수 있습니다.

만약 'Basic/Button'으로 바꾼다면 아래와 같이 경로를 변경할 수 있습니다.

 

 

또한,  parameters는 더 많은 속성들이 존재합니다. 아래의 링크에서 확인해 볼 수 있어요. 

Storybook: Frontend workshop for UI development

 

이 스토리를 열어보며 중요하게 생각했던 건 argsType입니다. 위의 코드에서는 backgroundColor만 적혀있습니다. 그리고 { control : 'color' } 라고 적혀있는데 이건 아래의 사진처럼 하늘색 박스로 표시된 color picker를 의미합니다.

---

그럼 이제 노란색으로 표시된 것들은 무엇인지 알아보겠습니다.

알아보기 위해 Button.tsx을 켜보면 이런 코드들이 보입니다.

주석이 스토리북 페이지에 그대로??

노란색으로 표시된 것들은 Button.tsx에서 주석처리가 된 것들을 그대로 쓰고 있습니다.

🤔여기서 생긴 의문점

여기서 하나 의문점이 생겼습니다❓

"컴포넌트"의 인터페이스에 적힌 주석들이 storybook에 반영되고 있는 건데요.

스토리의 argType 설명을 컴포넌트에 작성하는 것은 컴포넌트의 책임 및 영역이 아니지 않나? 

컨트롤 누르고 타고 들어가보자

 

그래서 혹시 스토리파일에서 설명을 작성하는 것이 있을까? 하고 argsType → ArgTypes → InputType으로 타고 들어가 봤습니다. 어떤 속성을 가지고 있는지 보기 위함이었어요.

description이라는 게 보였고 공식문서로 타고 들어가니 아래와 같은 설명이 나왔고 제 맘에 드는 설명이었습니다.

이제 argType에 대한 설명은 스토리 파일에 쓰는 걸로 하자

이렇게 설정하면...!

잘 변경된 모습이다.

2️⃣ Label 컴포넌트 스스로 만들어보기

Label.tsx

Label.stories.ts

컴포넌트와 스토리를 만들었던 절차에 대해 간략하게 적어보자면 아래와 같습니다.

1. 컴포넌트가 가질 props에 대한 interface를 정의합니다.
2. 스토리의 meta data를 작성합니다.
3. 컴포넌트의 뷰 로직을 작성합니다.
4. 스토리 별 case를 작성합니다. 

Text/Label story의 모습

참고로 tailwindcss를 사용할 때 preview.ts를 따로 커스텀해주어야 합니다.

.storybook/preview.ts