프론트엔드
올리브영 서비스에 사용되는 컴포넌트를 모아놓은 그곳!
두줄요약
올리브영 서비스용 디자인 시스템을 Storybook과 Emotion으로 구축한 과정을 소개했습니다. 전역 스타일, 상태별 컴포넌트 문서화, 패키지 배포와 서비스 적용 방법을 다뤘습니다.
핵심 내용
- 올리브영 서비스용 컴포넌트를 별도 저장소로 모아 디자인 시스템 가이드를 구축한 과정 공유
- Vite, React, TypeScript, Storybook, Emotion 조합으로 컴포넌트 문서화와 재사용 가능한 UI 구성
- 전역 스타일은 Storybook preview의 Global로 관리하고, Radio 같은 컴포넌트는 상태별 스토리와 props 설명으로 문서화
- Emotion의 css prop, 조건부 스타일, keyframes, media queries 등 추가 기능과 패키지 배포 후 서비스 적용 계획
적용해볼 점
- 컴포넌트별 index, 구현 파일, stories 파일로 기본 구조를 분리해 관리
- Storybook의 Controls와 argTypes로 상태별 UI와 소스를 함께 확인
- 디자인 시스템을 패키지화해 서비스 전반의 통일성과 재사용성 강화