fix:결제

Spharos-GentleDog · Nov 30, 2023 · 705a0a7 · 705a0a7
2 parents 3f2b6f5 + 9756fe6
commit 705a0a7
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 63 deletions.
diff --git a/src/components/CheckoutList.tsx b/src/components/CheckoutList.tsx
@@ -17,6 +17,8 @@ import Icon from './Icon';
 import { CartIdType } from '@/types/cartType';
 import { AddressType } from '@/types/userType';
 import { nanoid } from "nanoid";
+import toast from 'react-hot-toast';
+import Toast from './Toast';
 
 /**
  * 장바구니 상품 출력
@@ -196,8 +198,6 @@ export default function CheckoutList() {
     deliveryRequestMessage: defaultAddress?.addressRequestMessage,
   };
 
-  console.log('deliveryOrdersInRequest', deliveryOrdersInRequest);
-
   const vendorsOrderList = cartBrandProducts?.map((brandProduct) => ({
     vendorEmail: brandProduct.vendorEmail || '',
     brandName: brandProduct.brandName,
@@ -224,8 +224,6 @@ export default function CheckoutList() {
     })),
   }));
 
-  console.log('vendorsOrderList', vendorsOrderList);
-
   const paymentList = cartBrandProducts?.flatMap((brandProduct) =>
     brandProduct.orderProductInfoDto.map((product) => ({
       vendorEmail: product.vendorEmail, // 여기에 적절한 값 필요
@@ -240,11 +238,10 @@ export default function CheckoutList() {
   const handlePayment = (data: boolean) => {
     if (session.status === 'authenticated') {
       setPaymentClicked(data);
+      // setPrice(price);
 
       if (paymentList && deliveryOrdersInRequest && vendorsOrderList) {
         setPaymentProduct(paymentList);
-        console.log('deliveryOrdersInRequest', deliveryOrdersInRequest);
-        console.log('vendorsOrderList', vendorsOrderList);
 
         localStorage.setItem('paymentProduct', JSON.stringify(paymentList));
 
@@ -264,14 +261,11 @@ export default function CheckoutList() {
             extractMatchingProductInCartIds(cartBrandProducts, cartId)
           )
         );
-        // console.log(
-        //   'productInCartIdlocalStorage',
-        //   localStorage.getItem('productInCartId')
-        // );
       }
     } else {
-      // todo: 비회원 결제 하기 위한 페이지로 이동
-      alert('로그인이 필요합니다.');
+      toast.custom((t) => (
+        <Toast message="로그인이 필요합니다." />
+      ));
     }
   };
 
@@ -324,7 +318,6 @@ export default function CheckoutList() {
             paymentClicked={paymentClicked}
             setPaymentClicked={setPaymentClicked}
             paymentProduct={paymentProduct}
-            // price={parseInt(price?.totalPriceString.replace(/[₩,]/g, ""))}
             price={price?.totalPrice || 0}
           />
         </div>

diff --git a/src/components/Payment.tsx b/src/components/Payment.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import React from 'react'
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import {
     PaymentWidgetInstance,
     loadPaymentWidget,
@@ -32,7 +32,7 @@ function Payment({
         const paymentWidget = await loadPaymentWidget('test_ck_jExPeJWYVQ1RezQ2XYPnV49R5gvN', nanoid());
         const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
             "#payment-widget",
-            { value: price },
+            { value: 10000 },
             { variantKey: "DEFAULT" }
         );
         paymentWidget.renderAgreement("#agreement");

diff --git a/src/components/PaymentSuccess.tsx b/src/components/PaymentSuccess.tsx
@@ -98,8 +98,6 @@ function PaymentSuccess() {
           const result = await res.json();
 
           if (result.code === 200) {
-            //     console.log("deliveryOrdersInRequest : ", localStorage.getItem('deliveryOrdersInRequest') || '{}')
-            //     console.log("vendorsOrderListInRequest : ", localStorage.getItem('vendorsOrderListInRequest') || '{}')
             setDeliveryOrders(
               JSON.parse(
                 localStorage.getItem('deliveryOrdersInRequest') || '{}'
@@ -124,7 +122,6 @@ function PaymentSuccess() {
             })
               .then((res) => res.json())
               .then((data) => {
-                console.log('data', data);
                 setOrderNumber(data.result.orderNumber);
               });
             // 장바구니 삭제

diff --git a/src/components/ProductCard.tsx b/src/components/ProductCard.tsx
@@ -48,7 +48,6 @@ const ProductCard: FC<ProductCardProps> = ({
   const [showModalQuickView, setShowModalQuickView] = useState(false);
   const router = useRouter();
   const session = useSession();
-  console.log(data)
 
   const notifyAddTocart = ({ sizeName }: { sizeName?: string }) => {
     const handleFetchAddToCart = async () => {

diff --git a/src/components/ai/Ai.tsx b/src/components/ai/Ai.tsx
@@ -4,10 +4,12 @@ import React, { useState } from 'react';
 import Image from 'next/image';
 import defaultImage from '@/images/upload.png';
 import { useRouter } from 'next/navigation';
+import loadingImage from '@/images/loading.gif'
 
 function Ai() {
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const router = useRouter();
+  const [loading, setLoading] = useState(false);
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSelectedFile(event.target.files ? event.target.files[0] : null);
@@ -22,7 +24,7 @@ function Ai() {
 
       console.log('formData: ', formData.get('img'))
       try {
-
+        setLoading(true);
         const res = await fetch(`https://gentledog-ai-new.duckdns.org/image_predict`, {
           method: 'POST',
           body: formData,
@@ -76,6 +78,8 @@ function Ai() {
         }
       } catch (err) {
         console.log(err);
+      } finally {
+        setLoading(false);
       }
     }
   };
@@ -85,51 +89,63 @@ function Ai() {
   };
 
   return (
-    <div className="mt-10">
-      <label className='block mb-5 relative'>
-        <div className="flex justify-center">
-          <div className="relative overflow-hidden flex">
-            <Image
-              src={selectedFile ? URL.createObjectURL(selectedFile) : defaultImage}
-              alt="dogImage"
-              width={300}
-              height={300}
-              className="w-300 h-300 mx-auto"
-            />
-            {
-              selectedFile ?
-                ""
-                :
-                <div className="absolute inset-0 bg-black bg-opacity-60 flex flex-col items-center justify-center text-neutral-50 cursor-pointer">
+    <>
+      {
+        loading ?
+          <div className="w-full h-screen relative flex justify-center items-center bg-white bg-opacity-50 z-[9999]">
+            <Image src={loadingImage} alt="loading" width={25} height={25} />
+            <div className='font-bold text-end'>
+              AI 분석 중입니다.
+            </div>
+          </div>
+          :
+          <div className="mt-10">
+            <label className='block mb-5 relative'>
+              <div className="flex justify-center">
+                <div className="relative overflow-hidden flex">
+                  <Image
+                    src={selectedFile ? URL.createObjectURL(selectedFile) : defaultImage}
+                    alt="dogImage"
+                    width={300}
+                    height={300}
+                    className="w-300 h-300 mx-auto"
+                  />
+                  {
+                    selectedFile ?
+                      ""
+                      :
+                      <div className="absolute inset-0 bg-black bg-opacity-60 flex flex-col items-center justify-center text-neutral-50 cursor-pointer">
+                      </div>
+                  }
+                  <input
+                    type='file'
+                    id='dogImage'
+                    name='dogImage'
+                    className='hidden'
+                    onChange={handleFileChange}
+                    accept='image/jpg'
+                  />
                 </div>
-            }
-            <input
-              type='file'
-              id='dogImage'
-              name='dogImage'
-              className='hidden'
-              onChange={handleFileChange}
-              accept='image/jpg'
-            />
+              </div>
+            </label>
+            <br />
+            <div className="flex justify-center gap-[10px] mb-5">
+              <button
+                onClick={handleFileUpload}
+                className="bg-black text-white px-5 py-[10px] border-none cursor-pointer rounded-3xl mr-50"
+              >
+                Upload
+              </button>
+              <button
+                onClick={handleFileDelete}
+                className="bg-white text-black px-5 py-[10px] border-2 border-black cursor-pointer rounded-3xl"
+              >
+                Delete
+              </button>
+            </div>
           </div>
-        </div>
-      </label>
-      <br />
-      <div className="flex justify-center gap-[10px] mb-5">
-        <button
-          onClick={handleFileUpload}
-          className="bg-black text-white px-5 py-[10px] border-none cursor-pointer rounded-3xl mr-50"
-        >
-          Upload
-        </button>
-        <button
-          onClick={handleFileDelete}
-          className="bg-white text-black px-5 py-[10px] border-2 border-black cursor-pointer rounded-3xl"
-        >
-          Delete
-        </button>
-      </div>
-    </div>
+      }
+    </>
   );
 }