개요
프로젝트에서 Next.js의 next/font/local을 사용하여 Pretendard 폰트를 적용하고 있습니다.
이 글에서는 Storybook에서도 동일한 폰트를 적용하는 방법을 정리했습니다.
프로젝트 환경
Next 14.1.4
Storybook 8.0.6
Next.js에서 Pretendard 폰트 설정
Next.js에서는 next/font/local을 사용하여 폰트를 불러오고, 최상위 layout.tsx에서 className을 부여하여 전역적으로 스타일을 적용하고 있습니다. 아래는 Pretendard 폰트를 설정하는 코드 예시입니다.
// app/font.ts
import localFont from 'next/font/local';
export const Pretendard = localFont({
src: './../public/fonts/PretendardVariable.woff2',
display: 'swap',
weight: '45 920',
});
// app/layout.tsx
import { Pretendard } from '@/font';
export default function RootLayout({ children }) {
return (
<html lang="ko" className={Pretendard.className}>
<body>{children}</body>
</html>
);
}
Storybook에서 Pretendard 폰트 적용하기
Step 1: 폰트 파일 위치 설정
Storybook에서도 동일한 폰트를 사용하기 위해 몇 가지 설정이 필요합니다. 먼저 폰트 파일의 위치를 Storybook에 알려줘야 합니다. .storybook/main.js 파일에서 staticDirs 설정을 추가합니다.
from은 .storybook/main.ts을 기준으로 상대적인 경로를 명시하고, to는 절대 경로를 적어줍니다.
// .storybook/main.ts
module.exports = {
staticDirs: [{ from: '../public/fonts', to: '/fonts' }],
// 기타 설정...
};
Step 2: 글로벌 스타일, 폰트 설정
먼저, 글로벌 CSS를 적용하기 위해 .storybook/preview.tsx 파일에서 CSS 파일을 임포트 합니다.
그리고 모든 스토리북 컴포넌트에 폰트를 적용하기 위해 Decorator를 사용합니다.
이때, className을 직접 주는 대신, style로 설정하여 폰트를 적용합니다. (className으로 적용 시, 스토리북에서 동작하지 않습니다!)
작업하며 tsx 문법을 추가했기 때문에, preiview 파일의 확장자를 .ts 에서 .tsx로 변경이 필요합니다.
// .storybook/preview.tsx
import type { Preview } from "@storybook/react";
import { Pretendard } from '@/font';
import '@/globals.scss';
const preview: Preview = {
decorators: [
(Story: any) => (
<div style={Pretendard.style}>
<Story />
</div>
),
],
};
export default preview;
마무리
Next Local Font를 적용하며, Storybook에도 적용하는 방법을 알아보았습니다.
preview.ts 파일은 스토리북 내에서 전역 설정을 관리하는 파일로, 데코레이터를 활용하면 모든 스토리에 공통적인 설정을 추가할 수 있습니다👍
'TECH' 카테고리의 다른 글
| Storybook에서 UseState 사용하기 (0) | 2024.05.25 |
|---|---|
| NestJS, Multer 한글 파일명 깨지는 오류 (0) | 2024.05.08 |
| Angular ngIf 처럼 동작하는 custom directive 만들기 (2) | 2024.05.01 |
| PM2, NGINX 자동 실행하기 (1) | 2024.01.14 |
개요
프로젝트에서 Next.js의 next/font/local을 사용하여 Pretendard 폰트를 적용하고 있습니다.
이 글에서는 Storybook에서도 동일한 폰트를 적용하는 방법을 정리했습니다.
프로젝트 환경
Next 14.1.4
Storybook 8.0.6
Next.js에서 Pretendard 폰트 설정
Next.js에서는 next/font/local을 사용하여 폰트를 불러오고, 최상위 layout.tsx에서 className을 부여하여 전역적으로 스타일을 적용하고 있습니다. 아래는 Pretendard 폰트를 설정하는 코드 예시입니다.
// app/font.ts
import localFont from 'next/font/local';
export const Pretendard = localFont({
src: './../public/fonts/PretendardVariable.woff2',
display: 'swap',
weight: '45 920',
});
// app/layout.tsx
import { Pretendard } from '@/font';
export default function RootLayout({ children }) {
return (
<html lang="ko" className={Pretendard.className}>
<body>{children}</body>
</html>
);
}
Storybook에서 Pretendard 폰트 적용하기
Step 1: 폰트 파일 위치 설정
Storybook에서도 동일한 폰트를 사용하기 위해 몇 가지 설정이 필요합니다. 먼저 폰트 파일의 위치를 Storybook에 알려줘야 합니다. .storybook/main.js 파일에서 staticDirs 설정을 추가합니다.
from은 .storybook/main.ts을 기준으로 상대적인 경로를 명시하고, to는 절대 경로를 적어줍니다.
// .storybook/main.ts
module.exports = {
staticDirs: [{ from: '../public/fonts', to: '/fonts' }],
// 기타 설정...
};
Step 2: 글로벌 스타일, 폰트 설정
먼저, 글로벌 CSS를 적용하기 위해 .storybook/preview.tsx 파일에서 CSS 파일을 임포트 합니다.
그리고 모든 스토리북 컴포넌트에 폰트를 적용하기 위해 Decorator를 사용합니다.
이때, className을 직접 주는 대신, style로 설정하여 폰트를 적용합니다. (className으로 적용 시, 스토리북에서 동작하지 않습니다!)
작업하며 tsx 문법을 추가했기 때문에, preiview 파일의 확장자를 .ts 에서 .tsx로 변경이 필요합니다.
// .storybook/preview.tsx
import type { Preview } from "@storybook/react";
import { Pretendard } from '@/font';
import '@/globals.scss';
const preview: Preview = {
decorators: [
(Story: any) => (
<div style={Pretendard.style}>
<Story />
</div>
),
],
};
export default preview;
마무리
Next Local Font를 적용하며, Storybook에도 적용하는 방법을 알아보았습니다.
preview.ts 파일은 스토리북 내에서 전역 설정을 관리하는 파일로, 데코레이터를 활용하면 모든 스토리에 공통적인 설정을 추가할 수 있습니다👍
'TECH' 카테고리의 다른 글
| Storybook에서 UseState 사용하기 (0) | 2024.05.25 |
|---|---|
| NestJS, Multer 한글 파일명 깨지는 오류 (0) | 2024.05.08 |
| Angular ngIf 처럼 동작하는 custom directive 만들기 (2) | 2024.05.01 |
| PM2, NGINX 자동 실행하기 (1) | 2024.01.14 |
