[QNRR 299] storybook 환경 재설정#93
Conversation
Storybook 8.6.12 -> 9.0.12 로 업데이트 및 환경 재설정 다수의 패키지,애드온이 변경됨에 따라 정리 및 환경 재설정 package.json, main.ts 을 통해 확인바랍니다.
MSW: 캘린더에서 호출하는 API 를 mocking 하기 위한 라이브러
Widget 에 포함되어있는 SVGR 을 지원하기위해 vite-plugin-svgr 및 관련 설정코드 추
widgets/home/header.tsx 가 서버컴포넌트로 전환됨에 따라 story 사용 불가 제거
aken-you
left a comment
aken-you
left a comment
There was a problem hiding this comment.
storybook 수정하시느라 고생많으셨습니다!
확실히 보기가 편하네요 👍
| onUnhandledRequest: (req, print) => { | ||
| // supress warnings for requesting static assets | ||
| const isStaticAssetRequest = | ||
| /(public|assets)\/(.*?)\.|(svg|jpg|jpeg|png|webp)(\?.*)?$/g; | ||
|
|
||
| import QueryProvider from '../src/app/provider/query-provider'; | ||
| if (isStaticAssetRequest.test(req.url)) { | ||
| return; | ||
| } | ||
| print.warning(); | ||
| }, |
There was a problem hiding this comment.
msw 환경이 정적 에셋 요청을 워닝으로 남기는 로깅에 대하여 관련 URL 화이트리스트 처리
이 부분이랑 연관된 내용으로 보입니다!
어떤 이유로 warning 로깅이 되었는지, url 화이트리스트로 했으면 로깅이 안남는건지 궁금합니다.
There was a problem hiding this comment.
저 부분은 제가 추가한 코드입니다!
디폴트 동작을 완전히 제거할 경우 혹시 모를 상황이 생길까봐 남겨둔 뒤 정규표현식으로 파악되는 에셋 요청들만 제거했습니다.
|
|
||
| interface ButtonProps | ||
| // "size" overrides default shadcn prop.size | ||
| extends Omit<React.ComponentPropsWithoutRef<typeof ButtonShadcn>, 'size'> { |
There was a problem hiding this comment.
shadcn Button 컴포넌트의 size prop과 override돼서 size 타입만 뺀 게 맞을까요?
이건 이번 PR과 무관할 수 있는데요!
제 PR을 보셔서 아시겠지만, 버튼 사이즈 스타일링이 피그마와 다릅니다. 나중에 수정해야합니다 😢
There was a problem hiding this comment.
네 말씀하신 부분이 맞습니다.
버튼 스타일링 변경 부분이 storybook story 파일에 끼치는 영향이 있을까요? 혹시 props 값이 달라졌을지요?
| {month}월은 {data.monthlyCompletedCount}번의 스터디를 완료했어요. | ||
| {month}월은 {data?.monthlyCompletedCount ?? 0}번의 스터디를 | ||
| 완료했어요. | ||
| </div> | ||
| <div className="rounded-100 bg-background-alternative font-designer-14m text-text-default px-150 py-100 text-ellipsis"> | ||
| 총 {data.totalCompletedCount}번의 스터디를 완료했어요. | ||
| 총 {data?.totalCompletedCount ?? 0}번의 스터디를 완료했어요. |
There was a problem hiding this comment.
우선적으로 디폴트 값 처리한 부분입니다! 값이 존재하지 않아 빈칸으로 발생하는 부분을 막기 위해서요!
널리쉬이기 때문에 잘못된 값(빈 문자열) 같은 경우는 처리가 안되겠지만 이 부분을 처리하려면 유효성 검증을 같이 생각해봐야 할 것 같습니다
| .join(', ')} | ||
| /> | ||
| {userProfile.studyApplied ? ( | ||
| {userProfile?.studyApplied ? ( |
There was a problem hiding this comment.
userProfile이 undefined인 경우가 있나요?
There was a problem hiding this comment.
실질적으로 데이터요청을 통해 값을 추출하니 정상적인 상황에서는 그런 일이 발생하지 않겠지만, 네트워크 요청 등이 불가하거나 하는 경우 없는 값에 접근하기 때문에 오류가 발생합니다.
Storybook 실행 시 해당 오류가 발생하기에 옵셔널 처리했습니다.
| @@ -0,0 +1 @@ | |||
| /// <reference types="@vitest/browser/providers/playwright" /> No newline at end of file | |||
There was a problem hiding this comment.
이건 playwright 도입을 위해서 설정해놓으신 걸까요?
There was a problem hiding this comment.
이전에 vitest stortbook 통합을 진행하다가 생성된 파일입니다. 현재 PR과는 관련이 없지만 추후에 테스트를 추가할 계획이 있으니 포함시켜도 좋을 듯 합니다.
|
현재 MVP 개발 및 QA 진행으로 기능 개발이 계속 진행되는 상황이라 PR 일단 닫은 후 이후에 리팩토링 진행 후 머지 진행하는 쪽으로 하겠습니다. |
2 participants
🌱 연관된 이슈
기존 Storybook 환경 설정 및 개선에 관련한 PR 입니다.
관련 PR
☘️ 작업 내용
대부분의 내용은 이전 커밋에 작성되어 있습니다.
PR 을 진행하면서 추가적으로 진행된 부분은 다음과 같습니다.
mockServiceWorker제거tableList관련 파일 네임table-list로 변경 및 story 타이틀 수정msw환경이 정적 에셋 요청을 워닝으로 남기는 로깅에 대하여 관련 URL 화이트리스트 처리storybook build커맨드 확인🍀 참고사항
이전 PR 내역에도 명시되어 있지만, 다시 주의 드립니다.
Storybook 버전 업데이트 및 관련 패키지들이 수정되었기 때문에 디펜던시가 바뀌었습니다.
오류를 제거하기 위해서는 기존의 디펜던시를 제거하고 다시 설치해주시면 됩니다.
rm -rf node_modules yarn.lock && yarn install문제상황 발생 혹은 논의할 사항이 있으면 남겨주시면 확인해보도록 하겠습니다!