Storybook 디자인시스템 구축하기

회사에서 부족한 일정으로 미처 도입하지 못했던 디자인 시스템 구축을 개인적으로라도 꼭 해보고 싶어서 저녁 시간마다 열심히 디자인하고 개발했다.emotion + storybook + typescript 로 진행했으며 rollup.js 로 번들 작업 후 npm 라이브러리로

컴포넌트를 만들기 전, css를 reset하는 작업이 필요하다.공통으로 사용되는 font-family도 이때 설정해주면 편하다.src 폴더 하위에 GlobalStyle.tsx 를 작성했다.(font는 Noto Sans KR 기준)reset css는 구글에 서치하면 나오

스토리북으로 가장 먼저 만들어보았던 컴포넌트는 버튼 컴포넌트!버튼이라고 만만하게 보면 안된다.disabled, fullWidth, hover...등 경우의 수가 많기 때문에 작성해야하는 스타일이 많다 :)피그마로 직접 만들어본 버튼 디자인이다.피그마 처음 써봤는데 기존