File name
Commit message
Commit date
08-14
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import type { Metadata } from 'next';
import Link from 'next/link';
import { Alert } from '@/components/ui/alert';
import { Pagination } from '@/components/ui/pagination';
import { verifySession } from '@/lib/auth/dal';
import { fetchDecorationItems } from '@/lib/data/repositories/decoration-item-repository';
import {
buildDecorationItemHref,
parseDecorationItemQuery,
} from '@/lib/domain/decoration-item-query';
import { DecorationItemListToolbar } from './_components/decoration-item-list-toolbar';
import { DecorationItemSearchBar } from './_components/decoration-item-search-bar';
import { DecorationItemTable } from './_components/decoration-item-table';
import { DecorationItemTypeTabs } from './_components/decoration-item-type-tabs';
export const metadata: Metadata = {
title: '꾸미기 아이템',
};
interface PageProps {
searchParams: Promise<Record<string, string | string[] | undefined>>;
}
/**
* 꾸미기 아이템 목록(시안 ADM_ITM_101).
*
* **셋트아이템은 별도 화면이 없다** — 유형 탭(개별/셋트)만 바꿔 같은 목록·같은 폼을 재사용
* 한다(시안 두 곳에 명시된 사양). `query.itemType`이 곧 그 탭 상태이고, 다른 검색·페이지
* 상태와 마찬가지로 URL(searchParams)이 단일 진실원천이다(`useState`로 들지 않는다).
*
* `verifySession()`을 호출만 하고 반환값을 쓰지 않는 이유는 인증 확인 자체가 목적이기
* 때문이다 — admins의 "본인 계정 삭제 방지" 같은 사용자 조건부 로직이 이 화면에는 없다.
*/
export default async function Page({ searchParams }: PageProps) {
await verifySession();
const query = parseDecorationItemQuery(await searchParams);
const { items, totalCount, isTotalCountExact, typeTotalCount } =
await fetchDecorationItems(query);
// 전체 건수가 확정되지 않았다면(백엔드가 count를 주지 않아 하한값만 아는 상태) 다음 페이지를
// 한 칸 열어 둔다 — 열어 두지 않으면 가득 찬 페이지 뒤의 데이터에 접근할 방법이 없어진다
// (학생 목록과 동일한 보정. Repository 주석 참조).
const totalPages = isTotalCountExact
? Math.max(1, Math.ceil(totalCount / query.pageSize))
: query.page + 1;
// 요청 페이지가 범위를 벗어나면(예: 삭제로 마지막 페이지가 사라짐, 또는 유형 탭 전환으로
// 전체 건수가 줄어듦) 마지막 페이지로 맞춘다 — 표의 순번 계산도 이 값을 기준으로 해야 헤더의
// "현재페이지"와 어긋나지 않는다.
const currentPage = Math.min(query.page, totalPages);
return (
<section className="flex flex-1 flex-col gap-6 p-8">
<h1 className="text-headline-sm text-foreground">꾸미기 아이템 목록</h1>
<DecorationItemTypeTabs query={query} />
<DecorationItemSearchBar query={query} />
<DecorationItemListToolbar query={query} typeTotalCount={typeTotalCount} />
<p className="text-body-md text-foreground-muted">
총 {totalCount}개{isTotalCountExact ? '' : ' 이상'} | 현재페이지{' '}
{currentPage}
{isTotalCountExact ? `/${totalPages}` : ''}
</p>
{items.length === 0 ? (
<Alert
title="등록된 아이템이 없습니다."
actions={
<Link
href={buildDecorationItemHref(query, { keyword: '', page: 1 })}
className="bg-foreground px-4 py-2 text-background"
>
확인
</Link>
}
>
다른 검색어로 다시 시도해 주세요.
</Alert>
) : (
<>
<DecorationItemTable
items={items}
page={currentPage}
pageSize={query.pageSize}
typeTotalCount={typeTotalCount}
/>
<Pagination
currentPage={currentPage}
totalPages={totalPages}
buildHref={(page: number) => buildDecorationItemHref(query, { page })}
/>
</>
)}
</section>
);
}