diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 5189dd5d..6e44a184 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -18,8 +18,6 @@ jobs:
           fetch-depth: 0
           ref: ${{ github.event.pull_request.head.sha }}
       - uses: pnpm/action-setup@v4
-        with:
-          version: latest
       - uses: actions/setup-node@v4
         with:
           node-version: 22
@@ -37,8 +35,6 @@ jobs:
           fetch-depth: 0
           ref: ${{ github.event.pull_request.head.sha }}
       - uses: pnpm/action-setup@v4
-        with:
-          version: latest
       - uses: actions/setup-node@v4
         with:
           node-version: 22
diff --git a/deploy.sh b/deploy.sh
new file mode 100755
index 00000000..d9b4381d
--- /dev/null
+++ b/deploy.sh
@@ -0,0 +1,56 @@
+#!/bin/bash
+
+# GitHub Pages 배포 스크립트
+# main 브랜치의 빌드 결과를 gh-pages 브랜치에 배포합니다
+
+set -e
+
+echo "🚀 배포를 시작합니다..."
+
+# 현재 브랜치 저장
+CURRENT_BRANCH=$(git branch --show-current)
+
+# main 브랜치로 전환
+echo "📦 main 브랜치로 전환 중..."
+git checkout main
+
+# 의존성 설치 (필요한 경우)
+if [ ! -d "node_modules" ]; then
+  echo "📥 의존성 설치 중..."
+  pnpm install
+fi
+
+# 빌드
+echo "🔨 프로젝트 빌드 중..."
+pnpm run build
+
+# dist 폴더 확인
+if [ ! -d "dist" ]; then
+  echo "❌ dist 폴더를 찾을 수 없습니다. 빌드가 실패했을 수 있습니다."
+  exit 1
+fi
+
+# gh-pages 브랜치로 전환 (없으면 생성)
+echo "🌿 gh-pages 브랜치로 전환 중..."
+git checkout gh-pages 2>/dev/null || git checkout -b gh-pages
+
+# dist 폴더의 내용을 루트로 복사
+echo "📋 빌드 파일 복사 중..."
+cp -r dist/* .
+
+# 변경사항 커밋
+echo "💾 변경사항 커밋 중..."
+git add .
+git commit -m "Deploy: $(date +'%Y-%m-%d %H:%M:%S')" || echo "변경사항이 없습니다."
+
+# gh-pages 브랜치 푸시
+echo "📤 gh-pages 브랜치 푸시 중..."
+git push origin gh-pages
+
+# 원래 브랜치로 돌아가기
+echo "↩️  원래 브랜치($CURRENT_BRANCH)로 돌아가는 중..."
+git checkout $CURRENT_BRANCH
+
+echo "✅ 배포가 완료되었습니다!"
+echo "🌐 배포 링크: https://taejun0.github.io/front_7th_chapter2-1/"
+
diff --git a/package.json b/package.json
index 5ec7f3f3..262e5225 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,8 @@
     "dev": "vite",
     "dev:hash": "vite --open ./index.hash.html",
     "build": "vite build",
+    "deploy": "npm run build && npm run deploy:gh-pages",
+    "deploy:gh-pages": "git subtree push --prefix dist origin gh-pages",
     "lint:fix": "eslint --fix",
     "prettier:write": "prettier --write ./src",
     "preview": "vite preview",
diff --git a/src/app/router/router.js b/src/app/router/router.js
new file mode 100644
index 00000000..0de37eca
--- /dev/null
+++ b/src/app/router/router.js
@@ -0,0 +1,66 @@
+export class Router {
+  constructor() {
+    this.routes = new Map();
+    this.currentPath = window.location.pathname;
+    this.init();
+  }
+
+  init() {
+    this.handleRoute();
+
+    window.addEventListener("popstate", () => {
+      this.currentPath = window.location.pathname;
+      this.handleRoute();
+    });
+
+    document.addEventListener("click", (e) => {
+      const link = e.target.closest("a[data-link]");
+      if (link) {
+        e.preventDefault();
+        const href = link.getAttribute("href");
+        if (href) {
+          this.navigate(href);
+        }
+      }
+    });
+  }
+
+  register(path, handler) {
+    this.routes.set(path, handler);
+  }
+
+  navigate(path) {
+    if (this.currentPath !== path) {
+      this.currentPath = path;
+      window.history.pushState({}, "", path);
+      this.handleRoute();
+    }
+  }
+
+  handleRoute() {
+    const path = window.location.pathname;
+
+    let handler = this.routes.get(path);
+
+    if (!handler) {
+      for (const [routePath, routeHandler] of this.routes.entries()) {
+        if (routePath.includes(":")) {
+          const pattern = routePath.replace(/:[^/]+/g, "([^/]+)");
+          const regex = new RegExp(`^${pattern}$`);
+          if (regex.test(path)) {
+            handler = routeHandler;
+            break;
+          }
+        }
+      }
+    }
+
+    if (!handler) {
+      handler = this.routes.get("/");
+    }
+
+    if (handler) {
+      handler();
+    }
+  }
+}
diff --git a/src/app/services/cartService.js b/src/app/services/cartService.js
new file mode 100644
index 00000000..14262268
--- /dev/null
+++ b/src/app/services/cartService.js
@@ -0,0 +1,93 @@
+const CART_STORAGE_KEY = "shopping_cart";
+
+export function getCart() {
+  try {
+    const cartData = localStorage.getItem(CART_STORAGE_KEY);
+    return cartData ? JSON.parse(cartData) : {};
+  } catch (error) {
+    console.error("장바구니 로드 실패:", error);
+    return {};
+  }
+}
+
+function saveCart(cart) {
+  try {
+    localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(cart));
+  } catch (error) {
+    console.error("장바구니 저장 실패:", error);
+  }
+}
+
+export function addToCart(productId, productData = null, quantity = 1) {
+  const cart = getCart();
+
+  if (cart[productId]) {
+    cart[productId].quantity += quantity;
+  } else {
+    cart[productId] = {
+      productId,
+      quantity,
+      ...(productData && { productData }),
+    };
+  }
+
+  saveCart(cart);
+  updateCartIcon();
+  return cart;
+}
+
+export function removeFromCart(productId) {
+  const cart = getCart();
+  delete cart[productId];
+  saveCart(cart);
+  updateCartIcon();
+  return cart;
+}
+
+export function updateCartQuantity(productId, quantity) {
+  const cart = getCart();
+  if (cart[productId]) {
+    if (quantity <= 0) {
+      delete cart[productId];
+    } else {
+      cart[productId].quantity = quantity;
+    }
+    saveCart(cart);
+    updateCartIcon();
+  }
+  return cart;
+}
+
+export function clearCart() {
+  localStorage.removeItem(CART_STORAGE_KEY);
+  updateCartIcon();
+}
+
+export function getCartItemCount() {
+  const cart = getCart();
+  return Object.values(cart).reduce((total, item) => total + item.quantity, 0);
+}
+
+export function updateCartIcon() {
+  const cartIconBtn = document.getElementById("cart-icon-btn");
+  if (!cartIconBtn) return;
+
+  const count = getCartItemCount();
+  const existingBadge = cartIconBtn.querySelector("span");
+
+  if (count > 0) {
+    if (existingBadge) {
+      existingBadge.textContent = count.toString();
+    } else {
+      const badge = document.createElement("span");
+      badge.className =
+        "absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center";
+      badge.textContent = count.toString();
+      cartIconBtn.appendChild(badge);
+    }
+  } else {
+    if (existingBadge) {
+      existingBadge.remove();
+    }
+  }
+}
diff --git a/src/components/toast.js b/src/components/toast.js
new file mode 100644
index 00000000..947c274d
--- /dev/null
+++ b/src/components/toast.js
@@ -0,0 +1,111 @@
+export const toastTemplates = `
+    <div class="flex flex-col gap-2 items-center justify-center mx-auto" style="width: fit-content;">
+      <div class="bg-green-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center space-x-2 max-w-sm">
+        <div class="flex-shrink-0">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+          </svg>
+        </div>
+        <p class="text-sm font-medium">장바구니에 추가되었습니다</p>
+        <button id="toast-close-btn" class="flex-shrink-0 ml-2 text-white hover:text-gray-200">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+          </svg>
+        </button>
+      </div>
+      
+      <div class="bg-blue-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center space-x-2 max-w-sm">
+        <div class="flex-shrink-0">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+         </svg>
+        </div>
+        <p class="text-sm font-medium">선택된 상품들이 삭제되었습니다</p>
+        <button id="toast-close-btn" class="flex-shrink-0 ml-2 text-white hover:text-gray-200">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+          </svg>
+        </button>
+      </div>
+      
+      <div class="bg-red-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center space-x-2 max-w-sm">
+        <div class="flex-shrink-0">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+          </svg>
+        </div>
+        <p class="text-sm font-medium">오류가 발생했습니다.</p>
+        <button id="toast-close-btn" class="flex-shrink-0 ml-2 text-white hover:text-gray-200">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+  `;
+
+export function showToast(type = "success", message = null) {
+  const existingToast = document.querySelector(".toast-container");
+  if (existingToast) {
+    existingToast.remove();
+  }
+
+  let toastHTML = "";
+  let bgColor = "";
+  let icon = "";
+
+  switch (type) {
+    case "success":
+      bgColor = "bg-green-600";
+      icon = `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+      </svg>`;
+      message = message || "장바구니에 추가되었습니다";
+      break;
+    case "info":
+      bgColor = "bg-blue-600";
+      icon = `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+      </svg>`;
+      message = message || "선택된 상품들이 삭제되었습니다";
+      break;
+    case "error":
+      bgColor = "bg-red-600";
+      icon = `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+      </svg>`;
+      message = message || "오류가 발생했습니다.";
+      break;
+  }
+
+  toastHTML = `
+    <div class="${bgColor} text-white px-4 py-3 rounded-lg shadow-lg flex items-center space-x-2 max-w-sm toast-container" style="position: fixed; bottom: 20px; right: 20px; z-index: 9999;">
+      <div class="flex-shrink-0">
+        ${icon}
+      </div>
+      <p class="text-sm font-medium">${message}</p>
+      <button id="toast-close-btn" class="toast-close-btn flex-shrink-0 ml-2 text-white hover:text-gray-200">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+      </button>
+    </div>
+  `;
+
+  const toastElement = document.createElement("div");
+  toastElement.innerHTML = toastHTML;
+  document.body.appendChild(toastElement.firstElementChild);
+
+  const toast = document.querySelector(".toast-container");
+  const closeBtn = toast.querySelector(".toast-close-btn");
+
+  closeBtn.addEventListener("click", () => {
+    toast.remove();
+  });
+
+  setTimeout(() => {
+    if (toast && toast.parentElement) {
+      toast.remove();
+    }
+  }, 3000);
+}
diff --git a/src/main.js b/src/main.js
index 4b055b89..9bb6bf4b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,17 @@
+import { Router } from "./app/router/router.js";
+import { renderProductList } from "./pages/productList.js";
+import { renderProductDetail } from "./pages/productDetail.js";
+import {
+  productListLoadingLayout,
+  productListLoadedLayout,
+  productListCategoryDepth1Layout,
+  productListCategoryDepth2Layout,
+} from "./pages/productList.js";
+import { cartEmptyLayout, cartNoSelectionLayout, cartWithSelectionLayout } from "./pages/cart.js";
+import { productDetailLoadingLayout, productDetailLoadedLayout } from "./pages/productDetail.js";
+import { toastTemplates } from "./components/toast.js";
+import { notFoundLayout } from "./pages/notFound.js";
+
 const enableMocking = () =>
   import("./mocks/browser.js").then(({ worker }) =>
     worker.start({
@@ -5,1148 +19,79 @@ const enableMocking = () =>
     }),
   );
 
-function main() {
-  const 상품목록_레이아웃_로딩 = `
-    <div class="min-h-screen bg-gray-50">
-      <header class="bg-white shadow-sm sticky top-0 z-40">
-        <div class="max-w-md mx-auto px-4 py-4">
-          <div class="flex items-center justify-between">
-            <h1 class="text-xl font-bold text-gray-900">
-              <a href="/" data-link="">쇼핑몰</a>
-            </h1>
-            <div class="flex items-center space-x-2">
-              <!-- 장바구니 아이콘 -->
-              <button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-      </header>
-      <main class="max-w-md mx-auto px-4 py-4">
-        <!-- 검색 및 필터 -->
-        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
-          <!-- 검색창 -->
-          <div class="mb-4">
-            <div class="relative">
-              <input type="text" id="search-input" placeholder="상품명을 검색해보세요..." value="" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg
-                          focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                </svg>
-              </div>
-            </div>
-          </div>
-          <!-- 필터 옵션 -->
-          <div class="space-y-3">
-            <!-- 카테고리 필터 -->
-            <div class="space-y-2">
-              <div class="flex items-center gap-2">
-                <label class="text-sm text-gray-600">카테고리:</label>
-                <button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button>
-              </div>
-              <!-- 1depth 카테고리 -->
-              <div class="flex flex-wrap gap-2">
-                <div class="text-sm text-gray-500 italic">카테고리 로딩 중...</div>
-              </div>
-              <!-- 2depth 카테고리 -->
-            </div>
-            <!-- 기존 필터들 -->
-            <div class="flex gap-2 items-center justify-between">
-              <!-- 페이지당 상품 수 -->
-              <div class="flex items-center gap-2">
-                <label class="text-sm text-gray-600">개수:</label>
-                <select id="limit-select"
-                        class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
-                  <option value="10">
-                    10개
-                  </option>
-                  <option value="20" selected="">
-                    20개
-                  </option>
-                  <option value="50">
-                    50개
-                  </option>
-                  <option value="100">
-                    100개
-                  </option>
-                </select>
-              </div>
-              <!-- 정렬 -->
-              <div class="flex items-center gap-2">
-                <label class="text-sm text-gray-600">정렬:</label>
-                <select id="sort-select" class="text-sm border border-gray-300 rounded px-2 py-1
-                             focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
-                  <option value="price_asc" selected="">가격 낮은순</option>
-                  <option value="price_desc">가격 높은순</option>
-                  <option value="name_asc">이름순</option>
-                  <option value="name_desc">이름 역순</option>
-                </select>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 상품 목록 -->
-        <div class="mb-6">
-          <div>
-            <!-- 상품 그리드 -->
-            <div class="grid grid-cols-2 gap-4 mb-6" id="products-grid">
-              <!-- 로딩 스켈레톤 -->
-              <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
-                <div class="aspect-square bg-gray-200"></div>
-                <div class="p-3">
-                  <div class="h-4 bg-gray-200 rounded mb-2"></div>
-                  <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
-                  <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
-                  <div class="h-8 bg-gray-200 rounded"></div>
-                </div>
-              </div>
-              <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
-                <div class="aspect-square bg-gray-200"></div>
-                <div class="p-3">
-                  <div class="h-4 bg-gray-200 rounded mb-2"></div>
-                  <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
-                  <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
-                  <div class="h-8 bg-gray-200 rounded"></div>
-                </div>
-              </div>
-              <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
-                <div class="aspect-square bg-gray-200"></div>
-                <div class="p-3">
-                  <div class="h-4 bg-gray-200 rounded mb-2"></div>
-                  <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
-                  <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
-                  <div class="h-8 bg-gray-200 rounded"></div>
-                </div>
-              </div>
-              <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
-                <div class="aspect-square bg-gray-200"></div>
-                <div class="p-3">
-                  <div class="h-4 bg-gray-200 rounded mb-2"></div>
-                  <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
-                  <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
-                  <div class="h-8 bg-gray-200 rounded"></div>
-                </div>
-              </div>
-            </div>
-            
-            <div class="text-center py-4">
-              <div class="inline-flex items-center">
-                <svg class="animate-spin h-5 w-5 text-blue-600 mr-2" fill="none" viewBox="0 0 24 24">
-                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                  <path class="opacity-75" fill="currentColor" 
-                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                </svg>
-                <span class="text-sm text-gray-600">상품을 불러오는 중...</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-      <footer class="bg-white shadow-sm sticky top-0 z-40">
-        <div class="max-w-md mx-auto py-8 text-center text-gray-500">
-          <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
-        </div>
-      </footer>
-    </div>
-  `;
-
-  const 상품목록_레이아웃_로딩완료 = `
-    <div class="bg-gray-50">
-      <header class="bg-white shadow-sm sticky top-0 z-40">
-        <div class="max-w-md mx-auto px-4 py-4">
-          <div class="flex items-center justify-between">
-            <h1 class="text-xl font-bold text-gray-900">
-              <a href="/" data-link="">쇼핑몰</a>
-            </h1>
-            <div class="flex items-center space-x-2">
-              <!-- 장바구니 아이콘 -->
-              <button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
-                </svg>
-                <span
-                  class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">4</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </header>
-      <main class="max-w-md mx-auto px-4 py-4">
-        <!-- 검색 및 필터 -->
-        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
-          <!-- 검색창 -->
-          <div class="mb-4">
-            <div class="relative">
-              <input type="text" id="search-input" placeholder="상품명을 검색해보세요..." value="" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg
-                          focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                </svg>
-              </div>
-            </div>
-          </div>
-          <!-- 필터 옵션 -->
-          <div class="space-y-3">
-            <!-- 카테고리 필터 -->
-            <div class="space-y-2">
-              <div class="flex items-center gap-2">
-                <label class="text-sm text-gray-600">카테고리:</label>
-                <button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button>
-              </div>
-              <!-- 1depth 카테고리 -->
-              <div class="flex flex-wrap gap-2">
-                <button data-category1="생활/건강" class="category1-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors
-                   bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
-                  생활/건강
-                </button>
-                <button data-category1="디지털/가전" class="category1-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors
-                   bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
-                  디지털/가전
-                </button>
-              </div>
-              <!-- 2depth 카테고리 -->
-            </div>
-            <!-- 기존 필터들 -->
-            <div class="flex gap-2 items-center justify-between">
-              <!-- 페이지당 상품 수 -->
-              <div class="flex items-center gap-2">
-                <label class="text-sm text-gray-600">개수:</label>
-                <select id="limit-select"
-                        class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
-                  <option value="10">
-                    10개
-                  </option>
-                  <option value="20" selected="">
-                    20개
-                  </option>
-                  <option value="50">
-                    50개
-                  </option>
-                  <option value="100">
-                    100개
-                  </option>
-                </select>
-              </div>
-              <!-- 정렬 -->
-              <div class="flex items-center gap-2">
-                <label class="text-sm text-gray-600">정렬:</label>
-                <select id="sort-select" class="text-sm border border-gray-300 rounded px-2 py-1
-                             focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
-                  <option value="price_asc" selected="">가격 낮은순</option>
-                  <option value="price_desc">가격 높은순</option>
-                  <option value="name_asc">이름순</option>
-                  <option value="name_desc">이름 역순</option>
-                </select>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 상품 목록 -->
-        <div class="mb-6">
-          <div>
-            <!-- 상품 개수 정보 -->
-            <div class="mb-4 text-sm text-gray-600">
-              총 <span class="font-medium text-gray-900">340개</span>의 상품
-            </div>
-            <!-- 상품 그리드 -->
-            <div class="grid grid-cols-2 gap-4 mb-6" id="products-grid">
-              <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden product-card"
-                   data-product-id="85067212996">
-                <!-- 상품 이미지 -->
-                <div class="aspect-square bg-gray-100 overflow-hidden cursor-pointer product-image">
-                  <img src="https://shopping-phinf.pstatic.net/main_8506721/85067212996.1.jpg"
-                       alt="PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장"
-                       class="w-full h-full object-cover hover:scale-105 transition-transform duration-200"
-                       loading="lazy">
-                </div>
-                <!-- 상품 정보 -->
-                <div class="p-3">
-                  <div class="cursor-pointer product-info mb-3">
-                    <h3 class="text-sm font-medium text-gray-900 line-clamp-2 mb-1">
-                      PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장
-                    </h3>
-                    <p class="text-xs text-gray-500 mb-2"></p>
-                    <p class="text-lg font-bold text-gray-900">
-                      220원
-                    </p>
-                  </div>
-                  <!-- 장바구니 버튼 -->
-                  <button class="w-full bg-blue-600 text-white text-sm py-2 px-3 rounded-md
-                         hover:bg-blue-700 transition-colors add-to-cart-btn" data-product-id="85067212996">
-                    장바구니 담기
-                  </button>
-                </div>
-              </div>
-              <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden product-card"
-                   data-product-id="86940857379">
-                <!-- 상품 이미지 -->
-                <div class="aspect-square bg-gray-100 overflow-hidden cursor-pointer product-image">
-                  <img src="https://shopping-phinf.pstatic.net/main_8694085/86940857379.1.jpg"
-                       alt="샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이"
-                       class="w-full h-full object-cover hover:scale-105 transition-transform duration-200"
-                       loading="lazy">
-                </div>
-                <!-- 상품 정보 -->
-                <div class="p-3">
-                  <div class="cursor-pointer product-info mb-3">
-                    <h3 class="text-sm font-medium text-gray-900 line-clamp-2 mb-1">
-                      샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이
-                    </h3>
-                    <p class="text-xs text-gray-500 mb-2">이지웨이건축자재</p>
-                    <p class="text-lg font-bold text-gray-900">
-                      230원
-                    </p>
-                  </div>
-                  <!-- 장바구니 버튼 -->
-                  <button class="w-full bg-blue-600 text-white text-sm py-2 px-3 rounded-md
-                         hover:bg-blue-700 transition-colors add-to-cart-btn" data-product-id="86940857379">
-                    장바구니 담기
-                  </button>
-                </div>
-              </div>
-            </div>
-            
-            <div class="text-center py-4 text-sm text-gray-500">
-              모든 상품을 확인했습니다
-            </div>
-          </div>
-        </div>
-      </main>
-      <footer class="bg-white shadow-sm sticky top-0 z-40">
-        <div class="max-w-md mx-auto py-8 text-center text-gray-500">
-          <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
-        </div>
-      </footer>
-    </div>
-  `;
-
-  const 상품목록_레이아웃_카테고리_1Depth = `
-    <main class="max-w-md mx-auto px-4 py-4">
-      <!-- 검색 및 필터 -->
-      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
-        <!-- 검색창 -->
-        <div class="mb-4">
-          <div class="relative">
-            <input type="text" id="search-input" placeholder="상품명을 검색해보세요..." value="" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg
-                        focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-              <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-              </svg>
-            </div>
-          </div>
-        </div>
-        
-        <!-- 필터 옵션 -->
-        <div class="space-y-3">
-
-          <!-- 카테고리 필터 -->
-          <div class="space-y-2">
-            <div class="flex items-center gap-2">
-              <label class="text-sm text-gray-600">카테고리:</label>
-              <button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button><span class="text-xs text-gray-500">&gt;</span><button data-breadcrumb="category1" data-category1="생활/건강" class="text-xs hover:text-blue-800 hover:underline">생활/건강</button>
-            </div>
-            <div class="space-y-2">
-              <div class="flex flex-wrap gap-2">
-                <button data-category1="생활/건강" data-category2="생활용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
-                  생활용품
-                </button>
-                <button data-category1="생활/건강" data-category2="주방용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
-                  주방용품
-                </button>
-                <button data-category1="생활/건강" data-category2="문구/사무용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
-                  문구/사무용품
-                </button>
-              </div>
-            </div>
-          </div>
-          
-          <!-- 기존 필터들 -->
-          <div class="flex gap-2 items-center justify-between">
-            <!-- 페이지당 상품 수 -->
-            <div class="flex items-center gap-2">
-              <label class="text-sm text-gray-600">개수:</label>
-              <select id="limit-select"
-                      class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
-                <option value="10">
-                  10개
-                </option>
-                <option value="20" selected="">
-                  20개
-                </option>
-                <option value="50">
-                  50개
-                </option>
-                <option value="100">
-                  100개
-                </option>
-              </select>
-            </div>
-            <!-- 정렬 -->
-            <div class="flex items-center gap-2">
-              <label class="text-sm text-gray-600">정렬:</label>
-              <select id="sort-select" class="text-sm border border-gray-300 rounded px-2 py-1
-                           focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
-                <option value="price_asc" selected="">가격 낮은순</option>
-                <option value="price_desc">가격 높은순</option>
-                <option value="name_asc">이름순</option>
-                <option value="name_desc">이름 역순</option>
-              </select>
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-  `;
-
-  const 상품목록_레이아웃_카테고리_2Depth = `
-    <main class="max-w-md mx-auto px-4 py-4">
-      <!-- 검색 및 필터 -->
-      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
-        <!-- 검색창 -->
-        <div class="mb-4">
-          <div class="relative">
-            <input type="text" id="search-input" placeholder="상품명을 검색해보세요..." value="" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg
-                        focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-              <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-              </svg>
-            </div>
-          </div>
-        </div>
-        
-        <!-- 필터 옵션 -->
-        <div class="space-y-3">
-
-          <!-- 카테고리 필터 -->
-          <div class="space-y-2">
-            <div class="flex items-center gap-2">
-              <label class="text-sm text-gray-600">카테고리:</label>
-              <button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button><span class="text-xs text-gray-500">&gt;</span><button data-breadcrumb="category1" data-category1="생활/건강" class="text-xs hover:text-blue-800 hover:underline">생활/건강</button><span class="text-xs text-gray-500">&gt;</span><span class="text-xs text-gray-600 cursor-default">주방용품</span>
-            </div>
-            <div class="space-y-2">
-              <div class="flex flex-wrap gap-2">
-                <button data-category1="생활/건강" data-category2="생활용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
-                  생활용품
-                </button>
-                <button data-category1="생활/건강" data-category2="주방용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-blue-100 border-blue-300 text-blue-800">
-                  주방용품
-                </button>
-                <button data-category1="생활/건강" data-category2="문구/사무용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
-                  문구/사무용품
-                </button>
-              </div>
-            </div>
-          </div>
-          
-          <!-- 기존 필터들 -->
-          <div class="flex gap-2 items-center justify-between">
-            <!-- 페이지당 상품 수 -->
-            <div class="flex items-center gap-2">
-              <label class="text-sm text-gray-600">개수:</label>
-              <select id="limit-select"
-                      class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
-                <option value="10">
-                  10개
-                </option>
-                <option value="20" selected="">
-                  20개
-                </option>
-                <option value="50">
-                  50개
-                </option>
-                <option value="100">
-                  100개
-                </option>
-              </select>
-            </div>
-            <!-- 정렬 -->
-            <div class="flex items-center gap-2">
-              <label class="text-sm text-gray-600">정렬:</label>
-              <select id="sort-select" class="text-sm border border-gray-300 rounded px-2 py-1
-                           focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
-                <option value="price_asc" selected="">가격 낮은순</option>
-                <option value="price_desc">가격 높은순</option>
-                <option value="name_asc">이름순</option>
-                <option value="name_desc">이름 역순</option>
-              </select>
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-  `;
-
-  const 토스트 = `
-    <div class="flex flex-col gap-2 items-center justify-center mx-auto" style="width: fit-content;">
-      <div class="bg-green-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center space-x-2 max-w-sm">
-        <div class="flex-shrink-0">
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-          </svg>
-        </div>
-        <p class="text-sm font-medium">장바구니에 추가되었습니다</p>
-        <button id="toast-close-btn" class="flex-shrink-0 ml-2 text-white hover:text-gray-200">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-          </svg>
-        </button>
-      </div>
-      
-      <div class="bg-blue-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center space-x-2 max-w-sm">
-        <div class="flex-shrink-0">
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-         </svg>
-        </div>
-        <p class="text-sm font-medium">선택된 상품들이 삭제되었습니다</p>
-        <button id="toast-close-btn" class="flex-shrink-0 ml-2 text-white hover:text-gray-200">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-          </svg>
-        </button>
-      </div>
-      
-      <div class="bg-red-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center space-x-2 max-w-sm">
-        <div class="flex-shrink-0">
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-          </svg>
-        </div>
-        <p class="text-sm font-medium">오류가 발생했습니다.</p>
-        <button id="toast-close-btn" class="flex-shrink-0 ml-2 text-white hover:text-gray-200">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-          </svg>
-        </button>
-      </div>
-    </div>
-  `;
+function getQueryParams() {
+  const params = new URLSearchParams(window.location.search);
+  return {
+    limit: parseInt(params.get("limit")) || 20,
+    search: params.get("search") || "",
+    category1: params.get("category1") || "",
+    category2: params.get("category2") || "",
+    sort: params.get("sort") || "price_asc",
+  };
+}
 
-  const 장바구니_비어있음 = `
-    <div class="flex min-h-full items-end justify-center p-0 sm:items-center sm:p-4">
-      <div class="relative bg-white rounded-t-lg sm:rounded-lg shadow-xl w-full max-w-md sm:max-w-lg max-h-[90vh] overflow-hidden">
-        <!-- 헤더 -->
-        <div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
-          <h2 class="text-lg font-bold text-gray-900 flex items-center">
-            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
-            </svg>
-            장바구니 
-          </h2>
-          
-          <button id="cart-modal-close-btn" class="text-gray-400 hover:text-gray-600 p-1">
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-            </svg>
-          </button>
-        </div>
-        
-        <!-- 컨텐츠 -->
-        <div class="flex flex-col max-h-[calc(90vh-120px)]">
-          <!-- 빈 장바구니 -->
-          <div class="flex-1 flex items-center justify-center p-8">
-            <div class="text-center">
-              <div class="text-gray-400 mb-4">
-                <svg class="mx-auto h-12 w-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
-                </svg>
-              </div>
-              <h3 class="text-lg font-medium text-gray-900 mb-2">장바구니가 비어있습니다</h3>
-              <p class="text-gray-600">원하는 상품을 담아보세요!</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `;
+function main() {
+  const router = new Router();
 
-  const 장바구니_선택없음 = `
-    <div class="flex min-h-full items-end justify-center p-0 sm:items-center sm:p-4">
-      <div class="relative bg-white rounded-t-lg sm:rounded-lg shadow-xl w-full max-w-md sm:max-w-lg max-h-[90vh] overflow-hidden">
-        <!-- 헤더 -->
-        <div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
-          <h2 class="text-lg font-bold text-gray-900 flex items-center">
-            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
-            </svg>
-            장바구니
-            <span class="text-sm font-normal text-gray-600 ml-1">(2)</span>
-          </h2>
-          <button id="cart-modal-close-btn" class="text-gray-400 hover:text-gray-600 p-1">
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-            </svg>
-          </button>
-        </div>
-        <!-- 컨텐츠 -->
-        <div class="flex flex-col max-h-[calc(90vh-120px)]">
-          <!-- 전체 선택 섹션 -->
-          <div class="p-4 border-b border-gray-200 bg-gray-50">
-            <label class="flex items-center text-sm text-gray-700">
-              <input type="checkbox" id="cart-modal-select-all-checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2">
-              전체선택 (2개)
-            </label>
-          </div>
-          <!-- 아이템 목록 -->
-          <div class="flex-1 overflow-y-auto">
-            <div class="p-4 space-y-4">
-              <div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="85067212996">
-                <!-- 선택 체크박스 -->
-                <label class="flex items-center mr-3">
-                  <input type="checkbox" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded 
-                focus:ring-blue-500" data-product-id="85067212996">
-                </label>
-                <!-- 상품 이미지 -->
-                <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
-                  <img src="https://shopping-phinf.pstatic.net/main_8506721/85067212996.1.jpg" alt="PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="85067212996">
-                </div>
-                <!-- 상품 정보 -->
-                <div class="flex-1 min-w-0">
-                  <h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="85067212996">
-                    PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장
-                  </h4>
-                  <p class="text-sm text-gray-600 mt-1">
-                    220원
-                  </p>
-                  <!-- 수량 조절 -->
-                  <div class="flex items-center mt-2">
-                    <button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center 
-                 border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="85067212996">
-                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
-                      </svg>
-                    </button>
-                    <input type="number" value="2" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b 
-                border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" disabled="" data-product-id="85067212996">
-                    <button class="quantity-increase-btn w-7 h-7 flex items-center justify-center 
-                 border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="85067212996">
-                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <!-- 가격 및 삭제 -->
-                <div class="text-right ml-3">
-                  <p class="text-sm font-medium text-gray-900">
-                    440원
-                  </p>
-                  <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="85067212996">
-                    삭제
-                  </button>
-                </div>
-              </div>
-              <div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="86940857379">
-                <!-- 선택 체크박스 -->
-                <label class="flex items-center mr-3">
-                  <input type="checkbox" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded 
-                focus:ring-blue-500" data-product-id="86940857379">
-                </label>
-                <!-- 상품 이미지 -->
-                <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
-                  <img src="https://shopping-phinf.pstatic.net/main_8694085/86940857379.1.jpg" alt="샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="86940857379">
-                </div>
-                <!-- 상품 정보 -->
-                <div class="flex-1 min-w-0">
-                  <h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="86940857379">
-                    샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이
-                  </h4>
-                  <p class="text-sm text-gray-600 mt-1">
-                    230원
-                  </p>
-                  <!-- 수량 조절 -->
-                  <div class="flex items-center mt-2">
-                    <button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center 
-                 border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="86940857379">
-                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
-                      </svg>
-                    </button>
-                    <input type="number" value="1" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b 
-                border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" disabled="" data-product-id="86940857379">
-                    <button class="quantity-increase-btn w-7 h-7 flex items-center justify-center 
-                 border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="86940857379">
-                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <!-- 가격 및 삭제 -->
-                <div class="text-right ml-3">
-                  <p class="text-sm font-medium text-gray-900">
-                    230원
-                  </p>
-                  <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="86940857379">
-                    삭제
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 하단 액션 -->
-        <div class="sticky bottom-0 bg-white border-t border-gray-200 p-4">
-          <!-- 선택된 아이템 정보 -->
-          <!-- 총 금액 -->
-          <div class="flex justify-between items-center mb-4">
-            <span class="text-lg font-bold text-gray-900">총 금액</span>
-            <span class="text-xl font-bold text-blue-600">670원</span>
-          </div>
-          <!-- 액션 버튼들 -->
-          <div class="space-y-2">
-            <div class="flex gap-2">
-              <button id="cart-modal-clear-cart-btn" class="flex-1 bg-gray-600 text-white py-2 px-4 rounded-md 
-                       hover:bg-gray-700 transition-colors text-sm">
-                전체 비우기
-              </button>
-              <button id="cart-modal-checkout-btn" class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md 
-                       hover:bg-blue-700 transition-colors text-sm">
-                구매하기
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `;
+  window.__router__ = router;
 
-  const 장바구니_선택있음 = `
-    <div class="flex min-h-full items-end justify-center p-0 sm:items-center sm:p-4">
-      <div class="relative bg-white rounded-t-lg sm:rounded-lg shadow-xl w-full max-w-md sm:max-w-lg max-h-[90vh] overflow-hidden">
-        <!-- 헤더 -->
-        <div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
-          <h2 class="text-lg font-bold text-gray-900 flex items-center">
-            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
-            </svg>
-            장바구니
-            <span class="text-sm font-normal text-gray-600 ml-1">(2)</span>
-          </h2>
-          <button id="cart-modal-close-btn" class="text-gray-400 hover:text-gray-600 p-1">
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-            </svg>
-          </button>
-        </div>
-        <!-- 컨텐츠 -->
-        <div class="flex flex-col max-h-[calc(90vh-120px)]">
-          <!-- 전체 선택 섹션 -->
-          <div class="p-4 border-b border-gray-200 bg-gray-50">
-            <label class="flex items-center text-sm text-gray-700">
-              <input type="checkbox" id="cart-modal-select-all-checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2">
-              전체선택 (2개)
-            </label>
-          </div>
-          <!-- 아이템 목록 -->
-          <div class="flex-1 overflow-y-auto">
-            <div class="p-4 space-y-4">
-              <div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="85067212996">
-                <!-- 선택 체크박스 -->
-                <label class="flex items-center mr-3">
-                  <input type="checkbox" checked="" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded 
-                focus:ring-blue-500" data-product-id="85067212996">
-                </label>
-                <!-- 상품 이미지 -->
-                <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
-                  <img src="https://shopping-phinf.pstatic.net/main_8506721/85067212996.1.jpg" alt="PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="85067212996">
-                </div>
-                <!-- 상품 정보 -->
-                <div class="flex-1 min-w-0">
-                  <h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="85067212996">
-                    PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장
-                  </h4>
-                  <p class="text-sm text-gray-600 mt-1">
-                    220원
-                  </p>
-                  <!-- 수량 조절 -->
-                  <div class="flex items-center mt-2">
-                    <button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center 
-                 border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="85067212996">
-                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
-                      </svg>
-                    </button>
-                    <input type="number" value="2" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b 
-                border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" disabled="" data-product-id="85067212996">
-                    <button class="quantity-increase-btn w-7 h-7 flex items-center justify-center 
-                 border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="85067212996">
-                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <!-- 가격 및 삭제 -->
-                <div class="text-right ml-3">
-                  <p class="text-sm font-medium text-gray-900">
-                    440원
-                  </p>
-                  <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="85067212996">
-                    삭제
-                  </button>
-                </div>
-              </div>
-              <div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="86940857379">
-                <!-- 선택 체크박스 -->
-                <label class="flex items-center mr-3">
-                  <input type="checkbox" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded 
-                focus:ring-blue-500" data-product-id="86940857379">
-                </label>
-                <!-- 상품 이미지 -->
-                <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
-                  <img src="https://shopping-phinf.pstatic.net/main_8694085/86940857379.1.jpg" alt="샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="86940857379">
-                </div>
-                <!-- 상품 정보 -->
-                <div class="flex-1 min-w-0">
-                  <h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="86940857379">
-                    샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이
-                  </h4>
-                  <p class="text-sm text-gray-600 mt-1">
-                    230원
-                  </p>
-                  <!-- 수량 조절 -->
-                  <div class="flex items-center mt-2">
-                    <button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center 
-                 border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="86940857379">
-                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
-                      </svg>
-                    </button>
-                    <input type="number" value="1" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b 
-                border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" disabled="" data-product-id="86940857379">
-                    <button class="quantity-increase-btn w-7 h-7 flex items-center justify-center 
-                 border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="86940857379">
-                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-                <!-- 가격 및 삭제 -->
-                <div class="text-right ml-3">
-                  <p class="text-sm font-medium text-gray-900">
-                    230원
-                  </p>
-                  <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="86940857379">
-                    삭제
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 하단 액션 -->
-        <div class="sticky bottom-0 bg-white border-t border-gray-200 p-4">
-          <!-- 선택된 아이템 정보 -->
-          <div class="flex justify-between items-center mb-3 text-sm">
-            <span class="text-gray-600">선택한 상품 (1개)</span>
-            <span class="font-medium">440원</span>
-          </div>
-          <!-- 총 금액 -->
-          <div class="flex justify-between items-center mb-4">
-            <span class="text-lg font-bold text-gray-900">총 금액</span>
-            <span class="text-xl font-bold text-blue-600">670원</span>
-          </div>
-          <!-- 액션 버튼들 -->
-          <div class="space-y-2">
-            <button id="cart-modal-remove-selected-btn" class="w-full bg-red-600 text-white py-2 px-4 rounded-md 
-                       hover:bg-red-700 transition-colors text-sm">
-              선택한 상품 삭제 (1개)
-            </button>
-            <div class="flex gap-2">
-              <button id="cart-modal-clear-cart-btn" class="flex-1 bg-gray-600 text-white py-2 px-4 rounded-md 
-                       hover:bg-gray-700 transition-colors text-sm">
-                전체 비우기
-              </button>
-              <button id="cart-modal-checkout-btn" class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md 
-                       hover:bg-blue-700 transition-colors text-sm">
-                구매하기
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `;
+  router.register("/", () => {
+    const params = getQueryParams();
+    renderProductList(params);
+  });
 
-  const 상세페이지_로딩 = `
-    <div class="min-h-screen bg-gray-50">
-      <header class="bg-white shadow-sm sticky top-0 z-40">
-        <div class="max-w-md mx-auto px-4 py-4">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center space-x-3">
-              <button onclick="window.history.back()" class="p-2 text-gray-700 hover:text-gray-900 transition-colors">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-                </svg>
-              </button>
-              <h1 class="text-lg font-bold text-gray-900">상품 상세</h1>
-            </div>
-            <div class="flex items-center space-x-2">
-              <!-- 장바구니 아이콘 -->
-              <button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-      </header>
-      <main class="max-w-md mx-auto px-4 py-4">
-        <div class="py-20 bg-gray-50 flex items-center justify-center">
-          <div class="text-center">
-            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
-            <p class="text-gray-600">상품 정보를 불러오는 중...</p>
-          </div>
-        </div>
-      </main>
-      <footer class="bg-white shadow-sm sticky top-0 z-40">
-        <div class="max-w-md mx-auto py-8 text-center text-gray-500">
-          <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
-        </div>
-      </footer>
-    </div>
-  `;
+  router.register("/product/:id", () => {
+    const path = window.location.pathname;
+    const productId = path.split("/product/")[1];
+    if (productId) {
+      renderProductDetail(productId);
+    }
+  });
 
-  const 상세페이지_로딩완료 = `
-    <div class="min-h-screen bg-gray-50">
-      <header class="bg-white shadow-sm sticky top-0 z-40">
-        <div class="max-w-md mx-auto px-4 py-4">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center space-x-3">
-              <button onclick="window.history.back()" class="p-2 text-gray-700 hover:text-gray-900 transition-colors">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-                </svg>
-              </button>
-              <h1 class="text-lg font-bold text-gray-900">상품 상세</h1>
-            </div>
-            <div class="flex items-center space-x-2">
-              <!-- 장바구니 아이콘 -->
-              <button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
-                </svg>
-                <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
-                  1
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </header>
-      <main class="max-w-md mx-auto px-4 py-4">
-        <!-- 브레드크럼 -->
-        <nav class="mb-4">
-          <div class="flex items-center space-x-2 text-sm text-gray-600">
-            <a href="/" data-link="" class="hover:text-blue-600 transition-colors">홈</a>
-            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-            </svg>
-            <button class="breadcrumb-link" data-category1="생활/건강">
-              생활/건강
-            </button>
-            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-            </svg>
-            <button class="breadcrumb-link" data-category2="생활용품">
-              생활용품
-            </button>
-          </div>
-        </nav>
-        <!-- 상품 상세 정보 -->
-        <div class="bg-white rounded-lg shadow-sm mb-6">
-          <!-- 상품 이미지 -->
-          <div class="p-4">
-            <div class="aspect-square bg-gray-100 rounded-lg overflow-hidden mb-4">
-              <img src="https://shopping-phinf.pstatic.net/main_8506721/85067212996.1.jpg" alt="PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장" class="w-full h-full object-cover product-detail-image">
-            </div>
-            <!-- 상품 정보 -->
-            <div>
-              <p class="text-sm text-gray-600 mb-1"></p>
-              <h1 class="text-xl font-bold text-gray-900 mb-3">PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장</h1>
-              <!-- 평점 및 리뷰 -->
-              <div class="flex items-center mb-3">
-                <div class="flex items-center">
-                  <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
-                  </svg>
-                  <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
-                  </svg>
-                  <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
-                  </svg>
-                  <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
-                  </svg>
-                  <svg class="w-4 h-4 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
-                  </svg>
-                </div>
-                <span class="ml-2 text-sm text-gray-600">4.0 (749개 리뷰)</span>
-              </div>
-              <!-- 가격 -->
-              <div class="mb-4">
-                <span class="text-2xl font-bold text-blue-600">220원</span>
-              </div>
-              <!-- 재고 -->
-              <div class="text-sm text-gray-600 mb-4">
-                재고 107개
-              </div>
-              <!-- 설명 -->
-              <div class="text-sm text-gray-700 leading-relaxed mb-6">
-                PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장에 대한 상세 설명입니다. 브랜드의 우수한 품질을 자랑하는 상품으로, 고객 만족도가 높은 제품입니다.
-              </div>
-            </div>
-          </div>
-          <!-- 수량 선택 및 액션 -->
-          <div class="border-t border-gray-200 p-4">
-            <div class="flex items-center justify-between mb-4">
-              <span class="text-sm font-medium text-gray-900">수량</span>
-              <div class="flex items-center">
-                <button id="quantity-decrease" class="w-8 h-8 flex items-center justify-center border border-gray-300 
-                   rounded-l-md bg-gray-50 hover:bg-gray-100">
-                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
-                  </svg>
-                </button>
-                <input type="number" id="quantity-input" value="1" min="1" max="107" class="w-16 h-8 text-center text-sm border-t border-b border-gray-300 
-                  focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
-                <button id="quantity-increase" class="w-8 h-8 flex items-center justify-center border border-gray-300 
-                   rounded-r-md bg-gray-50 hover:bg-gray-100">
-                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <!-- 액션 버튼 -->
-            <button id="add-to-cart-btn" data-product-id="85067212996" class="w-full bg-blue-600 text-white py-3 px-4 rounded-md 
-                 hover:bg-blue-700 transition-colors font-medium">
-              장바구니 담기
-            </button>
-          </div>
-        </div>
-        <!-- 상품 목록으로 이동 -->
-        <div class="mb-6">
-          <button class="block w-full text-center bg-gray-100 text-gray-700 py-3 px-4 rounded-md 
-            hover:bg-gray-200 transition-colors go-to-product-list">
-            상품 목록으로 돌아가기
-          </button>
-        </div>
-        <!-- 관련 상품 -->
-        <div class="bg-white rounded-lg shadow-sm">
-          <div class="p-4 border-b border-gray-200">
-            <h2 class="text-lg font-bold text-gray-900">관련 상품</h2>
-            <p class="text-sm text-gray-600">같은 카테고리의 다른 상품들</p>
-          </div>
-          <div class="p-4">
-            <div class="grid grid-cols-2 gap-3 responsive-grid">
-              <div class="bg-gray-50 rounded-lg p-3 related-product-card cursor-pointer" data-product-id="86940857379">
-                <div class="aspect-square bg-white rounded-md overflow-hidden mb-2">
-                  <img src="https://shopping-phinf.pstatic.net/main_8694085/86940857379.1.jpg" alt="샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이" class="w-full h-full object-cover" loading="lazy">
-                </div>
-                <h3 class="text-sm font-medium text-gray-900 mb-1 line-clamp-2">샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이</h3>
-                <p class="text-sm font-bold text-blue-600">230원</p>
-              </div>
-              <div class="bg-gray-50 rounded-lg p-3 related-product-card cursor-pointer" data-product-id="82094468339">
-                <div class="aspect-square bg-white rounded-md overflow-hidden mb-2">
-                  <img src="https://shopping-phinf.pstatic.net/main_8209446/82094468339.4.jpg" alt="실리카겔 50g 습기제거제 제품 /산업 신발 의류 방습제" class="w-full h-full object-cover" loading="lazy">
-                </div>
-                <h3 class="text-sm font-medium text-gray-900 mb-1 line-clamp-2">실리카겔 50g 습기제거제 제품 /산업 신발 의류 방습제</h3>
-                <p class="text-sm font-bold text-blue-600">280원</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-      <footer class="bg-white shadow-sm sticky top-0 z-40">
-        <div class="max-w-md mx-auto py-8 text-center text-gray-500">
-          <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
-        </div>
-      </footer>
-    </div>
-  `;
+  router.register("/404", () => {
+    const root = document.getElementById("root") || document.body;
+    root.innerHTML = notFoundLayout;
+  });
 
-  const _404_ = `
-    <main class="max-w-md mx-auto px-4 py-4">
-      <div class="text-center my-4 py-20 shadow-md p-6 bg-white rounded-lg">
-      <svg viewBox="0 0 320 180" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-          <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" style="stop-color:#4285f4;stop-opacity:1" />
-            <stop offset="100%" style="stop-color:#1a73e8;stop-opacity:1" />
-          </linearGradient>
-          <filter id="softShadow" x="-50%" y="-50%" width="200%" height="200%">
-            <feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000000" flood-opacity="0.1"/>
-          </filter>
-        </defs>
-        
-        <!-- 404 Numbers -->
-        <text x="160" y="85" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="48" font-weight="600" fill="url(#blueGradient)" text-anchor="middle">404</text>
-        
-        <!-- Icon decoration -->
-        <circle cx="80" cy="60" r="3" fill="#e8f0fe" opacity="0.8"/>
-        <circle cx="240" cy="60" r="3" fill="#e8f0fe" opacity="0.8"/>
-        <circle cx="90" cy="45" r="2" fill="#4285f4" opacity="0.5"/>
-        <circle cx="230" cy="45" r="2" fill="#4285f4" opacity="0.5"/>
-        
-        <!-- Message -->
-        <text x="160" y="110" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="400" fill="#5f6368" text-anchor="middle">페이지를 찾을 수 없습니다</text>
-        
-        <!-- Subtle bottom accent -->
-        <rect x="130" y="130" width="60" height="2" rx="1" fill="url(#blueGradient)" opacity="0.3"/>
-      </svg>
-      
-      <a href="/" data-link class="inline-block px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">홈으로</a>
-    </div>
-    </main>
-  `;
+  router.handleRoute();
+}
 
-  document.body.innerHTML = `
-    ${상품목록_레이아웃_로딩}
+function renderShowcase() {
+  const showcaseMarkup = `
+    ${productListLoadingLayout}
     <br />
-    ${상품목록_레이아웃_로딩완료}
+    ${productListLoadedLayout}
     <br />
-    ${상품목록_레이아웃_카테고리_1Depth}
+    ${productListCategoryDepth1Layout}
     <br />
-    ${상품목록_레이아웃_카테고리_2Depth}
+    ${productListCategoryDepth2Layout}
     <br />
-    ${토스트}
+    ${toastTemplates}
     <br />
-    ${장바구니_비어있음}
+    ${cartEmptyLayout}
     <br />
-    ${장바구니_선택없음}
+    ${cartNoSelectionLayout}
     <br />
-    ${장바구니_선택있음}
+    ${cartWithSelectionLayout}
     <br />
-    ${상세페이지_로딩}
+    ${productDetailLoadingLayout}
     <br />
-    ${상세페이지_로딩완료}
+    ${productDetailLoadedLayout}
     <br />
-    ${_404_}
+    ${notFoundLayout}
   `;
+  const root = document.getElementById("root") || document.body;
+  root.innerHTML = showcaseMarkup;
 }
 
-// 애플리케이션 시작
 if (import.meta.env.MODE !== "test") {
-  enableMocking().then(main);
+  enableMocking().then(() => {
+    if (new URLSearchParams(window.location.search).get("showcase") === "true") {
+      renderShowcase();
+    } else {
+      main();
+    }
+  });
 } else {
   main();
 }
diff --git a/src/pages/cart.js b/src/pages/cart.js
new file mode 100644
index 00000000..b8535a83
--- /dev/null
+++ b/src/pages/cart.js
@@ -0,0 +1,829 @@
+import { getCart, removeFromCart, updateCartQuantity, clearCart } from "../app/services/cartService.js";
+import { updateCartIcon } from "../app/services/cartService.js";
+import { showToast } from "../components/toast.js";
+
+function createCartItemCard(productId, item) {
+  const { quantity, productData } = item;
+  const price = parseInt(productData?.lprice || 0);
+  const totalPrice = price * quantity;
+
+  return `
+    <div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="${productId}">
+      <!-- 선택 체크박스 -->
+      <label class="flex items-center mr-3">
+        <input type="checkbox" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded 
+          focus:ring-blue-500" data-product-id="${productId}">
+      </label>
+      <!-- 상품 이미지 -->
+      <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
+        <img src="${productData?.image || ""}" alt="${productData?.title || ""}" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="${productId}">
+      </div>
+      <!-- 상품 정보 -->
+      <div class="flex-1 min-w-0">
+        <h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="${productId}">
+          ${productData?.title || ""}
+        </h4>
+        <p class="text-sm text-gray-600 mt-1">
+          ${price.toLocaleString()}원
+        </p>
+        <!-- 수량 조절 -->
+        <div class="flex items-center mt-2">
+          <button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center 
+            border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="${productId}">
+            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
+            </svg>
+          </button>
+          <input type="number" value="${quantity}" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b 
+            border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" data-product-id="${productId}" readonly>
+          <button class="quantity-increase-btn w-7 h-7 flex items-center justify-center 
+            border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="${productId}">
+            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+            </svg>
+          </button>
+        </div>
+      </div>
+      <!-- 가격 및 삭제 -->
+      <div class="text-right ml-3">
+        <p class="text-sm font-medium text-gray-900">
+          ${totalPrice.toLocaleString()}원
+        </p>
+        <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="${productId}">
+          삭제
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+export function renderCartModal() {
+  const cart = getCart();
+  const cartItems = Object.entries(cart);
+  const totalCount = cartItems.reduce((sum, [, item]) => sum + item.quantity, 0);
+
+  const root = document.getElementById("root") || document.body;
+
+  const existingModal = root.querySelector(".cart-modal");
+  if (existingModal) {
+    existingModal.remove();
+  }
+
+  const modalOverlay = document.createElement("div");
+  modalOverlay.className = "fixed inset-0 z-50 overflow-y-auto cart-modal";
+  root.appendChild(modalOverlay);
+  let modalHTML = `
+    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity cart-modal-overlay"></div>
+    <div class="flex min-h-full items-end justify-center p-0 sm:items-center sm:p-4">
+      <div class="relative bg-white rounded-t-lg sm:rounded-lg shadow-xl w-full max-w-md sm:max-w-lg max-h-[90vh] overflow-hidden">
+        <!-- 헤더 -->
+        <div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
+          <h2 class="text-lg font-bold text-gray-900 flex items-center">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+            </svg>
+            장바구니
+            ${totalCount > 0 ? `<span class="text-sm font-normal text-gray-600 ml-1">(${totalCount})</span>` : ""}
+          </h2>
+          <button id="cart-modal-close-btn" class="text-gray-400 hover:text-gray-600 p-1">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+        <!-- 컨텐츠 -->
+        <div class="flex flex-col max-h-[calc(90vh-120px)]">
+  `;
+
+  if (cartItems.length === 0) {
+    modalHTML += `
+          <div class="flex-1 flex items-center justify-center p-8">
+            <div class="text-center">
+              <div class="text-gray-400 mb-4">
+                <svg class="mx-auto h-12 w-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+                </svg>
+              </div>
+              <h3 class="text-lg font-medium text-gray-900 mb-2">장바구니가 비어있습니다</h3>
+              <p class="text-gray-600">원하는 상품을 담아보세요!</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    `;
+  } else {
+    const totalPrice = cartItems.reduce((sum, [, item]) => {
+      const price = parseInt(item.productData?.lprice || 0);
+      return sum + price * item.quantity;
+    }, 0);
+
+    modalHTML += `
+          <!-- 전체 선택 섹션 -->
+          <div class="p-4 border-b border-gray-200 bg-gray-50">
+            <label class="flex items-center text-sm text-gray-700">
+              <input type="checkbox" id="cart-modal-select-all-checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2">
+              전체선택 (${totalCount}개)
+            </label>
+          </div>
+          <!-- 아이템 목록 -->
+          <div class="flex-1 overflow-y-auto">
+            <div class="p-4 space-y-4">
+              ${cartItems.map(([productId, item]) => createCartItemCard(productId, item)).join("")}
+            </div>
+          </div>
+        </div>
+        <!-- 하단 액션 -->
+        <div class="sticky bottom-0 bg-white border-t border-gray-200 p-4">
+          <!-- 선택된 아이템 정보 (선택된 항목이 있을 때만 표시) -->
+          <div id="selected-items-info" class="flex justify-between items-center mb-3 text-sm" style="display: none;">
+            <span class="text-gray-600">선택한 상품 (<span id="selected-count">0</span>개)</span>
+            <span class="font-medium" id="selected-price">0원</span>
+          </div>
+          <!-- 총 금액 -->
+          <div class="flex justify-between items-center mb-4">
+            <span class="text-lg font-bold text-gray-900">총 금액</span>
+            <span class="text-xl font-bold text-blue-600" id="cart-total-price">${totalPrice.toLocaleString()}원</span>
+          </div>
+          <!-- 액션 버튼들 -->
+          <div class="space-y-2">
+            <button id="cart-modal-remove-selected-btn" class="w-full bg-red-600 text-white py-2 px-4 rounded-md 
+              hover:bg-red-700 transition-colors text-sm" style="display: none;">
+              선택한 상품 삭제 (<span id="remove-selected-count">0</span>개)
+            </button>
+            <div class="flex gap-2">
+              <button id="cart-modal-clear-cart-btn" class="flex-1 bg-gray-600 text-white py-2 px-4 rounded-md 
+                hover:bg-gray-700 transition-colors text-sm">
+                전체 비우기
+              </button>
+              <button id="cart-modal-checkout-btn" class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md 
+                hover:bg-blue-700 transition-colors text-sm">
+                구매하기
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    `;
+  }
+
+  modalOverlay.innerHTML = modalHTML;
+
+  setupCartModalEvents();
+}
+
+function updateCartItemInModal(productId) {
+  const modal = document.querySelector(".cart-modal");
+  if (!modal) return;
+
+  const cart = getCart();
+  const item = cart[productId];
+
+  if (!item) {
+    const cartItem = modal.querySelector(`.cart-item[data-product-id="${productId}"]`);
+    if (cartItem) {
+      cartItem.remove();
+    }
+    updateCartTotalPrice();
+    updateSelectedInfo();
+    return;
+  }
+
+  const cartItem = modal.querySelector(`.cart-item[data-product-id="${productId}"]`);
+  if (cartItem) {
+    const { quantity, productData } = item;
+    const price = parseInt(productData?.lprice || 0);
+    const totalPrice = price * quantity;
+
+    const quantityInput = cartItem.querySelector(`.quantity-input[data-product-id="${productId}"]`);
+    if (quantityInput) {
+      quantityInput.value = quantity;
+    }
+
+    const priceContainer = cartItem.querySelector(".text-right.ml-3");
+    if (priceContainer) {
+      const totalPriceElement = priceContainer.querySelector("p.text-sm.font-medium.text-gray-900");
+      if (totalPriceElement) {
+        totalPriceElement.textContent = `${totalPrice.toLocaleString()}원`;
+      }
+    }
+  }
+
+  updateCartTotalPrice();
+  updateSelectedInfo();
+}
+
+function updateCartTotalPrice() {
+  const modal = document.querySelector(".cart-modal");
+  if (!modal) return;
+
+  const cart = getCart();
+  const cartItems = Object.entries(cart);
+  const totalPrice = cartItems.reduce((sum, [, item]) => {
+    const price = parseInt(item.productData?.lprice || 0);
+    return sum + price * item.quantity;
+  }, 0);
+
+  const totalPriceElement = modal.querySelector("#cart-total-price");
+  if (totalPriceElement) {
+    totalPriceElement.textContent = `${totalPrice.toLocaleString()}원`;
+  }
+
+  const totalCount = cartItems.reduce((sum, [, item]) => sum + item.quantity, 0);
+  const headerCount = modal.querySelector("h2 span");
+  if (headerCount) {
+    headerCount.textContent = `(${totalCount})`;
+  } else if (totalCount > 0) {
+    const h2 = modal.querySelector("h2");
+    if (h2) {
+      const span = document.createElement("span");
+      span.className = "text-sm font-normal text-gray-600 ml-1";
+      span.textContent = `(${totalCount})`;
+      h2.appendChild(span);
+    }
+  }
+
+  const selectAllCheckbox = modal.querySelector("#cart-modal-select-all-checkbox");
+  if (selectAllCheckbox) {
+    const selectAllLabel = selectAllCheckbox.closest("label");
+    if (selectAllLabel) {
+      const labelText = selectAllLabel.textContent.trim();
+      if (labelText.includes("전체선택")) {
+        const textAfterCheckbox = selectAllCheckbox.nextSibling;
+        if (textAfterCheckbox && textAfterCheckbox.nodeType === Node.TEXT_NODE) {
+          textAfterCheckbox.textContent = ` 전체선택 (${totalCount}개)`;
+        } else {
+          const textNode = document.createTextNode(` 전체선택 (${totalCount}개)`);
+          selectAllCheckbox.parentNode.insertBefore(textNode, selectAllCheckbox.nextSibling);
+        }
+      }
+    }
+  }
+}
+
+let cartModalEventsSetup = false;
+function setupCartModalEvents() {
+  if (cartModalEventsSetup) {
+    return;
+  }
+  cartModalEventsSetup = true;
+
+  document.addEventListener("click", (e) => {
+    const modal = document.querySelector(".cart-modal");
+    if (!modal || !modal.contains(e.target)) return;
+
+    const decreaseBtn = e.target.closest(".quantity-decrease-btn");
+    const increaseBtn = e.target.closest(".quantity-increase-btn");
+    const removeBtn = e.target.closest(".cart-item-remove-btn");
+    const itemImage = e.target.closest(".cart-item-image");
+    const itemTitle = e.target.closest(".cart-item-title");
+    const closeBtn = e.target.closest("#cart-modal-close-btn");
+    const removeSelectedBtn = e.target.closest("#cart-modal-remove-selected-btn");
+    const clearCartBtn = e.target.closest("#cart-modal-clear-cart-btn");
+
+    if (closeBtn) {
+      e.preventDefault();
+      closeCartModal();
+      return;
+    }
+
+    if (decreaseBtn) {
+      e.preventDefault();
+      const productId = decreaseBtn.getAttribute("data-product-id");
+      const quantityInput = modal.querySelector(`.quantity-input[data-product-id="${productId}"]`);
+      if (quantityInput) {
+        const currentQuantity = parseInt(quantityInput.value) || 1;
+        if (currentQuantity > 1) {
+          updateCartQuantity(productId, currentQuantity - 1);
+          updateCartItemInModal(productId);
+        }
+      }
+      return;
+    }
+
+    if (increaseBtn) {
+      e.preventDefault();
+      const productId = increaseBtn.getAttribute("data-product-id");
+      const quantityInput = modal.querySelector(`.quantity-input[data-product-id="${productId}"]`);
+      if (quantityInput) {
+        const currentQuantity = parseInt(quantityInput.value) || 1;
+        updateCartQuantity(productId, currentQuantity + 1);
+        updateCartItemInModal(productId);
+      }
+      return;
+    }
+
+    if (removeBtn) {
+      e.preventDefault();
+      const productId = removeBtn.getAttribute("data-product-id");
+      removeFromCart(productId);
+      showToast("info", "상품이 장바구니에서 삭제되었습니다");
+      updateCartItemInModal(productId);
+      updateCartIcon();
+
+      const cart = getCart();
+      if (Object.keys(cart).length === 0) {
+        renderCartModal();
+      }
+      return;
+    }
+
+    if (removeSelectedBtn) {
+      e.preventDefault();
+      const selectedCheckboxes = modal.querySelectorAll(".cart-item-checkbox:checked");
+      if (selectedCheckboxes.length === 0) {
+        return;
+      }
+
+      selectedCheckboxes.forEach((checkbox) => {
+        const productId = checkbox.getAttribute("data-product-id");
+        removeFromCart(productId);
+        updateCartItemInModal(productId);
+      });
+
+      showToast("info", "선택된 상품들이 삭제되었습니다");
+      updateCartIcon();
+
+      const cart = getCart();
+      if (Object.keys(cart).length === 0) {
+        renderCartModal();
+      }
+      return;
+    }
+
+    if (clearCartBtn) {
+      e.preventDefault();
+      clearCart();
+      showToast("info", "장바구니가 비워졌습니다");
+      renderCartModal();
+      updateCartIcon();
+      return;
+    }
+
+    if (itemImage || itemTitle) {
+      e.preventDefault();
+      const productId = (itemImage || itemTitle).getAttribute("data-product-id");
+      if (productId) {
+        const router = window.__router__;
+        if (router) {
+          closeCartModal();
+          router.navigate(`/product/${productId}`);
+        }
+      }
+      return;
+    }
+  });
+
+  document.addEventListener("click", (e) => {
+    const overlay = e.target.closest(".cart-modal-overlay");
+    if (overlay && e.target === overlay) {
+      closeCartModal();
+    }
+  });
+
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
+      const modal = document.querySelector(".cart-modal");
+      if (modal) {
+        closeCartModal();
+      }
+    }
+  });
+
+  document.addEventListener("change", (e) => {
+    const modal = document.querySelector(".cart-modal");
+    if (!modal || !modal.contains(e.target)) return;
+
+    if (e.target.classList.contains("cart-item-checkbox")) {
+      updateSelectAllCheckbox();
+      updateSelectedInfo();
+      return;
+    }
+
+    if (e.target.id === "cart-modal-select-all-checkbox") {
+      const isChecked = e.target.checked;
+      const itemCheckboxes = modal.querySelectorAll(".cart-item-checkbox");
+      itemCheckboxes.forEach((checkbox) => {
+        checkbox.checked = isChecked;
+      });
+      updateSelectedInfo();
+    }
+  });
+}
+
+function updateSelectedInfo() {
+  const modal = document.querySelector(".cart-modal");
+  if (!modal) return;
+
+  const selectedCheckboxes = modal.querySelectorAll(".cart-item-checkbox:checked");
+  const selectedCount = selectedCheckboxes.length;
+  const selectedInfo = modal.querySelector("#selected-items-info");
+  const removeSelectedBtn = modal.querySelector("#cart-modal-remove-selected-btn");
+
+  if (selectedCount > 0) {
+    let selectedPrice = 0;
+    selectedCheckboxes.forEach((checkbox) => {
+      const productId = checkbox.getAttribute("data-product-id");
+      const cartItem = modal.querySelector(`.cart-item[data-product-id="${productId}"]`);
+      if (cartItem) {
+        const priceContainer = cartItem.querySelector(".text-right.ml-3");
+        if (priceContainer) {
+          const totalPriceElement = priceContainer.querySelector("p.text-sm.font-medium.text-gray-900");
+          if (totalPriceElement) {
+            const priceText = totalPriceElement.textContent;
+            const price = parseInt(priceText.replace(/[^0-9]/g, "")) || 0;
+            selectedPrice += price;
+          }
+        }
+      }
+    });
+
+    if (selectedInfo) {
+      selectedInfo.style.display = "flex";
+      const selectedCountSpan = selectedInfo.querySelector("#selected-count");
+      const selectedPriceSpan = selectedInfo.querySelector("#selected-price");
+      if (selectedCountSpan) selectedCountSpan.textContent = selectedCount;
+      if (selectedPriceSpan) selectedPriceSpan.textContent = `${selectedPrice.toLocaleString()}원`;
+    }
+
+    if (removeSelectedBtn) {
+      removeSelectedBtn.style.display = "block";
+      const removeCountSpan = removeSelectedBtn.querySelector("#remove-selected-count");
+      if (removeCountSpan) removeCountSpan.textContent = selectedCount;
+    }
+  } else {
+    if (selectedInfo) selectedInfo.style.display = "none";
+    if (removeSelectedBtn) removeSelectedBtn.style.display = "none";
+  }
+}
+
+function updateSelectAllCheckbox() {
+  const modal = document.querySelector(".cart-modal");
+  if (!modal) return;
+
+  const selectAllCheckbox = modal.querySelector("#cart-modal-select-all-checkbox");
+  const itemCheckboxes = modal.querySelectorAll(".cart-item-checkbox");
+  if (selectAllCheckbox && itemCheckboxes.length > 0) {
+    const allChecked = Array.from(itemCheckboxes).every((cb) => cb.checked);
+    selectAllCheckbox.checked = allChecked;
+  }
+}
+
+function closeCartModal() {
+  const modal = document.querySelector(".cart-modal");
+  if (modal) {
+    modal.remove();
+  }
+}
+
+export function openCartModal() {
+  renderCartModal();
+}
+
+export const cartEmptyLayout = `
+    <div class="flex min-h-full items-end justify-center p-0 sm:items-center sm:p-4">
+      <div class="relative bg-white rounded-t-lg sm:rounded-lg shadow-xl w-full max-w-md sm:max-w-lg max-h-[90vh] overflow-hidden">
+        <!-- 헤더 -->
+        <div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
+          <h2 class="text-lg font-bold text-gray-900 flex items-center">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+            </svg>
+            장바구니 
+          </h2>
+          
+          <button id="cart-modal-close-btn" class="text-gray-400 hover:text-gray-600 p-1">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+        
+        <!-- 컨텐츠 -->
+        <div class="flex flex-col max-h-[calc(90vh-120px)]">
+          <!-- 빈 장바구니 -->
+          <div class="flex-1 flex items-center justify-center p-8">
+            <div class="text-center">
+              <div class="text-gray-400 mb-4">
+                <svg class="mx-auto h-12 w-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+                </svg>
+              </div>
+              <h3 class="text-lg font-medium text-gray-900 mb-2">장바구니가 비어있습니다</h3>
+              <p class="text-gray-600">원하는 상품을 담아보세요!</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+
+export const cartNoSelectionLayout = `
+    <div class="flex min-h-full items-end justify-center p-0 sm:items-center sm:p-4">
+      <div class="relative bg-white rounded-t-lg sm:rounded-lg shadow-xl w-full max-w-md sm:max-w-lg max-h-[90vh] overflow-hidden">
+        <!-- 헤더 -->
+        <div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
+          <h2 class="text-lg font-bold text-gray-900 flex items-center">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+            </svg>
+            장바구니
+            <span class="text-sm font-normal text-gray-600 ml-1">(2)</span>
+          </h2>
+          <button id="cart-modal-close-btn" class="text-gray-400 hover:text-gray-600 p-1">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+        <!-- 컨텐츠 -->
+        <div class="flex flex-col max-h-[calc(90vh-120px)]">
+          <!-- 전체 선택 섹션 -->
+          <div class="p-4 border-b border-gray-200 bg-gray-50">
+            <label class="flex items-center text-sm text-gray-700">
+              <input type="checkbox" id="cart-modal-select-all-checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2">
+              전체선택 (2개)
+            </label>
+          </div>
+          <!-- 아이템 목록 -->
+          <div class="flex-1 overflow-y-auto">
+            <div class="p-4 space-y-4">
+              <div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="85067212996">
+                <!-- 선택 체크박스 -->
+                <label class="flex items-center mr-3">
+                  <input type="checkbox" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded 
+                focus:ring-blue-500" data-product-id="85067212996">
+                </label>
+                <!-- 상품 이미지 -->
+                <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
+                  <img src="https://shopping-phinf.pstatic.net/main_8506721/85067212996.1.jpg" alt="PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="85067212996">
+                </div>
+                <!-- 상품 정보 -->
+                <div class="flex-1 min-w-0">
+                  <h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="85067212996">
+                    PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장
+                  </h4>
+                  <p class="text-sm text-gray-600 mt-1">
+                    220원
+                  </p>
+                  <!-- 수량 조절 -->
+                  <div class="flex items-center mt-2">
+                    <button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center 
+                 border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="85067212996">
+                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
+                      </svg>
+                    </button>
+                    <input type="number" value="2" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b 
+                border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" disabled="" data-product-id="85067212996">
+                    <button class="quantity-increase-btn w-7 h-7 flex items-center justify-center 
+                 border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="85067212996">
+                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+                <!-- 가격 및 삭제 -->
+                <div class="text-right ml-3">
+                  <p class="text-sm font-medium text-gray-900">
+                    440원
+                  </p>
+                  <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="85067212996">
+                    삭제
+                  </button>
+                </div>
+              </div>
+              <div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="86940857379">
+                <!-- 선택 체크박스 -->
+                <label class="flex items-center mr-3">
+                  <input type="checkbox" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded 
+                focus:ring-blue-500" data-product-id="86940857379">
+                </label>
+                <!-- 상품 이미지 -->
+                <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
+                  <img src="https://shopping-phinf.pstatic.net/main_8694085/86940857379.1.jpg" alt="샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="86940857379">
+                </div>
+                <!-- 상품 정보 -->
+                <div class="flex-1 min-w-0">
+                  <h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="86940857379">
+                    샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이
+                  </h4>
+                  <p class="text-sm text-gray-600 mt-1">
+                    230원
+                  </p>
+                  <!-- 수량 조절 -->
+                  <div class="flex items-center mt-2">
+                    <button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center 
+                 border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="86940857379">
+                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
+                      </svg>
+                    </button>
+                    <input type="number" value="1" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b 
+                border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" disabled="" data-product-id="86940857379">
+                    <button class="quantity-increase-btn w-7 h-7 flex items-center justify-center 
+                 border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="86940857379">
+                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+                <!-- 가격 및 삭제 -->
+                <div class="text-right ml-3">
+                  <p class="text-sm font-medium text-gray-900">
+                    230원
+                  </p>
+                  <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="86940857379">
+                    삭제
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 하단 액션 -->
+        <div class="sticky bottom-0 bg-white border-t border-gray-200 p-4">
+          <!-- 총 금액 -->
+          <div class="flex justify-between items-center mb-4">
+            <span class="text-lg font-bold text-gray-900">총 금액</span>
+            <span class="text-xl font-bold text-blue-600">670원</span>
+          </div>
+          <!-- 액션 버튼들 -->
+          <div class="space-y-2">
+            <div class="flex gap-2">
+              <button id="cart-modal-clear-cart-btn" class="flex-1 bg-gray-600 text-white py-2 px-4 rounded-md 
+                       hover:bg-gray-700 transition-colors text-sm">
+                전체 비우기
+              </button>
+              <button id="cart-modal-checkout-btn" class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md 
+                       hover:bg-blue-700 transition-colors text-sm">
+                구매하기
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+
+export const cartWithSelectionLayout = `
+    <div class="flex min-h-full items-end justify-center p-0 sm:items-center sm:p-4">
+      <div class="relative bg-white rounded-t-lg sm:rounded-lg shadow-xl w-full max-w-md sm:max-w-lg max-h-[90vh] overflow-hidden">
+        <!-- 헤더 -->
+        <div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
+          <h2 class="text-lg font-bold text-gray-900 flex items-center">
+            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+            </svg>
+            장바구니
+            <span class="text-sm font-normal text-gray-600 ml-1">(2)</span>
+          </h2>
+          <button id="cart-modal-close-btn" class="text-gray-400 hover:text-gray-600 p-1">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+        <!-- 컨텐츠 -->
+        <div class="flex flex-col max-h-[calc(90vh-120px)]">
+          <!-- 전체 선택 섹션 -->
+          <div class="p-4 border-b border-gray-200 bg-gray-50">
+            <label class="flex items-center text-sm text-gray-700">
+              <input type="checkbox" id="cart-modal-select-all-checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2">
+              전체선택 (2개)
+            </label>
+          </div>
+          <!-- 아이템 목록 -->
+          <div class="flex-1 overflow-y-auto">
+            <div class="p-4 space-y-4">
+              <div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="85067212996">
+                <!-- 선택 체크박스 -->
+                <label class="flex items-center mr-3">
+                  <input type="checkbox" checked="" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded 
+                focus:ring-blue-500" data-product-id="85067212996">
+                </label>
+                <!-- 상품 이미지 -->
+                <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
+                  <img src="https://shopping-phinf.pstatic.net/main_8506721/85067212996.1.jpg" alt="PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="85067212996">
+                </div>
+                <!-- 상품 정보 -->
+                <div class="flex-1 min-w-0">
+                  <h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="85067212996">
+                    PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장
+                  </h4>
+                  <p class="text-sm text-gray-600 mt-1">
+                    220원
+                  </p>
+                  <!-- 수량 조절 -->
+                  <div class="flex items-center mt-2">
+                    <button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center 
+                 border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="85067212996">
+                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
+                      </svg>
+                    </button>
+                    <input type="number" value="2" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b 
+                border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" disabled="" data-product-id="85067212996">
+                    <button class="quantity-increase-btn w-7 h-7 flex items-center justify-center 
+                 border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="85067212996">
+                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+                <!-- 가격 및 삭제 -->
+                <div class="text-right ml-3">
+                  <p class="text-sm font-medium text-gray-900">
+                    440원
+                  </p>
+                  <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="85067212996">
+                    삭제
+                  </button>
+                </div>
+              </div>
+              <div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="86940857379">
+                <!-- 선택 체크박스 -->
+                <label class="flex items-center mr-3">
+                  <input type="checkbox" class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded 
+                focus:ring-blue-500" data-product-id="86940857379">
+                </label>
+                <!-- 상품 이미지 -->
+                <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
+                  <img src="https://shopping-phinf.pstatic.net/main_8694085/86940857379.1.jpg" alt="샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이" class="w-full h-full object-cover cursor-pointer cart-item-image" data-product-id="86940857379">
+                </div>
+                <!-- 상품 정보 -->
+                <div class="flex-1 min-w-0">
+                  <h4 class="text-sm font-medium text-gray-900 truncate cursor-pointer cart-item-title" data-product-id="86940857379">
+                    샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이
+                  </h4>
+                  <p class="text-sm text-gray-600 mt-1">
+                    230원
+                  </p>
+                  <!-- 수량 조절 -->
+                  <div class="flex items-center mt-2">
+                    <button class="quantity-decrease-btn w-7 h-7 flex items-center justify-center 
+                 border border-gray-300 rounded-l-md bg-gray-50 hover:bg-gray-100" data-product-id="86940857379">
+                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
+                      </svg>
+                    </button>
+                    <input type="number" value="1" min="1" class="quantity-input w-12 h-7 text-center text-sm border-t border-b 
+                border-gray-300 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" disabled="" data-product-id="86940857379">
+                    <button class="quantity-increase-btn w-7 h-7 flex items-center justify-center 
+                 border border-gray-300 rounded-r-md bg-gray-50 hover:bg-gray-100" data-product-id="86940857379">
+                      <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+                <!-- 가격 및 삭제 -->
+                <div class="text-right ml-3">
+                  <p class="text-sm font-medium text-gray-900">
+                    230원
+                  </p>
+                  <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="86940857379">
+                    삭제
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 하단 액션 -->
+        <div class="sticky bottom-0 bg-white border-t border-gray-200 p-4">
+          <!-- 선택된 아이템 정보 -->
+          <div class="flex justify-between items-center mb-3 text-sm">
+            <span class="text-gray-600">선택한 상품 (1개)</span>
+            <span class="font-medium">440원</span>
+          </div>
+          <!-- 총 금액 -->
+          <div class="flex justify-between items-center mb-4">
+            <span class="text-lg font-bold text-gray-900">총 금액</span>
+            <span class="text-xl font-bold text-blue-600">670원</span>
+          </div>
+          <!-- 액션 버튼들 -->
+          <div class="space-y-2">
+            <button id="cart-modal-remove-selected-btn" class="w-full bg-red-600 text-white py-2 px-4 rounded-md 
+                       hover:bg-red-700 transition-colors text-sm">
+              선택한 상품 삭제 (1개)
+            </button>
+            <div class="flex gap-2">
+              <button id="cart-modal-clear-cart-btn" class="flex-1 bg-gray-600 text-white py-2 px-4 rounded-md 
+                       hover:bg-gray-700 transition-colors text-sm">
+                전체 비우기
+              </button>
+              <button id="cart-modal-checkout-btn" class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md 
+                       hover:bg-blue-700 transition-colors text-sm">
+                구매하기
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
diff --git a/src/pages/notFound.js b/src/pages/notFound.js
new file mode 100644
index 00000000..61c5a48e
--- /dev/null
+++ b/src/pages/notFound.js
@@ -0,0 +1,34 @@
+export const notFoundLayout = `
+    <main class="max-w-md mx-auto px-4 py-4">
+      <div class="text-center my-4 py-20 shadow-md p-6 bg-white rounded-lg">
+      <svg viewBox="0 0 320 180" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#4285f4;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#1a73e8;stop-opacity:1" />
+          </linearGradient>
+          <filter id="softShadow" x="-50%" y="-50%" width="200%" height="200%">
+            <feDropShadow dx="0" dy="2" stdDeviation="8" flood-color="#000000" flood-opacity="0.1"/>
+          </filter>
+        </defs>
+        
+        <!-- 404 Numbers -->
+        <text x="160" y="85" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="48" font-weight="600" fill="url(#blueGradient)" text-anchor="middle">404</text>
+        
+        <!-- Icon decoration -->
+        <circle cx="80" cy="60" r="3" fill="#e8f0fe" opacity="0.8"/>
+        <circle cx="240" cy="60" r="3" fill="#e8f0fe" opacity="0.8"/>
+        <circle cx="90" cy="45" r="2" fill="#4285f4" opacity="0.5"/>
+        <circle cx="230" cy="45" r="2" fill="#4285f4" opacity="0.5"/>
+        
+        <!-- Message -->
+        <text x="160" y="110" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="400" fill="#5f6368" text-anchor="middle">페이지를 찾을 수 없습니다</text>
+        
+        <!-- Subtle bottom accent -->
+        <rect x="130" y="130" width="60" height="2" rx="1" fill="url(#blueGradient)" opacity="0.3"/>
+      </svg>
+      
+      <a href="/" data-link class="inline-block px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">홈으로</a>
+    </div>
+    </main>
+  `;
diff --git a/src/pages/productDetail.js b/src/pages/productDetail.js
new file mode 100644
index 00000000..d80318d8
--- /dev/null
+++ b/src/pages/productDetail.js
@@ -0,0 +1,553 @@
+import { getProduct, getProducts } from "../api/productApi.js";
+import { addToCart, updateCartIcon } from "../app/services/cartService.js";
+import { showToast } from "../components/toast.js";
+import { openCartModal } from "./cart.js";
+
+function renderStars(rating) {
+  const fullStars = Math.floor(rating);
+  const hasHalfStar = rating % 1 >= 0.5;
+  let starsHTML = "";
+
+  for (let i = 0; i < 5; i++) {
+    if (i < fullStars) {
+      starsHTML += `<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
+        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+      </svg>`;
+    } else if (i === fullStars && hasHalfStar) {
+      starsHTML += `<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
+        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+      </svg>`;
+    } else {
+      starsHTML += `<svg class="w-4 h-4 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
+        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+      </svg>`;
+    }
+  }
+  return starsHTML;
+}
+
+function createBreadcrumb(category1, category2) {
+  let breadcrumb = `<a href="/" data-link="" class="hover:text-blue-600 transition-colors">홈</a>`;
+
+  if (category1) {
+    breadcrumb += `
+      <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+      </svg>
+      <button class="breadcrumb-link" data-category1="${category1}">
+        ${category1}
+      </button>
+    `;
+  }
+
+  if (category2) {
+    breadcrumb += `
+      <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+      </svg>
+      <button class="breadcrumb-link" data-category2="${category2}">
+        ${category2}
+      </button>
+    `;
+  }
+
+  return breadcrumb;
+}
+
+function createRelatedProductCard(product) {
+  return `
+    <div class="bg-gray-50 rounded-lg p-3 related-product-card cursor-pointer" data-product-id="${product.productId}">
+      <div class="aspect-square bg-white rounded-md overflow-hidden mb-2">
+        <img src="${product.image}" alt="${product.title}" class="w-full h-full object-cover" loading="lazy">
+      </div>
+      <h3 class="text-sm font-medium text-gray-900 mb-1 line-clamp-2">${product.title}</h3>
+      <p class="text-sm font-bold text-blue-600">${parseInt(product.lprice).toLocaleString()}원</p>
+    </div>
+  `;
+}
+
+export async function renderProductDetail(productId) {
+  const root = document.getElementById("root") || document.body;
+  root.innerHTML = productDetailLoadingLayout;
+
+  try {
+    const product = await getProduct(productId);
+
+    const relatedProductsResponse = await getProducts({
+      category2: product.category2,
+      limit: 4,
+    });
+
+    const relatedProducts = relatedProductsResponse.products.filter((p) => p.productId !== productId).slice(0, 4);
+
+    const detailHTML = `
+      <div class="min-h-screen bg-gray-50">
+        <header class="bg-white shadow-sm sticky top-0 z-40">
+          <div class="max-w-md mx-auto px-4 py-4">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center space-x-3">
+                <button id="back-btn" class="p-2 text-gray-700 hover:text-gray-900 transition-colors">
+                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+                  </svg>
+                </button>
+                <h1 class="text-lg font-bold text-gray-900">상품 상세</h1>
+              </div>
+              <div class="flex items-center space-x-2">
+                <!-- 장바구니 아이콘 -->
+                <button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
+                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+        </header>
+        <main class="max-w-md mx-auto px-4 py-4">
+          <!-- 브레드크럼 -->
+          <nav class="mb-4">
+            <div class="flex items-center space-x-2 text-sm text-gray-600">
+              ${createBreadcrumb(product.category1, product.category2)}
+            </div>
+          </nav>
+          <!-- 상품 상세 정보 -->
+          <div class="bg-white rounded-lg shadow-sm mb-6">
+            <!-- 상품 이미지 -->
+            <div class="p-4">
+              <div class="aspect-square bg-gray-100 rounded-lg overflow-hidden mb-4">
+                <img src="${product.image}" alt="${product.title}" class="w-full h-full object-cover product-detail-image">
+              </div>
+              <!-- 상품 정보 -->
+              <div>
+                ${product.brand ? `<p class="text-sm text-gray-600 mb-1">${product.brand}</p>` : ""}
+                <h1 class="text-xl font-bold text-gray-900 mb-3">${product.title}</h1>
+                <!-- 평점 및 리뷰 -->
+                ${
+                  product.rating
+                    ? `
+                <div class="flex items-center mb-3">
+                  <div class="flex items-center">
+                    ${renderStars(product.rating)}
+                  </div>
+                  <span class="ml-2 text-sm text-gray-600">${product.rating} ${product.reviewCount ? `(${product.reviewCount}개 리뷰)` : ""}</span>
+                </div>
+                `
+                    : ""
+                }
+                <!-- 가격 -->
+                <div class="mb-4">
+                  <span class="text-2xl font-bold text-blue-600">${parseInt(product.lprice).toLocaleString()}원</span>
+                </div>
+                <!-- 재고 -->
+                ${
+                  product.stock
+                    ? `
+                <div class="text-sm text-gray-600 mb-4">
+                  재고 ${product.stock}개
+                </div>
+                `
+                    : ""
+                }
+                <!-- 설명 -->
+                ${
+                  product.description
+                    ? `
+                <div class="text-sm text-gray-700 leading-relaxed mb-6">
+                  ${product.description}
+                </div>
+                `
+                    : ""
+                }
+              </div>
+            </div>
+            <!-- 수량 선택 및 액션 -->
+            <div class="border-t border-gray-200 p-4">
+              <div class="flex items-center justify-between mb-4">
+                <span class="text-sm font-medium text-gray-900">수량</span>
+                <div class="flex items-center">
+                  <button id="quantity-decrease" class="w-8 h-8 flex items-center justify-center border border-gray-300 
+                     rounded-l-md bg-gray-50 hover:bg-gray-100">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
+                    </svg>
+                  </button>
+                  <input type="number" id="quantity-input" value="1" min="1" ${product.stock ? `max="${product.stock}"` : ""} class="w-16 h-8 text-center text-sm border-t border-b border-gray-300 
+                    focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+                  <button id="quantity-increase" class="w-8 h-8 flex items-center justify-center border border-gray-300 
+                     rounded-r-md bg-gray-50 hover:bg-gray-100">
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <!-- 액션 버튼 -->
+              <button id="add-to-cart-btn" data-product-id="${product.productId}" class="w-full bg-blue-600 text-white py-3 px-4 rounded-md 
+                   hover:bg-blue-700 transition-colors font-medium">
+                장바구니 담기
+              </button>
+            </div>
+          </div>
+          <!-- 상품 목록으로 이동 -->
+          <div class="mb-6">
+            <button id="go-to-product-list" class="block w-full text-center bg-gray-100 text-gray-700 py-3 px-4 rounded-md 
+              hover:bg-gray-200 transition-colors">
+              상품 목록으로 돌아가기
+            </button>
+          </div>
+          <!-- 관련 상품 -->
+          ${
+            relatedProducts.length > 0
+              ? `
+          <div class="bg-white rounded-lg shadow-sm">
+            <div class="p-4 border-b border-gray-200">
+              <h2 class="text-lg font-bold text-gray-900">관련 상품</h2>
+              <p class="text-sm text-gray-600">같은 카테고리의 다른 상품들</p>
+            </div>
+            <div class="p-4">
+              <div class="grid grid-cols-2 gap-3 responsive-grid">
+                ${relatedProducts.map((p) => createRelatedProductCard(p)).join("")}
+              </div>
+            </div>
+          </div>
+          `
+              : ""
+          }
+        </main>
+        <footer class="bg-white shadow-sm sticky top-0 z-40">
+          <div class="max-w-md mx-auto py-8 text-center text-gray-500">
+            <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
+          </div>
+        </footer>
+      </div>
+    `;
+
+    const root = document.getElementById("root") || document.body;
+    root.innerHTML = detailHTML;
+
+    setupProductDetailEvents(product);
+
+    updateCartIcon();
+  } catch (error) {
+    console.error("상품 상세 로드 실패:", error);
+    const router = window.__router__;
+    if (router) {
+      router.navigate("/404");
+    }
+  }
+}
+
+function setupProductDetailEvents(product) {
+  const backBtn = document.getElementById("back-btn");
+  if (backBtn) {
+    backBtn.addEventListener("click", () => {
+      window.history.back();
+    });
+  }
+
+  const cartIconBtn = document.getElementById("cart-icon-btn");
+  if (cartIconBtn) {
+    cartIconBtn.addEventListener("click", () => {
+      openCartModal();
+    });
+  }
+
+  const goToListBtn = document.getElementById("go-to-product-list");
+  if (goToListBtn) {
+    goToListBtn.addEventListener("click", () => {
+      const router = window.__router__;
+      if (router) {
+        router.navigate("/");
+      }
+    });
+  }
+
+  const quantityInput = document.getElementById("quantity-input");
+  const decreaseBtn = document.getElementById("quantity-decrease");
+  const increaseBtn = document.getElementById("quantity-increase");
+
+  if (decreaseBtn && quantityInput) {
+    decreaseBtn.addEventListener("click", () => {
+      const currentValue = parseInt(quantityInput.value) || 1;
+      if (currentValue > 1) {
+        quantityInput.value = currentValue - 1;
+      }
+    });
+  }
+
+  if (increaseBtn && quantityInput) {
+    increaseBtn.addEventListener("click", () => {
+      const currentValue = parseInt(quantityInput.value) || 1;
+      const maxValue = parseInt(quantityInput.getAttribute("max")) || 999;
+      if (currentValue < maxValue) {
+        quantityInput.value = currentValue + 1;
+      }
+    });
+  }
+
+  const addToCartBtn = document.getElementById("add-to-cart-btn");
+  if (addToCartBtn) {
+    addToCartBtn.addEventListener("click", async () => {
+      const quantity = parseInt(quantityInput?.value) || 1;
+      try {
+        addToCart(
+          product.productId,
+          {
+            title: product.title,
+            image: product.image,
+            lprice: product.lprice,
+            brand: product.brand,
+          },
+          quantity,
+        );
+
+        showToast("success", "장바구니에 추가되었습니다");
+        updateCartIcon();
+      } catch (error) {
+        console.error("장바구니 추가 실패:", error);
+        showToast("error", "상품을 장바구니에 추가하는 중 오류가 발생했습니다.");
+      }
+    });
+  }
+
+  document.addEventListener("click", (e) => {
+    const relatedProductCard = e.target.closest(".related-product-card");
+    if (relatedProductCard) {
+      const productId = relatedProductCard.getAttribute("data-product-id");
+      if (productId) {
+        const router = window.__router__;
+        if (router) {
+          router.navigate(`/product/${productId}`);
+        }
+      }
+    }
+  });
+
+  document.addEventListener("click", (e) => {
+    const breadcrumbLink = e.target.closest(".breadcrumb-link");
+    if (breadcrumbLink) {
+      const category1 = breadcrumbLink.getAttribute("data-category1");
+      const category2 = breadcrumbLink.getAttribute("data-category2");
+      const router = window.__router__;
+      if (router) {
+        let url = "/";
+        const params = new URLSearchParams();
+        if (category2) {
+          const productCategory1 = product.category1;
+          if (productCategory1) {
+            params.set("category1", productCategory1);
+          }
+          params.set("category2", category2);
+        } else if (category1) {
+          params.set("category1", category1);
+        }
+        if (params.toString()) {
+          url += `?${params.toString()}`;
+        }
+        router.navigate(url);
+      }
+    }
+  });
+}
+
+export const productDetailLoadingLayout = `
+    <div class="min-h-screen bg-gray-50">
+      <header class="bg-white shadow-sm sticky top-0 z-40">
+        <div class="max-w-md mx-auto px-4 py-4">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center space-x-3">
+              <button onclick="window.history.back()" class="p-2 text-gray-700 hover:text-gray-900 transition-colors">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+                </svg>
+              </button>
+              <h1 class="text-lg font-bold text-gray-900">상품 상세</h1>
+            </div>
+            <div class="flex items-center space-x-2">
+              <!-- 장바구니 아이콘 -->
+              <button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+      <main class="max-w-md mx-auto px-4 py-4">
+        <div class="py-20 bg-gray-50 flex items-center justify-center">
+          <div class="text-center">
+            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+            <p class="text-gray-600">상품 정보를 불러오는 중...</p>
+          </div>
+        </div>
+      </main>
+      <footer class="bg-white shadow-sm sticky top-0 z-40">
+        <div class="max-w-md mx-auto py-8 text-center text-gray-500">
+          <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
+        </div>
+      </footer>
+    </div>
+  `;
+
+export const productDetailLoadedLayout = `
+    <div class="min-h-screen bg-gray-50">
+      <header class="bg-white shadow-sm sticky top-0 z-40">
+        <div class="max-w-md mx-auto px-4 py-4">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center space-x-3">
+              <button onclick="window.history.back()" class="p-2 text-gray-700 hover:text-gray-900 transition-colors">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+                </svg>
+              </button>
+              <h1 class="text-lg font-bold text-gray-900">상품 상세</h1>
+            </div>
+            <div class="flex items-center space-x-2">
+              <!-- 장바구니 아이콘 -->
+              <button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+                </svg>
+                <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
+                  1
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+      <main class="max-w-md mx-auto px-4 py-4">
+        <!-- 브레드크럼 -->
+        <nav class="mb-4">
+          <div class="flex items-center space-x-2 text-sm text-gray-600">
+            <a href="/" data-link="" class="hover:text-blue-600 transition-colors">홈</a>
+            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+            </svg>
+            <button class="breadcrumb-link" data-category1="생활/건강">
+              생활/건강
+            </button>
+            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+            </svg>
+            <button class="breadcrumb-link" data-category2="생활용품">
+              생활용품
+            </button>
+          </div>
+        </nav>
+        <!-- 상품 상세 정보 -->
+        <div class="bg-white rounded-lg shadow-sm mb-6">
+          <!-- 상품 이미지 -->
+          <div class="p-4">
+            <div class="aspect-square bg-gray-100 rounded-lg overflow-hidden mb-4">
+              <img src="https://shopping-phinf.pstatic.net/main_8506721/85067212996.1.jpg" alt="PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장" class="w-full h-full object-cover product-detail-image">
+            </div>
+            <!-- 상품 정보 -->
+            <div>
+              <p class="text-sm text-gray-600 mb-1"></p>
+              <h1 class="text-xl font-bold text-gray-900 mb-3">PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장</h1>
+              <!-- 평점 및 리뷰 -->
+              <div class="flex items-center mb-3">
+                <div class="flex items-center">
+                  <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                  <svg class="w-4 h-4 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                  </svg>
+                </div>
+                <span class="ml-2 text-sm text-gray-600">4.0 (749개 리뷰)</span>
+              </div>
+              <!-- 가격 -->
+              <div class="mb-4">
+                <span class="text-2xl font-bold text-blue-600">220원</span>
+              </div>
+              <!-- 재고 -->
+              <div class="text-sm text-gray-600 mb-4">
+                재고 107개
+              </div>
+              <!-- 설명 -->
+              <div class="text-sm text-gray-700 leading-relaxed mb-6">
+                PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장에 대한 상세 설명입니다. 브랜드의 우수한 품질을 자랑하는 상품으로, 고객 만족도가 높은 제품입니다.
+              </div>
+            </div>
+          </div>
+          <!-- 수량 선택 및 액션 -->
+          <div class="border-t border-gray-200 p-4">
+            <div class="flex items-center justify-between mb-4">
+              <span class="text-sm font-medium text-gray-900">수량</span>
+              <div class="flex items-center">
+                <button id="quantity-decrease" class="w-8 h-8 flex items-center justify-center border border-gray-300 
+                   rounded-l-md bg-gray-50 hover:bg-gray-100">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
+                  </svg>
+                </button>
+                <input type="number" id="quantity-input" value="1" min="1" max="107" class="w-16 h-8 text-center text-sm border-t border-b border-gray-300 
+                  focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+                <button id="quantity-increase" class="w-8 h-8 flex items-center justify-center border border-gray-300 
+                   rounded-r-md bg-gray-50 hover:bg-gray-100">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+                  </svg>
+                </button>
+              </div>
+            </div>
+            <!-- 액션 버튼 -->
+            <button id="add-to-cart-btn" data-product-id="85067212996" class="w-full bg-blue-600 text-white py-3 px-4 rounded-md 
+                 hover:bg-blue-700 transition-colors font-medium">
+              장바구니 담기
+            </button>
+          </div>
+        </div>
+        <!-- 상품 목록으로 이동 -->
+        <div class="mb-6">
+          <button class="block w-full text-center bg-gray-100 text-gray-700 py-3 px-4 rounded-md 
+            hover:bg-gray-200 transition-colors go-to-product-list">
+            상품 목록으로 돌아가기
+          </button>
+        </div>
+        <!-- 관련 상품 -->
+        <div class="bg-white rounded-lg shadow-sm">
+          <div class="p-4 border-b border-gray-200">
+            <h2 class="text-lg font-bold text-gray-900">관련 상품</h2>
+            <p class="text-sm text-gray-600">같은 카테고리의 다른 상품들</p>
+          </div>
+          <div class="p-4">
+            <div class="grid grid-cols-2 gap-3 responsive-grid">
+              <div class="bg-gray-50 rounded-lg p-3 related-product-card cursor-pointer" data-product-id="86940857379">
+                <div class="aspect-square bg-white rounded-md overflow-hidden mb-2">
+                  <img src="https://shopping-phinf.pstatic.net/main_8694085/86940857379.1.jpg" alt="샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이" class="w-full h-full object-cover" loading="lazy">
+                </div>
+                <h3 class="text-sm font-medium text-gray-900 mb-1 line-clamp-2">샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이</h3>
+                <p class="text-sm font-bold text-blue-600">230원</p>
+              </div>
+              <div class="bg-gray-50 rounded-lg p-3 related-product-card cursor-pointer" data-product-id="82094468339">
+                <div class="aspect-square bg-white rounded-md overflow-hidden mb-2">
+                  <img src="https://shopping-phinf.pstatic.net/main_8209446/82094468339.4.jpg" alt="실리카겔 50g 습기제거제 제품 /산업 신발 의류 방습제" class="w-full h-full object-cover" loading="lazy">
+                </div>
+                <h3 class="text-sm font-medium text-gray-900 mb-1 line-clamp-2">실리카겔 50g 습기제거제 제품 /산업 신발 의류 방습제</h3>
+                <p class="text-sm font-bold text-blue-600">280원</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+      <footer class="bg-white shadow-sm sticky top-0 z-40">
+        <div class="max-w-md mx-auto py-8 text-center text-gray-500">
+          <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
+        </div>
+      </footer>
+    </div>
+  `;
diff --git a/src/pages/productList.js b/src/pages/productList.js
new file mode 100644
index 00000000..c02ee480
--- /dev/null
+++ b/src/pages/productList.js
@@ -0,0 +1,1085 @@
+import { getProducts, getCategories, getProduct } from "../api/productApi.js";
+import { addToCart, updateCartIcon } from "../app/services/cartService.js";
+import { showToast } from "../components/toast.js";
+import { openCartModal } from "./cart.js";
+
+function getQueryParams() {
+  const params = new URLSearchParams(window.location.search);
+  return {
+    limit: parseInt(params.get("limit")) || 20,
+    search: params.get("search") || "",
+    category1: params.get("category1") || "",
+    category2: params.get("category2") || "",
+    sort: params.get("sort") || "price_asc",
+  };
+}
+
+function createProductCard(product) {
+  return `
+    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden product-card"
+         data-product-id="${product.productId}">
+      <!-- 상품 이미지 -->
+      <div class="aspect-square bg-gray-100 overflow-hidden cursor-pointer product-image">
+        <img src="${product.image}"
+             alt="${product.title}"
+             class="w-full h-full object-cover hover:scale-105 transition-transform duration-200"
+             loading="lazy">
+      </div>
+      <!-- 상품 정보 -->
+      <div class="p-3">
+        <div class="cursor-pointer product-info mb-3">
+          <h3 class="text-sm font-medium text-gray-900 line-clamp-2 mb-1">
+            ${product.title}
+          </h3>
+          ${product.brand ? `<p class="text-xs text-gray-500 mb-2">${product.brand}</p>` : ""}
+          <p class="text-lg font-bold text-gray-900">
+            ${parseInt(product.lprice).toLocaleString()}원
+          </p>
+        </div>
+        <!-- 장바구니 버튼 -->
+        <button class="w-full bg-blue-600 text-white text-sm py-2 px-3 rounded-md
+               hover:bg-blue-700 transition-colors add-to-cart-btn" data-product-id="${product.productId}">
+          장바구니 담기
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+// function createCategory1Button(category) {
+//   return `
+//     <button data-category1="${category}" class="category1-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors
+//        bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
+//       ${category}
+//     </button>
+//   `;
+// }
+
+function createCategory2Button(category1, category2, isActive = false) {
+  const activeClass = isActive
+    ? "bg-blue-100 border-blue-300 text-blue-800"
+    : "bg-white border-gray-300 text-gray-700 hover:bg-gray-50";
+  return `
+    <button data-category1="${category1}" data-category2="${category2}" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors ${activeClass}">
+      ${category2}
+    </button>
+  `;
+}
+
+export const productListLoadingLayout = `
+    <div class="min-h-screen bg-gray-50">
+      <header class="bg-white shadow-sm sticky top-0 z-40">
+        <div class="max-w-md mx-auto px-4 py-4">
+          <div class="flex items-center justify-between">
+            <h1 class="text-xl font-bold text-gray-900">
+              <a href="/" data-link="">쇼핑몰</a>
+            </h1>
+            <div class="flex items-center space-x-2">
+              <!-- 장바구니 아이콘 -->
+              <button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+      <main class="max-w-md mx-auto px-4 py-4">
+        <!-- 검색 및 필터 -->
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
+          <!-- 검색창 -->
+          <div class="mb-4">
+            <div class="relative">
+              <input type="text" id="search-input" placeholder="상품명을 검색해보세요..." value="" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg
+                          focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                </svg>
+              </div>
+            </div>
+          </div>
+          <!-- 필터 옵션 -->
+          <div class="space-y-3">
+            <!-- 카테고리 필터 -->
+            <div class="space-y-2">
+              <div class="flex items-center gap-2">
+                <label class="text-sm text-gray-600">카테고리:</label>
+                <button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button>
+              </div>
+              <!-- 1depth 카테고리 -->
+              <div class="flex flex-wrap gap-2">
+                <div class="text-sm text-gray-500 italic">카테고리 로딩 중...</div>
+              </div>
+              <!-- 2depth 카테고리 -->
+            </div>
+            <!-- 기존 필터들 -->
+            <div class="flex gap-2 items-center justify-between">
+              <!-- 페이지당 상품 수 -->
+              <div class="flex items-center gap-2">
+                <label class="text-sm text-gray-600">개수:</label>
+                <select id="limit-select"
+                        class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+                  <option value="10">
+                    10개
+                  </option>
+                  <option value="20" selected="">
+                    20개
+                  </option>
+                  <option value="50">
+                    50개
+                  </option>
+                  <option value="100">
+                    100개
+                  </option>
+                </select>
+              </div>
+              <!-- 정렬 -->
+              <div class="flex items-center gap-2">
+                <label class="text-sm text-gray-600">정렬:</label>
+                <select id="sort-select" class="text-sm border border-gray-300 rounded px-2 py-1
+                             focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+                  <option value="price_asc" selected="">가격 낮은순</option>
+                  <option value="price_desc">가격 높은순</option>
+                  <option value="name_asc">이름순</option>
+                  <option value="name_desc">이름 역순</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 상품 목록 -->
+        <div class="mb-6">
+          <div>
+            <!-- 상품 그리드 -->
+            <div class="grid grid-cols-2 gap-4 mb-6" id="products-grid">
+              <!-- 로딩 스켈레톤 -->
+              <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
+                <div class="aspect-square bg-gray-200"></div>
+                <div class="p-3">
+                  <div class="h-4 bg-gray-200 rounded mb-2"></div>
+                  <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
+                  <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
+                  <div class="h-8 bg-gray-200 rounded"></div>
+                </div>
+              </div>
+              <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
+                <div class="aspect-square bg-gray-200"></div>
+                <div class="p-3">
+                  <div class="h-4 bg-gray-200 rounded mb-2"></div>
+                  <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
+                  <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
+                  <div class="h-8 bg-gray-200 rounded"></div>
+                </div>
+              </div>
+              <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
+                <div class="aspect-square bg-gray-200"></div>
+                <div class="p-3">
+                  <div class="h-4 bg-gray-200 rounded mb-2"></div>
+                  <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
+                  <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
+                  <div class="h-8 bg-gray-200 rounded"></div>
+                </div>
+              </div>
+              <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
+                <div class="aspect-square bg-gray-200"></div>
+                <div class="p-3">
+                  <div class="h-4 bg-gray-200 rounded mb-2"></div>
+                  <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
+                  <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
+                  <div class="h-8 bg-gray-200 rounded"></div>
+                </div>
+              </div>
+            </div>
+            
+            <div class="text-center py-4">
+              <div class="inline-flex items-center">
+                <svg class="animate-spin h-5 w-5 text-blue-600 mr-2" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" 
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                <span class="text-sm text-gray-600">상품을 불러오는 중...</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+      <footer class="bg-white shadow-sm sticky top-0 z-40">
+        <div class="max-w-md mx-auto py-8 text-center text-gray-500">
+          <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
+        </div>
+      </footer>
+    </div>
+  `;
+
+function updateURLParams(params) {
+  const searchParams = new URLSearchParams();
+  if (params.limit && params.limit !== 20) {
+    searchParams.set("limit", params.limit.toString());
+  }
+  if (params.search) {
+    searchParams.set("search", params.search);
+  }
+  if (params.category1) {
+    searchParams.set("category1", params.category1);
+  }
+  if (params.category2) {
+    searchParams.set("category2", params.category2);
+  }
+  if (params.sort && params.sort !== "price_asc") {
+    searchParams.set("sort", params.sort);
+  }
+
+  const newURL = searchParams.toString()
+    ? `${window.location.pathname}?${searchParams.toString()}`
+    : window.location.pathname;
+  window.history.pushState({}, "", newURL);
+}
+
+function updateProductList(params) {
+  updateURLParams(params);
+  renderProductList(params, true);
+}
+
+let infiniteScrollState = {
+  currentPage: 1,
+  isLoading: false,
+  hasMore: false,
+  params: null,
+};
+
+function createSkeletonCards(count = 4) {
+  return Array(count)
+    .fill(0)
+    .map(
+      () => `
+    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden animate-pulse">
+      <div class="aspect-square bg-gray-200"></div>
+      <div class="p-3">
+        <div class="h-4 bg-gray-200 rounded mb-2"></div>
+        <div class="h-3 bg-gray-200 rounded w-2/3 mb-2"></div>
+        <div class="h-5 bg-gray-200 rounded w-1/2 mb-3"></div>
+        <div class="h-8 bg-gray-200 rounded"></div>
+      </div>
+    </div>
+  `,
+    )
+    .join("");
+}
+
+function createLoadingIndicator() {
+  return `
+    <div class="text-center py-4">
+      <div class="inline-flex items-center">
+        <svg class="animate-spin h-5 w-5 text-blue-600 mr-2" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" 
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <span class="text-sm text-gray-600">상품을 불러오는 중...</span>
+      </div>
+    </div>
+  `;
+}
+
+async function loadNextPage() {
+  if (infiniteScrollState.isLoading || !infiniteScrollState.hasMore || !infiniteScrollState.params) {
+    return;
+  }
+
+  const { params, currentPage } = infiniteScrollState;
+  const nextPage = currentPage + 1;
+
+  infiniteScrollState.isLoading = true;
+
+  const productsGrid = document.getElementById("products-grid");
+  if (!productsGrid) {
+    infiniteScrollState.isLoading = false;
+    return;
+  }
+
+  const existingMessage = productsGrid.parentElement.querySelector(".text-center.py-4.text-sm.text-gray-500");
+  if (existingMessage) {
+    existingMessage.remove();
+  }
+
+  const loadingIndicator = document.createElement("div");
+  loadingIndicator.innerHTML = createLoadingIndicator();
+  productsGrid.parentElement.appendChild(loadingIndicator);
+
+  const skeletonContainer = document.createElement("div");
+  skeletonContainer.className = "grid grid-cols-2 gap-4 mb-6";
+  skeletonContainer.innerHTML = createSkeletonCards(4);
+  productsGrid.parentElement.appendChild(skeletonContainer);
+
+  try {
+    const productsResponse = await getProducts({
+      ...params,
+      page: nextPage,
+    });
+
+    const { products = [], pagination = {} } = productsResponse;
+
+    skeletonContainer.remove();
+    loadingIndicator.remove();
+
+    if (products.length > 0) {
+      productsGrid.innerHTML += products.map((product) => createProductCard(product)).join("");
+      infiniteScrollState.currentPage = nextPage;
+      infiniteScrollState.hasMore = pagination.hasNext || false;
+
+      if (!infiniteScrollState.hasMore) {
+        const endMessage = document.createElement("div");
+        endMessage.className = "text-center py-4 text-sm text-gray-500";
+        endMessage.textContent = "모든 상품을 확인했습니다";
+        productsGrid.parentElement.appendChild(endMessage);
+      }
+    } else {
+      infiniteScrollState.hasMore = false;
+      const endMessage = document.createElement("div");
+      endMessage.className = "text-center py-4 text-sm text-gray-500";
+      endMessage.textContent = "모든 상품을 확인했습니다";
+      productsGrid.parentElement.appendChild(endMessage);
+    }
+  } catch (error) {
+    console.error("다음 페이지 로드 실패:", error);
+    skeletonContainer.remove();
+    loadingIndicator.remove();
+  } finally {
+    infiniteScrollState.isLoading = false;
+  }
+}
+
+function handleScroll() {
+  const scrollHeight = document.documentElement.scrollHeight;
+  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+  const clientHeight = document.documentElement.clientHeight;
+
+  if (scrollHeight - scrollTop - clientHeight < 100) {
+    loadNextPage();
+  }
+}
+
+function removeScrollListener() {
+  window.removeEventListener("scroll", handleScroll);
+}
+
+function addScrollListener() {
+  window.addEventListener("scroll", handleScroll, { passive: true });
+}
+
+let cartIconClickHandlerSetup = false;
+function setupCartIconClick() {
+  if (cartIconClickHandlerSetup) {
+    return;
+  }
+  cartIconClickHandlerSetup = true;
+
+  document.addEventListener("click", (e) => {
+    const cartIconBtn = e.target.closest("#cart-icon-btn");
+    if (cartIconBtn) {
+      e.preventDefault();
+      openCartModal();
+    }
+  });
+}
+
+let cartButtonHandlerSetup = false;
+function setupCartButtons() {
+  if (cartButtonHandlerSetup) {
+    return;
+  }
+  cartButtonHandlerSetup = true;
+
+  document.addEventListener("click", async (e) => {
+    const addToCartBtn = e.target.closest(".add-to-cart-btn");
+    if (addToCartBtn) {
+      e.preventDefault();
+      e.stopPropagation();
+      const productId = addToCartBtn.getAttribute("data-product-id");
+      if (productId) {
+        try {
+          const product = await getProduct(productId);
+
+          addToCart(productId, {
+            title: product.title,
+            image: product.image,
+            lprice: product.lprice,
+            brand: product.brand,
+          });
+
+          showToast("success", "장바구니에 추가되었습니다");
+        } catch (error) {
+          console.error("장바구니 추가 실패:", error);
+          showToast("error", "상품을 장바구니에 추가하는 중 오류가 발생했습니다.");
+        }
+      }
+    }
+  });
+}
+
+let categoryFilterHandlerSetup = false;
+function setupCategoryFilters() {
+  if (categoryFilterHandlerSetup) {
+    return;
+  }
+  categoryFilterHandlerSetup = true;
+
+  document.addEventListener("click", (e) => {
+    const category1Btn = e.target.closest(".category1-filter-btn");
+    if (category1Btn) {
+      e.preventDefault();
+      const category1 = category1Btn.getAttribute("data-category1");
+      if (category1) {
+        updateProductList({ limit: 20, search: "", category1, category2: "", sort: "price_asc" });
+      }
+      return;
+    }
+
+    const category2Btn = e.target.closest(".category2-filter-btn");
+    if (category2Btn) {
+      e.preventDefault();
+      const category1 = category2Btn.getAttribute("data-category1");
+      const category2 = category2Btn.getAttribute("data-category2");
+      if (category1 && category2) {
+        updateProductList({ limit: 20, search: "", category1, category2, sort: "price_asc" });
+      }
+      return;
+    }
+
+    const breadcrumbCategory1Btn = e.target.closest("[data-breadcrumb='category1']");
+    if (breadcrumbCategory1Btn) {
+      e.preventDefault();
+      const category1 = breadcrumbCategory1Btn.getAttribute("data-category1");
+      if (category1) {
+        const currentParams = getQueryParams();
+        updateProductList({
+          limit: currentParams.limit || 20,
+          search: currentParams.search || "",
+          category1,
+          category2: "",
+          sort: currentParams.sort || "price_asc",
+        });
+      }
+      return;
+    }
+
+    const resetBtn = e.target.closest("[data-breadcrumb='reset']");
+    if (resetBtn) {
+      e.preventDefault();
+      updateProductList({ limit: 20, search: "", category1: "", category2: "", sort: "price_asc" });
+      return;
+    }
+  });
+}
+
+function setupBreadcrumb(category1, category2) {
+  const categoryFilterSection = document.querySelector(".space-y-2");
+  if (!categoryFilterSection) return;
+
+  const labelContainer = categoryFilterSection.querySelector(".flex.items-center.gap-2");
+  if (!labelContainer) return;
+
+  const resetButton = labelContainer.querySelector("[data-breadcrumb='reset']");
+
+  if (category1 || category2) {
+    let breadcrumbHTML = `<button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button>`;
+
+    if (category1) {
+      breadcrumbHTML += `<span class="text-xs text-gray-500">&gt;</span>`;
+      breadcrumbHTML += `<button data-breadcrumb="category1" data-category1="${category1}" class="text-xs hover:text-blue-800 hover:underline">${category1}</button>`;
+    }
+
+    if (category2) {
+      breadcrumbHTML += `<span class="text-xs text-gray-500">&gt;</span>`;
+      breadcrumbHTML += `<span class="text-xs text-gray-600 cursor-default">${category2}</span>`;
+    }
+
+    if (resetButton) {
+      resetButton.outerHTML = breadcrumbHTML;
+    } else {
+      labelContainer.insertAdjacentHTML("beforeend", breadcrumbHTML);
+    }
+  } else {
+    if (resetButton) {
+      return;
+    } else {
+      labelContainer.insertAdjacentHTML(
+        "beforeend",
+        `<button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button>`,
+      );
+    }
+  }
+}
+
+let productClickHandlerSetup = false;
+function setupProductClickHandlers() {
+  if (productClickHandlerSetup) {
+    return;
+  }
+  productClickHandlerSetup = true;
+
+  document.addEventListener("click", (e) => {
+    if (e.target.closest(".add-to-cart-btn")) {
+      return;
+    }
+
+    const productImage = e.target.closest(".product-image");
+    const productInfo = e.target.closest(".product-info");
+    const productCard = e.target.closest(".product-card");
+
+    if (productImage || productInfo || productCard) {
+      const card = productCard || e.target.closest("[data-product-id]");
+      if (card) {
+        const productId = card.getAttribute("data-product-id");
+        if (productId) {
+          const router = window.__router__;
+          if (router) {
+            router.navigate(`/product/${productId}`);
+          } else {
+            window.location.href = `/product/${productId}`;
+          }
+        }
+      }
+    }
+  });
+}
+
+export async function renderProductList(params = {}, isInitialLoad = true) {
+  const { limit = 20, search = "", category1 = "", category2 = "", sort = "price_asc" } = params;
+
+  if (isInitialLoad) {
+    removeScrollListener();
+
+    const root = document.getElementById("root") || document.body;
+    root.innerHTML = productListLoadingLayout;
+
+    infiniteScrollState = {
+      currentPage: 1,
+      isLoading: false,
+      hasMore: false,
+      params: { limit, search, category1, category2, sort },
+    };
+  }
+
+  try {
+    const [productsResponse, categoriesResponse] = await Promise.all([
+      getProducts({
+        limit,
+        search,
+        category1,
+        category2,
+        sort,
+        page: isInitialLoad ? 1 : infiniteScrollState.currentPage,
+      }),
+      getCategories(),
+    ]);
+
+    const { products = [], pagination = {} } = productsResponse;
+    const totalCount = pagination.total || 0;
+    const categories = categoriesResponse || {};
+
+    infiniteScrollState.hasMore = pagination.hasNext || false;
+    if (isInitialLoad) {
+      infiniteScrollState.currentPage = 1;
+    }
+
+    if (isInitialLoad) {
+      const category1Container = document.querySelector(".space-y-2 .flex.flex-wrap.gap-2");
+      if (category1Container) {
+        const category1List = Object.keys(categories);
+        if (category1List.length > 0) {
+          category1Container.innerHTML = category1List
+            .map((cat1) => {
+              const isActive = cat1 === category1;
+              const activeClass = isActive
+                ? "bg-blue-100 border-blue-300 text-blue-800"
+                : "bg-white border-gray-300 text-gray-700 hover:bg-gray-50";
+              return `
+                <button data-category1="${cat1}" class="category1-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors ${activeClass}">
+                  ${cat1}
+                </button>
+              `;
+            })
+            .join("");
+        }
+      }
+
+      if (category1 && categories[category1]) {
+        const category2Container = category1Container?.nextElementSibling;
+        if (
+          category2Container &&
+          category2Container.classList.contains("flex") &&
+          category2Container.classList.contains("flex-wrap")
+        ) {
+          const category2List = Object.keys(categories[category1]);
+          if (category2List.length > 0) {
+            category2Container.innerHTML = category2List
+              .map((cat2) => createCategory2Button(category1, cat2, cat2 === category2))
+              .join("");
+          }
+        } else {
+          const category2Container = document.createElement("div");
+          category2Container.className = "flex flex-wrap gap-2 mt-2";
+          const category2List = Object.keys(categories[category1]);
+          if (category2List.length > 0) {
+            category2Container.innerHTML = category2List
+              .map((cat2) => createCategory2Button(category1, cat2, cat2 === category2))
+              .join("");
+            if (category1Container && category1Container.parentElement) {
+              category1Container.parentElement.insertBefore(category2Container, category1Container.nextSibling);
+            }
+          }
+        }
+      } else {
+        const category2Container = category1Container?.nextElementSibling;
+        if (
+          category2Container &&
+          category2Container.classList.contains("flex") &&
+          category2Container.classList.contains("flex-wrap")
+        ) {
+          category2Container.remove();
+        }
+      }
+    }
+
+    const productsGrid = document.getElementById("products-grid");
+    if (productsGrid) {
+      if (products.length > 0) {
+        if (isInitialLoad) {
+          productsGrid.innerHTML = products.map((product) => createProductCard(product)).join("");
+        } else {
+          productsGrid.innerHTML += products.map((product) => createProductCard(product)).join("");
+        }
+
+        const productListContainer = productsGrid.closest(".mb-6 > div");
+        if (productListContainer) {
+          let countInfo = productListContainer.querySelector(".mb-4.text-sm.text-gray-600");
+          if (!countInfo) {
+            countInfo = document.createElement("div");
+            countInfo.className = "mb-4 text-sm text-gray-600";
+            productListContainer.insertBefore(countInfo, productsGrid);
+          }
+          countInfo.innerHTML = `총 <span class="font-medium text-gray-900">${totalCount}개</span>의 상품`;
+
+          if (isInitialLoad) {
+            const loadingIndicator = productListContainer.querySelector(".text-center.py-4");
+            if (loadingIndicator) {
+              loadingIndicator.remove();
+            }
+
+            addScrollListener();
+          }
+        }
+      } else {
+        if (isInitialLoad) {
+          productsGrid.innerHTML = `
+            <div class="col-span-2 text-center py-8 text-gray-500">
+              상품이 없습니다.
+            </div>
+          `;
+        }
+      }
+    }
+
+    const searchInput = document.getElementById("search-input");
+    if (searchInput) {
+      searchInput.value = search;
+
+      searchInput.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          const searchTerm = searchInput.value.trim();
+          updateProductList({ ...params, search: searchTerm });
+        }
+      });
+    }
+
+    const limitSelect = document.getElementById("limit-select");
+    if (limitSelect) {
+      limitSelect.value = limit.toString();
+      limitSelect.addEventListener("change", (e) => {
+        const newLimit = parseInt(e.target.value);
+        updateProductList({ ...params, limit: newLimit });
+      });
+    }
+
+    const sortSelect = document.getElementById("sort-select");
+    if (sortSelect) {
+      sortSelect.value = sort;
+      sortSelect.addEventListener("change", (e) => {
+        const newSort = e.target.value;
+        updateProductList({ ...params, sort: newSort });
+      });
+    }
+
+    setupCategoryFilters();
+
+    setupBreadcrumb(category1, category2);
+
+    setupCartButtons();
+
+    setupCartIconClick();
+
+    setupProductClickHandlers();
+
+    updateCartIcon();
+  } catch (error) {
+    console.error("상품 목록 로드 실패:", error);
+    const productsGrid = document.getElementById("products-grid");
+    if (productsGrid) {
+      productsGrid.innerHTML = `
+        <div class="col-span-2 text-center py-8">
+          <p class="text-red-600 mb-4">상품을 불러오는 중 오류가 발생했습니다.</p>
+          <button id="retry-btn" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
+            다시 시도
+          </button>
+        </div>
+      `;
+
+      const retryBtn = document.getElementById("retry-btn");
+      if (retryBtn) {
+        retryBtn.addEventListener("click", () => {
+          renderProductList(params);
+        });
+      }
+    }
+  }
+}
+
+export const productListLoadedLayout = `
+    <div class="bg-gray-50">
+      <header class="bg-white shadow-sm sticky top-0 z-40">
+        <div class="max-w-md mx-auto px-4 py-4">
+          <div class="flex items-center justify-between">
+            <h1 class="text-xl font-bold text-gray-900">
+              <a href="/" data-link="">쇼핑몰</a>
+            </h1>
+            <div class="flex items-center space-x-2">
+              <!-- 장바구니 아이콘 -->
+              <button id="cart-icon-btn" class="relative p-2 text-gray-700 hover:text-gray-900 transition-colors">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M3 3h2l.4 2M7 13h10l4-8H5.4m2.6 8L6 2H3m4 11v6a1 1 0 001 1h1a1 1 0 001-1v-6M13 13v6a1 1 0 001 1h1a1 1 0 001-1v-6"></path>
+                </svg>
+                <span
+                  class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">4</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+      <main class="max-w-md mx-auto px-4 py-4">
+        <!-- 검색 및 필터 -->
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
+          <!-- 검색창 -->
+          <div class="mb-4">
+            <div class="relative">
+              <input type="text" id="search-input" placeholder="상품명을 검색해보세요..." value="" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg
+                          focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                </svg>
+              </div>
+            </div>
+          </div>
+          <!-- 필터 옵션 -->
+          <div class="space-y-3">
+            <!-- 카테고리 필터 -->
+            <div class="space-y-2">
+              <div class="flex items-center gap-2">
+                <label class="text-sm text-gray-600">카테고리:</label>
+                <button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button>
+              </div>
+              <!-- 1depth 카테고리 -->
+              <div class="flex flex-wrap gap-2">
+                <button data-category1="생활/건강" class="category1-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors
+                   bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
+                  생활/건강
+                </button>
+                <button data-category1="디지털/가전" class="category1-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors
+                   bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
+                  디지털/가전
+                </button>
+              </div>
+              <!-- 2depth 카테고리 -->
+            </div>
+            <!-- 기존 필터들 -->
+            <div class="flex gap-2 items-center justify-between">
+              <!-- 페이지당 상품 수 -->
+              <div class="flex items-center gap-2">
+                <label class="text-sm text-gray-600">개수:</label>
+                <select id="limit-select"
+                        class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+                  <option value="10">
+                    10개
+                  </option>
+                  <option value="20" selected="">
+                    20개
+                  </option>
+                  <option value="50">
+                    50개
+                  </option>
+                  <option value="100">
+                    100개
+                  </option>
+                </select>
+              </div>
+              <!-- 정렬 -->
+              <div class="flex items-center gap-2">
+                <label class="text-sm text-gray-600">정렬:</label>
+                <select id="sort-select" class="text-sm border border-gray-300 rounded px-2 py-1
+                             focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+                  <option value="price_asc" selected="">가격 낮은순</option>
+                  <option value="price_desc">가격 높은순</option>
+                  <option value="name_asc">이름순</option>
+                  <option value="name_desc">이름 역순</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 상품 목록 -->
+        <div class="mb-6">
+          <div>
+            <!-- 상품 개수 정보 -->
+            <div class="mb-4 text-sm text-gray-600">
+              총 <span class="font-medium text-gray-900">340개</span>의 상품
+            </div>
+            <!-- 상품 그리드 -->
+            <div class="grid grid-cols-2 gap-4 mb-6" id="products-grid">
+              <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden product-card"
+                   data-product-id="85067212996">
+                <!-- 상품 이미지 -->
+                <div class="aspect-square bg-gray-100 overflow-hidden cursor-pointer product-image">
+                  <img src="https://shopping-phinf.pstatic.net/main_8506721/85067212996.1.jpg"
+                       alt="PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장"
+                       class="w-full h-full object-cover hover:scale-105 transition-transform duration-200"
+                       loading="lazy">
+                </div>
+                <!-- 상품 정보 -->
+                <div class="p-3">
+                  <div class="cursor-pointer product-info mb-3">
+                    <h3 class="text-sm font-medium text-gray-900 line-clamp-2 mb-1">
+                      PVC 투명 젤리 쇼핑백 1호 와인 답례품 구디백 비닐 손잡이 미니 간식 선물포장
+                    </h3>
+                    <p class="text-xs text-gray-500 mb-2"></p>
+                    <p class="text-lg font-bold text-gray-900">
+                      220원
+                    </p>
+                  </div>
+                  <!-- 장바구니 버튼 -->
+                  <button class="w-full bg-blue-600 text-white text-sm py-2 px-3 rounded-md
+                         hover:bg-blue-700 transition-colors add-to-cart-btn" data-product-id="85067212996">
+                    장바구니 담기
+                  </button>
+                </div>
+              </div>
+              <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden product-card"
+                   data-product-id="86940857379">
+                <!-- 상품 이미지 -->
+                <div class="aspect-square bg-gray-100 overflow-hidden cursor-pointer product-image">
+                  <img src="https://shopping-phinf.pstatic.net/main_8694085/86940857379.1.jpg"
+                       alt="샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이"
+                       class="w-full h-full object-cover hover:scale-105 transition-transform duration-200"
+                       loading="lazy">
+                </div>
+                <!-- 상품 정보 -->
+                <div class="p-3">
+                  <div class="cursor-pointer product-info mb-3">
+                    <h3 class="text-sm font-medium text-gray-900 line-clamp-2 mb-1">
+                      샷시 풍지판 창문 바람막이 베란다 문 틈막이 창틀 벌레 차단 샤시 방충망 틈새막이
+                    </h3>
+                    <p class="text-xs text-gray-500 mb-2">이지웨이건축자재</p>
+                    <p class="text-lg font-bold text-gray-900">
+                      230원
+                    </p>
+                  </div>
+                  <!-- 장바구니 버튼 -->
+                  <button class="w-full bg-blue-600 text-white text-sm py-2 px-3 rounded-md
+                         hover:bg-blue-700 transition-colors add-to-cart-btn" data-product-id="86940857379">
+                    장바구니 담기
+                  </button>
+                </div>
+              </div>
+            </div>
+            
+            <div class="text-center py-4 text-sm text-gray-500">
+              모든 상품을 확인했습니다
+            </div>
+          </div>
+        </div>
+      </main>
+      <footer class="bg-white shadow-sm sticky top-0 z-40">
+        <div class="max-w-md mx-auto py-8 text-center text-gray-500">
+          <p>© 2025 항해플러스 프론트엔드 쇼핑몰</p>
+        </div>
+      </footer>
+    </div>
+  `;
+
+export const productListCategoryDepth1Layout = `
+    <main class="max-w-md mx-auto px-4 py-4">
+      <!-- 검색 및 필터 -->
+      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
+        <!-- 검색창 -->
+        <div class="mb-4">
+          <div class="relative">
+            <input type="text" id="search-input" placeholder="상품명을 검색해보세요..." value="" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg
+                        focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+              </svg>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 필터 옵션 -->
+        <div class="space-y-3">
+
+          <!-- 카테고리 필터 -->
+          <div class="space-y-2">
+            <div class="flex items-center gap-2">
+              <label class="text-sm text-gray-600">카테고리:</label>
+              <button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button><span class="text-xs text-gray-500">&gt;</span><button data-breadcrumb="category1" data-category1="생활/건강" class="text-xs hover:text-blue-800 hover:underline">생활/건강</button>
+            </div>
+            <div class="space-y-2">
+              <div class="flex flex-wrap gap-2">
+                <button data-category1="생활/건강" data-category2="생활용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
+                  생활용품
+                </button>
+                <button data-category1="생활/건강" data-category2="주방용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
+                  주방용품
+                </button>
+                <button data-category1="생활/건강" data-category2="문구/사무용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
+                  문구/사무용품
+                </button>
+              </div>
+            </div>
+          </div>
+          
+          <!-- 기존 필터들 -->
+          <div class="flex gap-2 items-center justify-between">
+            <!-- 페이지당 상품 수 -->
+            <div class="flex items-center gap-2">
+              <label class="text-sm text-gray-600">개수:</label>
+              <select id="limit-select"
+                      class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+                <option value="10">
+                  10개
+                </option>
+                <option value="20" selected="">
+                  20개
+                </option>
+                <option value="50">
+                  50개
+                </option>
+                <option value="100">
+                  100개
+                </option>
+              </select>
+            </div>
+            <!-- 정렬 -->
+            <div class="flex items-center gap-2">
+              <label class="text-sm text-gray-600">정렬:</label>
+              <select id="sort-select" class="text-sm border border-gray-300 rounded px-2 py-1
+                           focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+                <option value="price_asc" selected="">가격 낮은순</option>
+                <option value="price_desc">가격 높은순</option>
+                <option value="name_asc">이름순</option>
+                <option value="name_desc">이름 역순</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  `;
+
+export const productListCategoryDepth2Layout = `
+    <main class="max-w-md mx-auto px-4 py-4">
+      <!-- 검색 및 필터 -->
+      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4">
+        <!-- 검색창 -->
+        <div class="mb-4">
+          <div class="relative">
+            <input type="text" id="search-input" placeholder="상품명을 검색해보세요..." value="" class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg
+                        focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+              </svg>
+            </div>
+          </div>
+        </div>
+        
+        <!-- 필터 옵션 -->
+        <div class="space-y-3">
+
+          <!-- 카테고리 필터 -->
+          <div class="space-y-2">
+            <div class="flex items-center gap-2">
+              <label class="text-sm text-gray-600">카테고리:</label>
+              <button data-breadcrumb="reset" class="text-xs hover:text-blue-800 hover:underline">전체</button><span class="text-xs text-gray-500">&gt;</span><button data-breadcrumb="category1" data-category1="생활/건강" class="text-xs hover:text-blue-800 hover:underline">생활/건강</button><span class="text-xs text-gray-500">&gt;</span><span class="text-xs text-gray-600 cursor-default">주방용품</span>
+            </div>
+            <div class="space-y-2">
+              <div class="flex flex-wrap gap-2">
+                <button data-category1="생활/건강" data-category2="생활용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
+                  생활용품
+                </button>
+                <button data-category1="생활/건강" data-category2="주방용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-blue-100 border-blue-300 text-blue-800">
+                  주방용품
+                </button>
+                <button data-category1="생활/건강" data-category2="문구/사무용품" class="category2-filter-btn text-left px-3 py-2 text-sm rounded-md border transition-colors bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
+                  문구/사무용품
+                </button>
+              </div>
+            </div>
+          </div>
+          
+          <!-- 기존 필터들 -->
+          <div class="flex gap-2 items-center justify-between">
+            <!-- 페이지당 상품 수 -->
+            <div class="flex items-center gap-2">
+              <label class="text-sm text-gray-600">개수:</label>
+              <select id="limit-select"
+                      class="text-sm border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+                <option value="10">
+                  10개
+                </option>
+                <option value="20" selected="">
+                  20개
+                </option>
+                <option value="50">
+                  50개
+                </option>
+                <option value="100">
+                  100개
+                </option>
+              </select>
+            </div>
+            <!-- 정렬 -->
+            <div class="flex items-center gap-2">
+              <label class="text-sm text-gray-600">정렬:</label>
+              <select id="sort-select" class="text-sm border border-gray-300 rounded px-2 py-1
+                           focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
+                <option value="price_asc" selected="">가격 낮은순</option>
+                <option value="price_desc">가격 높은순</option>
+                <option value="name_asc">이름순</option>
+                <option value="name_desc">이름 역순</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  `;
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 00000000..58fb6f69
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from "vite";
+
+// GitHub Pages 배포를 위한 base 경로 설정
+// 저장소 이름: front_7th_chapter2-1
+export default defineConfig({
+  base: process.env.NODE_ENV === "production" ? "/front_7th_chapter2-1/" : "/",
+  build: {
+    outDir: "dist",
+  },
+});