From 84cc83d36be09449299a3b4a284411eaa63ed8bd Mon Sep 17 00:00:00 2001
From: Lectom C Han <lectom.c.han@gmail.com>
Date: Mon, 4 Aug 2025 19:44:42 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B0=98=EC=9D=91=EC=84=B1=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 viewer/src/components/DynamicTable.tsx |  1 +
 viewer/src/components/Header.tsx       | 55 ++++++++++++++++++++++----
 viewer/src/components/MainLayout.tsx   |  8 ++--
 3 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/viewer/src/components/DynamicTable.tsx b/viewer/src/components/DynamicTable.tsx
index b2cb943..1cf4c30 100644
--- a/viewer/src/components/DynamicTable.tsx
+++ b/viewer/src/components/DynamicTable.tsx
@@ -373,6 +373,7 @@ export function DynamicTable<TData extends BaseData>({
 														header.getContext(),
 													)}
 											<div
+												role="presentation"
 												onMouseDown={header.getResizeHandler()}
 												onTouchStart={header.getResizeHandler()}
 												onDoubleClick={() => header.column.resetSize()}
diff --git a/viewer/src/components/Header.tsx b/viewer/src/components/Header.tsx
index b9de07c..c96e920 100644
--- a/viewer/src/components/Header.tsx
+++ b/viewer/src/components/Header.tsx
@@ -1,11 +1,19 @@
-import { cn } from "@/lib/utils";
+import { Menu } from "lucide-react";
 import { NavLink } from "react-router-dom";
+
+import Logo from "@/assets/react.svg";
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useSettingsStore } from "@/store/useSettingsStore";
+import { LanguageSelectBox } from "./LanguageSelectBox";
 import { ProjectSelectBox } from "./ProjectSelectBox";
 import { ThemeSelectBox } from "./ThemeSelectBox";
-import { LanguageSelectBox } from "./LanguageSelectBox";
 import { UserProfileBox } from "./UserProfileBox";
-import { useSettingsStore } from "@/store/useSettingsStore";
-import Logo from "@/assets/react.svg";
 
 const menuItems = [
 	{ name: "Feedback", path: "/feedbacks", type: "feedback" },
@@ -35,8 +43,8 @@ export function Header() {
 					<ProjectSelectBox />
 				</div>
 
-				{/* Middle Navigation */}
-				<nav className="mx-8 flex items-center space-x-4 lg:space-x-6">
+				{/* Middle Navigation (Desktop) */}
+				<nav className="mx-8 hidden items-center space-x-4 md:flex lg:space-x-6">
 					{menuItems.map((item) => (
 						<NavLink
 							key={item.name}
@@ -54,12 +62,43 @@ export function Header() {
 					))}
 				</nav>
 
-				{/* Right Section */}
-				<div className="ml-auto flex items-center gap-4">
+				{/* Right Section (Desktop) */}
+				<div className="ml-auto hidden items-center gap-4 md:flex">
 					<ThemeSelectBox />
 					<LanguageSelectBox />
 					<UserProfileBox />
 				</div>
+
+				{/* Mobile Menu */}
+				<div className="ml-auto md:hidden">
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button variant="ghost" size="icon">
+								<Menu className="h-6 w-6" />
+								<span className="sr-only">메뉴 열기</span>
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end">
+							{menuItems.map((item) => (
+								<DropdownMenuItem key={item.name} asChild>
+									<NavLink to={getPath(item.type, item.path)}>
+										{item.name}
+									</NavLink>
+								</DropdownMenuItem>
+							))}
+							<div className="border-t my-2" />
+							<DropdownMenuItem>
+								<ThemeSelectBox />
+							</DropdownMenuItem>
+							<DropdownMenuItem>
+								<LanguageSelectBox />
+							</DropdownMenuItem>
+							<DropdownMenuItem>
+								<UserProfileBox />
+							</DropdownMenuItem>
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</div>
 			</div>
 		</header>
 	);
diff --git a/viewer/src/components/MainLayout.tsx b/viewer/src/components/MainLayout.tsx
index 7b4bab3..1c58dc6 100644
--- a/viewer/src/components/MainLayout.tsx
+++ b/viewer/src/components/MainLayout.tsx
@@ -4,10 +4,12 @@ import { Header } from "./Header";
 
 export function MainLayout() {
 	return (
-		<div className="flex h-screen flex-col">
+		<div className="flex h-screen w-full flex-col">
 			<Header />
-			<main className="flex-1 overflow-y-auto p-6">
-				<Outlet />
+			<main className="flex-1 overflow-y-auto">
+				<div className="container mx-auto py-6">
+					<Outlet />
+				</div>
 			</main>
 		</div>
 	);