⚙️ storybook 파이프라인 구축

[suhwan2004]

작업 이유

• 디자인 시스템 및 ui 테스트에 사용될 StoryBook을 프로젝트 내 세팅
• Storybook과 Storybook 공식 문서 추천 및 다수의 생태계가 존재가 확인되는 Chromatic을 조합하여 commit push 시, 자동으로 배포까지 진행되도록 세팅

작업 사항

1️⃣ yml 파일 생성

storybook-test-and-deploy.yml이라는 네이밍으로 파일을 생성하였습니다.
해당 플로우의 경우, install-and-test.yml을 어느정도 참조하여 상당부분이 비슷하나, 차이점은 다음과 같습니다.

• 가장 큰 차이점은 lint까지 똑같이 하나, 마지막 단계에서 단위테스트 대신 chromatic을 사용하여 storybook을 배포하고 있습니다.

• chromatic을 통한 배포 시에, commit이 하나가 있는 경우 에러가 발생합니다.
  해당 사항 방지를 위해 부모 브랜치인 main의 commit 까지 참조하기 위해서, step > Checkout에서 with: fetch-depth: 0 을 추가했습니다.

• on 확인 시에 push로 해두었는데 push 내 component.tsx 및 component.stories.tsx 가 존재할 시 이를 배포 페이지에서 storybook으로보여줘야 되지 않나 생각하여 추가해두었습니다.

• 로직 변경과 같은 커밋이나, 컴포넌트가 없는 경우, package.json > script > chromatic 내 --exit-zero-on-changes에 막혀 배포까진 가지 않는 것으로 보입니다.

2️⃣ storybook 세팅

docs에서 제공되는 커멘드를 통한 기본 설치 및 프로젝트에 필요해보이는 addon(vscode의 익스텐션 같은 느낌입니다)들을 다운로드 하였습니다.
기본 설치된 addon 제외 부가 설치한 에드온들의 리스트 및 설치 이유에 대해 말씀드리고자 합니다.

• @storybook/addon-a11y : 웹 접근성 고려 개발을 고려하기 위해 설치
• @storybook/addon-viewport : 저희 개발이 웹뷰인 것을 고려하여 특정 뷰포트를 가진 휴대폰 기종에서 컴포넌트 테스트를 하기 위해 설치
  => .storybook/preview.ts를 확인 시 해당 addon 관련 추가세팅이 있습니다. 현재는 아이폰 14 프로 멕스입니다.
• @storybook/addon-designs : 피그마 디자인 내 파일 또는 레이아웃 등과 연동 가능하여, 이 것을 스토리북 에서 확인이 됩니다. 예를들어... 디자이너 분께 이 버튼은 OO페이지에서 쓰이는 버튼이고, 하단에 Design 탭을 누르시면 참조한 피그마 페이지가 나와요~ 할때 실시간으로 보기 편해보입니다.
• @storybook/addon-storysource : 스토리북에서 컴포넌트 코드를 확인 가능하기에, 효율성 증대를 위해 추가하였으나... 이슈가 하나 존재합니다.
• msw-storybook-addon : preview.ts에서 세팅하는 라이브러리입니다. stories.tsx 파일을 만드실 때, msw로 만든 api가 사용 가능합니다. 현재는 주석처리해둔 상태입니다.

리뷰어가 중점적으로 확인해야 하는 부분

• storybook-deployment.yml 플로우 및 동작이 특이사항 없는지
• 추가된 addon 및 .storybook/main.ts, preview.ts에 특이사항 없는지
  
  

발견한 이슈

@storybook/addon-storysource 이슈
=> 위에서 말한 이 라이브러리의 경우, 현재 컴포넌트 생성 후에 확인해보심 실제 tsx 컴포넌트가 아니라, storeis.tsx의 코드가 나와버립니다. 의도랑 상당히 다르게 동작하는데 현재 저희 스토리북이 8.3.5인데 6.5까지 내리면 된다는 내용이 있었습니다. storybookjs/storybook#22922 여기를 보시면 자세히 확인 가능하며 아직까지 현재진행형으로 보입니다...

chromatic 초대 관련
=> 아마 제가 생성한 프로젝트 페이지에 초대를 받아야 배포된 스토리북이 확인 될 것 같습니다. 해당 링크의 경우 discord에 공지하겠습니다.

[BangDori]

디스코드에 업로드된 chromatic invite link 확인했습니다! storybook-deployment 단계에서 확인해보고 싶은 게 있어서 Comment 하였습니다!

[BangDori]

고생하셨습니다~~!!

[github-actions]

🔍 Visual review for your branch is published 🔍

Here are the links to:

• the Visual Review Page

• the latest build on chromatic

• the full storybook