반응성 적용

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()}

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>
 	);

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>
 	);