tech-log-frontend/src/features/tech-log/presentation/public/components/search-dialog.tsx

import { useId, useRef, useState } from "react";
import { Link } from "react-router-dom";

import { usePublicContent } from "../use-public-content.tsx";

type SearchDialogProps = {
  className?: string;
  onBeforeOpen?: () => void;
};

export function SearchDialog({
  className = "",
  onBeforeOpen,
}: SearchDialogProps) {
  const dialogId = useId();
  const dialogRef = useRef<HTMLDialogElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const [query, setQuery] = useState("");
  const normalizedQuery = query.trim().toLocaleLowerCase("ko-KR");
  // Keyed on the empty query, then filtered here, rather than one request per
  // keystroke. This is a type-ahead: re-querying per character would replace the
  // result list with a loading skeleton on every key, which is a worse dialog
  // than a stale-free local filter. The predicate is the same one the catalog
  // applies for a non-empty query, so the visible result set is unchanged.
  const view = usePublicContent(["tech-log", "search", "dialog"], async (queries) => ({
    entities: await queries.searchPublicContent(""),
  }));
  const results = (view.data?.entities ?? []).filter((entity) =>
    normalizedQuery
      ? [entity.title, entity.summary, entity.topic, entity.project, ...(entity.topics ?? [])]
          .filter((value): value is string => Boolean(value))
          .some((value) => value.toLocaleLowerCase("ko-KR").includes(normalizedQuery))
      : true,
  );

  function open() {
    onBeforeOpen?.();
    dialogRef.current?.showModal();
    requestAnimationFrame(() => inputRef.current?.focus());
  }

  function close() {
    dialogRef.current?.close();
  }

  return (
    <>
      <button
        ref={triggerRef}
        className={className}
        type="button"
        aria-haspopup="dialog"
        aria-controls={dialogId}
        aria-label="TechLog 검색 열기"
        onClick={open}
      >
        검색
      </button>
      <dialog
        ref={dialogRef}
        className="search-dialog"
        id={dialogId}
        aria-labelledby={dialogId + "-title"}
        onClose={() => triggerRef.current?.focus()}
        onKeyDown={(event) => {
          if (event.key === "Escape") {
            event.preventDefault();
            close();
          }
        }}
        onClick={(event) => {
          if (event.target === event.currentTarget) close();
        }}
      >
        <div className="search-dialog-inner">
          <header>
            <div>
              <p className="context-label">Public records</p>
              <h2 id={dialogId + "-title"}>TechLog 검색</h2>
            </div>
            <button type="button" className="dialog-close" onClick={close}>
              닫기
            </button>
          </header>
          <label className="search-field">
            <span className="visually-hidden">검색어</span>
            <span aria-hidden="true">⌕</span>
            <input
              ref={inputRef}
              type="search"
              value={query}
              onChange={(event) => setQuery(event.target.value)}
              placeholder="제목, 요약, 주제, 프로젝트 검색"
              autoComplete="off"
            />
          </label>
          <p className="search-count" aria-live="polite">
            {results.length}개의 공개 기록
          </p>
          {results.length > 0 ? (
            <>
              <ul className="search-results">
                {results.map((entry) => (
                  <li key={entry.path}>
                    <Link to={entry.path} onClick={close}>
                      <span>{entry.contentType}</span>
                      <strong>{entry.title}</strong>
                      <p>{entry.summary}</p>
                    </Link>
                  </li>
                ))}
              </ul>
              {normalizedQuery ? (
                <Link
                  className="search-all-link"
                  to={`/search?q=${encodeURIComponent(query.trim())}`}
                  onClick={close}
                >
                  전체 검색 결과 보기 <span aria-hidden="true">→</span>
                </Link>
              ) : null}
            </>
          ) : (
            <p className="search-empty">일치하는 공개 기록이 없습니다.</p>
          )}
        </div>
      </dialog>
    </>
  );
}