코드 컨벤션 제작 후 저희는 공통 컴포넌트를 어떻게 프로젝트에서 구축해 갈지 전략을 세웠습니다.
일단 현 프론트엔드 프로젝트의 src/.../common
의 디렉토리에서 시작하기로 했습니다.
그리고 프론트엔드 개발자가 헷갈리지 않게 src/.../common/osds
(os design system)으로 다시 세분화 했습니다.
장기적으로 storybook을 테스팅&커뮤니케이션 도구로 고려하고 있으며,
rollup을 통해 모듈화하는 방법을 공부하고 있습니당.
저희 팀 GUI 가이드는 이미 디자인시스템을 만들기위한 공통 룰이 잘 정리가 되어있었기 때문에 (Figma의 Component 기능을 적극 활용한 가이드)
추상화하는 과정이 수월했습니다.
예시로 보여드린 Button UI 추상화 Draft
프론트엔드 개발자는 기능이 필요한 props를 추가할 수 있다.
notion에서 제공하는 디자인 시스템 템플릿 중 하나를 채택했고 하나씩 정의를 추가해가고 있습니다. !!!!
😵 화이팅 !!