From 5e303bf45652aaf1c163c7a579631c289a630bba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=B0=EC=83=81=EB=B9=88?= <saokm5@gmail.com>
Date: Sat, 15 Aug 2026 20:53:21 +0900
Subject: [PATCH] refactor(categories): give the category list page its own
 card grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

/categories and /tags shared the exact same chip-list component
(TaxonomyList), so two taxonomies with different semantics looked
identical. Categories are exclusive (one per post, few in number,
broad sections); tags are cross-cutting (many per post, can grow
large) — the pill list already fits tags well.

Add CategoryGrid: a card grid where each category gets a folder icon,
its name, post count, and a chevron affordance, sized to read as a
section hub rather than a keyword chip. Tags and the homepage's
compact "둘러보기" preview are untouched.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/app/(site)/categories/page.tsx |  4 +--
 src/components/category-grid.tsx   | 44 ++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 src/components/category-grid.tsx

diff --git a/src/app/(site)/categories/page.tsx b/src/app/(site)/categories/page.tsx
index c7bd42b..ac3880c 100644
--- a/src/app/(site)/categories/page.tsx
+++ b/src/app/(site)/categories/page.tsx
@@ -1,5 +1,5 @@
+import { CategoryGrid } from "@/components/category-grid"
 import { MainBreadcrumbs } from "@/components/layout"
-import { TaxonomyList } from "@/components/taxonomy-list"
 import { Lead, PageTitle } from "@/components/typography"
 import { getCategoryIndex } from "@/lib/posts"
 import { createPageMetadata } from "@/lib/seo"
@@ -24,7 +24,7 @@ export default function CategoriesPage() {
           넓은 주제별로 공개 글을 묶었습니다. 숫자는 발행된 Markdown 글만 기준으로 합니다.
         </Lead>
         <div className="mt-8">
-          <TaxonomyList ariaLabel="카테고리 목록" basePath="/categories" items={categories} />
+          <CategoryGrid ariaLabel="카테고리 목록" categories={categories} />
         </div>
       </section>
     </>
diff --git a/src/components/category-grid.tsx b/src/components/category-grid.tsx
new file mode 100644
index 0000000..dd9f157
--- /dev/null
+++ b/src/components/category-grid.tsx
@@ -0,0 +1,44 @@
+import Link from "next/link"
+import { Icons } from "@/components/icons"
+import type { TaxonomyItem } from "@/lib/post-collections"
+
+type CategoryGridProps = Readonly<{
+  categories: readonly TaxonomyItem[]
+  ariaLabel: string
+}>
+
+// 카테고리는 글마다 하나만 붙는 배타적 분류라 태그보다 수가 적고 무게감이 있어야 한다.
+// 그래서 태그와 같은 칩 목록 대신, 섹션 허브처럼 보이는 카드 그리드를 쓴다.
+export function CategoryGrid({ categories, ariaLabel }: CategoryGridProps) {
+  return (
+    <ul aria-label={ariaLabel} className="grid gap-4 sm:grid-cols-2">
+      {categories.map((category) => (
+        <li key={category.name}>
+          <Link
+            className="group flex items-center justify-between gap-4 rounded-md border border-border bg-background p-5 transition-colors duration-150 hover:bg-accent/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+            href={`/categories/${encodeURIComponent(category.name)}/`}
+          >
+            <span className="flex items-center gap-3">
+              <Icons.navigation.categories
+                aria-hidden="true"
+                className="size-5 shrink-0 text-muted-foreground"
+              />
+              <span className="flex flex-col">
+                <span className="text-lg font-bold leading-[1.35] text-foreground">
+                  {category.name}
+                </span>
+                <span className="text-sm leading-[1.55] text-muted-foreground">
+                  {category.count}개 글
+                </span>
+              </span>
+            </span>
+            <Icons.chevronRight
+              aria-hidden="true"
+              className="size-4 shrink-0 text-muted-foreground transition-transform duration-150 group-hover:translate-x-0.5"
+            />
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}