Merge pull request #286 from readyvery/test

Fix: 결제과정 useEffect 의존성 값 삭제
readyvery · Mar 27, 2024 · e24ab30 · e24ab30
2 parents 89169fe + 65b5af2
commit e24ab30
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 32 deletions.
diff --git a/src/hooks/useRequestPayment.jsx b/src/hooks/useRequestPayment.jsx
@@ -4,9 +4,11 @@ const apiUrl = `/order/toss`;
 
 const useRequestPayment = () => {
   const token = localStorage.getItem("accessToken");
-  const requestPayment = async (cartId, couponId, paymentWidget, point) => {
+  const requestPayment = async (cartId, couponId, paymentWidget, paymentMethodsWidget, point) => {
     try {
       const body = { cartId, couponId, point };
+      console.log('body: ', body);
+      console.log('paymentWidget: ', paymentWidget.requestPayment);
       const response = await commonApis.post(apiUrl, body,{
         headers: {
             Authorization: `Bearer ${token}`
@@ -19,6 +21,10 @@ const useRequestPayment = () => {
           `?paymentType=NORMAL&orderId=${response.data.orderId}&paymentKey=membership&amount=${response.data.amount}`;
         return;
       }
+      console.log(response.data);
+      paymentMethodsWidget.updateAmount(
+        Math.max(response.data.amount, 0)
+      );
       paymentWidget?.requestPayment(response.data);
       return;
     } catch (error) {

diff --git a/src/pages/MyPage/EventingPage/EventingPage.css b/src/pages/MyPage/EventingPage/EventingPage.css
@@ -43,3 +43,12 @@
   height: 20.875rem;
   margin: 3.63rem 0;
 }
+
+.event-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 85vh;
+}
diff --git a/src/pages/MyPage/EventingPage/EventingPage.jsx b/src/pages/MyPage/EventingPage/EventingPage.jsx
@@ -6,6 +6,7 @@ import "slick-carousel/slick/slick.css";
 import Header from "../../../components/views/Header/Header";
 import useFetchEvents from "../../../hooks/useFetchEvents";
 import "./EventingPage.css";
+import Empty from "../../../components/views/PageComponent/Empty";
 
 function EventingPage() {
   const navigate = useNavigate();
@@ -30,16 +31,23 @@ function EventingPage() {
           // linkTo: "/mypage",
         }}
       />
-      <div className="eventing-img">
-        <Slider className="eventing_slider_benner" {...settings}>
-          {events.map((item) => (
-            <div key={item} onClick={() => navigate(item.redirectUrl)}>
-              <img src={item.imgUrl} alt="eventing" />
-              {console.log(item)}
-            </div>
-          ))}
-        </Slider>
-      </div>
+
+      {events && events?.length > 0 ? (
+        <div className="eventing-img">
+          <Slider className="eventing_slider_benner" {...settings}>
+            {events.map((item) => (
+              <div key={item} onClick={() => navigate(item.redirectUrl)}>
+                <img src={item.imgUrl} alt="eventing" />
+                {console.log(item)}
+              </div>
+            ))}
+          </Slider>
+        </div>
+      ) : (
+        <div className="event-empty">
+          <Empty />
+        </div>
+      )}
     </div>
   );
 }

diff --git a/src/pages/PaymentPage/PaymentPage.jsx b/src/pages/PaymentPage/PaymentPage.jsx
@@ -26,7 +26,8 @@ const PaymentPage = () => {
   const point = useGetPoint();
   const paymentRequest = () => {
     const paymentWidget = paymentWidgetRef.current;
-    requestPayment(cartId, couponId, paymentWidget, usedPoint);
+    const paymentMethodsWidget = paymentMethodsWidgetRef.current;
+    requestPayment(cartId, couponId, paymentWidget, paymentMethodsWidget, usedPoint);
   };
   const handleSetPoint = () => {
     if (usedPoint !== 0) {
@@ -40,21 +41,21 @@ const PaymentPage = () => {
       setUsedPoint(Math.min(point, MiddleSumPrice));
     }
   };
+
   useEffect(() => {
     (async () => {
       try {
+
         // ------  결제위젯 초기화 ------
         // 비회원 결제에는 customerKey 대신 ANONYMOUS를 사용하세요.
         const paymentWidget = await loadPaymentWidget(clientKey, customerKey); // 회원 결제
         // const paymentWidget = await loadPaymentWidget(clientKey, ANONYMOUS)  // 비회원 결제
-
-        // ------  결제 UI 렌더링 ------
-        // 결제 UI를 렌더링할 위치를 지정합니다. `#payment-method`와 같은 CSS 선택자와 결제 금액 객체를 추가하세요.
-        // DOM이 생성된 이후에 렌더링 메서드를 호출하세요.
-        // https://docs.tosspayments.com/reference/widget-sdk#renderpaymentmethods선택자-결제-금액-옵션
+
         const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
           "#payment-page__payment-widget",
           { value: Math.max(totalPrice - salePrice - usedPoint, 0) },
+          // { value: 3000 },
+
 
           // 렌더링하고 싶은 결제 UI의 variantKey
           // 아래 variantKey는 문서용 테스트키와 연동되어 있습니다. 멀티 UI를 직접 만들고 싶다면 계약이 필요해요.
@@ -77,22 +78,9 @@ const PaymentPage = () => {
         // 필요에 따라 사용자에게 피드백을 주거나 다른 오류 처리 동작을 추가할 수 있습니다.
       }
     })();
-  }, [totalPrice, salePrice, usedPoint]);
-
-  useEffect(() => {
-    const paymentMethodsWidget = paymentMethodsWidgetRef.current;
-
-    if (paymentMethodsWidget == null) {
-      return;
-    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-    // ------ 금액 업데이트 ------
-    // 새로운 결제 금액을 넣어주세요.
-    // https://docs.tosspayments.com/reference/widget-sdk#updateamount결제-금액
-    paymentMethodsWidget.updateAmount(
-      Math.max(totalPrice - salePrice - usedPoint, 0)
-    );
-  }, [totalPrice, salePrice, usedPoint]);
 
   return (
     <div className="payment-page">