diff --git a/src/api/order.ts b/src/api/order.ts index 6476198..710ccae 100644 --- a/src/api/order.ts +++ b/src/api/order.ts @@ -85,3 +85,22 @@ export const patchConfirmOrder = async (orderId: number) => { throw error; } }; + +export const postOrderInfo = async ( + productId: number, + productOptionId: number, + orderCount: number, + request: string, + ) => { + try { + const res = await client.post(`/orders`, { + productId: productId, + productOptionId: productOptionId, + orderCount: orderCount, + request: request, + }); + return res.data; + } catch (error) { + throw error; + } +}; diff --git a/src/components/PaymentPage/RequirementComponent.tsx b/src/components/PaymentPage/RequirementComponent.tsx index bc9c5de..3215e95 100644 --- a/src/components/PaymentPage/RequirementComponent.tsx +++ b/src/components/PaymentPage/RequirementComponent.tsx @@ -1,11 +1,17 @@ +import React from 'react'; import * as S from './RequirementComponent.style'; -const RequirementComponent = () => { +interface RequirementComponentProps { + onChange: (value: string) => void; +} + +const RequirementComponent: React.FC = ({ onChange }) => { return ( 요청 사항 onChange(e.target.value)} > ); diff --git a/src/components/ProductDetailPage/Footer.tsx b/src/components/ProductDetailPage/Footer.tsx index 77eaa69..62b9ec6 100644 --- a/src/components/ProductDetailPage/Footer.tsx +++ b/src/components/ProductDetailPage/Footer.tsx @@ -4,13 +4,14 @@ import { ReactComponent as Review } from '../../assets/ProductDetailPage/review. import { ReactComponent as Bookmark } from '../../assets/ProductDetailPage/bookmark.svg' import { ReactComponent as FilledBookmark} from '../../assets/ProductDetailPage/bookmark_filled.svg'; import { useNavigate } from 'react-router-dom'; +import type { ProductProps } from '../../pages/Product/ProductDetailPage/ProductDetailPage'; interface FooterProps { onPurchaseClick: () => void; - productId: number; + productInfo: ProductProps; } -const Footer: React.FC = ({ onPurchaseClick, productId }) => { +const Footer: React.FC = ({ onPurchaseClick, productInfo }) => { const navigate = useNavigate(); const [isBookmarked, setIsBookmarked] = useState(false); @@ -21,7 +22,7 @@ const Footer: React.FC = ({ onPurchaseClick, productId }) => { return ( - navigate(`/review/${productId}`)}> + navigate(`/review/${productInfo.productId}`)}> 후기 diff --git a/src/components/ProductDetailPage/OrderModal.tsx b/src/components/ProductDetailPage/OrderModal.tsx index a085096..c99b32e 100644 --- a/src/components/ProductDetailPage/OrderModal.tsx +++ b/src/components/ProductDetailPage/OrderModal.tsx @@ -18,6 +18,7 @@ export const OrderModal = ({ modalHandler, productInfo }: DrawerProps) => { const navigate = useNavigate(); const [isDrawerOpen, setIsDrawerOpen] = useState(false); const [selectedOption, setSelectedOption] = useState<{ + optionId: number; optionName: string; optionPrice: number; } | null>(null); @@ -32,8 +33,8 @@ export const OrderModal = ({ modalHandler, productInfo }: DrawerProps) => { setIsDrawerOpen((prevState) => !prevState); }; - const handleOptionSelect = (optionName: string, optionPrice: number) => { - setSelectedOption({ optionName, optionPrice }); + const handleOptionSelect = (optionId: number, optionName: string, optionPrice: number) => { + setSelectedOption({ optionId, optionName, optionPrice }); setIsDrawerOpen(false); }; @@ -47,6 +48,8 @@ export const OrderModal = ({ modalHandler, productInfo }: DrawerProps) => { seller: productInfo.sellerNickname, title: productInfo.productName, option: selectedOption.optionName, + optionId: selectedOption.optionId, + productId: productInfo.productId, price: productInfo.price + selectedOption.optionPrice, deliveryCharge: productInfo.deliveryFee, }; @@ -67,7 +70,7 @@ export const OrderModal = ({ modalHandler, productInfo }: DrawerProps) => { {isDrawerOpen && productInfo.options.map((option) => ( handleOptionSelect(option.optionName, option.optionPrice)} + onClick={() => handleOptionSelect(option.optionId, option.optionName, option.optionPrice)} > {option.optionName} +{option.optionPrice.toLocaleString()}원 diff --git a/src/pages/Product/PaymentPage/PaymentPage.tsx b/src/pages/Product/PaymentPage/PaymentPage.tsx index 367e5a3..0dcd860 100644 --- a/src/pages/Product/PaymentPage/PaymentPage.tsx +++ b/src/pages/Product/PaymentPage/PaymentPage.tsx @@ -8,7 +8,7 @@ import PaymentInfoComponent from '../../../components/PaymentPage/PaymentInfoCom import { Button } from '../../../components/common/Button'; import * as S from './PaymentPage.style'; import { getUserInfo, UserInfo } from '../../../api/user'; -import { postPayInfo } from '../../../api/pay'; +import { postOrderInfo } from '../../../api/order'; // declare global { // interface Window { @@ -101,8 +101,10 @@ const PaymentPage = () => { const [paymentData, setPaymentData] = useState(() => ({ seller: state?.seller, + productId: state?.productId, title: state?.title, option: state?.option, + productOptionId: state?.optionId, price: state?.price, deliveryCharge: state?.deliveryCharge, recipient: state?.recipient, @@ -114,6 +116,7 @@ const PaymentPage = () => { const [userInfo, setUserInfo] = useState(null); const [loading, setLoading] = useState(true); + const [request, setRequest] = useState(''); const btnTxt = `${(paymentData.price + paymentData.deliveryCharge).toLocaleString()}원 결제하기`; @@ -126,10 +129,12 @@ const PaymentPage = () => { IMP.init("imp87104862"); // 가맹점 식별코드 + const merchant_uid = `order_${new Date().getTime()}`; + const data = { pg: pgValue, pay_method: payMethod, - merchant_uid: `order_${new Date().getTime()}`, + merchant_uid: merchant_uid, name: paymentData.title, amount: (paymentData.price || 0) + (paymentData.deliveryCharge || 0), buyer_email: "", @@ -139,10 +144,23 @@ const PaymentPage = () => { buyer_postcode: paymentData.postCode, m_redirect_url: "", } - IMP.request_pay(data, (res) => { + IMP.request_pay(data, async (res) => { if (res.success) { console.log("결제 성공") console.log("imp_uid:", res.imp_uid); + + try { + const paymentResponse = await postOrderInfo( + paymentData.productId, + paymentData.productOptionId, + 1, + request, + ); + console.log("결제 정보 저장 성공:", paymentResponse); + } catch (error) { + console.error("결제 정보 저장 실패:", error); + } + navigate('/payment/complete'); } else { console.log("결제 실패:", res.error_msg); @@ -208,7 +226,7 @@ const PaymentPage = () => { price={paymentData.price} imageURL={""} /> - + {