CSS-in-JS 라이브러리에서 Typesafe하게 Theme 관리하기

Devsisters는 GatsbyJS와 TypeScript 환경에서 CSS-in-JS 라이브러리인 emotion을 사용하여 스타일을 관리한다. emotion의 ThemeProvider를 활용하면 공통 스타일을 정의하고 하위 컴포넌트에 props로 전달하여 효율적으로 관리할 수 있다.

TypeScript를 도입하면 ThemeProvider에 전달되는 테마 속성에 대한 타입 검사가 가능해진다. 기존 Theme 타입을 확장하여 styled 컴포넌트의 props에 적용함으로써, 정의되지 않은 속성 사용이나 잘못된 타입 입력을 방지할 수 있다.

프로젝트 구조가 깊어지는 Fractal 패턴을 사용할 경우, 하위 컴포넌트가 부모와 다른 테마 속성을 요구하는 중첩된 테마(Nested Theme) 상황이 발생한다. 이때 최상위 테마에 모든 속성을 정의하면 관리 효율이 떨어진다.

이를 해결하기 위해 React Context API와 Intersection Type을 결합한 makeTheme 유틸리티를 사용할 수 있다. 이 방식은 부모 테마와 새로운 테마 속성을 병합하여, 무한히 중첩 가능한 Typesafe한 테마 환경을 구축한다.