텍스트 크기조절 배너

package.json

@@ -23,6 +23,7 @@
     "next": "15.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
     "react-rnd": "^10.5.2",
     "rehype-highlight": "^7.0.2",

src/app/globals.css

@@ -4,6 +4,11 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  --text-scale: 1.0;
+}
+
+html {
+  font-size: calc(16px * var(--text-scale));
 }
 
 @theme inline {

src/app/layout.tsx

@@ -33,6 +33,8 @@ export const metadata: Metadata = {
   },
 };
 
+import TextSizeAdjuster from '@/components/Common/TextSizeAdjuster';
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -79,6 +81,7 @@ export default function RootLayout({
             {children}
           </div>
         </div>
+        <TextSizeAdjuster />
         <Analytics />
         <SpeedInsights />
       </body>

src/components/Common/TextSizeAdjuster.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { FaPlus, FaMinus } from 'react-icons/fa';
+
+const TEXT_SCALE_KEY = 'text-scale';
+const DEFAULT_TEXT_SCALE = 1.0;
+const MIN_TEXT_SCALE = 0.8;
+const MAX_TEXT_SCALE = 1.2;
+const STEP_TEXT_SCALE = 0.1;
+
+export default function TextSizeAdjuster() {
+  const [currentScale, setCurrentScale] = useState<number>(DEFAULT_TEXT_SCALE);
+
+  useEffect(() => {
+    const savedScale = localStorage.getItem(TEXT_SCALE_KEY);
+    const initialScale = savedScale ? parseFloat(savedScale) : DEFAULT_TEXT_SCALE;
+    setCurrentScale(initialScale);
+    document.documentElement.style.setProperty('--text-scale', initialScale.toString());
+  }, []);
+
+  const adjustTextSize = (direction: 'increase' | 'decrease') => {
+    setCurrentScale((prevScale) => {
+      let newScale = prevScale;
+      if (direction === 'increase') {
+        newScale = Math.min(MAX_TEXT_SCALE, prevScale + STEP_TEXT_SCALE);
+      } else {
+        newScale = Math.max(MIN_TEXT_SCALE, prevScale - STEP_TEXT_SCALE);
+      }
+      localStorage.setItem(TEXT_SCALE_KEY, newScale.toString());
+      document.documentElement.style.setProperty('--text-scale', newScale.toString());
+      return newScale;
+    });
+  };
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex space-x-2 p-2 bg-gray-800 text-white rounded-full shadow-lg">
+      <button
+        onClick={() => adjustTextSize('decrease')}
+        className="p-2 rounded-full bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500"
+        aria-label="Decrease text size"
+      >
+        <FaMinus />
+      </button>
+      <button
+        onClick={() => adjustTextSize('increase')}
+        className="p-2 rounded-full bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500"
+        aria-label="Increase text size"
+      >
+        <FaPlus />
+      </button>
+    </div>
+  );
+}