[CHORE] storybook 배포 자동화를 위해 Github Action 스크립트를 작성

[wzrabbit]

이슈 번호

resolves: #37

작업 요약

본 PR에서는 storybook 문서의 빌드 및 배포를 Github Actions를 이용해 자동화하였습니다.

이렇게 storybook의 문서를 배포하는 이유는 아래와 같습니다.

• 같은 프론트엔드 팀원은 물론, 다른 분야의 팀원들도 더 쉽게 프론트엔드의 컴포넌트를 사용해 볼 수 있습니다.
• 분야를 가리지 않고 현재 프론트엔드의 작업 상황을 이해하기에 더 용이해집니다.
• 피드백을 더 쉽게, 자주 받아낼 수 있고, 이를 바탕으로 개선할 수 있습니다.
• 때로는 프론트엔드의 props는 백엔드의 명세와도 관련이 있기 때문에, 명세의 역할을 해줄 수도 있습니다.

storybook의 배포는 아래와 같이 일어납니다.

• dev 브랜치 또는 main 브랜치에 push가 일어났을 경우
• yarn install --immutable --immutable-cache --check-cache 명령어를 실행해 yarn.lock에 있는 패키지의 버전을 유지하면서 의존성 모듈을 설치한 다음
• yarn build-storybook 명령어를 실행해 storybook 정적 문서를 빌드하고
• 빌드 결과물이 저장된 /storybook-static 폴더의 내용물들을 배포 디렉토리로 설정해
• storybook-deploy 브랜치에 push를 진행

storybook-deploy 브랜치를 제가 이미 배포할 브랜치로 설정해두었기 때문에, 해당 브랜치로 빌드한 결과물을 push하면 배포된 페이지에도 이 변경사항이 반영될 것입니다.

이해가 안 가시는 부분이나 궁금한 점이 있으실 경우, 혹은 다른 의견이 있으실 경우 자유롭게 코멘트 남겨주시기 바랍니다! 참고로 배포할 브랜치명, 배포를 하는 조건 등은 정할 수 있습니다.

또한, Squash Merge를 진행하실 경우 커밋 이름 확인 후 Merge를 부탁드리겠습니다! 커밋이 하나뿐이라 chore: storybook 배포 자동화를 위해 Github Action 스크립트를 작성 이 아마 이름으로 정해져 있을 거에요.

참고 자료

PR을 올리기 전 먼저 배포를 실행해 보았기 때문에, 배포는 이미 이루어져 있습니다. 아래의 주소에 접속해 보시면 잘 반영된 것을 확인하실 수 있을 것입니다.

• https://kim-aide.github.io/frontend/