Feat: 토스 페이먼츠 오류 핸들링

src/hooks/useRequestPayment.jsx

@@ -21,12 +21,23 @@ const useRequestPayment = () => {
           `?paymentType=NORMAL&orderId=${response.data.orderId}&paymentKey=membership&amount=${response.data.amount}`;
         return;
       }
-      console.log(response.data);
+      console.log('paymentMethodsWidget: ', paymentMethodsWidget);
       paymentMethodsWidget.updateAmount(
         Math.max(response.data.amount, 0)
       );
-      paymentWidget?.requestPayment(response.data);
-      return;
+
+      paymentWidget?.requestPayment(response.data)
+      .then(function (data) {return;})
+      .catch(function (error) {
+        if (error.code === 'NOT_SELECTED_PAYMENT_METHOD') {
+          // 결제수단 미선택 오류
+          const method = paymentMethodsWidget.getSelectedPaymentMethod();
+          console.log('hook 내부 method: ', method);
+          console.log('requestPayment error: ', error);
+          alert('토스 페이먼츠 오류로 새로고침을 시도합니다');
+          window.location.reload(true);
+        }
+      });
     } catch (error) {
       console.error("Error during payment request:", error);
     }

src/pages/PaymentPage/PaymentPage.jsx

@@ -56,13 +56,13 @@ const PaymentPage = () => {
           { value: Math.max(totalPrice - salePrice - usedPoint, 0) },
           // { value: 3000 },
 
-
+          
           // 렌더링하고 싶은 결제 UI의 variantKey
           // 아래 variantKey는 문서용 테스트키와 연동되어 있습니다. 멀티 UI를 직접 만들고 싶다면 계약이 필요해요.
           // https://docs.tosspayments.com/guides/payment-widget/admin#멀티-결제-ui
           { variantKey: "DEFAULT" }
         );
-
+          
         // ------  이용약관 UI 렌더링 ------
         // 이용약관 UI를 렌더링할 위치를 지정합니다. `#agreement`와 같은 CSS 선택자를 추가하세요.
         // https://docs.tosspayments.com/reference/widget-sdk#renderagreement선택자-옵션