storybook

우리만의 디자인 시스템을 만들고 싶다 새롭게 입점사 프로젝트에 들어가며 디자인시스템대로 컴포넌트를 만들어 회사 내 다른 프로젝트에서도 사용하고 싶었다! 지금까지는 디자인 시스템이 정해져 있는 것이 아니라 그때그때 시안에 맞춰서 작업해서 소스가 더러웠다 이번 기회에 우리만의 디자인 시스템을 만들고자 했다 위처럼 버튼에 대한 디자인 시스템이 정의되어 있다면 색상, 사이즈에 따라 버튼 컴포넌트를 만들면 된다! Button Component 만들기 어떻게 만들면 좋을까에 대해서 고민하며 찾아보다가 velog의 오픈소스를 봤는데 size, color를 따로 정의하고 props로 받는 부분이 너무 깔끔하게 잘되어 있어 이를 참고하여 만들었다 사이즈 스타일링 피그마에 정의된 대로 사이즈를 나누어 각각의 사이즈를 상..

.storybook/main.ts파일에서 webpackFinal 부분을 추가해주면 된다! 나는 svg파일은 잘 가져와지나 width, height 등이 적용되지 않았다 그럴 때는 아래 소스를 추가해줘야 한다 options: { icon: true } svg파일이 React 컴포넌트로 변환될 때, svg파일을 아이콘으로 사용할 수 있도록 해준다 즉, width, height, color..등 기능을 사용할 수 있도록 해준다 import type { StorybookConfig } from '@storybook/nextjs' const config: StorybookConfig = { stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx..