Merge pull request #58 from DONGA-ST-B/feature/47#buylist

[Feat] : 구매 상세 페이지 UI 수정
DONGA-ST-B · Sep 15, 2023 · 68575af · 68575af
2 parents a4c2f95 + ec05c8b
commit 68575af
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 9 deletions.
diff --git a/src/assets/MinusButton.png b/src/assets/MinusButton.png
diff --git a/src/assets/PlusButton.png b/src/assets/PlusButton.png
diff --git a/src/assets/ph_x-bold.png b/src/assets/ph_x-bold.png
diff --git a/src/pages/product/ProductTextBox.js → src/pages/product/ProductBox.js b/src/pages/product/ProductTextBox.js → src/pages/product/ProductBox.js
diff --git a/src/pages/product/ProductContainer.js b/src/pages/product/ProductContainer.js
@@ -1,6 +1,6 @@
 import React from "react";
 import ProductImage from "../../assets/ProductDetailIamge.png";
-import ProductTextBox from "./ProductTextBox";
+import ProductTextBox from "./ProductBox";
 import ProductOption from "./ProductOption";
 import ProductPriceGroup from "./ProductPriceGroup";
 import ProductButtonGroup from "./ProductButtonGroup";

diff --git a/src/pages/product/SelectProduct.js b/src/pages/product/SelectProduct.js
@@ -1,26 +1,77 @@
-import React from "react";
+import React, { useState } from "react";
 import { COLORS } from "../../styles/colors";
+import MinusButton from "../../assets/MinusButton.png";
+import PlusButton from "../../assets/PlusButton.png";
 
 const SelectProduct = () => {
+  const [quantity, setQuantity] = useState(1);
+
   const newComponentStyle = {
-    width: "100%",
+    width: "90%",
     height: "140px",
     borderRadius: "20px",
     backgroundColor: "#F4F8FD",
-    marginTop: "16px", // 선택한 메뉴와 간격 조절
+    marginTop: "16px",
     display: "flex",
-    justifyContent: "center",
+    justifyContent: "space-between",
     alignItems: "center",
+    padding: "0 16px",
+  };
+
+  const leftTextStyle = {
+    fontSize: "20px",
+    color: COLORS.GRAY_900,
+    fontWeight: "bold",
+    marginLeft: "16px",
+  };
+
+  const optionTextStyle = {
+    fontSize: "16px",
+    color: COLORS.GRAY_900,
+    marginLeft: "16px",
+  };
+
+  const iconGroupStyle = {
+    display: "flex",
+    alignItems: "center",
+    margin: "40px", 
+  };
+
+  const iconStyle = {
+    width: "32px",
+    height: "32px",
+    color: COLORS.BLACK,
+    cursor: "pointer",
+    margin: "8px", 
+  };
+
+  const quantityStyle = {
+    fontSize: "24px",
+    fontWeight: "bold",
+    color: COLORS.BLACK,
+  };
+
+  const handleDecrease = () => {
+    if (quantity > 1) {
+      setQuantity(quantity - 1);
+    }
   };
 
-  const textStyle = {
-    color: COLORS.GRAY_600,
-    fontSize: "B1",
+  const handleIncrease = () => {
+    setQuantity(quantity + 1);
   };
 
   return (
     <div style={newComponentStyle}>
-      <span style={textStyle}>이 새로운 컴포넌트 내용</span>
+      <div>
+        <div style={leftTextStyle}>하이카디플러스 HiCardi+</div>
+        <div style={optionTextStyle}>갤럭시 A13 (+275,000원)</div>
+      </div>
+      <div style={iconGroupStyle}>
+        <img onClick={handleDecrease} style={iconStyle} src={MinusButton} alt="Minus" />
+        <span style={quantityStyle}>{quantity}</span>
+        <img onClick={handleIncrease} style={iconStyle} src={PlusButton} alt="Plus" />
+      </div>
     </div>
   );
 };