storybook + emotion-js 글로벌 스타일적용하기
최근에 블로그에 글을 너무 안쓴 것 같아서 짧게 정리해본다.
podo에서 podolist를 버전업하는 작업을 하고 있는데 사용해보지 않은 기술 스택을 사용해 보고 싶어서 emotion-js를 사용하기로 했다.
(새로운 podolist 개발에는
cypress와storybook을 사용하고있다. )
사용하는 도중에 global css에서 몇 가지 처리해줘야하는 작업들이 있어 처리를 하다보니 몇 가지 이슈들이 있었다. 이 이슈들을 해결하는 방법들을 몇 가지 시리즈로 적어보려한다. 첫 번째 주제는 global style에 관한 글이다.
emotion-js 에서 global style을 지정하는 방법은 어렵지 않다. 링크를 확인해보자.(https://emotion.sh/docs/globals) 그냥 Global 컴퍼넌트를 사용하면 된다.
그리고 사용하는 곳에서 해당 컴퍼넌트를 만들어 주기만 하면 된다. 앱이 진입 하는 부분에 작성하면 된다.
여기 까지 작성했을 때 cypress 는 전혀 문제가 되지 않는다. 하지만 storybook 에서는 다른 처리를 해주지 않는다면 해당 global style이 적용되지 않을 것이다.
Decorator로 storybook에 global style 적용하기
decorator를 사용하지 않는다면 모든 스토리마다 GlobalStyle을 import해야 할 것이다. 스토리가 100개가 된다면 100번 import해야 해당 스토리를 시각적으로 올바르게 테스트 할 수 있을 것이다. 하지만 너무 비효율적이다.
위에서 말한 별다른 처리는 storybook의 decorator 를 이용하면 편하게 해결된다(더 편한방법이 있다면 댓글로 남겨주길 바란다!). decorator 는 단순하makeDecorator 를 이용해 wrapper를 만들어 줬다.게 스토리를 한 번 감싸주는 래퍼이다.
그럼 decorator를 하나 만들어보자. .storybook/config.js 파일을 조금 수정해보자.
makeDecorator 를 이용해 wrapper를 만들어 줬다.makeDecorator 를 이용해 wrapper를 만들어 줬다. 100번 작성하는 것보다 훨씬 더 편해졌다. 사실 decorator로는 많은 것을 해줄 수 있다. 컴퍼넌트의 기본 옵션들을 세팅해 줄 수도 있고 변수를 받아 다르게 처리할 수도 있다.
그럼 잘 적용되었는지 확인해보자.
잘 되었다!
