feat: 방명록 기능 추가 및 Supabase 연동 (#59)

- 메인 페이지 방명록 모달 UI (파피루스 텍스처, 페이지네이션)
- GET/POST /api/guestbook API 라우트 구현
- bcryptjs로 비밀번호 해싱
- Supabase guestbook 테이블 연동
- i18n enterArchive 텍스트 업데이트

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Aprasaks

package-lock.json

@@ -16,6 +16,7 @@
     "@google/generative-ai": "^0.24.1",
     "@supabase/supabase-js": "^2.103.2",
     "@tailwindcss/typography": "^0.5.19",
+    "bcryptjs": "^3.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cohere-ai": "^8.0.0",
@@ -37,6 +38,7 @@
   "devDependencies": {
     "@anthropic-ai/sdk": "^0.82.0",
     "@tailwindcss/postcss": "^4",
+    "@types/bcryptjs": "^2.4.6",
     "@types/github-slugger": "^1.3.0",
     "@types/node": "^20",
     "@types/react": "^19",

package.json

@@ -0,0 +1,43 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createClient } from '@supabase/supabase-js';
+import bcrypt from 'bcryptjs';
+
+const supabase = createClient(
+  process.env.SUPABASE_URL!,
+  process.env.SUPABASE_ANON_KEY!,
+);
+
+// GET — 메시지 목록
+export async function GET() {
+  const { data, error } = await supabase
+    .from('guestbook')
+    .select('id, name, message, created_at')
+    .order('created_at', { ascending: false });
+
+  if (error) return NextResponse.json({ error: error.message }, { status: 500 });
+  return NextResponse.json({ messages: data });
+}
+
+// POST — 메시지 등록
+export async function POST(req: NextRequest) {
+  const { name, password, message } = await req.json() as {
+    name: string;
+    password: string;
+    message: string;
+  };
+
+  if (!name?.trim() || !password?.trim() || !message?.trim()) {
+    return NextResponse.json({ error: '모든 항목을 입력해주세요.' }, { status: 400 });
+  }
+
+  const hashedPassword = await bcrypt.hash(password, 10);
+
+  const { error } = await supabase.from('guestbook').insert({
+    name: name.trim(),
+    password: hashedPassword,
+    message: message.trim(),
+  });
+
+  if (error) return NextResponse.json({ error: error.message }, { status: 500 });
+  return NextResponse.json({ ok: true });
+}

src/app/api/guestbook/route.ts

@@ -1,12 +1,179 @@
 'use client';
 
+import { useState, useEffect, useCallback } from 'react';
 import Link from 'next/link';
+import { ChevronLeft, ChevronRight, X } from 'lucide-react';
 import { useLang } from '@/components/layout/LangProvider';
 import i18n from '@/lib/i18n';
 
+interface GuestMessage {
+  id: string;
+  name: string;
+  message: string;
+  created_at: string;
+}
+
+const PER_PAGE = 3;
+
+type T = typeof i18n['ko'] | typeof i18n['en'];
+
+function GuestBookModal({ t, onClose }: { t: T; onClose: () => void }) {
+  const [page, setPage] = useState(0);
+  const [messages, setMessages] = useState<GuestMessage[]>([]);
+  const [name, setName] = useState('');
+  const [password, setPassword] = useState('');
+  const [message, setMessage] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const totalPages = Math.ceil(messages.length / PER_PAGE);
+  const pageMessages = messages.slice(page * PER_PAGE, page * PER_PAGE + PER_PAGE);
+
+  const fetchMessages = useCallback(async () => {
+    const res = await fetch('/api/guestbook');
+    const data = await res.json() as { messages: GuestMessage[] };
+    setMessages(data.messages ?? []);
+  }, []);
+
+  useEffect(() => { fetchMessages(); }, [fetchMessages]);
+
+  const handleSubmit = async () => {
+    if (!name.trim() || !password.trim() || !message.trim()) return;
+    setSubmitting(true);
+    await fetch('/api/guestbook', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, password, message }),
+    });
+    setName(''); setPassword(''); setMessage('');
+    await fetchMessages();
+    setPage(0);
+    setSubmitting(false);
+  };
+
+  return (
+    <>
+      {/* 백드롭 */}
+      <div
+        className="fixed inset-0 z-40 bg-black/30 backdrop-blur-[2px]"
+        onClick={onClose}
+      />
+
+      {/* 모달 */}
+      <div
+        className="fixed left-1/2 top-1/2 z-50 w-full max-w-xl -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-2xl"
+        style={{
+          background: 'rgba(20,12,4,0.6)',
+          backdropFilter: 'blur(24px)',
+          maskImage: 'linear-gradient(to bottom, transparent, black 15%, black 85%, transparent), linear-gradient(to right, transparent, black 10%, black 90%, transparent)',
+          WebkitMaskImage: 'linear-gradient(to bottom, transparent, black 15%, black 85%, transparent), linear-gradient(to right, transparent, black 10%, black 90%, transparent)',
+          maskComposite: 'intersect',
+          WebkitMaskComposite: 'source-in',
+        }}
+      >
+        {/* 파피루스 텍스처 */}
+        <div
+          className="pointer-events-none absolute inset-0"
+          style={{
+            backgroundImage: 'url(/images/background-image.svg)',
+            backgroundSize: 'cover',
+            opacity: 0.5,
+          }}
+        />
+
+        <div className="relative px-6 py-6">
+          {/* 헤더 */}
+          <div className="mb-5 flex items-center justify-between">
+            <p className="text-xs font-semibold tracking-widest uppercase text-white">
+              {t.guestBookTitle}
+            </p>
+            <button
+              onClick={onClose}
+              className="rounded-lg p-1 text-zinc-300 transition-colors hover:text-white"
+            >
+              <X size={15} />
+            </button>
+          </div>
+
+          {/* 입력 */}
+          <div className="mb-5 flex flex-col gap-2">
+            <div className="flex gap-2">
+              <input
+                type="text"
+                placeholder={t.guestBookNickname}
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="flex-1 rounded-lg border border-white/20 bg-white/10 px-3 py-2 text-sm text-zinc-100 outline-none placeholder:text-zinc-300 focus:border-white/40"
+              />
+              <input
+                type="password"
+                placeholder={t.guestBookPassword}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="flex-1 rounded-lg border border-white/20 bg-white/10 px-3 py-2 text-sm text-zinc-100 outline-none placeholder:text-zinc-300 focus:border-white/40"
+              />
+            </div>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                placeholder={t.guestBookMessage}
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                onKeyDown={(e) => { if (e.key === 'Enter') handleSubmit(); }}
+                className="flex-1 rounded-lg border border-white/20 bg-white/10 px-3 py-2 text-sm text-zinc-100 outline-none placeholder:text-zinc-300 focus:border-white/40"
+              />
+              <button
+                onClick={handleSubmit}
+                disabled={submitting}
+                className="shrink-0 rounded-lg bg-white/20 px-4 py-2 text-sm font-semibold text-zinc-100 transition-colors hover:bg-white/30 disabled:opacity-40"
+              >
+                {t.guestBookSubmit}
+              </button>
+            </div>
+          </div>
+
+          {/* 구분선 */}
+          <div className="mb-4 h-px bg-white/10" />
+
+          {/* 메시지 */}
+          <div className="flex flex-col gap-4">
+            {pageMessages.map((msg) => (
+              <div key={msg.id} className="flex flex-col gap-0.5">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-semibold text-zinc-100">{msg.name}</span>
+                  <span className="text-[11px] text-zinc-300">{new Date(msg.created_at).toLocaleDateString('ko-KR', { year: '2-digit', month: '2-digit', day: '2-digit' })}</span>
+                </div>
+                <p className="text-sm leading-relaxed text-white">{msg.message}</p>
+              </div>
+            ))}
+          </div>
+
+          {/* 페이지네이션 */}
+          <div className="mt-4 flex items-center justify-end gap-2">
+            <button
+              onClick={() => setPage((p) => Math.max(0, p - 1))}
+              disabled={page === 0}
+              className="text-amber-300 transition-opacity disabled:opacity-20"
+            >
+              <ChevronLeft size={18} />
+            </button>
+            <button
+              onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
+              disabled={page === totalPages - 1}
+              className="text-amber-300 transition-opacity disabled:opacity-20"
+            >
+              <ChevronRight size={18} />
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
 export default function HomeClient() {
   const { lang } = useLang();
   const t = i18n[lang];
+  const [guestBookOpen, setGuestBookOpen] = useState(false);
 
   return (
     <main className="flex flex-1 flex-col items-center justify-center px-6 pb-20 text-center">
@@ -23,7 +190,17 @@ export default function HomeClient() {
         >
           {t.enterArchive}
         </Link>
+        <button
+          onClick={() => setGuestBookOpen(true)}
+          className="rounded-full border border-zinc-600 px-8 py-2.5 text-sm font-medium text-zinc-300 backdrop-blur-sm transition-all hover:border-zinc-400 hover:text-white active:scale-95"
+        >
+          {t.guestBookTitle}
+        </button>
       </div>
+
+      {guestBookOpen && (
+        <GuestBookModal t={t} onClose={() => setGuestBookOpen(false)} />
+      )}
     </main>
   );
 }

src/components/home/HomeClient.tsx

@@ -5,7 +5,7 @@ const i18n = {
     // Home
     homeTagline1: '생각이 기록이 되는 순간',
     homeTagline2: '의미를 가진다.',
-    enterArchive: '서고 입장 →',
+    enterArchive: '아카이브 입장',
 
     // About
     aboutLabel: 'About Demian',
@@ -79,7 +79,7 @@ const i18n = {
     // Home
     homeTagline1: 'When thoughts become records,',
     homeTagline2: 'meaning is born.',
-    enterArchive: 'Enter Archive →',
+    enterArchive: 'Enter Library',
 
     // About
     aboutLabel: 'About Demian',