Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TEST: 스토리북 세팅하기 #91

Merged
merged 8 commits into from
Jan 27, 2023
Merged

TEST: 스토리북 세팅하기 #91

merged 8 commits into from
Jan 27, 2023

Conversation

pds0309
Copy link
Member

@pds0309 pds0309 commented Jan 26, 2023

Issue


요약

스토리북 사용을 위해 세팅하고 CI 워크플로우를 작성


작업 내용

스토리북 세팅

npx sb init // 스토리북 설치 및 기본 자동 세팅
npm install -D tsconfig-paths-webpack-plugin // ts.config.json 을 사용해 craco 디렉터리 alias를 스토리북에도 적용

추가설정

  • 스토리북에 styled-component 테마 설정
  • 스토리북에 redux 사용, 가짜 router(MemoryRouter) 설정
  • 실제 환경과 유사하게 (그래도 다르지만) 해상도 및 스케일 설정

샘플 컴포넌트 스토리북 추가

  • Modal, GameResultModal

story

CI 워크플로우 작성

  • chromatic으로 PR 시 자동으로 배포되게 함

리뷰어에게 할 말

로컬 실행 방법

npm run storybook

localhost:6006 으로 접속하면 됩니다.

  • 복잡한 컴포넌트는 굉장히 작성이 어려우니 정말 필요할 때 사용하세요! (작은 단위의 컴포넌트 개발 또는 리팩터링)

  • CI는 테스트도 안해보고 1번만에 그냥 올려서 몇 번 안될 수 있습니다.! 😢

    • 어라 한번에 성공했는데 코멘트에 배포 링크가 안나오네요 배포링크
  • 사용법은 오늘 회의 끝나고 상세히 알려드리겠습니다.


발생할 수 있는 트러블

  • svg가 안나올 수 있습니다. 예전 경험으로는 svg관련 세팅을 따로 했었던 것 같은데 식별 시 바로 해결하겠습니다
  • 스토리북이 컴퓨터 해상도에 따라 실제 리액트 앱 처럼 안나올 수 있습니다

후기

  • 이럴 줄 알았으면 조금만 더 빨리 할 걸 그랬습니다.

@github-actions
Copy link

storybook deployed!!!:

@pds0309 pds0309 self-assigned this Jan 26, 2023
@pds0309 pds0309 added the 🧪 test 테스트 label Jan 26, 2023
@pds0309 pds0309 merged commit a516ecd into dev Jan 27, 2023
@pds0309 pds0309 deleted the feat/#84 branch January 27, 2023 07:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🧪 test 테스트
Projects
None yet
Development

Successfully merging this pull request may close these issues.

TEST: 스토리북 세팅 및 CI 설정
2 participants