두잇 · 업무 프로젝트
doit-uikit
사내 공통 UI 라이브러리
프로젝트마다 반복 구현하던 UI를 공통 라이브러리로 만들고, React 개발 규칙을 팀에 공유했습니다.
담당 업무
- 컴포넌트
- Atomic Design 기반 UI 컴포넌트 24종 개발: 기본 컴포넌트 12종, 차트 5종을 포함한 복합 컴포넌트 12종
- 패키징
- React·React DOM을 peer dependency로 분리하고 vite-plugin-dts로 타입 선언을 자동 생성해 npm 배포
- 문서화
- Storybook·Chromatic으로 사용법·Props·상태별 UI 문서화
- 팀 표준
- 디렉토리 구조·디자인 패턴·라이브러리 선정 기준 정립, ESLint·Prettier 설정 및 팀 온보딩 교육
결과
D.A.X와 회사 홈페이지에서 사용하며 요구사항에 맞춰 라이브러리를 개선하고 배포했습니다.
컴포넌트·사용 문서·린터 설정을 함께 제공해 공통 UI와 개발 규칙을 적용했습니다.
구현 구조와 설계
컴포넌트 조합과 라이브러리 배포
Button·Input 같은 Atom을 조합해 FileInput 등의 Molecule을 구성했습니다.
Storybook에서 Props·상태·사용 예를 확인하고 Playground로 직접 값을 바꿔볼 수 있도록 문서화했습니다.
vite-plugin-dts로 타입 선언을 함께 배포하고 React·React DOM은 peer dependency로 분리했습니다.
D.A.X와 회사 홈페이지에 적용하면서 발견한 요구사항을 라이브러리에 반영했습니다.
프로젝트 화면
사용 기술
TypeScript · React 18 · Vite · styled-components · Storybook 8 · Chromatic · vite-plugin-dts