docs: Update pagination navigation documentation and remove obsolete components

- Deleted the outdated `PageGroupNav` component and its related documentation.
- Introduced a new document for the direct input navigation feature in pagination, detailing the rationale for the change and the new user experience.
- Updated the checklist to reflect the completion of the new pagination input feature and its implementation steps.

These changes enhance the clarity and usability of the pagination system in the project.
This commit is contained in:
2026-03-11 14:05:38 +09:00
parent 51e1abee2b
commit d9611f234e
8 changed files with 452 additions and 788 deletions

View File

@@ -1,109 +0,0 @@
"use client";
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
const DEFAULT_GROUP_SIZE = 10;
interface PageGroupNavProps {
currentPage: number;
totalPages: number;
onPageChange: (page: number) => void;
disabled?: boolean;
groupSize?: number;
}
export function PageGroupNav({
currentPage,
totalPages,
onPageChange,
disabled = false,
groupSize = DEFAULT_GROUP_SIZE,
}: PageGroupNavProps) {
const safeTotal = Math.max(1, totalPages);
const currentGroupIndex = Math.floor((currentPage - 1) / groupSize);
const groupStartPage = currentGroupIndex * groupSize + 1;
const lastGroupIndex = Math.floor((safeTotal - 1) / groupSize);
const lastGroupStartPage = lastGroupIndex * groupSize + 1;
const isFirstGroup = currentGroupIndex === 0;
const isLastGroup = currentGroupIndex === lastGroupIndex;
const slots: (number | null)[] = [];
for (let i = 0; i < groupSize; i++) {
const page = groupStartPage + i;
slots.push(page <= safeTotal ? page : null);
}
return (
<div className="flex items-center gap-1">
{/* << 첫 단락 */}
<Button
variant="outline"
size="sm"
onClick={() => onPageChange(1)}
disabled={isFirstGroup || disabled}
className="h-8 w-8 p-0 sm:h-9 sm:w-9"
>
<ChevronsLeft className="h-3 w-3 sm:h-4 sm:w-4" />
</Button>
{/* < 이전 단락 */}
<Button
variant="outline"
size="sm"
onClick={() => onPageChange((currentGroupIndex - 1) * groupSize + 1)}
disabled={isFirstGroup || disabled}
className="h-8 w-8 p-0 sm:h-9 sm:w-9"
>
<ChevronLeft className="h-3 w-3 sm:h-4 sm:w-4" />
</Button>
{/* 페이지 번호 (고정 슬롯) */}
{slots.map((page, idx) =>
page !== null ? (
<Button
key={idx}
size="sm"
variant={page === currentPage ? "default" : "outline"}
onClick={() => onPageChange(page)}
disabled={disabled}
className={cn(
"h-8 w-8 p-0 text-xs sm:h-9 sm:w-9 sm:text-sm",
page === currentPage &&
"font-bold ring-2 ring-primary ring-offset-1 ring-offset-background",
)}
>
{page}
</Button>
) : (
<div key={idx} className="h-8 w-8 cursor-default sm:h-9 sm:w-9" />
),
)}
{/* > 다음 단락 */}
<Button
variant="outline"
size="sm"
onClick={() => onPageChange((currentGroupIndex + 1) * groupSize + 1)}
disabled={isLastGroup || disabled}
className="h-8 w-8 p-0 sm:h-9 sm:w-9"
>
<ChevronRight className="h-3 w-3 sm:h-4 sm:w-4" />
</Button>
{/* >> 마지막 단락 */}
<Button
variant="outline"
size="sm"
onClick={() => onPageChange(lastGroupStartPage)}
disabled={isLastGroup || disabled}
className="h-8 w-8 p-0 sm:h-9 sm:w-9"
>
<ChevronsRight className="h-3 w-3 sm:h-4 sm:w-4" />
</Button>
</div>
);
}