[LocalStorage/TailwindCSS] Next.js에서 로컬스토리지에 저장하기 - #2 (폰트 및 폰트사이즈 적용)

🖋️  Next.js + TypeScript 에서 로컬스토리지에 저장하기 - #2 (폰트 및 폰트사이즈 적용)

이전에는 멀티테마를 적용해서 사용자 맞춤형 컬러를 UI에 반영할 수 있도록 했다.

2025.02.23 - [개발일지/Next.js] - [LocalStorage/TailwindCSS] Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용)

[LocalStorage/TailwindCSS] Next.js에서 로컬스토리지에 저장하기 - #1 (멀티 테마 적용)

 

이번에는 다이어리 프로젝트에서 사용자 맞춤형 경험을 제공하기 위해 폰트 종류 및 폰트 크기 변경 기능을 추가했다.

 

---

 

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를 활용해 사용자가 변경한 폰트 및 크기를 유지