Next 환경에서 Storybook로 컴포넌트 개발하기

1. 프롤로그

컴포넌트 UI를 개발하면서 Storybook을 많이 사용하죠
이번 포스팅에서는 Next 환경에서 Storybook을 적용하면서

Storybook에 애드온 패널을 연결해 곧바로 컴포넌트를
편집하는 방법을 알아보도록 하죠

2. 환경세팅

🌱 Next 설치 및 실행

npx create-next-app@latest
What is your project named? 

프로젝트명 입력 후 설치 완료되면 경로로 이동
cd <프로젝트명>

npm run dev

터미널을 열고 차례대로 입력을 해준다

🌱 Storybook 설치 및 실행

npx sb init
Ok to proceed? (y) 

Y 입력 후 설치 완료되면 실행 

npm run start-storybook -p 6006

스토리북 설치가 되면 애드온 knobs도 추가 해준다

🌱 addon-knobs 설치

npm install -D @storybook/addon-knobs

설치 후 .storybook/main.js를 열고 모듈 추가

module.exports = {
  "addons": [
    "@storybook/addon-knobs",
    ...
    ...
    ...
  ]
};

애드온 knobs을 사용하면 컨트롤바에서 동적으로 props를 조작할 수 있음

3. 컴포넌트

컴포넌트를 하나 만들건데
단계별 진행 표시를 해주는 Progress Bar를 생성한다

import classNames from "classnames";

const stepProgressBar = ({total, current, ...props}) => {
    const route = new Array(total).fill().map((_, i) => ({ 
now: current === > i, 
active: current > i 
}));

   return (
       <ol className="survey-progress">
           {route.map((page, i) => (
               <li key={i} className={classNames({
                   active: page.active, 
                   now: page.now 
                   })}>
                   <span />
               </li>
           ))}
       </ol>
   );
};

export default stepProgressBar;

Knobs 창에서 props를 직접 바꿔가면서 상태를 확인할 수 있음!

4. 전체 예제 코드

https://github.com/mujaen/next-storybook