[Fix] 토스페이먼츠 쿠폰 관련 QA 사항 반영 (#97)

* feat: 총 금액이 0원 이하일 때와 아닐 때의 로직 분리

* fix: 로직 수정 및 에러 토스트 메시지로 변환

* fix: 톤매너 정립

---------

Co-authored-by: Eugene Kim <[email protected]>

src/components/payments/PaymentsWidget.tsx

@@ -34,7 +34,7 @@ export function PaymentsWidget() {
 
   const { name, amount, discount, issuedCouponId, totalAmount } = useProduct();
 
-  const { postPrevOrder } = usePostPrevOrder(amount);
+  const { postPrevOrder } = usePostPrevOrder(totalAmount);
 
   const [ready, setReady] = useState(false);
 

src/hooks/mutation/usePostFreeOrder.ts

@@ -0,0 +1,22 @@
+import { useNavigate } from 'react-router-dom';
+import { useMutation } from '@tanstack/react-query';
+import ordersApi from '@/apis/orders/ordersApi';
+import RoutePath from '@/routes/routePath';
+import { toast } from 'react-toastify';
+
+const usePostFreeOrder = (amount: number) => {
+  const navigate = useNavigate();
+
+  const { mutate: postFreeOrder, ...rest } = useMutation({
+    onMutate: () => {
+      if (amount) toast('결제를 실패했어요. 문제가 지속되면 문의해주세요.');
+    },
+    mutationFn: ordersApi.POST_PREV_FREE_ORDER,
+    onError: () => navigate(RoutePath.PaymentsCheckout),
+    onSuccess: () => navigate(RoutePath.Dashboard)
+  });
+
+  return { postFreeOrder, ...rest };
+};
+
+export default usePostFreeOrder;

src/hooks/mutation/usePostPrevOrder.ts

@@ -1,11 +1,19 @@
 import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+
 import ordersApi from '@/apis/orders/ordersApi';
+import RoutePath from '@/routes/routePath';
+import { toast } from 'react-toastify';
 
 const usePostPrevOrder = (amount: number) => {
+  const navigate = useNavigate();
+
   const { mutate: postPrevOrder, ...rest } = useMutation({
-    mutationFn: amount
-      ? ordersApi.POST_PREV_ORDER
-      : ordersApi.POST_PREV_FREE_ORDER
+    onMutate: () => {
+      if (!amount) toast('결제를 실패했어요. 문제가 지속되면 문의해주세요.');
+    },
+    mutationFn: ordersApi.POST_PREV_ORDER,
+    onError: () => navigate(RoutePath.PaymentsCheckout)
   });
 
   return { postPrevOrder, ...rest };

src/pages/PaymentsCheckout.tsx

@@ -1,14 +1,38 @@
+import { nanoid } from 'nanoid';
+import { useQuery } from '@tanstack/react-query';
+
+import memberApi from '@/apis/member/memberApi';
 import { useFunnel } from '@/hooks/common/useFunnel';
 import { Payments } from '@/components/payments/Payments';
 import { PaymentsWidget } from '@/components/payments/PaymentsWidget';
 import useCustomBack from '@/hooks/common/useCutomBack';
+import { useProduct } from '@/hooks/zustand/useProduct';
+import usePostFreeOrder from '@/hooks/mutation/usePostFreeOrder';
 
 const steps = ['회비 납부', '결제 위젯'];
 
 export const PaymentsCheckout = () => {
   const { Funnel, Step, setStep, currentStep } = useFunnel(steps[0]);
+  const { amount, discount, totalAmount, issuedCouponId } = useProduct();
+  const { postFreeOrder } = usePostFreeOrder(totalAmount);
+  const { data: dashboard } = useQuery({
+    queryKey: ['member'],
+    queryFn: memberApi.GET_DASHBOARD
+  });
 
   const nextClickHandler = (step: string) => {
+    if (!totalAmount && dashboard) {
+      const id = nanoid();
+      postFreeOrder({
+        orderNanoId: id,
+        membershipId: dashboard.currentMembership.membershipId,
+        issuedCouponId: issuedCouponId,
+        totalAmount: amount,
+        discountAmount: discount,
+        finalPaymentAmount: totalAmount
+      });
+      return;
+    }
     setStep(step);
   };