Merge branch 'fix/#42' into dev

efub-ecyce · Dec 2, 2024 · db2a1e9 · db2a1e9
2 parents 7ccfdfd + 14750e1
commit db2a1e9
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 12 deletions.
diff --git 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
@@ -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<RequirementComponentProps> = ({ onChange }) => {
     return (
         <S.Wrapper>
             <S.Title>요청 사항</S.Title>
             <S.TextArea
                 placeholder='작가님에게 전달할 요청사항이 있다면 적어주세요.'
+                onChange={(e) => onChange(e.target.value)}
             ></S.TextArea>
         </S.Wrapper>
     );

diff --git 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<FooterProps> = ({ onPurchaseClick, productId }) => {
+const Footer: React.FC<FooterProps> = ({ onPurchaseClick, productInfo }) => {
     const navigate = useNavigate();
     const [isBookmarked, setIsBookmarked] = useState<boolean>(false);
 
@@ -21,7 +22,7 @@ const Footer: React.FC<FooterProps> = ({ onPurchaseClick, productId }) => {
     return (
         <S.Container>
             <S.Wrapper>
-                <S.ButtonWrapper onClick={() => navigate(`/review/${productId}`)}>
+                <S.ButtonWrapper onClick={() => navigate(`/review/${productInfo.productId}`)}>
                     <Review />
                     <S.Text>후기</S.Text>
                 </S.ButtonWrapper>

diff --git 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) => (
             <S.OptionWrapper 
               key={option.optionId}
-              onClick={() => handleOptionSelect(option.optionName, option.optionPrice)}
+              onClick={() => handleOptionSelect(option.optionId, option.optionName, option.optionPrice)}
             >
               <S.Option>{option.optionName}</S.Option>
               <S.OptionPrice>+{option.optionPrice.toLocaleString()}원</S.OptionPrice>

diff --git 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<UserInfo | null>(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={""}
       />
-      <RequirementComponent />
+      <RequirementComponent onChange={setRequest}/>
       <DeliverInfoComponent 
         recipient={userInfo.name}
         phoneNumber={userInfo.phoneNumber}

diff --git a/src/pages/Product/ProductDetailPage/ProductDetailPage.tsx b/src/pages/Product/ProductDetailPage/ProductDetailPage.tsx
@@ -118,7 +118,7 @@ const ProductDetailPage = () => {
           <ReviewContent productId={productInfo.productId} />
           <Footer 
             onPurchaseClick={handlePurchaseClick} 
-            productId={productInfo.productId}
+            productInfo={productInfo}
           />
         </>
       ) : (