From 7ee5ebd50646b9d5c43f1bdbaf28463c98197d0b Mon Sep 17 00:00:00 2001
From: jcchoi <jcchoi@onasys.co.kr>
Date: Thu, 1 Oct 2026 20:26:45 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B8=80=EC=9E=90=20=ED=99=95=EB=8C=80=20?=
 =?UTF-8?q?=EC=B6=95=EC=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/components/src/ui/header/index.tsx | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/packages/common/components/src/ui/header/index.tsx b/packages/common/components/src/ui/header/index.tsx
index e1318a6d4..2d3209aa2 100644
--- a/packages/common/components/src/ui/header/index.tsx
+++ b/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,