반응형
지난 번 NextJs Local 폰트를 사용 할 수 있도록 nextJs 와 storybook 에 세팅을 해놓았다.
그리고 vanilla extract globalTheme 과 함께 사용하려고 하는데 문제가 생겼다.
어떤 문제인지 원인과 해결방법을 알아보자
1. 무슨 문제일까?
const globalVars = createGlobalTheme(':root', {
font: {
pretendard: 'var(--font-pretendard)',
hakgoansimMulgyeolB: 'var(--font-hakgoansimMulgyeolB)',
caniculeDisplayB: 'var(--font-caniculeDisplayB)',
},
});
위와 같은 환경에서 globalVars.font.hakgoansimMulgyeolB 를 사용하면 폰트가 적용이 되지 않았다.
2. 원인은!
1번의 사진만 봐도 눈치를 챘을 수 있다.
js 에만 스코프가 있는게 아니다ㅎㅎ
내 var 을 넣어둔 div 보다 위에 있는 :root 에서 div의 var 을 찾았으니 당연히 안되는거였다.
3. 해결
사실 스토리북에서도 variable 을 root 에 넣고 싶었는데
decorator 내부에서 <html class=""> 이런식으로 추가해버리면 기존 스토리북 UI 도 사라져 버려서.. div 로 감싸서 넣었었다.
decorators: [
Story => {
if (window?.document?.documentElement) {
// next/font 오류로 인해 스토리북 환경에서는 pretendard var 대신 FontFamily 로 사용
window.document.documentElement.classList.add(
hakgoansimMulgyeolB.variable,
caniculeDisplayB.variable
);
}
return <Story />;
},
],
생각해보니 jsx 로 넣을 수 없다면 직접 추가하면 되겠다는 생각이 들어
위와 같이 처리해주었다.
4. 해결했지만 또 다른 문제..
코드에 적힌 주석처럼 pretendard 는 문제가 있어서ㅜㅜ
위와 같이 처리해주지 못했다.
pretendard.variable 을 찍어보면 다른 서체와는 다르게 스페이스바가 들어가 있다.
nextjs 에서는 괜찮은데 스토리북 쪽에서만 그랬다.
(스페이스를 없애는 등 여러가지 시도를 해보았지만 되지 않았다... )
그래서...
어쩔 수 없이 preview-head.html 을 만들고
스토리북에서는 cdn 으로 폰트를 로드하는 방식을 택했다.
반응형
'내가 경험한 것 > 1.5' 카테고리의 다른 글
| Package.json engine 에 명시된 버전 강제하기 (0) | 2024.04.25 |
|---|---|
| Vitest 간단 사용후기 (0) | 2024.04.22 |
| NextJs LocalFont 세팅 (2) | 2024.03.15 |
| eslint 와 prettier 대신 사용하는 Biome?? (intelliJ 세팅 포함) (0) | 2024.02.22 |
| react 프로젝트 시작할 때 세팅목록 part2 (0) | 2024.02.04 |
