대시보드, GNB 추가

src/app/projects/submissions/page.tsx

@@ -2,6 +2,8 @@
 
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { FolderKanban, LayoutDashboard, ListChecks, SunMoon } from "lucide-react";
 
 interface SubmissionItem {
   id: string;
@@ -18,6 +20,7 @@ export default function AllProjectSubmissionsPage() {
   const [submissions, setSubmissions] = useState<SubmissionItem[]>([]);
   const [status, setStatus] = useState<PageStatus>("idle");
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   useEffect(() => {
     let cancelled = false;
@@ -82,39 +85,113 @@ export default function AllProjectSubmissionsPage() {
       .join("\n");
   };
 
+  const handleLogout = async () => {
+    try {
+      const res = await fetch("/api/auth/logout", {
+        method: "POST",
+      });
+
+      if (!res.ok) {
+        setErrorMessage("로그아웃 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+        return;
+      }
+
+      router.push("/login");
+    } catch {
+      setErrorMessage("로그아웃 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+    }
+  };
+
   return (
-    <main className="min-h-screen flex flex-col bg-slate-950 text-slate-50">
-      <header className="border-b border-slate-800 px-6 py-4 flex items-center justify-between bg-slate-950/80 backdrop-blur">
+    <main className="min-h-screen flex flex-col bg-slate-100 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
+      <header className="border-b border-slate-200 px-6 py-4 flex items-center justify-between bg-white/80 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80">
         <div>
-          <h1 className="text-xl font-semibold">전체 폼 제출 내역</h1>
-          <p className="text-xs text-slate-400">로그인한 계정의 모든 프로젝트에 대한 폼 제출 데이터를 확인할 수 있습니다.</p>
+          <h1 className="text-2xl font-bold tracking-tight">전체 폼 제출 내역</h1>
+          <p className="text-sm text-slate-500 dark:text-slate-400">로그인한 계정의 모든 프로젝트에 대한 폼 제출 데이터를 확인할 수 있습니다.</p>
         </div>
-        <div className="text-xs text-slate-300 flex flex-col items-end gap-1">
-          <a
-            href="/projects"
-            role="link"
-            className="text-[11px] text-sky-400 hover:text-sky-300 underline-offset-2 hover:underline"
-            onClick={(event) => {
-              event.preventDefault();
-              router.push("/projects");
+        <div className="flex items-center gap-3 text-sm">
+          <nav className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white/80 px-1.5 py-1 shadow-sm dark:border-slate-700 dark:bg-slate-900/80">
+            <Link
+              href="/dashboard"
+              className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-sky-700 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-sky-200"
+            >
+              <LayoutDashboard className="w-4 h-4" aria-hidden="true" />
+              <span>대시보드</span>
+            </Link>
+            <Link
+              href="/projects"
+              className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-slate-700 hover:bg-slate-100 hover:text-sky-700 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-sky-200"
+            >
+              <FolderKanban className="w-4 h-4" aria-hidden="true" />
+              <span>프로젝트 목록</span>
+            </Link>
+            <Link
+              href="/projects/submissions"
+              aria-current="page"
+              className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-semibold bg-emerald-600 text-white shadow-sm hover:bg-emerald-700"
+            >
+              <ListChecks className="w-4 h-4" aria-hidden="true" />
+              <span>전체 제출 내역</span>
+            </Link>
+          </nav>
+          <button
+            type="button"
+            className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-white/80 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
+            onClick={() => {
+              if (typeof document === "undefined") {
+                return;
+              }
+
+              const root = document.documentElement;
+              if (!root) {
+                return;
+              }
+
+              root.classList.toggle("dark");
             }}
           >
-            프로젝트 목록
-          </a>
+            <SunMoon className="w-4 h-4" aria-hidden="true" />
+            <span>테마 전환</span>
+          </button>
+          <div className="relative">
+            <button
+              type="button"
+              className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-white/80 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
+              onClick={() => {
+                setIsMenuOpen((prev) => !prev);
+              }}
+            >
+              메뉴
+            </button>
+            {isMenuOpen && (
+              <div className="absolute right-0 mt-1 w-32 rounded border border-slate-200 bg-white shadow-lg z-20 dark:border-slate-700 dark:bg-slate-900/95">
+                <button
+                  type="button"
+                  className="w-full px-3 py-2 text-left text-xs text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
+                  onClick={() => {
+                    setIsMenuOpen(false);
+                    void handleLogout();
+                  }}
+                >
+                  로그아웃
+                </button>
+              </div>
+            )}
+          </div>
         </div>
       </header>
 
-      <section className="flex-1 px-6 py-4 overflow-auto">
+      <section className="flex-1 px-6 py-4 overflow-auto bg-slate-50/60 dark:bg-transparent">
         {status === "error" && errorMessage && (
-          <p className="text-xs text-red-300 mb-3">{errorMessage}</p>
+          <p className="text-xs text-red-500 mb-3 dark:text-red-300">{errorMessage}</p>
         )}
 
         {status === "loading" && (
-          <p className="text-xs text-slate-400 mb-3">폼 제출 내역을 불러오는 중입니다...</p>
+          <p className="text-xs text-slate-500 mb-3 dark:text-slate-400">폼 제출 내역을 불러오는 중입니다...</p>
         )}
 
         {submissions.length === 0 && status === "idle" && !errorMessage && (
-          <p className="text-xs text-slate-400">아직 수집된 폼 제출 내역이 없습니다.</p>
+          <p className="text-xs text-slate-500 dark:text-slate-400">아직 수집된 폼 제출 내역이 없습니다.</p>
         )}
 
         {submissions.length > 0 && (