fix: storybook 바벨 이슈 수정

[shinhyojeong]

🔗 이슈 번호

• closed fix: storybook 바벨 이슈 수정 #138

⛳ 구현 사항

• jotai 세팅중 babel.config.js에 추가된 'next/babel'에서 발생하는 이슈를 수정하기 위해 storybook 버전을 �v7로 마이그레이션 합니다.
• 변경된 스토리 작성에 따라 스토리를 수정합니다.

📚 구현 설명

• 버전업 한 후 type관련 버전 충돌로 인해 type을 제대로 잡지 못하는 이슈가 발생하였습니다. 해결을 위해@types/react, @types/react-dom의 버전을 고정을 위해 package.json에 resolutions를 추가하였습니다. (관련 자료)

💡 코드 리뷰 포인트

• 스토리 마이그레이션 하면서 컨벤션을 수정했는데 관련해서 의견이 있으시면 남겨주세요 ~!

🔥 이슈와 해결 방안

babel 이슈 발생

시도 방법

• storybook 내부에 storybook에만 적용되는 babel 파일 만들기
  • storybook/babel.config.js 파일을 main에 extends하여 해당 파일을 바라보게 해주려 시도했지만 계속 root 파일을 바라봄
  • babel 파일을 두개로 나누는 것이 근본적인 문제 해결 방식은 아닌 듯 해 다른 방법 서치
• babel-loader의 버전 충돌 문제라는 이야기가 있어 이를 해결하기 위해 package.json에서 resolutions에 babel-loader 버전을 고정([관련 자료](babel-loader conflicts with create-react-app version storybookjs/storybook#5183))
  • 해당 이슈가 해결된다는 버전으로 고정해줘도 여전히 같은 이슈 발생
  • 찾은 해결 방식과 다른 next 환경이라 그런지 이슈가 해결되지 않음

해결 방법

이슈를 서치해보니 storybook v7에서는 next에 관련된 설정을 세팅해주는 plugin을 제공한다고 하여(관련 자료](storybookjs/storybook#23063)), v7로 마이그레이션해 문제를 해결 (마이그레이션 자료)

추가적인 이슈

• 버전업 한 후 type을 제대로 잡지 못하는 이슈가 발생해 @types/react, @types/react-dom의 버전을 고정을 위해 package.json에 resolutions를 추가하여 해결 (관련 자료)
• 자동 마이그레이션 이후 하위 이슈가 발생했는데 yarn.lock, node_modules 파일을 제거하고 재설치하여 해결 (관련 자료**]([Bug]: string-width dependency stops storybook from executing storybookjs/storybook#22431))

[chojooyoung]

컨벤센 관련해서 정하고 approve 누르겠습니다!
이슈공유 감사합니다!

[sonsurim]

LGTM