올리브영 서비스에 사용되는 컴포넌트를 모아놓은 그곳!

올리브영은 서비스 운영 시 공통 원칙을 준수한 디자인 패턴을 재사용하여 작업 효율성을 높이고자 디자인 시스템 구축을 시작했다. 이를 위해 컴포넌트를 별도 저장소로 분리하고, 컴포넌트의 구조와 형태를 독립적으로 확인할 수 있는 가이드라인 문서를 구축하는 것을 목표로 삼았다.

기술 스택으로는 Vite, React, TypeScript 환경을 채택했다. 컴포넌트 문서화를 위해 Storybook을 사용하며, CSS-in-JS 라이브러리인 Emotion의 @emotion/react 패키지를 활용해 스타일을 관리한다.

주요 구현 사항은 다음과 같다.

• 전역 스타일 적용: preview.tsx 파일에서 Global 컴포넌트를 사용하여 CSS 리셋 및 모바일 환경 최적화를 위한 전역 스타일을 관리한다.
• 컴포넌트 구조화: index.ts, Radio.tsx 등 파일 분리를 통해 모듈화된 컴포넌트를 생성한다.
• 동적 스타일링: Emotion의 css prop을 활용하여 컴포넌트의 disabled나 checked 같은 상태(props)에 따라 조건부 스타일링을 유연하게 적용한다.