Storybook을 사용해보자(3) - next/font 적용하기
📌상황
storybook으로 작업을 하던 와중, next/font가 적용되지 않고 있다는 문제점을 발견했다. 실제 사용자가 보여지는 것을 정리하는 작업이고, 폰트가 미치는 영향이 큰 만큼 수정이 필요했다.
첫 번째로 storybook 공식문서를 확인해보았으나…
next/font/google You don’t have to do anything. next/font/google is supported out of the box.
아무것도 하지 않아도 된다는 말 뿐…😑
다른 인터넷 문서도 local font를 사용하는 것에 초점을 맞춘게 대부분이라 해결방법을 찾기 어려웠지만.. 일본 웹의 도움을 받아 해결할 수 있었다. 😏 (ありがとうございます！)
✅해결방법
➡️ font.ts를 만들자
나는 layout.tsx 파일에 바로 next/font를 불러와 사용하고 있는데, 이 것을 layout.tsx 와 스토리북의 preview.tsx 에서 공통적으로 사용하기 위해 src/font.ts 파일을 만들었다.
여기서 주의깊게 봐야할 건 variable 이다!
1
2
3
4
5
6
7
8
import { Noto_Sans_KR } from "next/font/google"
export const Noto = Noto_Sans_KR({
subsets: ["latin"],
display: "swap",
variable: "--noto",
fallback: ["sans-serif"],
})
➡️ global.css 파일을 작성하자
기존에 tailwind 설정을 불러오는 global.css 파일에 font-family를 지정한다. 이때 새로운 클래스명에도 font-family를 지정해주면 된다.
var는 위에 font.ts
1
2
3
4
5
6
7
8
9
10
11
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
font-family: var(--noto);
}
.font {
font-family: var(--noto);
}
➡️ layout.tsx 파일을 설정하자
body태그에 className으로 font.ts에 설정한 Noto.variable과 css 파일에 설정해둔 font 클래스를 넣어주었다.
npm run dev로 확인해보면 개발모드에서 폰트가 적용된 것을 확인할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import "./globals.css"
import Provider from "./Provider"
import { Noto } from "../font"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ko">
<body className={Noto.variable + " font"}>
<Provider>{children}</Provider>
</body>
</html>
)
}
➡️ preview.ts 파일을 preview.tsx 파일로 변경하자
storybook을 설치하면 자동으로 preview.ts 파일이 생성된다. 이 파일의 확장자를 preview.tsx로 변경하고 아래와 같이 작성한다.
Story들을 font가 적용된 class를 넣은 div로 감싸주는 작업이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import type { Preview } from "@storybook/react"
import "../src/app/globals.css"
import React from "react"
import { Noto } from "../src/font"
const preview: Preview = {
decorators: [
(Story) => (
<div className={Noto.variable + " font"}>
<Story />
</div>
),
],
}
export default preview
이제 npm run storybook으로 확인해보면 storybook에 font가 제대로 적용된 것을 확인할 수 있다!