[date] Storybook 설정하기

turborepo에서 제공하는 가이드가 있지만 디테일이 좀 부족... 하다고 생각했는데? 아니다. 그냥 잘 따라만 하자. 

---

우선, 스토리북을 어디에 설치할 것인가? 

 

모노레포 프로젝트 구조는 아래와 같다

/turbo-repo-root
	/apps
            /web (Next.js 앱)
            /admin (Next.js 앱)
	/packages /ui (공통 UI 컴포넌트)

가이드에서는 apps/storybook 디렉토리를 추가하라고 한다. -> 스토리북도 하나의 앱 !

 

앱마다 스토리북을 따로 쓸게 아니고 공통 UI로 사용할거라면 packages/ui 디렉토리에 스토리북을 추가해도 된다고 해서

그 편이 낫다고 생각해서 설치하면서 포스팅 하고 있었는데

설치중에 뭔가 꼬이는거같고,

turbo run build 했을때 apps/* 만 빌드가 되기 때문에 스토리북 빌드도 따로해줘야하니 번거롭고,

가이드에도 나와있지 않은 부분이라 다시 삭제하고 => apps 하위에 스토리북을 추가했다.

 

mkdir apps/storybook
cd apps/storybook

pnpm dlx storybook@latest init

 

 

pnpm install @repo/ui --filter=storybook

스토리북을 설치하고 나면 요걸 추가하라고 하는데 잘 안되서 pnpm i 로 했다.

 

스토리 파일 (stories.tsx) 위치는

./apps/storybook/src/stories/Button.stories.tsx  요러케 만들면 된다. 

=> packages/ui 로 옮기기 위한 설정 방법도 가이드에 나와있다

// apps/storybook/package.json

{
  "scripts": {
    "dev": "storybook dev -p 6006", 
    "build": "storybook build"
  }
}

요건 자동 생성 되더라 

// turbo.json
{
  "tasks": {
    "build": {
      "outputs": [
        ".next/**",
        "!.next/cache/**"
+       "storybook-static/**"
      ]
    }
  }
}

요건 추가해줬다.

빌드하는 파일 기점으로 경로를 적어야 한다. 

// .gitignore

+ storybook-static

요것도 추가

---

약간의 삽질이 있었지만 잘 설치한거같다 ^-^

turborepo storybook 검색했을때 나오는 결과가 몇 없던데 공식 문서가 워낙 잘 되어있어서일까? .. 

 

스토리북은 독립적인 환경에서 UI 컴포넌트 개발을 할 수 있어 선호하는 라이브러리이다.

두번째 써보는 것이니, 보다 나은 디자인 시스템을 구축했으면 하는 소망이 있다 ㅎ 

 

chromatic에 배포도 이어서 해보자!

 

+++

루트 package.json에 추가

  "scripts": {
    "storybook": "pnpm --filter storybook dev"
  },