게시판 통합 검색Board Search

-- supabase/migrations/0002_search.sql
-- 한국어 형태소 분석을 위해 mecab-ko 또는 pgroonga 사용
-- (Supabase Cloud은 pgroonga 확장 지원)

create extension if not exists pgroonga;

alter table public.posts
  add column search_vector tsvector
    generated always as (
      setweight(to_tsvector('simple', coalesce(title, '')), 'A') ||
      setweight(to_tsvector('simple', coalesce(body, '')), 'B') ||
      setweight(to_tsvector('simple', coalesce(meta->>'pastor', '')), 'C')
    ) stored;

create index posts_search_gin
  on public.posts using pgroonga (title, body, meta);

-- 일반 GIN 인덱스 (한국어 무관 영문 검색용 fallback)
create index posts_search_tsv
  on public.posts using gin (search_vector);

// app/(site)/site/search/page.tsx — 서버 검색 (Postgres FTS)
import { createClient } from "@/lib/supabase/server";

export default async function SearchPage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string; kind?: string }>;
}) {
  const { q = "", kind } = await searchParams;
  if (!q) return <EmptyState />;

  const supabase = await createClient();
  let query = supabase
    .from("posts")
    .select("id, slug, kind, title, summary, cover_image, published_at, rank:ts_rank!inner(search_vector, plainto_tsquery('korean', $1))")
    .not("published_at", "is", null)
    .textSearch("search_vector", q, { type: "websearch", config: "korean" })
    .order("rank", { ascending: false })
    .limit(30);

  if (kind) query = query.eq("kind", kind);
  const { data: results } = await query;

  return <SearchResults q={q} kind={kind} results={results ?? []} />;
}

// lib/search/build-index.ts — Fuse.js용 정적 인덱스 생성 스크립트
import fs from "fs";
import { newsPosts } from "@/lib/preview/news";
import { bulletinIssues } from "@/lib/preview/bulletin";
import { hamjulIssues } from "@/lib/preview/hamjul";

type SearchEntry = {
  id: string;
  kind: string;
  href: string;
  title: string;
  summary: string;
  pastor?: string;
  date: string;
};

const entries: SearchEntry[] = [
  ...newsPosts.map((p) => ({
    id: `news-${p.id}`,
    kind: "news",
    href: `/site/yard/news/${p.id}`,
    title: p.title,
    summary: p.summary,
    date: p.date,
  })),
  ...bulletinIssues.map((b) => ({
    id: `bulletin-${b.slug}`,
    kind: "bulletin",
    href: `/site/yard/bulletin/${b.slug}`,
    title: b.title,
    summary: b.summary ?? "",
    date: b.date,
  })),
  // ... 다른 게시판
];

fs.writeFileSync(
  "public/search-index.json",
  JSON.stringify(entries),
);
console.log(`Built search index: ${entries.length} entries`);

"use client";

import { useEffect, useMemo, useState } from "react";
import Fuse from "fuse.js";

export function SiteSearchBox() {
  const [query, setQuery] = useState("");
  const [entries, setEntries] = useState<SearchEntry[] | null>(null);

  // 페이지 로드 후 검색 인덱스 비동기 로드
  useEffect(() => {
    fetch("/search-index.json")
      .then((r) => r.json())
      .then(setEntries);
  }, []);

  const fuse = useMemo(
    () =>
      entries &&
      new Fuse(entries, {
        keys: [
          { name: "title", weight: 0.6 },
          { name: "summary", weight: 0.3 },
          { name: "pastor", weight: 0.1 },
        ],
        threshold: 0.35,
        ignoreLocation: true,
      }),
    [entries],
  );

  const results = query && fuse ? fuse.search(query, { limit: 10 }) : [];

  return (
    <div role="search">
      <input
        type="search"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="설교·주보·새소식 검색"
      />
      <ul>
        {results.map(({ item }) => (
          <li key={item.id}>
            <a href={item.href}>
              <kbd>{KIND_LABEL[item.kind]}</kbd> {item.title}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

// 검색 결과에서 키워드 하이라이트
function highlight(text: string, q: string) {
  if (!q) return text;
  const escaped = q.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
  const re = new RegExp(`(${escaped})`, "gi");
  return text.split(re).map((part, i) =>
    i % 2 === 1 ? <mark key={i}>{part}</mark> : <span key={i}>{part}</span>,
  );
}