From ec05c8bb22ff0c803624ec522ff12e2a3c8f5cec Mon Sep 17 00:00:00 2001
From: arinming <jyandysys1@naver.com>
Date: Sat, 16 Sep 2023 03:48:47 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20:=20=EC=98=B5=EC=85=98=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=EC=8B=9C=20=EB=82=98=ED=83=80=EB=82=98=EB=8A=94=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/MinusButton.png                    | Bin 0 -> 590 bytes
 src/assets/PlusButton.png                     | Bin 0 -> 605 bytes
 src/assets/ph_x-bold.png                      | Bin 0 -> 402 bytes
 .../{ProductTextBox.js => ProductBox.js}      |   0
 src/pages/product/ProductContainer.js         |   2 +-
 src/pages/product/SelectProduct.js            |  67 +++++++++++++++---
 6 files changed, 60 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/MinusButton.png
 create mode 100644 src/assets/PlusButton.png
 create mode 100644 src/assets/ph_x-bold.png
 rename src/pages/product/{ProductTextBox.js => ProductBox.js} (100%)

diff --git a/src/assets/MinusButton.png b/src/assets/MinusButton.png
new file mode 100644
index 0000000000000000000000000000000000000000..ade434345a412eb9cca627616150979ba441588f
GIT binary patch
literal 590
zcmV-U0<ryxP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0pm$TK~#7F&6mGU
z0znYQzu7avSW#+-=6C|n#ujO;<q7l+^bLSFfH#0AIBOfEwGmqr!$uoBsEj0X<IZuM
zasfRM_WU*XXE*!J&d$#65K`j${ro$|XCNvO!;@bO<fV;(p?PTY-2=G04d+@{io-PH
z(r+Dh{k}^GF3s!3R4^qiK-FI>MU7PqkQtAFDkHeUA20%qoH1mPN9GzJvj&2W*n#z+
zjW^2kyrGgm3Vz>Pvp6PW1)YNb=p`FwJg|Y8C(%hy#0E^FJh<PWcx=Qr)X_91;w6xP
zvmh?GBLvmyN9cjb^?g`H6=f+R4}4i<3*vFOy(wDz0W2fg)8vPu3e#%_NLCeXvjkK^
zR*+Lt#uXkif;jLb2wh}{yOrjIyE{F={>~Pb;pOcE$2ZSE_7QD`jG;aMX|UuuzdmuZ
z6~zM@*`XDKACM7D=!pkzkrm8cB^Su(QfVF0R?)fKhHVHf(GIsELp5L<R&{xV2FSTg
z;3h0V%+2YwEKWo@I5pVWk~&AB7G?~X#DXes*a$5e-)n@KR4i_Bpeopm5#iX$+Ti~c
zCW3U7tMfVnQvy!LT2v#ZDo%lM&2&9SN+yYo+YG0%a&ej@F3*7zf;uz;iSnE@6Za&&
cE>oU=0!~iA9vdCCDF6Tf07*qoM6N<$f&okPt^fc4

literal 0
HcmV?d00001

diff --git a/src/assets/PlusButton.png b/src/assets/PlusButton.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e98a7791a66a8d0460308ee68786d1f08bec1c4
GIT binary patch
literal 605
zcmV-j0;2tiP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0rE*iK~#7F&6m$k
z!axwlzuB5#JbBa@P4NY+7q95Wvpj*mfxdzI2J!~*1m)}nxq1<=Cdft)dV`aZL^|%2
zQl){=7HIh;P5*6nX1|@C-66!pb~~Hj7@UEqL<~nhF|aBB2<VxcHt#Kfo9nRZx?JqV
z>6d0T*m65I!Mik%7bAl)sRHWuvs~0j<A98~4_q_6E6jm0a91#nOjBf{12SsBYlt6M
z4BDu1GD!^;{jlS9oCO=lurIH%<Gwi2A7ctEVdPPCREf}mVU&AMOEexju?}@OiivOv
zB;YbIF4%o|*P|C-fk65WGDQ_-Dgp)mJW9gj>7IY3fq39AZwltVixhmE?fdub`YVzm
z+0*2QqVm&g4oFrN+hz)=guEcDq>K~}a)Q`%BnWNfhfP~<n`gC>NZ;L9LlWM<esFaE
zHnW{V&d|2o?k3#lL*`kAzHze@MFEZc(2Bv&$O$I2M1cq71#?r$0WvsLW{%ia!M<EW
z3S_Ctl?p;tY_G<4EDr>(AR~ymGCG!piKqbU2H7l0T_E2U#vB;Nf;w5U6IyKiuMx&l
zvB+XUm9ZQr{Jx{L!Ri$zf;5z)^CALM0#5pxRwKqLPJzLVX?l*B3=<pI7}j0t;xtNF
ro&(1Obzlrc%5&08+>-Q~q&)uxCw9@2)rD5@00000NkvXXu0mjfXgLQH

literal 0
HcmV?d00001

diff --git a/src/assets/ph_x-bold.png b/src/assets/ph_x-bold.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f6f7e37b3ed868d78fdbdbe7ec58938eaa87437
GIT binary patch
literal 402
zcmV;D0d4+?P)<h;3K|Lk000e1NJLTq000~S000~a1^@s6at+^<00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0VhdBK~#7F?bbo6
z!Y~j9;7r~FUFr?InRX>bQG)ldC_-`7dLoaYM{px3C}T$`);4Ko+Kq_+Mp`rT5lA~#
z>X)xflq9_<jt8n?sFr%z{?nDkQPRWnb&oeVtTx-B5@wmzP%ZVKUS9ASR0I0CBc>9R
zFqPH3dR+XVF~JECgZ!F{zG38P42%hn<#pg{5Ut}80wnqMAHZln9q+i<ViKmdwN8+W
zN-!_zL!}rCbfNdBAj8<84K0R?i9i=B!6;e@f?8ww-al6F)rGyo@&PHP?vW{nwL{x!
zZ1QrTcz0NL^d&C`7RY(dq$sq(nxN1YlcE)nh9}K43FboK*6GvqDXyuW(n~iRPwFVe
wC}tL>`RUDjutJmCHm&*f*(XMe`d>af54WHKlT%Wb*8l(j07*qoM6N<$f@sjFLjV8(

literal 0
HcmV?d00001

diff --git a/src/pages/product/ProductTextBox.js b/src/pages/product/ProductBox.js
similarity index 100%
rename from src/pages/product/ProductTextBox.js
rename to src/pages/product/ProductBox.js
diff --git a/src/pages/product/ProductContainer.js b/src/pages/product/ProductContainer.js
index 7f116dc..ca54e56 100644
--- 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
index 4c32da3..0bb1ab9 100644
--- 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>
   );
 };