From 75f2665828469c5b730320f31710b40cd985a95c Mon Sep 17 00:00:00 2001 From: Gabin Lee Date: Sun, 1 Dec 2024 13:11:02 +0900 Subject: [PATCH 1/8] =?UTF-8?q?=E2=9C=A8=20=ED=8F=AC=ED=8A=B8=EC=9B=90=20?= =?UTF-8?q?=EB=9D=BC=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Product/PaymentPage/PaymentPage.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/pages/Product/PaymentPage/PaymentPage.tsx b/src/pages/Product/PaymentPage/PaymentPage.tsx index 63a4ced..62d834a 100644 --- a/src/pages/Product/PaymentPage/PaymentPage.tsx +++ b/src/pages/Product/PaymentPage/PaymentPage.tsx @@ -1,3 +1,4 @@ +import React, { useEffect } from 'react'; import Header from '../../../components/PaymentPage/Header'; import ProductComponent from '../../../components/PaymentPage/ProductComponent'; import RequirementComponent from '../../../components/PaymentPage/RequirementComponent'; @@ -32,6 +33,13 @@ const PaymentPage = () => { const btnTxt = `${(priceData.productPrice + priceData.deliveryCharge).toLocaleString()}원 결제하기`; + useEffect(()=>{ + let script = document.querySelector( + `script[src="https://cdn.iamport.kr/v1/iamport.js"]` + ); + + },[]) + return (
From 920db6cfa5331bdc049e1533ae8f1b2a37026a55 Mon Sep 17 00:00:00 2001 From: Gabin Lee Date: Sun, 1 Dec 2024 13:31:45 +0900 Subject: [PATCH 2/8] =?UTF-8?q?=E2=9C=A8=20=EC=A3=BC=EB=AC=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=98=B5=EC=85=98=20api=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ProductDetailPage/OrderModal.tsx | 81 +++++++++++-------- .../ProductDetailPage/ProductDetailPage.tsx | 8 +- 2 files changed, 52 insertions(+), 37 deletions(-) diff --git a/src/components/ProductDetailPage/OrderModal.tsx b/src/components/ProductDetailPage/OrderModal.tsx index d20695f..ad8d9ec 100644 --- a/src/components/ProductDetailPage/OrderModal.tsx +++ b/src/components/ProductDetailPage/OrderModal.tsx @@ -3,15 +3,22 @@ import * as S from './OrderModal.style'; import { ReactComponent as DrawerBtn } from '../../assets/ProductDetailPage/arrow_key_down.svg'; import { Button } from '../common/Button'; import { ReactComponent as CloseBtn } from '../../assets/ProductDetailPage/close.svg'; +import { ProductProps } from '../../pages/Product/ProductDetailPage/ProductDetailPage'; interface DrawerProps { modalHandler: ( event: React.MouseEvent, ) => void; + productInfo: ProductProps; } -export const OrderModal = ({ modalHandler }: DrawerProps) => { +export const OrderModal = ({ modalHandler, productInfo }: DrawerProps) => { + const [isDrawerOpen, setIsDrawerOpen] = useState(false); + const [selectedOption, setSelectedOption] = useState<{ + optionName: string; + optionPrice: number; + } | null>(null); const handleScreenClick = (event: React.MouseEvent) => { if (event.currentTarget === event.target) { @@ -23,6 +30,15 @@ export const OrderModal = ({ modalHandler }: DrawerProps) => { setIsDrawerOpen((prevState) => !prevState); }; + const handleOptionSelect = (optionName: string, optionPrice: number) => { + setSelectedOption({ optionName, optionPrice }); + setIsDrawerOpen(false); + }; + + const handleOptionClose = () => { + setSelectedOption(null); + }; + return ( @@ -31,43 +47,40 @@ export const OrderModal = ({ modalHandler }: DrawerProps) => { 옵션 선택 - {isDrawerOpen && ( - <> - - 옵션 1 - +800원 - - - 옵션 2 - +1200원 - - - 옵션 3 - +1200원 - - - )} + {isDrawerOpen && productInfo.options.map((option) => ( + handleOptionSelect(option.optionName, option.optionPrice)} + > + {option.optionName} + +{option.optionPrice.toLocaleString()}원 + + ))} - - - - 양말목 지구 네임택 - - - 옵션2: 어쩌구저쩌구 - - 4,200원 - - - - 결제 예상 금액 - 4,200원 - - + {selectedOption && ( + + + + {productInfo.productName} + + + {selectedOption.optionName} + + + {(productInfo.price + selectedOption.optionPrice).toLocaleString()}원 + + + + + 결제 예상 금액 + {(productInfo.price + selectedOption.optionPrice).toLocaleString()}원 + + + )}