motaju/msgapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

6.4 검색 바 및 결과 페이지 라우팅 o

Browse Source
This commit is contained in:
koreacomp5
2025-10-09 16:35:19 +09:00
parent e7edb87269
commit c16b9c1a51
5 changed files with 60 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/components/PostList.tsx
View File

@@ -20,13 +20,14 @@ type Resp = {
const fetcher = (url: string) => fetch(url).then((r) => r.json());
export function PostList({ boardId, sort = "recent" }: { boardId?: string; sort?: "recent" | "popular" }) {
export function PostList({ boardId, sort = "recent", q }: { boardId?: string; sort?: "recent" | "popular"; q?: string }) {
const pageSize = 10;
const getKey = (index: number, prev: Resp | null) => {
if (prev && prev.items.length === 0) return null;
const page = index + 1;
const sp = new URLSearchParams({ page: String(page), pageSize: String(pageSize), sort });
if (boardId) sp.set("boardId", boardId);
if (q) sp.set("q", q);
return `/api/posts?${sp.toString()}`;
};
const { data, size, setSize, isLoading } = useSWRInfinite<Resp>(getKey, fetcher);
@@ -37,8 +38,18 @@ export function PostList({ boardId, sort = "recent" }: { boardId?: string; sort?
<div>
<div style={{ display: "flex", gap: 8, marginBottom: 8 }}>
<span>정렬:</span>
<a href={`/?sort=recent`} style={{ textDecoration: sort === "recent" ? "underline" : "none" }}>최신</a>
<a href={`/?sort=popular`} style={{ textDecoration: sort === "popular" ? "underline" : "none" }}>인기</a>
<a
href={`${q ? "/search" : "/"}?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); if (boardId) p.set("boardId", boardId); p.set("sort", "recent"); return p.toString(); })()}`}
style={{ textDecoration: sort === "recent" ? "underline" : "none" }}
>
최신
</a>
<a
href={`${q ? "/search" : "/"}?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); if (boardId) p.set("boardId", boardId); p.set("sort", "popular"); return p.toString(); })()}`}
style={{ textDecoration: sort === "popular" ? "underline" : "none" }}
>
인기
</a>
</div>
<ul style={{ display: "flex", flexDirection: "column", gap: 8 }}>
{items.map((p) => (