올리브영 서비스에 사용되는 컴포넌트를 모아놓은 그곳!
12
AI 요약
이 글은 AI가 원문을 분석하여 핵심 내용을 요약한 것입니다.
디자인 시스템 개요
디자인 시스템은 웹 UI 디자인에서 재사용 가능한 컴포넌트와 패턴을 정의하는 가이드라인입니다. 이를 통해 올리브영 서비스의 통일성과 효율성을 높일 수 있습니다.
디자인 시스템 구축 과정
- Vite, React, TypeScript 환경에서 Storybook과 Emotion을 활용하여 디자인 시스템을 구축했습니다.
- Storybook은 독립적인 환경에서 컴포넌트를 문서화할 수 있는 오픈소스 툴입니다.
- Emotion은 CSS-in-JS 라이브러리로, 리액트와 함께 사용하여 동적 스타일링을 지원합니다.
컴포넌트 예시 - Radio
Radio 컴포넌트는 상태에 따라 동적 스타일을 적용할 수 있으며, 조건부 스타일링을 통해 다양한 모습을 구현할 수 있습니다. 최종적으로 GitHub Packages로 배포될 예정입니다.