From 3d3dbd4a653780f0833e1c1b73fb7c6bd78dbd4e Mon Sep 17 00:00:00 2001
From: Euichan Park <116147712+ekdnlt714714@users.noreply.github.com>
Date: Sun, 9 Nov 2025 23:29:27 +0900
Subject: [PATCH] =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=ED=81=AC?=
 =?UTF-8?q?=EA=B8=B0=EC=A1=B0=EC=A0=88=20=EB=B0=B0=EB=84=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                               |  1 +
 src/app/globals.css                        |  5 ++
 src/app/layout.tsx                         |  3 ++
 src/components/Common/TextSizeAdjuster.tsx | 54 ++++++++++++++++++++++
 4 files changed, 63 insertions(+)
 create mode 100644 src/components/Common/TextSizeAdjuster.tsx

diff --git a/package.json b/package.json
index 8e11d28..391c9ca 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/globals.css b/src/app/globals.css
index cd7de00..a2d5acd 100644
--- a/src/app/globals.css
+++ b/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 {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a9c357d..15dcc6c 100644
--- a/src/app/layout.tsx
+++ b/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>
diff --git a/src/components/Common/TextSizeAdjuster.tsx b/src/components/Common/TextSizeAdjuster.tsx
new file mode 100644
index 0000000..844746a
--- /dev/null
+++ b/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>
+  );
+}