7.3 태그/카테고리 모델 및 UI o

src/app/api/posts/route.ts

@@ -100,6 +100,7 @@ export async function GET(req: Request) {
         isPinned: true,
         status: true,
         stat: { select: { recommendCount: true, views: true, commentsCount: true } },
+        postTags: { select: { tag: { select: { name: true, slug: true } } } },
       },
     }),
   ]);

src/app/api/tags/route.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from "next/server";
+import prisma from "@/lib/prisma";
+
+export async function GET() {
+  const tags = await prisma.tag.findMany({
+    orderBy: { name: "asc" },
+    take: 100,
+    select: { slug: true, name: true },
+  });
+  return NextResponse.json({ tags });
+}
+
+

src/app/components/PostList.tsx

@@ -8,6 +8,7 @@ type Item = {
   isPinned: boolean;
   status: string;
   stat?: { recommendCount: number; views: number; commentsCount: number } | null;
+  postTags?: { tag: { name: string; slug: string } }[];
 };
 
 type Resp = {
@@ -65,6 +66,13 @@ export function PostList({ boardId, sort = "recent", q, tag, author, start, end
             <div style={{ fontSize: 12, opacity: 0.8 }}>
               추천 {p.stat?.recommendCount ?? 0} · 조회 {p.stat?.views ?? 0} · 댓글 {p.stat?.commentsCount ?? 0}
             </div>
+            {!!p.postTags?.length && (
+              <div style={{ marginTop: 6, display: "flex", gap: 6, flexWrap: "wrap", fontSize: 12 }}>
+                {p.postTags?.map((pt) => (
+                  <a key={pt.tag.slug} href={`/search?tag=${pt.tag.slug}`}>#{pt.tag.name}</a>
+                ))}
+              </div>
+            )}
           </li>
         ))}
       </ul>

src/app/components/TagFilter.tsx

@@ -0,0 +1,21 @@
+"use client";
+import useSWR from "swr";
+
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
+
+export function TagFilter({ basePath, current }: { basePath: string; current?: string }) {
+  const { data } = useSWR<{ tags: { slug: string; name: string }[] }>("/api/tags", fetcher);
+  const tags = data?.tags ?? [];
+  return (
+    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 8 }}>
+      <a href={`${basePath}`} style={{ textDecoration: !current ? "underline" : "none" }}>전체</a>
+      {tags.map((t) => (
+        <a key={t.slug} href={`${basePath}?tag=${t.slug}`} style={{ textDecoration: current === t.slug ? "underline" : "none" }}>
+          #{t.name}
+        </a>
+      ))}
+    </div>
+  );
+}
+
+