フロントエンド共通コンポーネント¶

このドキュメントでは、Storefront で使用される共通コンポーネントの仕様と使用ガイドラインをまとめます。

EmptyState¶

データが空の状態（お気に入りがない、検索結果がゼロ、カートが空など）を表示するための共通コンポーネントです。

プロパティ名	型	デフォルト	説明
`icon`	`LucideIcon`	-	表示するアイコン（Lucide React）
`title`	`string`	-	メインの見出しテキスト
`description`	`ReactNode`	-	説明文（文字列またはJSX）
`action`	`ReactNode`	-	アクションボタンなどのJSX
`variant`	`"default" \\| "card"`	`"default"`	表示スタイル（下記参照）
`className`	`string`	-	追加のCSSクラス
`testId`	`string`	-	E2Eテスト用の `data-testid`

アイコンを中心に配置し、上下に広めの余白（py-16）を持つスタイルです。マイページのお気に入り一覧や注文履歴など、ページ全体のメインコンテンツが空の場合に適しています。

使用例:

<EmptyState
  icon={Heart}
  title="お気に入り商品はまだありません"
  description="商品ページでハートアイコンをクリックしてお気に入りに追加できます"
  action={<Button>商品を探す</Button>}
/>

枠線（border）と背景色（bg-card）を持ち、比較的コンパクトなスタイルです。検索結果リストの途中や、サイドバー、特定のセクション内での「該当なし」表示に適しています。

使用例:

<EmptyState
  variant="card"
  title="該当する商品が見つかりませんでした"
  description="検索条件を変更して再度お試しください。"
/>