@sayren/mcp 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sayren/mcp",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "bin": {
     "sayren-mcp": "./dist/index.mjs"
@@ -12,8 +12,8 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.22.0",
     "zod": "^4.6.5",
-    "@sayren/storefront-sdk": "^0.8.0",
-    "@sayren/store-sdk": "^0.8.0"
+    "@sayren/store-sdk": "^0.9.0",
+    "@sayren/storefront-sdk": "^0.9.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.14",

package/template/.template-meta.json

@@ -7,8 +7,8 @@
     "zod": "^4.6.5"
   },
   "versions": {
-    "@sayren/store-sdk": "0.8.0",
-    "@sayren/storefront-sdk": "0.8.0",
+    "@sayren/store-sdk": "0.9.0",
+    "@sayren/storefront-sdk": "0.9.0",
     "@sayren/ui": "0.1.0"
   }
 }

package/template/src/components/product-card.tsx

@@ -1,6 +1,7 @@
 import type { ProductCard as ProductCardData } from "@sayren/storefront-sdk";
 import { Link } from "@tanstack/react-router";
 import { formatPrice } from "../lib/format";
+import { ProductThumb } from "./product-thumb";
 
 /** 상품 카드 — 확장 지점: 찜 버튼·리뷰 별점 같은 요소는 여기에 붙인다 */
 export function ProductCard({ product }: { product: ProductCardData }) {
@@ -13,9 +14,8 @@ export function ProductCard({ product }: { product: ProductCardData }) {
       className="group flex flex-col gap-2"
     >
       <div className="relative aspect-square overflow-hidden rounded-lg bg-chip">
-        <img
+        <ProductThumb
           src={product.thumbnailUrl}
-          alt=""
           className="h-full w-full object-cover transition group-hover:scale-105"
           loading="lazy"
         />

package/template/src/components/product-thumb.tsx

@@ -0,0 +1,27 @@
+interface ProductThumbProps {
+  /** 대표 이미지 주소. 등록된 이미지가 없으면 null이다 */
+  src: string | null;
+  alt?: string;
+  /** 크기·모서리 등 자리 클래스 — 이미지와 자리표시가 같은 박스를 쓴다 */
+  className: string;
+  loading?: "lazy" | "eager";
+}
+
+/**
+ * 상품 대표 이미지. `thumbnailUrl`이 null이면(이미지 없는 상품) 빈 자리를 그린다.
+ * 상품 이미지는 셀러가 콘솔에서 올리므로 아직 안 올린 상품이 섞일 수 있다.
+ */
+export function ProductThumb({ src, alt = "", className, loading }: ProductThumbProps) {
+  if (!src) {
+    return (
+      <div
+        className={`${className} flex items-center justify-center bg-chip text-muted text-xs`}
+        role="img"
+        aria-label="이미지 없음"
+      >
+        이미지 없음
+      </div>
+    );
+  }
+  return <img src={src} alt={alt} loading={loading} className={className} />;
+}

package/template/src/routes/cart.tsx

@@ -2,6 +2,7 @@ import { createFileRoute, Link, useRouter } from "@tanstack/react-router";
 import { createServerFn } from "@tanstack/react-start";
 import { useState } from "react";
 import { z } from "zod";
+import { ProductThumb } from "../components/product-thumb";
 import { SubmitButton } from "../components/submit-button";
 import { apiFor } from "../lib/api.server";
 import { readCartToken, writeCartToken } from "../lib/cart-session.server";
@@ -89,9 +90,8 @@ function CartPage() {
       <ul className="divide-y divide-line border-line border-y">
         {cart.items.map((item) => (
           <li key={item.cartItemId} className="flex gap-4 py-4">
-            <img
+            <ProductThumb
               src={item.thumbnailUrl}
-              alt=""
               className="size-20 rounded-md bg-chip object-cover"
             />
             <div className="flex flex-1 flex-col gap-1">

package/template/src/routes/orders.$orderId.tsx

@@ -2,6 +2,7 @@ import { ApiError } from "@sayren/storefront-sdk";
 import { createFileRoute, Link, notFound, redirect } from "@tanstack/react-router";
 import { createServerFn } from "@tanstack/react-start";
 import { z } from "zod";
+import { ProductThumb } from "../components/product-thumb";
 import { apiFor } from "../lib/api.server";
 import { formatDateTime, formatPrice } from "../lib/format";
 import { readToken } from "../lib/session.server";
@@ -43,9 +44,8 @@ function OrderDetail() {
       <ul className="divide-y divide-line border-line border-y">
         {order.items.map((item) => (
           <li key={item.orderItemId} className="flex items-center gap-4 py-4">
-            <img
+            <ProductThumb
               src={item.thumbnailUrl}
-              alt=""
               className="size-16 rounded-md bg-chip object-cover"
             />
             <span className="flex flex-1 flex-col gap-1 text-sm">

package/template/src/routes/products.$productId.tsx

@@ -4,6 +4,7 @@ import { createServerFn } from "@tanstack/react-start";
 import { useState } from "react";
 import { z } from "zod";
 import { ProductDescription } from "../components/product-description";
+import { ProductThumb } from "../components/product-thumb";
 import { SubmitButton } from "../components/submit-button";
 import { useTrack } from "../lib/analytics";
 import { apiFor } from "../lib/api.server";
@@ -74,7 +75,7 @@ function ProductDetail() {
   return (
     <div className="grid gap-8 md:grid-cols-2">
       <div className="space-y-3">
-        <img src={product.thumbnailUrl} alt="" className="w-full rounded-lg bg-chip" />
+        <ProductThumb src={product.thumbnailUrl} className="w-full rounded-lg bg-chip" />
         {product.images.slice(0, 4).map((image) => (
           <img
             key={image}