URL로 상태 관리 – 검색/페이지네이션 UX

src/
├── components/
│   ├── InvoiceTable.jsx
│   ├── SearchInput.jsx
│   └── Pagination.jsx
├── hooks/
│   └── useInvoices.js
├── App.jsx
└── main.jsx

// src/hooks/useInvoices.js
import { useState, useEffect, useMemo } from "react";
 
export function useInvoices() {
  const [invoices, setInvoices] = useState([]);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    fetch("/api/invoices")
      .then((r) => r.json())
      .then(setInvoices)
      .finally(() => setLoading(false));
  }, []);
 
  return { invoices, loading };
}
 
export function useSearchAndPagination(invoices) {
  const [searchTerm, setSearchTerm] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 10;
 
  const filteredInvoices = useMemo(() => {
    return invoices.filter((invoice) =>
      invoice.customerName.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [invoices, searchTerm]);
 
  const paginatedInvoices = useMemo(() => {
    const startIndex = (currentPage - 1) * itemsPerPage;
    return filteredInvoices.slice(startIndex, startIndex + itemsPerPage);
  }, [filteredInvoices, currentPage]);
 
  const totalPages = Math.ceil(filteredInvoices.length / itemsPerPage);
 
  return {
    searchTerm,
    setSearchTerm,
    currentPage,
    setCurrentPage,
    paginatedInvoices,
    totalPages,
  };
}

app/
├── invoices/
│   ├── page.tsx
│   ├── layout.tsx
│   └── components/
│       ├── InvoiceTable.tsx
│       ├── SearchInput.tsx
│       └── Pagination.tsx
└── api/
    └── invoices/
        └── route.ts

// app/invoices/page.tsx
import { InvoiceTable } from "./components/InvoiceTable";
import { SearchInput } from "./components/SearchInput";
import { Pagination } from "./components/Pagination";
 
async function getInvoices(search?: string, page: number = 1) {
  const params = new URLSearchParams();
  if (search) params.set("search", search);
  params.set("page", page.toString());
  params.set("limit", "10");
 
  const res = await fetch(`http://localhost:3000/api/invoices?${params}`, {
    cache: "no-store",
  });
 
  if (!res.ok) throw new Error("인보이스를 불러오지 못했습니다.");
  return res.json();
}
 
export default async function InvoicesPage({
  searchParams,
}: {
  searchParams: Record<string, string | undefined>;
}) {
  const search = searchParams.search || "";
  const page = parseInt(searchParams.page || "1", 10);
  const { invoices, totalPages } = await getInvoices(search, page);
 
  return (
    <div>
      <h1>인보이스 목록</h1>
      <SearchInput initialValue={search} />
      <InvoiceTable invoices={invoices} />
      <Pagination currentPage={page} totalPages={totalPages} />
    </div>
  );
}

// app/invoices/components/SearchInput.tsx
"use client";
 
import { useSearchParams, useRouter, usePathname } from "next/navigation";
import { useState, useEffect, useTransition } from "react";
 
export function SearchInput({ initialValue }: { initialValue: string }) {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [value, setValue] = useState(initialValue);
 
  useEffect(() => {
    setValue(searchParams.get("search") || "");
  }, [searchParams]);
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
 
    startTransition(() => {
      const params = new URLSearchParams(searchParams);
      if (value) {
        params.set("search", value);
      } else {
        params.delete("search");
      }
      params.set("page", "1");
      router.replace(`${pathname}?${params}`);
    });
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="고객명으로 검색..."
        disabled={isPending}
      />
      <button type="submit" disabled={isPending}>
        {isPending ? "검색 중..." : "검색"}
      </button>
    </form>
  );
}

// app/invoices/components/Pagination.tsx
"use client";
 
import { useSearchParams, useRouter, usePathname } from "next/navigation";
import { useTransition } from "react";
 
interface PaginationProps {
  currentPage: number;
  totalPages: number;
}
 
export function Pagination({ currentPage, totalPages }: PaginationProps) {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
 
  const handlePageChange = (page: number) => {
    startTransition(() => {
      const params = new URLSearchParams(searchParams);
      params.set("page", page.toString());
      router.replace(`${pathname}?${params}`);
    });
  };
 
  return (
    <div className="pagination">
      {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
        <button
          key={page}
          onClick={() => handlePageChange(page)}
          disabled={isPending || page === currentPage}
          className={page === currentPage ? "active" : ""}
        >
          {page}
        </button>
      ))}
    </div>
  );
}

function SearchInput() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState(searchParams.get("q") || "");
  const deferredQuery = useDeferredValue(query);
 
  useEffect(() => {
    startTransition(() => {
      const params = new URLSearchParams(searchParams);
      if (deferredQuery) {
        params.set("q", deferredQuery);
      } else {
        params.delete("q");
      }
      params.set("page", "1");
      router.replace(`${pathname}?${params}`);
    });
  }, [deferredQuery, router, searchParams, pathname]);
 
  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="검색어 입력..."
      disabled={isPending}
    />
  );
}