공개 카탈로그의 클라이언트 상태 축소와 초기 JavaScript 비용

"use client";

import Link from "next/link";
import { useState, type MouseEvent } from "react";

const [navigatingPath, setNavigatingPath] = useState<string | null>(null);
const [query, setQuery] = useState("");
const [fieldId, setFieldId] = useState("");
const [page, setPage] = useState(1);
const catalog = getCatalogPage(fields, { query, fieldId, page });

<input id="catalog-course-search" type="search" value={query}
  onChange={event => { setQuery(event.target.value); setPage(1); }}
  maxLength={100} placeholder="예: SQLD, 정보처리기사, 빅데이터 실기"
  aria-controls="catalog-results" />

const query = (filters.query ?? "").slice(0, 100);
const fieldId = fields.some(field => field.id === filters.fieldId)
  ? filters.fieldId ?? "" : "";
const catalog = getCatalogPage(fields, {
  query,
  fieldId,
  page: filters.page ?? 1,
});

<form className="catalog-discovery-controls" action="/" method="get"
  role="search" aria-label="학습 과정 검색">
  <select id="catalog-field-filter" name="field" defaultValue={fieldId}
    aria-controls="catalog-results">
    {/* 분야 옵션 */}
  </select>
  <input id="catalog-course-search" name="q" type="search"
    defaultValue={query} maxLength={100}
    placeholder="예: SQLD, 정보처리기사, 빅데이터 실기"
    aria-controls="catalog-results" />
  <button type="submit">검색</button>
</form>