• storybook 세팅 아티클
  https://jundev.vercel.app/%EC%82%AC%EC%9D%B4%EB%93%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-storybook-%EB%8F%84%EC%9E%85%EA%B8%B0

• monorepo 세팅 아티클
  https://jundev.vercel.app/storybook-%EB%B0%B0%ED%8F%AC%EB%A5%BC-%EC%9C%84%ED%95%9C-monorepo-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0

monorepo 구축은 완료해서 배포하기 전에 미리 정리를 하고 갈게!
yarn berry + yarn workspace 로 monorepo 환경 구축을 했고, workspace는 하나의 repository라고 이해하면 쉬울거야.

apps 디렉토리에는 client , design-system 두 가지의 workspace가 존재하는데, client 는 우리가 실제로 배포할 서비스, design-system 은 스토리북을 통해 컴포넌트를 개발하는 workspace야!

커맨드는 다음과 같아.

  "scripts": {
    "start": "yarn workspace @just-pay/client start",
    "storybook": "yarn workspace @just-pay/design-system storybook dev -p 6006"
  }

해당 커맨드는 쉽게 말해서 각각 client 디렉토리에 들어가서 yarn start를 하고,
design-system 디렉토리에 들어가서 yarn storybook 커맨드를 실행하는 것과 같아!

root 디렉토리에서 yarn 커맨드를 입력하면 yarn berry의 pnp 모드가 알아서 호이스팅을 해주면서 중첩된 패키지를 제거해주는 역할을 하고, 각 하위의 workspace까지 모듈을 설치해!

workspace는 각각의 repository이기 때문에 client , design-system 은 각각 package.json을 가지고 있어.

design-system 에서 개발한 컴포넌트를 client에서 사용할 수 있도록 의존성까지 주입하고 오프로 만나면 자세히 공유해줄게!