프론트엔드

Custom Style System 구축하기

두줄요약

styled-components 기반 프로젝트에서 반복되는 레이아웃 스타일을 줄이기 위해 Custom Style System을 구축했습니다. props 매핑과 반응형 인터페이스로 VStack, HStack 같은 재사용 컴포넌트를 만들었습니다.

styled-components 기반 프로젝트에서 반복되는 flex, grid 레이아웃 스타일 패턴을 줄이기 위한 Custom Style System 구축 경험
기존 환경 위에서 동작, 인터페이스 제어권 확보, 축약 표현 지양, 성능 영향 최소화라는 원칙 설정
props를 css 속성으로 매핑하는 로직과 VStack, HStack, Center, Grid 같은 컴포넌트 구현으로 스타일 선언을 단순화
동료와 인터페이스 범위를 논의하며 확장성과 유지보수성을 함께 고려