글자 확대 축소

packages/common/components/src/ui/header/index.tsx

@@ -2,6 +2,7 @@ import "./header.css";
 
 import { useEffect, useCallback, useState, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
+import { Minus, Plus } from "lucide-react";
 import { images } from "@common/assets";
 import type { AuthService, TokenManager } from "@common/auth";
 import { getRemainingMs } from "@common/auth";
@@ -383,6 +384,7 @@ export function Header({
       {/* 데스크톱에서 오른쪽 요소들 */}
       <div className="hidden items-center gap-2 px-2 sm:flex md:px-4">
         <SearchForm />
+        <ScreenZoomControls />
         {mounted ? (
           isLoggedIn && (
             <Popover>
@@ -411,6 +413,48 @@ export function Header({
   );
 }
 
+function ScreenZoomControls() {
+  const [scale, setScale] = useState(1);
+
+  const updateScale = (nextScale: number) => {
+    const boundedScale = Math.min(2, Math.max(0.5, nextScale));
+    document.body.style.zoom = String(boundedScale);
+    setScale(boundedScale);
+  };
+
+  return (
+    <div className="flex items-center gap-1" aria-label="화면 크기 조절">
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="size-[2.8rem] !bg-background p-2 text-foreground hover:!bg-accent"
+        aria-label="화면 축소"
+        title="화면 축소"
+        disabled={scale <= 0.5}
+        onClick={() => updateScale(Number((scale - 0.1).toFixed(1)))}
+      >
+        <Minus />
+      </Button>
+      <span className="min-w-12 text-center text-sm" aria-live="polite">
+        {Math.round(scale * 100)}%
+      </span>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="size-[2.8rem] !bg-background p-2 text-foreground hover:!bg-accent"
+        aria-label="화면 확대"
+        title="화면 확대"
+        disabled={scale >= 2}
+        onClick={() => updateScale(Number((scale + 0.1).toFixed(1)))}
+      >
+        <Plus />
+      </Button>
+    </div>
+  );
+}
+
 function UserMenuContent({
   remainingMs,
   onLogout,