반응형 웹 디자인 적용

app/(admin)/MobileNav.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Menu, X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { navItems } from "./nav-config";
+
+export function MobileNav() {
+  const [isOpen, setIsOpen] = useState(false);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    setIsOpen(false);
+  }, [pathname]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      document.body.style.overflow = "";
+      return;
+    }
+
+    document.body.style.overflow = "hidden";
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") setIsOpen(false);
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+
+  return (
+    <>
+      <button
+        aria-label="메뉴 열기"
+        className="flex size-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground md:hidden"
+        onClick={() => setIsOpen(true)}
+        type="button"
+      >
+        <Menu aria-hidden="true" className="size-5" />
+      </button>
+
+      {/* 배경 오버레이 — 탭하면 닫힘 */}
+      <div
+        aria-hidden="true"
+        className={cn(
+          "fixed inset-0 z-20 bg-black/50 transition-opacity duration-200 md:hidden",
+          isOpen ? "opacity-100" : "pointer-events-none opacity-0"
+        )}
+        onClick={() => setIsOpen(false)}
+      />
+
+      {/* 슬라이드인 패널 */}
+      <aside
+        aria-hidden={!isOpen}
+        className={cn(
+          "fixed inset-y-0 left-0 z-30 w-64 border-r bg-background transition-transform duration-200 md:hidden",
+          isOpen ? "translate-x-0" : "-translate-x-full"
+        )}
+      >
+        <div className="flex h-16 items-center justify-between border-b px-5">
+          <Link className="text-lg font-semibold" href="/">
+            chocoadmin
+          </Link>
+          <button
+            aria-label="메뉴 닫기"
+            className="flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            onClick={() => setIsOpen(false)}
+            type="button"
+          >
+            <X aria-hidden="true" className="size-4" />
+          </button>
+        </div>
+        <nav className="space-y-1 p-3">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            return (
+              <Link
+                className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                href={item.href}
+                key={item.href}
+              >
+                <Icon aria-hidden="true" className="size-4" />
+                {item.label}
+              </Link>
+            );
+          })}
+        </nav>
+      </aside>
+    </>
+  );
+}

app/(admin)/extension-requests/page.tsx

@@ -133,7 +133,7 @@ export default async function ExtensionRequestsPage({
         </p>
         <nav
           aria-label="연장 신청 목록 페이지"
-          className="flex flex-wrap items-center gap-1.5"
+          className="self-end flex flex-wrap items-center gap-1.5 sm:self-auto"
         >
           {!hasFirstPage ? (
             <Link

app/(admin)/layout.tsx

@@ -1,24 +1,13 @@
 import Link from "next/link";
 import { redirect } from "next/navigation";
-import {
-  ArrowUpCircle,
-  ClipboardList,
-  GraduationCap,
-  LayoutDashboard,
-  LogOut,
-} from "lucide-react";
+import { LogOut } from "lucide-react";
 
 import { auth } from "@/auth";
 import { Button } from "@/components/ui/button";
 
 import { logoutAction } from "./actions";
-
-const navItems = [
-  { href: "/", label: "대시보드", icon: LayoutDashboard },
-  { href: "/maestros", label: "마에스트로", icon: GraduationCap },
-  { href: "/extension-requests", label: "연장 신청", icon: ClipboardList },
-  { href: "/upgrade-requests", label: "업그레이드", icon: ArrowUpCircle },
-];
+import { MobileNav } from "./MobileNav";
+import { navItems } from "./nav-config";
 
 export default async function AdminLayout({
   children,
@@ -58,8 +47,9 @@ export default async function AdminLayout({
       </aside>
 
       <div className="md:pl-64">
-        <header className="sticky top-0 z-10 flex h-16 items-center justify-between border-b bg-background px-5">
-          <div>
+        <header className="sticky top-0 z-10 flex h-16 items-center gap-3 border-b bg-background px-5">
+          <MobileNav />
+          <div className="flex-1">
             <p className="text-sm font-medium">{session.user.name}</p>
             <p className="text-xs text-muted-foreground">
               관리자 ID {session.user.adminID}

app/(admin)/maestros/[maestroId]/ExtensionRequestsSection.tsx

@@ -63,15 +63,15 @@ export function ExtensionRequestsSection({
   }
 
   return (
-    <section className="rounded-lg border bg-background p-5">
-      <div className="flex items-start justify-between gap-2">
+    <section className="overflow-hidden rounded-lg border bg-background p-5">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <h2 className="text-base font-semibold">연장 신청 이력</h2>
           <p className="mt-1 text-sm text-muted-foreground">
             전체 {totalCount.toLocaleString()}건 중 최근 20건
           </p>
         </div>
-        <div className="flex flex-col items-end gap-1">
+        <div className="flex flex-col items-start gap-1 sm:items-end">
           <Button
             disabled={isDisabled || !isPaidAccount}
             onClick={() => void handleCreate()}

app/(admin)/maestros/[maestroId]/LogsSection.tsx

@@ -219,7 +219,7 @@ function LogPagination({
       {showNav ? (
         <nav
           aria-label="처리 로그 페이지"
-          className="flex flex-wrap items-center gap-1.5"
+          className="self-end flex flex-wrap items-center gap-1.5 sm:self-auto"
         >
           {!hasFirstPage ? (
             <Button

app/(admin)/maestros/[maestroId]/StudentsSection.tsx

@@ -246,7 +246,7 @@ function StudentPagination({
       </label>
       {showNav ? <nav
         aria-label="학생 목록 페이지"
-        className="flex flex-wrap items-center gap-1.5"
+        className="self-end flex flex-wrap items-center gap-1.5 sm:self-auto"
       >
         {!hasFirstPage ? (
           <Button

app/(admin)/maestros/[maestroId]/UpgradeRequestsSection.tsx

@@ -88,16 +88,16 @@ export function UpgradeRequestsSection({
   }
 
   return (
-    <section className="rounded-lg border bg-background p-5">
-      <div className="flex items-start justify-between gap-2">
+    <section className="overflow-hidden rounded-lg border bg-background p-5">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <h2 className="text-base font-semibold">업그레이드 신청 이력</h2>
           <p className="mt-1 text-sm text-muted-foreground">
             전체 {totalCount.toLocaleString()}건 중 최근 20건
           </p>
         </div>
-        <div className="flex flex-col items-end gap-1">
-          <div className="flex items-center gap-2">
+        <div className="flex flex-col items-start gap-1 sm:items-end">
+          <div className="flex flex-wrap items-center gap-2">
             <select
               className={selectClass}
               disabled={isDisabled}

app/(admin)/maestros/page.tsx

@@ -191,7 +191,7 @@ export default async function MaestrosPage({
         </form>
         <nav
           aria-label="마에스트로 목록 페이지"
-          className="flex flex-wrap items-center gap-1.5"
+          className="self-end flex flex-wrap items-center gap-1.5 sm:self-auto"
         >
           {!hasFirstPage ? (
             <Link

app/(admin)/nav-config.ts

@@ -0,0 +1,13 @@
+import {
+  ArrowUpCircle,
+  ClipboardList,
+  GraduationCap,
+  LayoutDashboard,
+} from "lucide-react";
+
+export const navItems = [
+  { href: "/", label: "대시보드", icon: LayoutDashboard },
+  { href: "/maestros", label: "마에스트로", icon: GraduationCap },
+  { href: "/extension-requests", label: "연장 신청", icon: ClipboardList },
+  { href: "/upgrade-requests", label: "업그레이드", icon: ArrowUpCircle },
+];

app/(admin)/upgrade-requests/page.tsx

@@ -135,7 +135,7 @@ export default async function UpgradeRequestsPage({
         </p>
         <nav
           aria-label="업그레이드 신청 목록 페이지"
-          className="flex flex-wrap items-center gap-1.5"
+          className="self-end flex flex-wrap items-center gap-1.5 sm:self-auto"
         >
           {!hasFirstPage ? (
             <Link