@sayren/mcp 0.1.0

package/template/app/routes/products.tsx

@@ -0,0 +1,117 @@
+import { Form, Link, useSearchParams } from "react-router";
+import { ProductCard } from "../components/product-card";
+import { apiFor } from "../lib/api.server";
+import type { Route } from "./+types/products";
+
+export function meta() {
+  return [{ title: "전체 상품" }];
+}
+
+/** 목록·검색 — 필터 상태는 URL에 둔다. 공유·뒤로가기가 그대로 동작한다 */
+export async function loader({ request }: Route.LoaderArgs) {
+  const url = new URL(request.url);
+  const params = {
+    keyword: url.searchParams.get("keyword") ?? undefined,
+    categoryId: url.searchParams.get("categoryId") ?? undefined,
+    sort: (url.searchParams.get("sort") ?? undefined) as "recommend" | "latest" | undefined,
+    page: Number(url.searchParams.get("page") ?? 1),
+    size: 24,
+  };
+  const api = apiFor(request);
+  const [categories, page] = await Promise.all([
+    api.catalog.listCategories(),
+    api.catalog.searchProducts(params),
+  ]);
+  return { categories, page, applied: params };
+}
+
+export default function Products({ loaderData }: Route.ComponentProps) {
+  const { categories, page, applied } = loaderData;
+  const [searchParams] = useSearchParams();
+
+  return (
+    <div className="space-y-6">
+      <Form method="get" className="flex gap-2">
+        <input
+          type="search"
+          name="keyword"
+          defaultValue={applied.keyword ?? ""}
+          placeholder="상품을 검색해요"
+          className="h-11 flex-1 rounded-md border border-line px-3"
+        />
+        {applied.categoryId ? (
+          <input type="hidden" name="categoryId" value={applied.categoryId} />
+        ) : null}
+        <button type="submit" className="h-11 rounded-md bg-ink px-5 font-semibold text-white">
+          검색
+        </button>
+      </Form>
+
+      <div className="flex flex-wrap gap-2">
+        <Link
+          to="/products"
+          className={`rounded-full px-3 py-1.5 text-sm ${applied.categoryId ? "bg-chip" : "bg-ink text-white"}`}
+        >
+          전체
+        </Link>
+        {categories.map((category) => (
+          <Link
+            key={category.categoryId}
+            to={`/products?categoryId=${category.categoryId}`}
+            className={`rounded-full px-3 py-1.5 text-sm ${
+              applied.categoryId === category.categoryId ? "bg-ink text-white" : "bg-chip"
+            }`}
+          >
+            {category.name}
+          </Link>
+        ))}
+      </div>
+
+      {page.contents.length === 0 ? (
+        <p className="py-16 text-center text-muted">조건에 맞는 상품이 없어요</p>
+      ) : (
+        <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+          {page.contents.map((product) => (
+            <ProductCard key={product.productId} product={product} />
+          ))}
+        </div>
+      )}
+
+      <Pagination page={page.page} totalPages={page.totalPages} searchParams={searchParams} />
+    </div>
+  );
+}
+
+function Pagination({
+  page,
+  totalPages,
+  searchParams,
+}: {
+  page: number;
+  totalPages: number;
+  searchParams: URLSearchParams;
+}) {
+  if (totalPages <= 1) return null;
+  const linkTo = (next: number) => {
+    const params = new URLSearchParams(searchParams);
+    params.set("page", String(next));
+    return `/products?${params.toString()}`;
+  };
+  return (
+    <nav className="flex items-center justify-center gap-3 text-sm">
+      {page > 1 ? (
+        <Link to={linkTo(page - 1)} className="rounded-md border border-line px-3 py-1.5">
+          이전
+        </Link>
+      ) : null}
+      <span className="text-muted">
+        {page} / {totalPages}
+      </span>
+      {page < totalPages ? (
+        <Link to={linkTo(page + 1)} className="rounded-md border border-line px-3 py-1.5">
+          다음
+        </Link>
+      ) : null}
+    </nav>
+  );
+}

package/template/app/routes.ts

@@ -0,0 +1,17 @@
+import { index, type RouteConfig, route } from "@react-router/dev/routes";
+
+/**
+ * 라우트 구성 — 구매 흐름 전체를 덮는다.
+ * 확장 지점: 기획전·브랜드관 같은 화면은 여기에 route()를 더하면 된다.
+ */
+export default [
+  index("routes/home.tsx"),
+  route("products", "routes/products.tsx"),
+  route("products/:productId", "routes/product-detail.tsx"),
+  route("cart", "routes/cart.tsx"),
+  route("checkout", "routes/checkout.tsx"),
+  route("checkout/complete", "routes/checkout-complete.tsx"),
+  route("login", "routes/login.tsx"),
+  route("orders", "routes/orders.tsx"),
+  route("orders/:orderId", "routes/order-detail.tsx"),
+] satisfies RouteConfig;

package/template/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@sayren/template-storefront-react-router",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "react-router dev --port 4010",
+    "build": "react-router build",
+    "start": "react-router-serve ./build/server/index.js",
+    "lint": "biome check --write . && tsc --noEmit",
+    "typecheck": "react-router typegen && tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@avarlabs/editor": "^0.1.0",
+    "@react-router/node": "^8.4.0",
+    "@react-router/serve": "^8.4.0",
+    "@sayren/storefront-sdk": "workspace:*",
+    "@tailwindcss/vite": "^4.3.3",
+    "isbot": "^5.1.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "react-router": "^8.4.0",
+    "tailwindcss": "^4.3.3",
+    "zod": "catalog:"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "catalog:",
+    "@react-router/dev": "^8.4.0",
+    "@types/node": "^24.13.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "typescript": "catalog:",
+    "vite": "^8.3.0",
+    "vitest": "catalog:"
+  }
+}

package/template/react-router.config.ts

@@ -0,0 +1,6 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  // SSR을 끄지 않는다 — 상품 데이터를 서버에서 먼저 받아야 검색 노출과 첫 페인트가 산다.
+  ssr: true,
+} satisfies Config;

package/template/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["node", "vite/client"],
+    "rootDirs": [".", "./.react-router/types"],
+    "paths": { "~/*": ["./app/*"] }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".react-router/types/**/*"]
+}

package/template/vite.config.ts

@@ -0,0 +1,7 @@
+import { reactRouter } from "@react-router/dev/vite";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [tailwindcss(), reactRouter()],
+});

package/template/vitest.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: { environment: "node", include: ["app/**/*.test.ts"] },
+});