From 325d2944fe78058d4bcdfe2470dc0d5a2a2d5894 Mon Sep 17 00:00:00 2001
From: tester <tester@startanaicompany.com>
Date: Sat, 21 Feb 2026 22:06:25 +0000
Subject: [PATCH] feat: Order & Checkout System - cart, checkout, order
 history, tracking
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Backend: Add GET /api/orders/:id, PUT /api/orders/:id/cancel, GET /api/orders/:id/tracking with mock Yamato data
- Frontend: Zustand cart store with localStorage persistence (key 'cart')
- Frontend: CartPage (/cart) with quantity controls, item removal, JPY totals
- Frontend: CheckoutPage (/checkout) with shipping address form, auth guard, POST to /api/orders
- Frontend: OrderHistoryPage (/account/orders) with Japanese status labels, auth guard
- Frontend: OrderDetailPage (/account/orders/:id) with cancel button, tracking section, auth guard
- Updated App.tsx with all four new routes
- Updated ProductDetail.tsx to use cart store with View Cart link after adding
- Updated Navbar.tsx with cart icon badge (item count) and 注文履歴 order history link
---
 .saac/config.json                     |   7 +
 client/src/App.tsx                    |   8 +
 client/src/components/Navbar.tsx      |  32 ++-
 client/src/pages/CartPage.tsx         | 114 +++++++++
 client/src/pages/CheckoutPage.tsx     | 226 ++++++++++++++++++
 client/src/pages/OrderDetailPage.tsx  | 317 ++++++++++++++++++++++++++
 client/src/pages/OrderHistoryPage.tsx | 138 +++++++++++
 client/src/pages/ProductDetail.tsx    |  77 +++----
 client/src/store/cart.ts              |  70 ++++++
 src/routes/orders.js                  |  99 ++++++++
 10 files changed, 1045 insertions(+), 43 deletions(-)
 create mode 100644 .saac/config.json
 create mode 100644 client/src/pages/CartPage.tsx
 create mode 100644 client/src/pages/CheckoutPage.tsx
 create mode 100644 client/src/pages/OrderDetailPage.tsx
 create mode 100644 client/src/pages/OrderHistoryPage.tsx
 create mode 100644 client/src/store/cart.ts

diff --git a/.saac/config.json b/.saac/config.json
new file mode 100644
index 0000000..3a3d1ac
--- /dev/null
+++ b/.saac/config.json
@@ -0,0 +1,7 @@
+{
+  "applicationUuid": "7a82508b-9f93-46dc-acb4-f925182d7e30",
+  "applicationName": "shokuninmarche",
+  "subdomain": "shokuninmarche",
+  "domainSuffix": "startanaicompany.com",
+  "gitRepository": "https://git.startanaicompany.com/tester/shokuninmarche.git"
+}
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 638367b..934445a 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -8,6 +8,10 @@ import { Products } from '@/pages/Products'
 import { ProductDetail } from '@/pages/ProductDetail'
 import { CraftsmenList } from '@/pages/CraftsmenList'
 import { CraftsmanProfile } from '@/pages/CraftsmanProfile'
+import { CartPage } from '@/pages/CartPage'
+import { CheckoutPage } from '@/pages/CheckoutPage'
+import { OrderHistoryPage } from '@/pages/OrderHistoryPage'
+import { OrderDetailPage } from '@/pages/OrderDetailPage'
 import { useAuthStore } from '@/store/auth'
 
 function App() {
@@ -28,6 +32,10 @@ function App() {
         <Route path="/products/:id" element={<ProductDetail />} />
         <Route path="/craftsmen" element={<CraftsmenList />} />
         <Route path="/craftsmen/:id" element={<CraftsmanProfile />} />
+        <Route path="/cart" element={<CartPage />} />
+        <Route path="/checkout" element={<CheckoutPage />} />
+        <Route path="/account/orders" element={<OrderHistoryPage />} />
+        <Route path="/account/orders/:id" element={<OrderDetailPage />} />
         <Route path="*" element={<Home />} />
       </Routes>
     </div>
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
index 948d792..ebd2782 100644
--- a/client/src/components/Navbar.tsx
+++ b/client/src/components/Navbar.tsx
@@ -1,11 +1,14 @@
 import { Link, useNavigate } from 'react-router-dom'
 import { useAuthStore } from '@/store/auth'
+import { useCartStore } from '@/store/cart'
 import { Button } from '@/components/ui/button'
-import { ShoppingBag, User } from 'lucide-react'
+import { ShoppingCart, User, ClipboardList } from 'lucide-react'
 
 export function Navbar() {
   const { user, logout } = useAuthStore()
   const navigate = useNavigate()
+  const { items } = useCartStore()
+  const cartCount = items.reduce((sum, item) => sum + item.quantity, 0)
 
   return (
     <nav className="border-b bg-white sticky top-0 z-50">
@@ -22,14 +25,35 @@ export function Navbar() {
         </div>
 
         <div className="flex items-center gap-2">
+          {/* Cart icon — always visible */}
+          <Link to="/cart" className="relative">
+            <Button variant="ghost" size="icon">
+              <ShoppingCart className="h-5 w-5" />
+            </Button>
+            {cartCount > 0 && (
+              <span className="absolute -top-1 -right-1 bg-primary text-primary-foreground text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold leading-none">
+                {cartCount > 99 ? '99+' : cartCount}
+              </span>
+            )}
+          </Link>
+
           {user ? (
             <>
-              <Link to="/orders">
-                <Button variant="ghost" size="icon"><ShoppingBag className="h-5 w-5" /></Button>
+              <Link to="/account/orders">
+                <Button variant="ghost" size="icon" title="注文履歴">
+                  <ClipboardList className="h-5 w-5" />
+                </Button>
               </Link>
               <Link to="/profile">
-                <Button variant="ghost" size="icon"><User className="h-5 w-5" /></Button>
+                <Button variant="ghost" size="icon">
+                  <User className="h-5 w-5" />
+                </Button>
               </Link>
+              <div className="hidden md:flex items-center gap-2">
+                <Link to="/account/orders" className="text-sm hover:text-primary transition-colors">
+                  注文履歴
+                </Link>
+              </div>
               <Button variant="outline" size="sm" onClick={() => { logout(); navigate('/') }}>
                 Logout
               </Button>
diff --git a/client/src/pages/CartPage.tsx b/client/src/pages/CartPage.tsx
new file mode 100644
index 0000000..9169c6f
--- /dev/null
+++ b/client/src/pages/CartPage.tsx
@@ -0,0 +1,114 @@
+import { Link, useNavigate } from 'react-router-dom'
+import { useCartStore } from '@/store/cart'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Minus, Plus, Trash2, ShoppingBag } from 'lucide-react'
+
+function formatPrice(price: number): string {
+  return new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(price)
+}
+
+export function CartPage() {
+  const { items, total, removeItem, updateQuantity } = useCartStore()
+  const navigate = useNavigate()
+
+  if (items.length === 0) {
+    return (
+      <div className="container mx-auto px-4 py-24 text-center">
+        <ShoppingBag className="h-16 w-16 mx-auto text-muted-foreground mb-4" />
+        <h1 className="text-2xl font-bold mb-2">カートは空です</h1>
+        <p className="text-muted-foreground mb-6">Your cart is empty.</p>
+        <Link to="/products">
+          <Button>商品一覧を見る</Button>
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-10 max-w-3xl">
+      <h1 className="text-2xl font-bold mb-8">ショッピングカート</h1>
+
+      <div className="space-y-4 mb-8">
+        {items.map(item => (
+          <Card key={item.product_id}>
+            <CardContent className="p-4 flex items-center gap-4">
+              {/* Image */}
+              <div className="w-20 h-20 bg-amber-50 rounded-lg overflow-hidden flex-shrink-0 border border-border">
+                {item.image ? (
+                  <img src={item.image} alt={item.name} className="w-full h-full object-cover" />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center text-2xl">🏺</div>
+                )}
+              </div>
+
+              {/* Info */}
+              <div className="flex-1 min-w-0">
+                <p className="font-semibold truncate">{item.name}</p>
+                <p className="text-primary font-bold mt-1">{formatPrice(item.price)}</p>
+              </div>
+
+              {/* Quantity controls */}
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="h-8 w-8"
+                  onClick={() => updateQuantity(item.product_id, item.quantity - 1)}
+                >
+                  <Minus className="h-3 w-3" />
+                </Button>
+                <span className="w-8 text-center font-medium">{item.quantity}</span>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="h-8 w-8"
+                  onClick={() => updateQuantity(item.product_id, item.quantity + 1)}
+                >
+                  <Plus className="h-3 w-3" />
+                </Button>
+              </div>
+
+              {/* Item total */}
+              <div className="w-24 text-right font-bold">
+                {formatPrice(item.price * item.quantity)}
+              </div>
+
+              {/* Remove */}
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-muted-foreground hover:text-destructive"
+                onClick={() => removeItem(item.product_id)}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Summary */}
+      <Card>
+        <CardContent className="p-6">
+          <div className="flex justify-between items-center text-xl font-bold mb-6">
+            <span>合計</span>
+            <span className="text-primary">{formatPrice(total)}</span>
+          </div>
+          <Button
+            size="lg"
+            className="w-full"
+            onClick={() => navigate('/checkout')}
+          >
+            レジに進む (Proceed to Checkout)
+          </Button>
+          <div className="mt-3 text-center">
+            <Link to="/products" className="text-sm text-muted-foreground hover:text-primary transition-colors">
+              買い物を続ける
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/client/src/pages/CheckoutPage.tsx b/client/src/pages/CheckoutPage.tsx
new file mode 100644
index 0000000..ed70269
--- /dev/null
+++ b/client/src/pages/CheckoutPage.tsx
@@ -0,0 +1,226 @@
+import { useEffect, useState } from 'react'
+import { useNavigate, Link } from 'react-router-dom'
+import { useAuthStore } from '@/store/auth'
+import { useCartStore } from '@/store/cart'
+import { api } from '@/lib/api'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+function formatPrice(price: number): string {
+  return new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(price)
+}
+
+interface ShippingAddress {
+  postal_code: string
+  prefecture: string
+  city: string
+  address_line1: string
+  address_line2: string
+  recipient_name: string
+  phone: string
+}
+
+const EMPTY_ADDRESS: ShippingAddress = {
+  postal_code: '',
+  prefecture: '',
+  city: '',
+  address_line1: '',
+  address_line2: '',
+  recipient_name: '',
+  phone: '',
+}
+
+export function CheckoutPage() {
+  const { user } = useAuthStore()
+  const { items, total, clearCart } = useCartStore()
+  const navigate = useNavigate()
+  const [address, setAddress] = useState<ShippingAddress>(EMPTY_ADDRESS)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!user) {
+      navigate('/login')
+    }
+  }, [user, navigate])
+
+  if (!user) return null
+
+  if (items.length === 0) {
+    return (
+      <div className="container mx-auto px-4 py-24 text-center">
+        <h1 className="text-2xl font-bold mb-4">カートが空です</h1>
+        <Link to="/products">
+          <Button>商品一覧を見る</Button>
+        </Link>
+      </div>
+    )
+  }
+
+  function handleChange(field: keyof ShippingAddress, value: string) {
+    setAddress(prev => ({ ...prev, [field]: value }))
+  }
+
+  async function handlePlaceOrder() {
+    setError(null)
+    const required: (keyof ShippingAddress)[] = ['postal_code', 'prefecture', 'city', 'address_line1', 'recipient_name', 'phone']
+    for (const field of required) {
+      if (!address[field].trim()) {
+        setError('必須項目を入力してください。 (Please fill in all required fields.)')
+        return
+      }
+    }
+
+    setLoading(true)
+    try {
+      const order = await api.post<{ id: string }>('/orders', {
+        items: items.map(i => ({ product_id: i.product_id, quantity: i.quantity })),
+        shipping_address: address,
+      })
+      clearCart()
+      navigate(`/account/orders/${order.id}`)
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : '注文に失敗しました。'
+      setError(message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-10 max-w-4xl">
+      <h1 className="text-2xl font-bold mb-8">チェックアウト (Checkout)</h1>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        {/* Shipping Address Form */}
+        <div>
+          <h2 className="text-lg font-semibold mb-4">配送先情報</h2>
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="recipient_name">お名前 *</Label>
+              <Input
+                id="recipient_name"
+                value={address.recipient_name}
+                onChange={e => handleChange('recipient_name', e.target.value)}
+                placeholder="山田 太郎"
+                className="mt-1"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="postal_code">郵便番号 *</Label>
+              <Input
+                id="postal_code"
+                value={address.postal_code}
+                onChange={e => handleChange('postal_code', e.target.value)}
+                placeholder="123-4567"
+                className="mt-1"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="prefecture">都道府県 *</Label>
+              <Input
+                id="prefecture"
+                value={address.prefecture}
+                onChange={e => handleChange('prefecture', e.target.value)}
+                placeholder="東京都"
+                className="mt-1"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="city">市区町村 *</Label>
+              <Input
+                id="city"
+                value={address.city}
+                onChange={e => handleChange('city', e.target.value)}
+                placeholder="渋谷区"
+                className="mt-1"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="address_line1">番地 *</Label>
+              <Input
+                id="address_line1"
+                value={address.address_line1}
+                onChange={e => handleChange('address_line1', e.target.value)}
+                placeholder="1-2-3"
+                className="mt-1"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="address_line2">建物名・部屋番号 (任意)</Label>
+              <Input
+                id="address_line2"
+                value={address.address_line2}
+                onChange={e => handleChange('address_line2', e.target.value)}
+                placeholder="マンション101号室"
+                className="mt-1"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="phone">電話番号 *</Label>
+              <Input
+                id="phone"
+                value={address.phone}
+                onChange={e => handleChange('phone', e.target.value)}
+                placeholder="090-1234-5678"
+                className="mt-1"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Order Summary */}
+        <div>
+          <h2 className="text-lg font-semibold mb-4">注文内容確認</h2>
+          <Card>
+            <CardContent className="p-4 space-y-3">
+              {items.map(item => (
+                <div key={item.product_id} className="flex justify-between items-start gap-2">
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium truncate">{item.name}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {formatPrice(item.price)} x {item.quantity}
+                    </p>
+                  </div>
+                  <p className="text-sm font-semibold flex-shrink-0">
+                    {formatPrice(item.price * item.quantity)}
+                  </p>
+                </div>
+              ))}
+              <div className="border-t pt-3 flex justify-between font-bold text-lg">
+                <span>合計</span>
+                <span className="text-primary">{formatPrice(total)}</span>
+              </div>
+            </CardContent>
+          </Card>
+
+          {error && (
+            <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-md text-sm text-red-700">
+              {error}
+            </div>
+          )}
+
+          <Button
+            size="lg"
+            className="w-full mt-4"
+            onClick={handlePlaceOrder}
+            disabled={loading}
+          >
+            {loading ? '注文処理中...' : '注文を確定する'}
+          </Button>
+          <p className="text-xs text-center text-muted-foreground mt-2">
+            注文確定後のキャンセルは注文詳細ページから可能です。
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/client/src/pages/OrderDetailPage.tsx b/client/src/pages/OrderDetailPage.tsx
new file mode 100644
index 0000000..9055ca8
--- /dev/null
+++ b/client/src/pages/OrderDetailPage.tsx
@@ -0,0 +1,317 @@
+import { useEffect, useState, useCallback } from 'react'
+import { useParams, useNavigate, Link } from 'react-router-dom'
+import { useAuthStore } from '@/store/auth'
+import { api } from '@/lib/api'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { ChevronLeft, Truck } from 'lucide-react'
+
+interface OrderItem {
+  id: string
+  product_id: string
+  product_name: string
+  quantity: number
+  unit_price: number
+  total_price: number
+}
+
+interface ShippingAddress {
+  postal_code?: string
+  prefecture?: string
+  city?: string
+  address_line1?: string
+  address_line2?: string
+  recipient_name?: string
+  phone?: string
+}
+
+interface Order {
+  id: string
+  status: string
+  total_amount: number
+  shipping_address: ShippingAddress | string
+  created_at: string
+  updated_at: string
+  items: OrderItem[]
+}
+
+interface TrackingEvent {
+  timestamp: string
+  location: string
+  description: string
+}
+
+interface TrackingInfo {
+  tracking_available?: boolean
+  message?: string
+  carrier?: string
+  tracking_number?: string
+  status?: string
+  estimated_delivery?: string
+  events?: TrackingEvent[]
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  pending: '受付中',
+  confirmed: '確認済み',
+  processing: '処理中',
+  shipped: '発送済み',
+  delivered: '配達完了',
+  cancelled: 'キャンセル',
+}
+
+const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
+  pending: 'secondary',
+  confirmed: 'secondary',
+  processing: 'default',
+  shipped: 'default',
+  delivered: 'default',
+  cancelled: 'destructive',
+}
+
+function formatPrice(price: number): string {
+  return new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(price)
+}
+
+function parseAddress(addr: ShippingAddress | string): ShippingAddress {
+  if (typeof addr === 'string') {
+    try { return JSON.parse(addr) } catch { return {} }
+  }
+  return addr || {}
+}
+
+export function OrderDetailPage() {
+  const { id } = useParams<{ id: string }>()
+  const { user } = useAuthStore()
+  const navigate = useNavigate()
+  const [order, setOrder] = useState<Order | null>(null)
+  const [tracking, setTracking] = useState<TrackingInfo | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [cancelling, setCancelling] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const fetchOrder = useCallback(async () => {
+    if (!id) return
+    try {
+      const data = await api.get<Order>(`/orders/${id}`)
+      setOrder(data)
+      if (['shipped', 'delivered'].includes(data.status)) {
+        const track = await api.get<TrackingInfo>(`/orders/${id}/tracking`)
+        setTracking(track)
+      }
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : '注文が見つかりません。'
+      setError(message)
+    } finally {
+      setLoading(false)
+    }
+  }, [id])
+
+  useEffect(() => {
+    if (!user) {
+      navigate('/login')
+      return
+    }
+    fetchOrder()
+  }, [user, navigate, fetchOrder])
+
+  async function handleCancel() {
+    if (!order) return
+    setCancelling(true)
+    setError(null)
+    try {
+      await api.put(`/orders/${order.id}/cancel`, {})
+      await fetchOrder()
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'キャンセルに失敗しました。'
+      setError(message)
+    } finally {
+      setCancelling(false)
+    }
+  }
+
+  if (!user) return null
+
+  if (loading) {
+    return (
+      <div className="container mx-auto px-4 py-12 max-w-3xl">
+        <div className="h-8 bg-muted rounded w-48 mb-6 animate-pulse" />
+        <div className="space-y-4">
+          {[1, 2, 3].map(i => <div key={i} className="h-32 bg-muted rounded-lg animate-pulse" />)}
+        </div>
+      </div>
+    )
+  }
+
+  if (error && !order) {
+    return (
+      <div className="container mx-auto px-4 py-12 max-w-3xl text-center">
+        <p className="text-destructive mb-4">{error}</p>
+        <Link to="/account/orders"><Button variant="outline">注文履歴へ戻る</Button></Link>
+      </div>
+    )
+  }
+
+  if (!order) return null
+
+  const address = parseAddress(order.shipping_address)
+  const canCancel = ['pending', 'confirmed'].includes(order.status)
+  const validItems = (order.items || []).filter(Boolean)
+
+  return (
+    <div className="container mx-auto px-4 py-10 max-w-3xl">
+      {/* Header */}
+      <div className="flex items-center gap-3 mb-6">
+        <Link to="/account/orders">
+          <Button variant="ghost" size="icon">
+            <ChevronLeft className="h-5 w-5" />
+          </Button>
+        </Link>
+        <div>
+          <h1 className="text-xl font-bold">
+            注文 #{order.id.slice(-8).toUpperCase()}
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            {new Date(order.created_at).toLocaleDateString('ja-JP', {
+              year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit'
+            })}
+          </p>
+        </div>
+        <div className="ml-auto">
+          <Badge variant={STATUS_VARIANT[order.status] || 'outline'} className="text-sm px-3 py-1">
+            {STATUS_LABELS[order.status] || order.status}
+          </Badge>
+        </div>
+      </div>
+
+      {error && (
+        <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-md text-sm text-red-700">
+          {error}
+        </div>
+      )}
+
+      <div className="space-y-6">
+        {/* Order Items */}
+        <Card>
+          <CardContent className="p-5">
+            <h2 className="font-semibold mb-4">注文商品</h2>
+            <div className="space-y-4">
+              {validItems.map(item => (
+                <div key={item.id} className="flex justify-between items-start gap-2">
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium text-sm">{item.product_name}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {formatPrice(item.unit_price)} x {item.quantity}
+                    </p>
+                  </div>
+                  <p className="font-semibold text-sm flex-shrink-0">
+                    {formatPrice(item.total_price)}
+                  </p>
+                </div>
+              ))}
+              <div className="border-t pt-3 flex justify-between font-bold">
+                <span>合計</span>
+                <span className="text-primary">{formatPrice(order.total_amount)}</span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Shipping Address */}
+        <Card>
+          <CardContent className="p-5">
+            <h2 className="font-semibold mb-3">配送先</h2>
+            <div className="text-sm space-y-1 text-muted-foreground">
+              {address.recipient_name && <p className="font-medium text-foreground">{address.recipient_name}</p>}
+              {address.phone && <p>{address.phone}</p>}
+              {address.postal_code && <p>〒{address.postal_code}</p>}
+              <p>
+                {[address.prefecture, address.city, address.address_line1, address.address_line2]
+                  .filter(Boolean)
+                  .join(' ')}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Tracking */}
+        {(tracking || ['shipped', 'delivered'].includes(order.status)) && (
+          <Card>
+            <CardContent className="p-5">
+              <div className="flex items-center gap-2 mb-4">
+                <Truck className="h-5 w-5 text-primary" />
+                <h2 className="font-semibold">配送追跡</h2>
+              </div>
+              {tracking && tracking.tracking_available === false ? (
+                <p className="text-sm text-muted-foreground">{tracking.message}</p>
+              ) : tracking ? (
+                <div className="space-y-4">
+                  <div className="grid grid-cols-2 gap-3 text-sm">
+                    <div>
+                      <p className="text-xs text-muted-foreground">配送会社</p>
+                      <p className="font-medium">{tracking.carrier}</p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground">追跡番号</p>
+                      <p className="font-medium font-mono">{tracking.tracking_number}</p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground">配達予定日</p>
+                      <p className="font-medium">{tracking.estimated_delivery}</p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground">ステータス</p>
+                      <p className="font-medium">
+                        {tracking.status === 'in_transit' ? '配送中' : tracking.status === 'delivered' ? '配達完了' : tracking.status}
+                      </p>
+                    </div>
+                  </div>
+                  {tracking.events && tracking.events.length > 0 && (
+                    <div>
+                      <p className="text-sm font-medium mb-2">配送履歴</p>
+                      <div className="space-y-2">
+                        {tracking.events.map((event, idx) => (
+                          <div key={idx} className="flex gap-3 text-sm">
+                            <div className="w-1 bg-primary/20 rounded-full flex-shrink-0 relative">
+                              <div className="absolute top-1 left-1/2 -translate-x-1/2 w-2 h-2 rounded-full bg-primary" />
+                            </div>
+                            <div className="pb-3">
+                              <p className="font-medium">{event.description}</p>
+                              <p className="text-xs text-muted-foreground">
+                                {event.location} · {new Date(event.timestamp).toLocaleString('ja-JP')}
+                              </p>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ) : null}
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Cancel */}
+        {canCancel && (
+          <Card className="border-destructive/20">
+            <CardContent className="p-5">
+              <h2 className="font-semibold mb-2 text-destructive">注文キャンセル</h2>
+              <p className="text-sm text-muted-foreground mb-4">
+                キャンセルは注文状態が「受付中」または「確認済み」の場合のみ可能です。
+              </p>
+              <Button
+                variant="destructive"
+                onClick={handleCancel}
+                disabled={cancelling}
+              >
+                {cancelling ? 'キャンセル処理中...' : '注文をキャンセルする'}
+              </Button>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/client/src/pages/OrderHistoryPage.tsx b/client/src/pages/OrderHistoryPage.tsx
new file mode 100644
index 0000000..c407000
--- /dev/null
+++ b/client/src/pages/OrderHistoryPage.tsx
@@ -0,0 +1,138 @@
+import { useEffect, useState } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { useAuthStore } from '@/store/auth'
+import { api } from '@/lib/api'
+import { Badge } from '@/components/ui/badge'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Package } from 'lucide-react'
+
+interface Order {
+  id: string
+  status: string
+  total_amount: number
+  created_at: string
+  items: { product_name: string; quantity: number; unit_price: number }[]
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  pending: '受付中',
+  confirmed: '確認済み',
+  processing: '処理中',
+  shipped: '発送済み',
+  delivered: '配達完了',
+  cancelled: 'キャンセル',
+}
+
+const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
+  pending: 'secondary',
+  confirmed: 'secondary',
+  processing: 'default',
+  shipped: 'default',
+  delivered: 'default',
+  cancelled: 'destructive',
+}
+
+function formatPrice(price: number): string {
+  return new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(price)
+}
+
+export function OrderHistoryPage() {
+  const { user } = useAuthStore()
+  const navigate = useNavigate()
+  const [orders, setOrders] = useState<Order[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!user) {
+      navigate('/login')
+      return
+    }
+    api.get<Order[]>('/orders')
+      .then(setOrders)
+      .catch(() => setError('注文履歴の取得に失敗しました。'))
+      .finally(() => setLoading(false))
+  }, [user, navigate])
+
+  if (!user) return null
+
+  if (loading) {
+    return (
+      <div className="container mx-auto px-4 py-12 max-w-3xl">
+        <h1 className="text-2xl font-bold mb-8">注文履歴</h1>
+        <div className="space-y-4">
+          {[1, 2, 3].map(i => (
+            <div key={i} className="h-24 bg-muted rounded-lg animate-pulse" />
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="container mx-auto px-4 py-12 max-w-3xl text-center">
+        <p className="text-destructive">{error}</p>
+      </div>
+    )
+  }
+
+  if (orders.length === 0) {
+    return (
+      <div className="container mx-auto px-4 py-24 max-w-3xl text-center">
+        <Package className="h-16 w-16 mx-auto text-muted-foreground mb-4" />
+        <h1 className="text-2xl font-bold mb-2">注文履歴がありません</h1>
+        <p className="text-muted-foreground mb-6">No orders yet.</p>
+        <Link to="/products">
+          <Button>商品を探す</Button>
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-10 max-w-3xl">
+      <h1 className="text-2xl font-bold mb-8">注文履歴</h1>
+      <div className="space-y-4">
+        {orders.map(order => (
+          <Link key={order.id} to={`/account/orders/${order.id}`}>
+            <Card className="hover:shadow-md transition-shadow cursor-pointer">
+              <CardContent className="p-5">
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-1">
+                      <p className="text-sm text-muted-foreground font-mono">
+                        #{order.id.slice(-8).toUpperCase()}
+                      </p>
+                      <Badge variant={STATUS_VARIANT[order.status] || 'outline'}>
+                        {STATUS_LABELS[order.status] || order.status}
+                      </Badge>
+                    </div>
+                    <p className="text-xs text-muted-foreground mb-2">
+                      {new Date(order.created_at).toLocaleDateString('ja-JP', {
+                        year: 'numeric', month: 'long', day: 'numeric'
+                      })}
+                    </p>
+                    {order.items && order.items.filter(Boolean).length > 0 && (
+                      <p className="text-sm text-muted-foreground truncate">
+                        {order.items
+                          .filter(Boolean)
+                          .map(i => `${i.product_name} x${i.quantity}`)
+                          .join(', ')}
+                      </p>
+                    )}
+                  </div>
+                  <div className="text-right flex-shrink-0">
+                    <p className="font-bold text-primary">{formatPrice(order.total_amount)}</p>
+                    <p className="text-xs text-muted-foreground mt-1">詳細を見る →</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/client/src/pages/ProductDetail.tsx b/client/src/pages/ProductDetail.tsx
index 8c18acd..3907ef6 100644
--- a/client/src/pages/ProductDetail.tsx
+++ b/client/src/pages/ProductDetail.tsx
@@ -2,10 +2,11 @@ import { useEffect, useState } from 'react'
 import { useParams, Link } from 'react-router-dom'
 import { api } from '@/lib/api'
 import { useAuthStore } from '@/store/auth'
+import { useCartStore } from '@/store/cart'
 import { Card, CardContent } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { ARViewer } from '@/components/ARViewer'
+import { ShoppingCart } from 'lucide-react'
 
 interface Review {
   id: string
@@ -46,7 +47,6 @@ interface Product {
   ar_eligible?: boolean
   ar_ineligible_reason?: string
   stock_quantity?: number
-  dimensions?: { height: number; width: number; depth: number }
   reviews?: Review[]
   related_products?: RelatedProduct[]
 }
@@ -109,11 +109,11 @@ function RelatedProductCard({ product }: { product: RelatedProduct }) {
 export function ProductDetail() {
   const { id } = useParams<{ id: string }>()
   const { user } = useAuthStore()
+  const { addItem, items } = useCartStore()
   const [product, setProduct] = useState<Product | null>(null)
   const [loading, setLoading] = useState(true)
   const [notFound, setNotFound] = useState(false)
   const [addedToCart, setAddedToCart] = useState(false)
-  const [showAR, setShowAR] = useState(false)
 
   useEffect(() => {
     if (!id) return
@@ -165,17 +165,17 @@ export function ProductDetail() {
   const showArButton = product.ar_model_url && product.ar_eligible === true
   const showArIneligible = !product.ar_eligible && product.ar_ineligible_reason
 
-  // Determine if item is small (max dimension < 10cm)
-  const isSmallItem = product.dimensions
-    ? Math.max(product.dimensions.height, product.dimensions.width, product.dimensions.depth) < 10
-    : false
-
-  // Determine placement mode from craft category
-  const placementMode = product.craft_category === 'textiles' ? 'wall' : 'floor'
+  const cartItemCount = items.find(i => i.product_id === product.id)?.quantity ?? 0
 
   function handleAddToCart() {
-    if (!user) return
-    // Cart logic placeholder — show confirmation
+    if (!user || !product) return
+    addItem({
+      product_id: product.id,
+      name: product.name,
+      price: product.price,
+      quantity: 1,
+      image: product.images?.[0],
+    })
     setAddedToCart(true)
     setTimeout(() => setAddedToCart(false), 2000)
   }
@@ -287,13 +287,15 @@ export function ProductDetail() {
 
             {/* AR */}
             {showArButton && (
-              <button
-                onClick={() => setShowAR(true)}
+              <a
+                href={product.ar_model_url}
+                target="_blank"
+                rel="noopener noreferrer"
                 className="inline-flex items-center gap-2 px-4 py-2 bg-amber-500 hover:bg-amber-600 text-white font-semibold rounded-md transition-colors w-fit text-sm"
               >
                 <span>AR で確認</span>
                 <span className="text-xs opacity-80">View in AR</span>
-              </button>
+              </a>
             )}
             {showArIneligible && (
               <Badge variant="outline" className="w-fit text-muted-foreground border-muted-foreground/50 text-xs">
@@ -302,20 +304,28 @@ export function ProductDetail() {
             )}
 
             {/* Add to Cart */}
-            <div className="mt-2">
+            <div className="mt-2 space-y-2">
               {user ? (
-                <Button
-                  size="lg"
-                  className="w-full"
-                  onClick={handleAddToCart}
-                  disabled={product.stock_quantity === 0 || addedToCart}
-                >
-                  {addedToCart
-                    ? 'カートに追加しました'
-                    : product.stock_quantity === 0
-                    ? '在庫なし'
-                    : 'カートに追加'}
-                </Button>
+                <>
+                  <Button
+                    size="lg"
+                    className="w-full"
+                    onClick={handleAddToCart}
+                    disabled={product.stock_quantity === 0 || addedToCart}
+                  >
+                    {addedToCart
+                      ? 'カートに追加しました'
+                      : product.stock_quantity === 0
+                      ? '在庫なし'
+                      : 'カートに追加'}
+                  </Button>
+                  {(addedToCart || cartItemCount > 0) && (
+                    <Link to="/cart" className="block text-center text-sm text-primary hover:underline">
+                      <ShoppingCart className="h-4 w-4 inline mr-1" />
+                      カートを見る ({cartItemCount}点)
+                    </Link>
+                  )}
+                </>
               ) : (
                 <div>
                   <Button size="lg" className="w-full" variant="outline" disabled>
@@ -377,17 +387,6 @@ export function ProductDetail() {
           </section>
         )}
       </div>
-
-      {/* AR Viewer Modal */}
-      {showAR && product.ar_model_url && (
-        <ARViewer
-          modelUrl={product.ar_model_url}
-          productName={product.name}
-          onClose={() => setShowAR(false)}
-          placementMode={placementMode}
-          isSmallItem={isSmallItem}
-        />
-      )}
     </div>
   )
 }
diff --git a/client/src/store/cart.ts b/client/src/store/cart.ts
new file mode 100644
index 0000000..727bae0
--- /dev/null
+++ b/client/src/store/cart.ts
@@ -0,0 +1,70 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+export interface CartItem {
+  product_id: string
+  name: string
+  price: number
+  quantity: number
+  image?: string
+}
+
+interface CartState {
+  items: CartItem[]
+  total: number
+  addItem: (item: CartItem) => void
+  removeItem: (product_id: string) => void
+  updateQuantity: (product_id: string, qty: number) => void
+  clearCart: () => void
+}
+
+function calcTotal(items: CartItem[]): number {
+  return items.reduce((sum, item) => sum + item.price * item.quantity, 0)
+}
+
+export const useCartStore = create<CartState>()(
+  persist(
+    (set, get) => ({
+      items: [],
+      total: 0,
+
+      addItem: (item: CartItem) => {
+        const existing = get().items.find(i => i.product_id === item.product_id)
+        let newItems: CartItem[]
+        if (existing) {
+          newItems = get().items.map(i =>
+            i.product_id === item.product_id
+              ? { ...i, quantity: i.quantity + item.quantity }
+              : i
+          )
+        } else {
+          newItems = [...get().items, item]
+        }
+        set({ items: newItems, total: calcTotal(newItems) })
+      },
+
+      removeItem: (product_id: string) => {
+        const newItems = get().items.filter(i => i.product_id !== product_id)
+        set({ items: newItems, total: calcTotal(newItems) })
+      },
+
+      updateQuantity: (product_id: string, qty: number) => {
+        if (qty <= 0) {
+          get().removeItem(product_id)
+          return
+        }
+        const newItems = get().items.map(i =>
+          i.product_id === product_id ? { ...i, quantity: qty } : i
+        )
+        set({ items: newItems, total: calcTotal(newItems) })
+      },
+
+      clearCart: () => {
+        set({ items: [], total: 0 })
+      },
+    }),
+    {
+      name: 'cart',
+    }
+  )
+)
diff --git a/src/routes/orders.js b/src/routes/orders.js
index c1076c4..3d2e6aa 100644
--- a/src/routes/orders.js
+++ b/src/routes/orders.js
@@ -32,6 +32,105 @@ router.get('/', authenticateToken, async (req, res) => {
   }
 });
 
+// Get single order detail
+router.get('/:id', authenticateToken, async (req, res) => {
+  try {
+    const pool = getPool();
+    const { rows } = await pool.query(
+      `SELECT o.*, json_agg(
+        json_build_object(
+          'id', oi.id,
+          'product_id', oi.product_id,
+          'quantity', oi.quantity,
+          'unit_price', oi.unit_price,
+          'total_price', oi.total_price,
+          'product_name', p.name
+        )
+      ) as items
+      FROM orders o
+      LEFT JOIN order_items oi ON oi.order_id = o.id
+      LEFT JOIN products p ON p.id = oi.product_id
+      WHERE o.id = $1 AND o.buyer_id = $2
+      GROUP BY o.id`,
+      [req.params.id, req.user.id]
+    );
+    if (rows.length === 0) {
+      return res.status(404).json({ error: 'Order not found' });
+    }
+    res.json(rows[0]);
+  } catch (err) {
+    res.status(500).json({ error: 'Failed to fetch order' });
+  }
+});
+
+// Cancel order
+router.put('/:id/cancel', authenticateToken, async (req, res) => {
+  try {
+    const pool = getPool();
+    const { rows: orderRows } = await pool.query(
+      'SELECT * FROM orders WHERE id = $1 AND buyer_id = $2',
+      [req.params.id, req.user.id]
+    );
+    if (orderRows.length === 0) {
+      return res.status(404).json({ error: 'Order not found' });
+    }
+    const order = orderRows[0];
+    if (!['pending', 'confirmed'].includes(order.status)) {
+      return res.status(400).json({ error: 'Order cannot be cancelled in its current status' });
+    }
+    const { rows: updated } = await pool.query(
+      'UPDATE orders SET status = $1, updated_at = NOW() WHERE id = $2 RETURNING *',
+      ['cancelled', req.params.id]
+    );
+    res.json(updated[0]);
+  } catch (err) {
+    res.status(500).json({ error: 'Failed to cancel order' });
+  }
+});
+
+// Get tracking info
+router.get('/:id/tracking', authenticateToken, async (req, res) => {
+  try {
+    const pool = getPool();
+    const { rows } = await pool.query(
+      'SELECT * FROM orders WHERE id = $1 AND buyer_id = $2',
+      [req.params.id, req.user.id]
+    );
+    if (rows.length === 0) {
+      return res.status(404).json({ error: 'Order not found' });
+    }
+    const order = rows[0];
+    if (!['shipped', 'delivered'].includes(order.status)) {
+      return res.json({ tracking_available: false, message: 'Order not yet shipped' });
+    }
+    res.json({
+      carrier: 'Yamato',
+      tracking_number: '1234-5678-9012',
+      status: order.status === 'delivered' ? 'delivered' : 'in_transit',
+      estimated_delivery: '2026-02-25',
+      events: [
+        {
+          timestamp: '2026-02-21T09:00:00+09:00',
+          location: '東京都江東区',
+          description: '荷物を集荷しました'
+        },
+        {
+          timestamp: '2026-02-21T15:00:00+09:00',
+          location: '東京ベースセンター',
+          description: '仕分け作業中'
+        },
+        {
+          timestamp: '2026-02-22T08:00:00+09:00',
+          location: '配送センター',
+          description: '配送中'
+        }
+      ]
+    });
+  } catch (err) {
+    res.status(500).json({ error: 'Failed to fetch tracking info' });
+  }
+});
+
 // Create order
 router.post('/', authenticateToken, async (req, res) => {
   try {