hanghae-plus · Thomas97-J · Sep 26, 2025 · Nov 10, 2025 · Nov 11, 2025 · Nov 11, 2025
diff --git a/.prettierrc b/.prettierrc
@@ -2,5 +2,6 @@
   "tabWidth": 2,
   "semi": true,
   "singleQuote": false,
-  "printWidth": 120
+  "printWidth": 120,
+  "embeddedLanguageFormatting": "auto"
 }
diff --git a/cart-modal.html b/cart-modal.html
diff --git a/public/404.html b/public/404.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>상품 쇼핑몰</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: "#3b82f6",
+              secondary: "#6b7280",
+            },
+          },
+        },
+      };
+    </script>
+    <script type="module" crossorigin src="/front_7th_chapter2-1/assets/index-B4v_IRqa.js"></script>
+    <link rel="stylesheet" crossorigin href="/front_7th_chapter2-1/assets/index-CdOd2oIW.css" />
+  </head>
+  <body class="bg-gray-50">
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/api/productApi.js b/src/api/productApi.js
@@ -19,6 +19,7 @@ export async function getProducts(params = {}) {
 
 // 상품 상세 조회
 export async function getProduct(productId) {
+  console.log("productId", productId);
   const response = await fetch(`/api/products/${productId}`);
   return await response.json();
 }

diff --git a/src/components/CartModal.js b/src/components/CartModal.js
@@ -0,0 +1,244 @@
+/**
+ * 모달 래퍼
+ */
+const CartModalWrapper = (content) => /* html */ `
+<div class="fixed inset-0 bg-black bg-opacity-50 z-50 flex min-h-full items-end justify-center p-0 sm:items-center sm:p-4 cart-modal-overlay">
+  <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 cart-modal">
+    ${content}
+  </div>
+</div>
+`;
+
+/**
+ * 헤더
+ */
+const CartModalHeader = (itemCount = 0) => /* html */ `
+<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>
+    장바구니
+    ${itemCount > 0 ? `<span class="text-sm font-normal text-gray-600 ml-1">(${itemCount})</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>
+`;
+
+/**
+ * 컨텐츠 래퍼
+ */
+const CartModalContentWrapper = (content) => /* html */ `
+<div class="flex flex-col max-h-[calc(90vh-120px)]">
+  ${content}
+</div>
+`;
+
+/**
+ * 전체 선택 섹션
+ */
+const CartModalSelectAll = (itemCount, isAllSelected = false) => /* html */ `
+<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" 
+      ${isAllSelected ? "checked" : ""}
+      class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2"
+    >
+    전체선택 (${itemCount}개)
+  </label>
+</div>
+`;
+
+/**
+ * 아이템 목록 래퍼
+ */
+const CartModalItemsWrapper = (items) => /* html */ `
+<div class="flex-1 overflow-y-auto">
+  <div class="p-4 space-y-4">
+    ${items}
+  </div>
+</div>
+`;
+
+/**
+ * 개별 아이템 카드
+ */
+const CartModalItem = (item, isSelected = false) => /* html */ `
+<div class="flex items-center py-3 border-b border-gray-100 cart-item" data-product-id="${item.id}">
+  <!-- 선택 체크박스 -->
+  <label class="flex items-center mr-3">
+    <input 
+      type="checkbox" 
+      ${isSelected ? "checked" : ""}
+      class="cart-item-checkbox w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" 
+      data-product-id="${item.id}"
+    >
+  </label>
+
+  <!-- 상품 이미지 -->
+  <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
+    <img 
+      src="${item.image}" 
+      alt="${item.title}" 
+      class="w-full h-full object-cover cursor-pointer cart-item-image" 
+      data-product-id="${item.id}"
+    >
+  </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="${item.id}">
+      ${item.title}
+    </h4>
+    <p class="text-sm text-gray-600 mt-1">
+      ${item.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="${item.id}">
+        <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="${item.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" 
+        disabled 
+        data-product-id="${item.id}"
+      >
+      <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="${item.id}">
+        <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">
+      ${(item.price * item.quantity).toLocaleString()}원
+    </p>
+    <button class="cart-item-remove-btn mt-1 text-xs text-red-600 hover:text-red-800" data-product-id="${item.id}">
+      삭제
+    </button>
+  </div>
+</div>
+`;
+
+/**
+ * 빈 장바구니 UI
+ */
+const CartModalEmptyState = () => /* html */ `
+<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>
+`;
+
+/**
+ * 하단 액션 버튼 영역
+ */
+const CartModalFooter = ({ selectedCount = 0, selectedAmount = 0, totalAmount = 0 }) => /* html */ `
+<div class="sticky bottom-0 bg-white border-t border-gray-200 p-4">
+  ${
+    selectedCount > 0
+      ? /* html */ `
+    <!-- 선택된 아이템 정보 -->
+    <div class="flex justify-between items-center mb-3 text-sm">
+      <span class="text-gray-600">선택한 상품 (${selectedCount}개)</span>
+      <span class="font-medium">${selectedAmount.toLocaleString()}원</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">${totalAmount.toLocaleString()}원</span>
+  </div>
+
+  <!-- 액션 버튼들 -->
+  <div class="space-y-2">
+    ${
+      selectedCount > 0
+        ? /* html */ `
+      <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"
+      >
+        선택한 상품 삭제 (${selectedCount}개)
+      </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>
+`;
+
+/**
+ * 장바구니 모달 메인 컴포넌트
+ * @param {Array} cartItems - 장바구니 아이템 배열
+ * @param {Array} selectedItems - 선택된 아이템 ID 배열
+ * @returns {string} HTML 문자열
+ */
+export const CartModal = ({ cartItems = [], selectedItems = [] }) => {
+  // 장바구니가 비어있는 경우
+  if (cartItems.length === 0) {
+    return CartModalWrapper(CartModalHeader(0) + CartModalContentWrapper(CartModalEmptyState()));
+  }
+
+  // 총 금액 계산
+  const totalAmount = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
+
+  // 선택된 아이템 계산
+  const selectedCount = selectedItems.length;
+  const selectedAmount = cartItems
+    .filter((item) => selectedItems.includes(item.id))
+    .reduce((sum, item) => sum + item.price * item.quantity, 0);
+
+  // 전체 선택 여부
+  const isAllSelected = cartItems.length > 0 && selectedItems.length === cartItems.length;
+
+  // 아이템 목록 HTML 생성
+  const itemsHTML = cartItems.map((item) => CartModalItem(item, selectedItems.includes(item.id))).join("");
+
+  // 컨텐츠 조립
+  const content =
+    CartModalHeader(cartItems.length) +
+    CartModalContentWrapper(CartModalSelectAll(cartItems.length, isAllSelected) + CartModalItemsWrapper(itemsHTML)) +
+    CartModalFooter({ selectedCount, selectedAmount, totalAmount });
+
+  return CartModalWrapper(content);
+};
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -0,0 +1,7 @@
+export const Footer = () => {
+  return /* html */ `<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>© ${new Date().getFullYear()} 항해플러스 프론트엔드 쇼핑몰</p>
+    </div>
+  </footer>`;
+};
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -0,0 +1,62 @@
+import { getCartCount } from "../utils/cartStore.js";
+
+export const Header = ({ isDetailPage = false } = {}) => {
+  const cartCount = getCartCount();
+
+  if (isDetailPage) {
+    return /* html */ `
+      <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>
+                ${
+                  cartCount > 0
+                    ? `<span class="absolute top-0 right-0 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">${cartCount}</span>`
+                    : ""
+                }
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>`;
+  }
+
+  return /* html */ `
+    <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>
+              ${
+                cartCount > 0
+                  ? `<span class="absolute top-0 right-0 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">${cartCount}</span>`
+                  : ""
+              }
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>`;
+};