hanghae-plus · CRITICBANGGU · Jan 7, 2025 · Jan 7, 2025 · Jan 7, 2025 · Jan 7, 2025
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,19 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "react", "react-hooks"],
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}
diff --git a/index.advanced.html b/index.advanced.html
@@ -1,13 +1,13 @@
 <!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>
-</head>
-<body class="bg-gray-100 p-8">
-<main id="app"></main>
-<script type="module" src="./src/advanced/main.advanced.js"></script>
-</body>
+  <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>
+  </head>
+  <body class="bg-gray-100 p-8">
+    <main id="app"></main>
+    <script type="module" src="./src/advanced/main.advanced.tsx"></script>
+  </body>
 </html>
diff --git a/index.html b/index.html
@@ -1,13 +1,13 @@
-<!doctype html>
-<html lang="en">
-<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>
-</head>
-<body class="bg-gray-100 p-8">
-<main id="app"></main>
-<script type="module" src="/src/main.original.js"></script>
-</body>
-</html>
+<!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>
+  </head>
+  <body class="bg-gray-100 p-8">
+    <main id="app"></main>
+    <script type="module" src="./src/basic/main.basic.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -10,8 +10,8 @@
     "start:basic": "vite serve --open ./index.basic.html",
     "start:advanced": "vite serve --open ./index.advanced.html",
     "test": "vitest",
-    "test:basic": "vitest basic.test.js",
-    "test:advanced": "vitest advanced.test.js",
+    "test:basic": "vitest basic.test",
+    "test:advanced": "vitest advanced.test",
     "test:ui": "vitest --ui"
   },
   "devDependencies": {
@@ -21,5 +21,14 @@
     "jsdom": "^25.0.0",
     "vite": "^5.1.0",
     "vitest": "^2.1.1"
+  },
+  "dependencies": {
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.0.4",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.7.3"
   }
 }
diff --git a/src/advanced/__tests__/advanced.test.js b/src/advanced/__tests__/advanced.test.js
diff --git a/src/advanced/__tests__/advanced.test.tsx b/src/advanced/__tests__/advanced.test.tsx
@@ -0,0 +1,12 @@
+import React from "react"; // React import 추가
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { App } from "../src/App";
+
+describe("advanced test", () => {
+  it("초기 상태: 상품 목록이 올바르게 렌더링 되는지 확인", () => {
+    render(<App />);
+    const select = screen.getByRole("combobox");
+    expect(select).toBeInTheDocument();
+  });
+});
diff --git a/src/advanced/main.advanced.js b/src/advanced/main.advanced.js
diff --git a/src/advanced/main.advanced.tsx b/src/advanced/main.advanced.tsx
@@ -0,0 +1,167 @@
+// import { PRODUCT_LIST } from "./src/data/prodList";
+// import { calculateCartTotals } from "./src/util/calculate";
+// import { handleDeleteToCart, updateCartList } from "./src/events/cartEvent";
+// var sel, addBtn, cartDisp, sum, stockInfo;
+// var lastSel,
+//   bonusPoints = 0;
+
+// function main() {
+//   var root = document.getElementById("app");
+//   let cont = document.createElement("div");
+//   var wrap = document.createElement("div");
+//   let hTxt = document.createElement("h1");
+//   cartDisp = document.createElement("div");
+//   sum = document.createElement("div");
+//   sel = document.createElement("select");
+//   addBtn = document.createElement("button");
+//   stockInfo = document.createElement("div");
+//   cartDisp.id = "cart-items";
+//   sum.id = "cart-total";
+//   sel.id = "product-select";
+//   addBtn.id = "add-to-cart";
+//   stockInfo.id = "stock-status";
+//   cont.className = "bg-gray-100 p-8";
+//   wrap.className =
+//     "max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl p-8";
+//   hTxt.className = "text-2xl font-bold mb-4";
+//   sum.className = "text-xl font-bold my-4";
+//   sel.className = "border rounded p-2 mr-2";
+//   addBtn.className = "bg-blue-500 text-white px-4 py-2 rounded";
+//   stockInfo.className = "text-sm text-gray-500 mt-2";
+//   hTxt.textContent = "장바구니";
+//   addBtn.textContent = "추가";
+//   updateSelOpts();
+//   wrap.appendChild(hTxt);
+//   wrap.appendChild(cartDisp);
+//   wrap.appendChild(sum);
+//   wrap.appendChild(sel);
+//   wrap.appendChild(addBtn);
+//   wrap.appendChild(stockInfo);
+//   cont.appendChild(wrap);
+//   root.appendChild(cont);
+//   calcCart();
+//   setTimeout(function () {
+//     setInterval(function () {
+//       var luckyItem =
+//         PRODUCT_LIST[Math.floor(Math.random() * PRODUCT_LIST.length)];
+//       if (Math.random() < 0.3 && luckyItem.stock > 0) {
+//         luckyItem.cost = Math.round(luckyItem.cost * 0.8);
+//         alert("번개세일! " + luckyItem.name + "이(가) 20% 할인 중입니다!");
+//         updateSelOpts();
+//       }
+//     }, 30000);
+//   }, Math.random() * 10000);
+//   setTimeout(function () {
+//     setInterval(function () {
+//       if (lastSel) {
+//         var suggest = PRODUCT_LIST.find(function (item) {
+//           return item.id !== lastSel && item.stock > 0;
+//         });
+//         if (suggest) {
+//           alert(
+//             suggest.name + "은(는) 어떠세요? 지금 구매하시면 5% 추가 할인!"
+//           );
+//           suggest.cost = Math.round(suggest.cost * 0.95);
+//           updateSelOpts();
+//         }
+//       }
+//     }, 60000);
+//   }, Math.random() * 20000);
+// }
+// function updateSelOpts() {
+//   sel.innerHTML = "";
+//   PRODUCT_LIST.forEach(function (item) {
+//     var opt = document.createElement("option");
+//     opt.value = item.id;
+//     opt.textContent = item.name + " - " + item.cost + "원";
+//     if (item.stock === 0) opt.disabled = true;
+//     sel.appendChild(opt);
+//   });
+// }
+// function calcCart() {
+//   let totalAmount = 0;
+//   const cartItems = Array.from(cartDisp.children);
+//   const { subTotal, totalDiscount, itemCount, discountRate } =
+//     calculateCartTotals(cartItems);
+//   totalAmount = subTotal - totalDiscount;
+
+//   const bulkDiscountRate = itemCount >= 30 ? 0.25 : discountRate;
+//   const tuesdayDiscountRate = new Date().getDay() === 2 ? 0.1 : 0;
+
+//   const finalDiscountRate = Math.max(bulkDiscountRate, tuesdayDiscountRate);
+//   totalAmount *= 1 - finalDiscountRate;
+
+//   updateSummaryUI(totalAmount, finalDiscountRate);
+// }
+
+// const updateSummaryUI = (totalAmount, finalDiscountRate) => {
+//   sum.textContent = "총액: " + Math.round(totalAmount) + "원";
+
+//   if (finalDiscountRate > 0) {
+//     var span = document.createElement("span");
+//     span.className = "text-green-500 ml-2";
+//     span.textContent = `(${(finalDiscountRate * 100).toFixed(1)}% 할인 적용)`;
+//     sum.appendChild(span);
+//   }
+//   updateStockInfo();
+//   renderBonusPts(totalAmount);
+// };
+// const renderBonusPts = (totalAmount) => {
+//   bonusPoints = Math.floor(totalAmount / 1000);
+//   var pointTag = document.getElementById("loyalty-points");
+//   if (!pointTag) {
+//     pointTag = document.createElement("span");
+//     pointTag.id = "loyalty-points";
+//     pointTag.className = "text-blue-500 ml-2";
+//     sum.appendChild(pointTag);
+//   }
+//   pointTag.textContent = "(포인트: " + bonusPoints + ")";
+// };
+// function updateStockInfo() {
+//   var infoMsg = "";
+//   PRODUCT_LIST.forEach(function (item) {
+//     if (item.stock < 5) {
+//       infoMsg +=
+//         item.name +
+//         ": " +
+//         (item.stock > 0 ? "재고 부족 (" + item.stock + "개 남음)" : "품절") +
+//         "\n";
+//     }
+//   });
+//   stockInfo.textContent = infoMsg;
+// }
+// main();
+
+// addBtn.addEventListener("click", function () {
+//   var selItem = sel.value;
+//   var itemToAdd = PRODUCT_LIST.find(function (p) {
+//     return p.id === selItem;
+//   });
+//   const newItem = updateCartList(itemToAdd);
+//   if (newItem) {
+//     cartDisp.appendChild(newItem);
+//     lastSel = itemToAdd;
+//   }
+//   calcCart();
+// });
+
+// cartDisp.addEventListener("click", function (event) {
+//   var target = event.target;
+//   if (
+//     target.classList.contains("quantity-change") ||
+//     target.classList.contains("remove-item")
+//   ) {
+//     handleDeleteToCart(target);
+//     calcCart();
+//   }
+// });
+import ReactDOM from "react-dom/client";
+import { App } from "./src/App";
+
+const container = document.getElementById("app");
+if (container) {
+  const root = ReactDOM.createRoot(container);
+  root.render(<App />);
+} else {
+  console.error("Target container 'app' not found in the DOM.");
+}
diff --git a/src/advanced/src/App.tsx b/src/advanced/src/App.tsx
@@ -0,0 +1,23 @@
+import { FunctionComponent, useState } from "react";
+import { PRODUCT_LIST } from "./data/prodList";
+import { ICart, IProduct } from "./types/types";
+import CartList from "./components/Cart";
+import ProductSelect from "./components/ProductSelect";
+import SummaryStock from "./components/SummaryStock";
+
+export const App: FunctionComponent = () => {
+  const [products, setProducts] = useState<IProduct[]>(PRODUCT_LIST);
+  const [selectedProducts, setSelectedProducts] = useState<ICart[]>([
+    { id: "p1", name: "상품1", cost: 10000, count: 5, discount: 0.1 },
+  ]);
+  return (
+    <div className="bg-gray-100 p-8">
+      <div className="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl p-8">
+        <h1 className="text-2xl font-bold mb-4">장바구니</h1>
+        <CartList products={selectedProducts} />
+        <ProductSelect products={products} handler={() => {}} />
+        <SummaryStock products={products} />
+      </div>
+    </div>
+  );
+};
diff --git a/src/advanced/src/components/Cart.tsx b/src/advanced/src/components/Cart.tsx
@@ -0,0 +1,52 @@
+import { FunctionComponent } from "react";
+import { ICart, IProduct } from "../types/types";
+interface ICartList {
+  products: ICart[];
+}
+const CartList: FunctionComponent<ICartList> = ({ products }) => {
+  return (
+    <div>
+      {products.map((product, idx) => {
+        return <CartItem key={product.id} item={product} />; // key를 고유 ID로 지정
+      })}
+    </div>
+  );
+};
+
+interface ICartItem {
+  item: ICart;
+}
+
+const CartItem: FunctionComponent<ICartItem> = ({ item }) => {
+  return (
+    <div id={item.id} className="flex justify-between items-center mb-2">
+      <span>
+        {item.name} - {item.cost}원 x {item.count}
+      </span>
+      <div>
+        <button
+          className="quantity-change bg-blue-500 text-white px-2 py-1 rounded mr-1"
+          data-product-id={item.id}
+          data-change="-1"
+        >
+          -
+        </button>
+        <button
+          className="quantity-change bg-blue-500 text-white px-2 py-1 rounded mr-1"
+          data-product-id={item.id}
+          data-change="1"
+        >
+          +
+        </button>
+        <button
+          className="remove-item bg-red-500 text-white px-2 py-1 rounded"
+          data-product-id={item.id}
+        >
+          삭제
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CartList;