테마 적용

2025-12-09 18:53:21 +09:00
parent 9d8c4538c7
commit 676e58cad7
71 changed files with 3394 additions and 498 deletions
@@ -1,7 +1,9 @@
 "use client";

 import { useEffect, useState } from "react";
+import Link from "next/link";
 import { useRouter, useParams } from "next/navigation";
+import { FolderKanban, LayoutDashboard, ListChecks, SunMoon } from "lucide-react";

 // 프로젝트별 폼 제출 내역을 조회해서 보여주는 페이지 컴포넌트.
 // - URL 의 slug 파라미터를 기준으로 /api/projects/[slug]/submissions 에 요청을 보낸다.
@@ -26,6 +28,7 @@ export default function ProjectSubmissionsPage() {
  const [submissions, setSubmissions] = useState<SubmissionItem[]>([]);
  const [status, setStatus] = useState<PageStatus>("idle");
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);

  // 마운트 시 현재 slug 기준으로 폼 제출 내역을 불러온다.
  useEffect(() => {
@@ -102,46 +105,121 @@ export default function ProjectSubmissionsPage() {
      .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("로그아웃 중 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
+    }
+  };
+
+  const handleToggleTheme = () => {
+    if (typeof document === "undefined") {
+      return;
+    }
+
+    const root = document.documentElement;
+    if (!root) {
+      return;
+    }
+
+    root.classList.toggle("dark");
+  };
+
  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-xs text-slate-500 dark:text-slate-400">프로젝트에 연결된 폼으로 수집된 제출 데이터를 확인할 수 있습니다.</p>
+          <p className="mt-1 text-[11px] font-mono text-slate-500 dark:text-slate-400">{slug}</p>
        </div>
-        <div className="text-xs text-slate-300 flex flex-col items-end gap-1">
-          <span className="font-mono text-[11px]">{slug}</span>
-          <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"
+              className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium text-emerald-700 hover:bg-emerald-50 hover:text-emerald-800 dark:text-emerald-200 dark:hover:bg-emerald-900/60 dark:hover:text-emerald-100"
+            >
+              <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={handleToggleTheme}
          >
-            프로젝트 목록
-          </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 && (
          <table className="w-full text-xs text-left border-collapse mt-2">
            <thead>
-              <tr className="border-b border-slate-800 text-slate-400">
+              <tr className="border-b border-slate-200 text-slate-600 dark:border-slate-800 dark:text-slate-400">
                <th className="py-2 pr-4">제출 시각</th>
                <th className="py-2 pr-4">이름</th>
                <th className="py-2 pr-4">이메일</th>
@@ -165,15 +243,18 @@ export default function ProjectSubmissionsPage() {
                const birthdate = typeof birthdateValue === "string" ? birthdateValue : "";

                return (
-                  <tr key={item.id} className="border-b border-slate-900 hover:bg-slate-900/60">
-                    <td className="py-2 pr-4 text-slate-300 text-[11px]">
+                  <tr
+                    key={item.id}
+                    className="border-b border-slate-200 hover:bg-slate-50 dark:border-slate-900 dark:hover:bg-slate-900/60"
+                  >
+                    <td className="py-2 pr-4 text-slate-600 dark:text-slate-300 text-[11px]">
                      {new Date(item.createdAt).toLocaleString()}
                    </td>
-                    <td className="py-2 pr-4 text-slate-100">{name}</td>
-                    <td className="py-2 pr-4 text-slate-300">{email}</td>
-                    <td className="py-2 pr-4 text-slate-300">{phone}</td>
-                    <td className="py-2 pr-4 text-slate-300">{birthdate}</td>
-                    <td className="py-2 pr-4 text-slate-300 whitespace-pre-wrap">
+                    <td className="py-2 pr-4 text-slate-900 dark:text-slate-100">{name}</td>
+                    <td className="py-2 pr-4 text-slate-600 dark:text-slate-300">{email}</td>
+                    <td className="py-2 pr-4 text-slate-600 dark:text-slate-300">{phone}</td>
+                    <td className="py-2 pr-4 text-slate-600 dark:text-slate-300">{birthdate}</td>
+                    <td className="py-2 pr-4 text-slate-600 dark:text-slate-300 whitespace-pre-wrap">
                      {renderOtherFields(payload)}
                    </td>
                  </tr>