게시판 검색 필터 조건은 왜 URL로 관리해야 하나요?

// 필터 조건을 useState로만 관리하는 경우
// 새로고침, 링크 공유, 뒤로 가기 모두 동작하지 않습니다.

'use client';

import { useState, useEffect } from 'react';

export default function BoardPage() {
  const [keyword, setKeyword] = useState('');
  const [category, setCategory] = useState('전체');
  const [page, setPage] = useState(1);
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetchPosts({ keyword, category, page }).then(setPosts);
  }, [keyword, category, page]);

  return (
    <>
      <input
        value={keyword}
        onChange={(e) => {
          setKeyword(e.target.value);
          setPage(1); // 검색어 변경 시 페이지 초기화 — 매번 직접 처리해야 합니다.
        }}
      />
      <select value={category} onChange={(e) => setCategory(e.target.value)}>
        <option>전체</option>
        <option>공지</option>
        <option>자유</option>
      </select>
      {/* URL: /board — 어떤 조건으로 보고 있는지 전혀 알 수 없습니다. */}
    </>
  );
}

// app/board/page.tsx — Server Component
// URL 쿼리 파라미터를 searchParams prop으로 받아 서버에서 데이터를 fetching합니다.
// URL: /board?keyword=react&category=공지&page=2

interface BoardPageProps {
  searchParams: Promise<{
    keyword?: string;
    category?: string;
    sort?: string;
    page?: string;
  }>;
}

export default async function BoardPage({ searchParams }: BoardPageProps) {
  const { keyword = '', category = '전체', sort = 'latest', page = '1' } =
    await searchParams;

  const posts = await fetchPosts({
    keyword,
    category,
    sort,
    page: Number(page),
  });

  return (
    <>
      {/* 필터 UI는 Client Component로 분리합니다. */}
      <BoardFilter keyword={keyword} category={category} sort={sort} />
      <PostList posts={posts} />
      <Pagination current={Number(page)} />
    </>
  );
}

// components/BoardFilter.tsx — Client Component
// URL을 직접 변경해 필터 조건을 관리합니다.

'use client';

import { useRouter, useSearchParams, usePathname } from 'next/navigation';
import { useTransition } from 'react';

interface BoardFilterProps {
  keyword: string;
  category: string;
  sort: string;
}

export default function BoardFilter({ keyword, category, sort }: BoardFilterProps) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const [isPending, startTransition] = useTransition();

  // 현재 쿼리 파라미터를 유지하면서 특정 키만 업데이트하는 헬퍼
  const updateQuery = (updates: Record<string, string>) => {
    const params = new URLSearchParams(searchParams.toString());

    Object.entries(updates).forEach(([key, value]) => {
      if (value) {
        params.set(key, value);
      } else {
        params.delete(key);
      }
    });

    startTransition(() => {
      router.push(`${pathname}?${params.toString()}`);
    });
  };

  const handleKeywordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 검색어가 바뀌면 페이지를 1로 초기화합니다.
    updateQuery({ keyword: e.target.value, page: '1' });
  };

  const handleCategoryChange = (value: string) => {
    updateQuery({ category: value, page: '1' });
  };

  const handleSortChange = (value: string) => {
    updateQuery({ sort: value, page: '1' });
  };

  return (
    <div style={{ opacity: isPending ? 0.6 : 1, transition: 'opacity 0.2s' }}>
      <input
        defaultValue={keyword}
        onChange={handleKeywordChange}
        placeholder="검색어를 입력하세요"
      />

      <select
        value={category}
        onChange={(e) => handleCategoryChange(e.target.value)}
      >
        {['전체', '공지', '자유', '질문'].map((cat) => (
          <option key={cat} value={cat}>{cat}</option>
        ))}
      </select>

      <select
        value={sort}
        onChange={(e) => handleSortChange(e.target.value)}
      >
        <option value="latest">최신순</option>
        <option value="popular">인기순</option>
        <option value="comments">댓글순</option>
      </select>
    </div>
  );
}

// components/Pagination.tsx — 페이지 번호도 URL로 관리합니다.

'use client';

import { useRouter, useSearchParams, usePathname } from 'next/navigation';

export default function Pagination({ current, total }: { current: number; total: number }) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const goToPage = (page: number) => {
    const params = new URLSearchParams(searchParams.toString());
    params.set('page', String(page));
    router.push(`${pathname}?${params.toString()}`);
  };

  return (
    <div>
      {Array.from({ length: total }, (_, i) => i + 1).map((page) => (
        <button
          key={page}
          onClick={() => goToPage(page)}
          style={{ fontWeight: page === current ? 700 : 400 }}
        >
          {page}
        </button>
      ))}
    </div>
  );
}