Merge pull request #290 from Together-3team/feat/payment

[지원]

src/apis/cartApi.ts

@@ -32,6 +32,7 @@ export async function fetchCartProducts(): Promise<CartData[]> {
       combinationPrice: item.optionCombination.combinationPrice,
       productNumber: item.quantity,
       imageUrl: item.optionCombination.product.thumbNailImage,
+      selectedProductId: undefined,
       isChecked: true,
     }));
   } catch (error) {

src/components/product/OptionBottomSheet.tsx

@@ -11,7 +11,7 @@ import NumberInput from './NumberInput';
 import Button from '../common/Button';
 import { queryClient } from '@/utils/queryClient';
 import { ToastParameters } from '@/types/components/toast';
-import { ProductWithSelectedProductId, Product as QueryProduct } from '@/types/apis/product';
+import { Product as QueryProduct } from '@/types/apis/product';
 import { Product as ProductType } from '@/types/product';
 import X from '@/assets/svgs/btn-x.svg';
 import styles from './OptionBottomSheet.module.scss';
@@ -232,12 +232,12 @@ export default function OptionBottomSheet({
   };
 
   const handleBuyButtonClick = async () => {
-    let productList: ProductWithSelectedProductId[] = [];
+    let productList: QueryProduct[] = [];
     // {'1,2': 4, '2,4':5}
     for (let key of Object.keys(selectedOptionsObject)) {
       const selectedIds = key.split(',');
       const { combinationPrice, selectedCombinationName } = calculateCombinationPriceAndName(selectedIds);
-      const buyProduct: ProductWithSelectedProductId = {
+      const buyProduct: QueryProduct = {
         id: product.id,
         productTitle: product.title,
         option: selectedCombinationName,
@@ -249,10 +249,12 @@ export default function OptionBottomSheet({
         selectedProductId: ordersIdObject[key],
         ...(groupBuyingId && { groupBuyingId: groupBuyingId }),
       };
+      console.log(ordersIdObject);
       productList.unshift(buyProduct);
     }
     queryClient.setQueryData(['cartData'], productList);
     const response = queryClient.getQueryData(['cartData']);
+
     console.log(productList);
     router.push('/payment');
   };
@@ -301,6 +303,7 @@ export default function OptionBottomSheet({
         );
         // '1,2':451
         setOrdersIdObject(prev => ({ ...prev, [selectedIds]: response.id }));
+        console.log(response);
       }
     };
 

src/pages/payment/index.tsx

@@ -17,10 +17,10 @@ import { DeliveryInfo } from '@/types/components/delivery';
 import { httpClient } from '@/apis/httpClient';
 import OrderDeliveryCard from '@/components/order/OrderDeliveryCard';
 import { useRouter } from 'next/router';
-import { Product } from '@/types/apis/product';
+import { CartData, Product } from '@/types/apis/product';
 import { getCartData } from '@/queries/cartQueries';
-import { useQuery } from '@tanstack/react-query';
-import { queryClient } from '@/utils/queryClient';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { Product as QueryProduct } from '@/types/apis/product';
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const accessToken = context.req.cookies['accessToken'];
@@ -57,11 +57,14 @@ export default function Payment({ defaultDelivery }: { defaultDelivery: Delivery
   const [products, setProducts] = useState<Product[]>([]);
   const [delivery, setDelivery] = useState(defaultDelivery);
   const router = useRouter();
+  const queryClient = useQueryClient();
+  const productList: QueryProduct[] = queryClient.getQueryData(['cartData']) || [];
+  console.log(productList);
   const { data: selectedProducts } = useQuery({
     queryKey: ['cartData'],
     queryFn: () => getCartData(queryClient),
   });
-
+  const groupBuyingId = productList[0].groupBuyingId ? productList[0].groupBuyingId : '';
   const clientKey = `${process.env.NEXT_PUBLIC_TOSS_PAYMENTS_SECRET_KEY}`;
   const orderId = nanoid(); // 주문 ID
 
@@ -82,7 +85,16 @@ export default function Payment({ defaultDelivery }: { defaultDelivery: Delivery
     const remainingProductCount = (products?.length || 0) - 1;
     const orderName =
       remainingProductCount > 0 ? `${firstProductTitle} 외 ${remainingProductCount}건` : firstProductTitle;
-    const selectedProductIds = products.map(product => product.id).join(',');
+    const selectedProductIds = products
+      .map(product => {
+        console.log(product);
+        if (product.selectedProductId) {
+          return product.selectedProductId;
+        }
+        return product.id;
+      })
+      .join(',');
+    console.log(selectedProductIds);
     const deliveryMessageValue = deliveryMessage;
     sessionStorage.setItem('deliveryMessage', deliveryMessageValue);
     sessionStorage.setItem('selectedProductIds', selectedProductIds);
@@ -93,7 +105,7 @@ export default function Payment({ defaultDelivery }: { defaultDelivery: Delivery
       amount: totalPrice,
       orderId: orderId,
       orderName: orderName,
-      successUrl: `${window.location.origin}/payment/paymentSuccess`,
+      successUrl: `${window.location.origin}/payment/paymentSuccess?gbi=${groupBuyingId}`,
       failUrl: `${window.location.origin}/payment/fail`,
     });
   };

src/pages/payment/paymentSuccess.tsx

@@ -4,11 +4,17 @@ import styles from './PaymentSuccess.module.scss';
 import Lottie from 'react-lottie-player';
 import check from '@/assets/lotties/check.json';
 import { completePayment } from '@/apis/paymentApi';
+import { useQueryClient } from '@tanstack/react-query';
 
 export default function PaymentSuccess() {
   const router = useRouter();
-  const { paymentKey, orderId, amount } = router.query;
+  const { paymentKey, orderId, amount, gbi } = router.query;
+  console.log(gbi);
+  console.log(router.query);
+  const queryClient = useQueryClient();
 
+  const productList = queryClient.getQueryData(['cartData']);
+  console.log(productList);
   useEffect(() => {
     const deliveryMessage = sessionStorage.getItem('deliveryMessage') || '';
     const selectedProductIds = sessionStorage.getItem('selectedProductIds') || '';
@@ -17,18 +23,20 @@ export default function PaymentSuccess() {
     console.log(selectedProductIds);
     const amountValue: number = parseFloat(amount as string);
     const deliveryIdValue: number = parseInt(deliveryId, 10);
+    const gbiValue: number = parseInt(gbi as string, 10);
     console.log(deliveryIdValue);
 
     const sendPaymentData = async () => {
+      console.log(router.query);
       if (paymentKey && orderId && amount) {
         try {
           const postData = {
             deliveryMessage: deliveryMessage,
             orderId: orderId as string,
             paymentKey: paymentKey as string,
             amount: amountValue,
-            selectedProductIds: selectedProductIds,
-            groupBuyingId: undefined,
+            selectedProductIds,
+            groupBuyingId: gbiValue,
             deliveryId: deliveryIdValue,
           };
           const response = await completePayment(postData);

src/types/apis/product.ts

@@ -7,13 +7,10 @@ export interface Product {
   combinationPrice: number;
   productNumber: number;
   imageUrl: string;
+  selectedProductId: number | undefined;
   groupBuyingId?: number;
 }
 
 export interface CartData extends Product {
   isChecked: boolean;
 }
-
-export interface ProductWithSelectedProductId extends Product {
-  selectedProductId: number;
-}