소개

SOPO Design System은 개발자와 개발 조직을 연결하는 제품을 위한 공통 시각 언어입니다. 현재 SOPO 웹에서 사용 중인 구현을 기준으로 정리했습니다.

포함 범위

• 디자인 토큰: 색상, 타이포그래피, 간격, 반경, 그림자, 브레이크포인트, z-index, 모션
• 라이트·다크 테마와 styled-components 헬퍼
• React UI 컴포넌트 23개
• currentColor 기반 React SVG 아이콘 38개
• 컴포넌트 사용 원칙과 접근성 기준

디렉터리

.
├── package/  # 실제 디자인 시스템 소스
└── docs/     # 이 문서 사이트

이 저장소는 모노레포가 아닙니다. 루트의 단일 프로젝트에서 디자인 소스와 문서를 함께 검증합니다.

현재 단계

외부 패키지 이름과 레지스트리 배포 방식은 아직 정하지 않았습니다. 그 전까지 package/를 정본으로 사용하며, 문서는 이 소스를 직접 렌더링합니다.