[Hemdi] Storybook 7 Migration

[hemudi]

close #64

✨ 작업내역

Storybook 7 최신 버전으로 업데이트하면서 argTypes의 defaultValue가 적용되지 않는 문제를 해결하기 위해 마이그레이션 작업을 진행했습니다.

• storybook과 관련 addon 의 버전 업그레이드
• 기존 CSF2 방식으로 작성되어 있던 story 코드들을 CSF3 로 변환
• defaultValue 대신 args 속성을 활용하여 디폴트 값 적용
  • 참고 : defaultValue not working in Storybook 7
• vite 도입 후 storybook 의 빌더로 vite 를 사용하기 위해 관련 패키지를 설치
  • @storybook/react-vite

🔥 storybook vite build error

현재 기존 작업 내역과 merge 하면서 storybook 에도 vite 를 도입해보려던 중 아래와 같은 에러가 발생한 상태입니다.

해당 에러는 따로 이슈을 열어 작업해야 할 것 같아 미해결 상태로 우선 PR 제출합니다.

[healtheloper]

햄디가 본문에 보여주신 에러메세지는 PR 과 다른 환경인가요?
vite config 를 설정하고 실행해보니 저는 이런 오류가 발생하네요.

Failed to load url /virtual:/@storybook/builder-vite/vite-app.js (resolved id: /virtual:/@storybook/builder-vite/vite-app.js). Does the file exist?

햄디가 공유해준 오류는 exports 관련 오류인걸 보면 뭔가 react 패키지를 빌드시킨 결과물을 가져오는건가? 라는 생각이 드는데, storybook 은 @cos-ui/react 에서 직접 가져오는게 없거든요 ( 개발시 수정된 결과를 바로 가져와야해서 ) 혹시 PR 에 올려진 것과 다른 환경이라면 공유해주시면 같이 고민해보겠습니다!

[healtheloper]

지금 코드 기반으로 Storybook 실행을 시켜보니, Avatar, Icon 등이 제대로 동작하지 않았어요, 이유는 css prop 을 변환시켜 주지 않은 거라서, 아래처럼 vite config 를 추가해주면 좋을 것 같습니다.

Storybook 에서는 vite.config.ts 에서 설정을 가져오게하는 법을 얘기하는데, 모노레포이기도 하고, 각 패키지가 동일한 vite config 를 활용할 것같진 않아서 루트에서 공유되어 사용되기보다 각각 관리하는게 맞다고 생각합니다.

Suggested change

	framework: {
	name: '@storybook/react-vite',
	options: {},
	},
	framework: {
	name: '@storybook/react-vite',
	options: {},
	},
	async viteFinal(config) {
	return {
	...config,
	plugins: [
	react({
	babel: {
	plugins: [
	'babel-plugin-styled-components',
	[
	'inline-react-svg',
	{
	svgo: {
	plugins: [
	{
	name: 'preset-default',
	params: {
	overrides: {
	removeViewBox: false,
	},
	},
	},
	{
	name: 'removeAttrs',
	params: { attrs: '(data-name)' },
	},
	'cleanupIDs',
	],
	},
	},
	],
	],
	},
	}),
	],
	};
	},