[4팀 박지영] Chapter2-1. 프레임워크 없이 SPA 만들기

.github/workflows/deploy.yml

@@ -0,0 +1,54 @@
+name: Deploy to GitHub Pages
+
+on:
+  push: # push trigger
+    branches:
+      - main
+      - release-* # release 브랜치도 배포
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.0.0
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Create SPA fallback
+        run: cp dist/index.html dist/404.html
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "./dist"
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ESNext",
+    "jsx": "preserve",
+    "checkJs": true,
+    "allowImportingTsExtensions": false
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package.json

@@ -1,9 +1,10 @@
 {
-  "name": "front-chapter1-1",
+  "name": "front-chapter2-1",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "msw:init": "msw init public/",
     "dev": "vite",
     "dev:hash": "vite --open ./index.hash.html",
     "build": "vite build",

src/components/cart/CartHeader.js

@@ -0,0 +1,18 @@
+export const CartHeader = () => {
+  return /*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>
+    장바구니
+  </h2>
+
+  <button data-link="/" 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>`;
+};

src/components/cart/CartIcon.js

@@ -0,0 +1,30 @@
+import { cartStore } from "../../store/cartStore";
+
+export const CartIcon = () => {
+  return /*html*/ `
+<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>
+  ${
+    cartStore.getTotalCount() === 0
+      ? ""
+      : `
+  <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">
+    ${cartStore.getTotalCount()}
+  </span>`
+  }
+
+</button>`;
+};
+
+const subscribeCartIcon = () => {
+  cartStore.subscribe(() => {
+    const cartIconBtn = document.getElementById("cart-icon-btn");
+    if (!cartIconBtn) return false;
+
+    cartIconBtn.innerHTML = CartIcon().trim();
+    return true;
+  });
+};
+subscribeCartIcon();

src/components/cart/CartList.js

@@ -0,0 +1,223 @@
+import { cartStore } from "../../store/cartStore.js";
+import { EmptyCart } from "./EmptyCart.js";
+
+const CART_LIST_CONTAINER_ID = "cart-list-container";
+let cleanupCartList = null;
+const selectedProductIds = new Set();
+
+const normalizeProductId = (productId) => {
+  if (productId === undefined || productId === null) return "";
+  return String(productId);
+};
+
+const syncSelectionWithCart = (products = []) => {
+  const validIds = new Set(products.map((product) => normalizeProductId(product.productId)));
+  Array.from(selectedProductIds).forEach((id) => {
+    if (!validIds.has(id)) {
+      selectedProductIds.delete(id);
+    }
+  });
+};
+
+const getSelectionSummary = (products = []) => {
+  let totalAmount = 0;
+  let selectedCount = 0;
+
+  products.forEach((product) => {
+    const normalizedId = normalizeProductId(product.productId);
+    if (selectedProductIds.has(normalizedId)) {
+      selectedCount += 1;
+      totalAmount += Number(product.lprice) * Number(product.quantity);
+    }
+  });
+
+  const allSelected = products.length > 0 && selectedCount === products.length;
+
+  return {
+    count: selectedCount,
+    amount: totalAmount,
+    allSelected,
+  };
+};
+
+const cartItem = ({ productId, title, image, lprice, quantity = 1 }, isChecked = false) => /*html*/ `
+<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}" ${
+      isChecked ? "checked" : ""
+    }>
+  </label>
+
+  <div class="w-16 h-16 bg-gray-100 rounded-lg overflow-hidden mr-3 flex-shrink-0">
+    <img src="${image}" alt="${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}">
+      ${title}
+    </h4>
+    <p class="text-sm text-gray-600 mt-1">${Number(lprice).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" disabled data-product-id="${productId}">
+      <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>`;
+
+const renderCartLayout = (cartProducts = []) => {
+  const products = Array.isArray(cartProducts) ? cartProducts : [];
+  if (products.length === 0) {
+    selectedProductIds.clear();
+    return EmptyCart;
+  }
+
+  syncSelectionWithCart(products);
+  const { count, amount, allSelected } = getSelectionSummary(products);
+
+  const selectAllCheckedAttr = allSelected ? "checked" : "";
+  const showSelectedSummary = count > 0 ? "flex" : "none";
+  const removeBtnDisplay = count > 0 ? "block" : "none";
+
+  return /*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" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2" ${selectAllCheckedAttr}>
+    전체선택 (${products.length}개)
+  </label>
+</div>
+
+<div class="flex-1 overflow-y-auto">
+  <div class="p-4 space-y-4">
+    ${products
+      .map((product) => cartItem(product, selectedProductIds.has(normalizeProductId(product.productId))))
+      .join("")}
+  </div>
+</div>
+
+<div class="sticky bottom-0 bg-white border-t border-gray-200 p-4">
+  <div id="cart-selected-amount" class="flex justify-between items-center mb-3 text-sm" style="display:${showSelectedSummary}">
+    <span class="text-gray-600">선택한 상품 (${count}개)</span>
+    <span class="font-medium">${amount.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">${Number(cartStore.getTotalAmount()).toLocaleString()}원</span>
+  </div>
+
+  <div class="space-y-2">
+    <button id="cart-modal-remove-selected-btn" style="display:${removeBtnDisplay}" class="w-full bg-red-600 text-white py-2 px-4 rounded-md hover:bg-red-700 transition-colors text-sm">
+      선택한 상품 삭제 (${count}개)
+    </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>
+`;
+};
+
+const updateCartListView = (cartProducts = []) => {
+  const container = document.getElementById(CART_LIST_CONTAINER_ID);
+  if (!container) return false;
+
+  if (!container.isConnected) {
+    destroyCartList();
+    return false;
+  }
+
+  container.innerHTML = renderCartLayout(cartProducts);
+  return true;
+};
+
+const mountCartList = () => {
+  destroyCartList();
+  const mounted = updateCartListView(cartStore.state.cart);
+  if (!mounted) return false;
+
+  const unsubscribe = cartStore.subscribe((cartProducts) => {
+    updateCartListView(cartProducts);
+  });
+
+  cleanupCartList = () => {
+    unsubscribe();
+    cleanupCartList = null;
+  };
+};
+
+const scheduleCartListMount = () => {
+  if (typeof window === "undefined") return;
+
+  window.requestAnimationFrame(() => {
+    if (!mountCartList()) {
+      window.setTimeout(mountCartList, 0);
+    }
+  });
+};
+
+export const destroyCartList = () => {
+  if (cleanupCartList) {
+    cleanupCartList();
+  }
+};
+
+const rerenderCartSelection = () => {
+  updateCartListView(cartStore.state.cart);
+};
+
+export const toggleCartItemSelection = (productId, isSelected) => {
+  const normalizedId = normalizeProductId(productId);
+  if (!normalizedId) return;
+
+  if (isSelected) {
+    selectedProductIds.add(normalizedId);
+  } else {
+    selectedProductIds.delete(normalizedId);
+  }
+
+  rerenderCartSelection();
+};
+
+export const selectAllCartItems = (isSelected) => {
+  if (isSelected) {
+    cartStore.state.cart.forEach((product) => selectedProductIds.add(normalizeProductId(product.productId)));
+  } else {
+    selectedProductIds.clear();
+  }
+
+  rerenderCartSelection();
+};
+
+export const getSelectedCartProductIds = () => Array.from(selectedProductIds);
+
+export const clearCartSelection = () => {
+  if (selectedProductIds.size === 0) return;
+  selectedProductIds.clear();
+  rerenderCartSelection();
+};
+
+export const CartList = () => {
+  scheduleCartListMount();
+
+  return /*html*/ `
+<div id="${CART_LIST_CONTAINER_ID}" class="flex flex-col max-h-[calc(90vh-120px)] overflow-hidden">
+  ${renderCartLayout(cartStore.state.cart)}
+</div>
+`;
+};

src/components/cart/EmptyCart.js

@@ -0,0 +1,12 @@
+export const EmptyCart = `
+<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>`;

src/components/cart/index.js

@@ -0,0 +1,3 @@
+export * from "./CartHeader.js";
+export * from "./CartList.js";
+export * from "./CartIcon.js";

src/components/category/BreadCrumb.js

@@ -0,0 +1 @@
+export const BreadCrumb = () => {};