fix: 스토리북 에러 대응 #1298
fix: 스토리북 에러 대응 #1298
Conversation
|
🚀 프리뷰 배포 확인하기 🚀 |
.storybook/preview.tsx
Outdated
| @@ -48,7 +49,9 @@ export const decorators = [ | |||
| <QueryClientProvider client={queryClient}> | |||
| <QueryParamProvider adapter={NextAdapterPages}> | |||
| <RecoilRoot> | |||
| <LazyMotion strict features={() => import('framer-motion').then((mod) => mod.domAnimation)}> | |||
| {/* FIXME: break tree shaking 발생으로 주석 처리 */} | |||
| {/* <LazyMotion strict features={() => import('framer-motion').then((mod) => mod.domAnimation)}> */} | |||
There was a problem hiding this comment.
Lazy Motion이 문제가 아니라, LazyMotion이 있을 때 m 대신 motion 을 사용한게 문제에요..! (Strict 옵션)
There was a problem hiding this comment.
호오.., TagSelector에 사용한 바텀시트에 react-modal-sheet 라이브러리를 사용하였는데, 해당 라이브러리 깃허브가서 코드 찾아보니, 여기서 motion을 사용하고 있네요, 방법을 찾아보는 중입니다!
There was a problem hiding this comment.
해당 이슈를 해결하려고, 바텀시트 레포 찾아가서 이슈도 올려보고, 커스터마이징할 수 있는 방안도 찾아보았는데, 해결하기가 쉽지는 않아보여요...
_app.tsx에서도 strict모드를 사용하고 있지는 않더라구요...! 그래서 4기 FE와 논의 후, strict를 제거하려고 합니다.
| openCategory: () => { | ||
| console.log('openCategory'); | ||
| }, | ||
| openTag: () => { | ||
| console.log('openCategory'); | ||
| }, |
|
(뒷북 리뷰 제송합니다 ㅜㅜ..)
@seojisoosoo 어떤 문제인지 완전 공감해요. 그래서 구조 설계를 처음부터 데이터를 받아오는 부분과 해당 데이터를 ui로 그려주는 부분을 잘 나눠주는 것도 하나의 방법이고, 풀구에선 그러려고 했던 것 같아요! (container - presenter 패턴 이라고도 불렀던 것 같아요.) 하지만, 이걸 여러명이서 협업하면서 모두 지키기는 현실적으로 어려운데, ui 테스트를 깨지지 않게 하기 위해서 구조를 바꾸는 리팩토링을 하는건 오히려 너무 위험성이 큰 것 같더라구요. 그래서 차선책으로 지수가 한 것 처럼 mock 데이터를 바라보도록 스토리를 재작성 할 수도 있는데요, 크게 바꾸지 않고 msw로 useQuery의 데이터 호출을 mocking 하는 방식으로도 해결할 수 있어요. (https://storybook.js.org/addons/msw-storybook-addon) 어렵지 않고 기존의 스토리를 크게 바꿔줄 것도 없어서, 스토리가 깨지는 부분들을 빠르고 쉽게 해결하려고 한다면 저는 요 방법도 추천합니다! (해당 스토리에서 바라보는 api의 주소를 적어주고, 해당 주소에 대한 응답만 모킹해서 적어주면 돼요.) |
🤫 쉿, 나한테만 말해줘요. 이슈넘버
🧐 어떤 것을 변경했어요~?
🤔 그렇다면, 어떻게 구현했어요~?
❤️🔥 당신이 생각하는 PR포인트, 내겐 매력포인트.
해결
논의 요망
📸 스크린샷, 없으면 이것 참,, 섭섭한데요?