🖋️ Next.js + TypeScript 에서 로컬스토리지에 저장하기 - #2 (폰트 및 폰트사이즈 적용)
이전에는 멀티테마를 적용해서 사용자 맞춤형 컬러를 UI에 반영할 수 있도록 했다.
2025.02.23 - [개발일지/Next.js] - [LocalStorage/TailwindCSS] Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용)
[LocalStorage/TailwindCSS] Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용)
🎨 Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용)다이어리 프로젝트이기 때문에 사용자 맞춤형 UI를 제공하여 개인적인 꾸미기와 사용자 환경을 최적화하는 기능을 추가했다.
ayeongjin.tistory.com
이번에는 다이어리 프로젝트에서 사용자 맞춤형 경험을 제공하기 위해 폰트 종류 및 폰트 크기 변경 기능을 추가했다.
1. Tailwind CSS에서 폰트 크기 및 폰트 설정하기
사용자가 선택한 폰트 크기를 동적으로 적용하기 위해 CSS 변수(var(--font-size))를 사용하여 Tailwind 설정을 확장했다.
✅ Tailwind 설정 (tailwind.config.ts)
Tailwind 설정에서 폰트 크기를 변수화하여 사용자가 원하는 크기로 조정할 수 있도록 한다.
이를 통해 전체적인 폰트 크기를 조정하면서도, 특정 크기(sm, lg, xl 등)를 상대적으로 조정할 수 있다.
theme: {
extend: {
fontSize: {
base: "var(--font-size)",
sm: "calc(var(--font-size) * 0.875)",
lg: "calc(var(--font-size) * 1.125)",
xl: "calc(var(--font-size) * 1.25)",
"2xl": "calc(var(--font-size) * 1.5)",
},
},
},
폰트 크기를 var(--font-size)로 설정하여 사용자가 원하는 값으로 동적 변경 가능하도록 함.
기본 폰트 크기만 설정하면 Tailwind에서 sm, lg 등의 크기가 적용되지 않기 때문에 상대적인 크기를 조절할 수 있도록 추가적인 설정을 적용했다.
2. global.css에서 폰트 및 폰트 크기 설정
Tailwind 설정에서 정의한 폰트 크기를 적용하기 위해 CSS 변수(--font-size)를 global.css에서 설정한다. 이를 통해 Tailwind 설정과 글로벌 스타일을 연결하여 동적으로 폰트 크기를 변경할 수 있도록 한다.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
/* 폰트 크기 적용 */
html {
font-size: var(--font-size, 16px);
}
/* 폰트 설정 */
@font-face {
font-family: "SUIT-Regular";
src: url("/fonts/SUIT-Variable.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "GowunDodum-Regular";
src: url("/fonts/GowunDodum-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
[data-font="suit"] {
font-family: "SUIT", sans-serif;
}
[data-font="gowun-dodum"] {
font-family: "GowunDodum-Regular", sans-serif;
}
}
다운받은 폰트를 등록하고, data-font 속성을 기반으로 스타일을 동적으로 변경할 수 있도록 함.
3. ThemeContext를 활용한 폰트 및 크기 변경
사용자가 선택한 폰트와 크기를 localStorage에 저장하고, 새로고침 후에도 유지되도록 ThemeContext를 설정했다.
✅ ThemeContext.tsx 생성
export function ThemeProvider({ children, initialFont, initialFontSize }: ThemeProviderProps) {
const [font, setFont] = useState<string | null>(null);
const [fontSize, setFontSize] = useState<number | null>(null);
// 로컬스토리지에서 폰트와 폰트 사이즈 가져오기
useEffect(() => {
if (typeof window !== "undefined") {
setFont(localStorage.getItem("font") || initialFont);
setFontSize(Number(localStorage.getItem("fontSize")) || initialFontSize);
}
}, []);
// 폰트 적용
useEffect(() => {
if (font) {
document.documentElement.setAttribute("data-font", font);
localStorage.setItem("font", font);
}
}, [font]);
// 폰트 사이즈 적용
useEffect(() => {
if (fontSize !== null) {
document.documentElement.style.setProperty("--font-size", `${fontSize}px`);
localStorage.setItem("fontSize", fontSize.toString());
}
}, [fontSize]);
return (
<ThemeContext.Provider value={{ font, setFont, fontSize, setFontSize }}>
{children}
</ThemeContext.Provider>
);
}
export function useTheme() {
const context = useContext(ThemeContext);
if (!context) {
throw new Error("useTheme 훅은 ThemeProvider 내부에서만 사용해야 합니다.");
}
return context;
}
사용자가 변경한 폰트 및 폰트 크기를 유지하고, localStorage를 통해 저장하도록 설정했다.
정리
- Tailwind CSS + CSS 변수를 활용하여 폰트 크기를 동적으로 설정
- global.css에서 data-font 속성을 이용하여 폰트 변경 가능
- ThemeContext를 활용해 사용자가 변경한 폰트 및 크기를 유지
'개발일지 > Next.js' 카테고리의 다른 글
[Client-side Navigation] Next.js 13에서 페이지 이동 및 새로고침 감지하기 (0) | 2025.03.01 |
---|---|
[SSR/CSR] Next.js에서 초기 스타일이 깜빡이는 FOUC 문제 해결하기 (0) | 2025.02.25 |
[LocalStorage/TailwindCSS] Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용) (0) | 2025.02.23 |
[Konva.js] Next.js + TypeScript에서 그림판 만들기 - #3 (그림 저장하기) (0) | 2025.02.21 |
[Konva.js] Next.js + TypeScript에서 그림판 만들기 - #2 (Undo/Redo & 지우개 기능 추가) (0) | 2025.02.20 |