부가서비스

- 링크결제 결제신청 API 연결

src/pages/additional-service/link-payment/apply/link-payment-apply-confirm-page.tsx

@@ -1,18 +1,58 @@
 import { HeaderType } from '@/entities/common/model/types';
 import { useSetFooterMode, useSetHeaderTitle, useSetHeaderType } from '@/widgets/sub-layout/use-sub-layout';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { useLocation } from 'react-router';
 import { IMAGE_ROOT } from "@/shared/constants/common";
 import { PATHS } from '@/shared/constants/paths';
+import { LinkPaymentFormData } from '@/entities/additional-service/model/types'
+import { useExtensionLinkPayRequestMutation } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-request-mutation';
+import { ExtensionLinkPayRequestParams } from '@/entities/additional-service/model/types';
 
 export const LinkPaymentApplyConfirmPage = () => {
     const { navigate } = useNavigate();
+    const location = useLocation();
+
+    const formData: LinkPaymentFormData = location.state?.formData;
+    const { mutateAsync: linkPayRequest } = useExtensionLinkPayRequestMutation();
 
     useSetHeaderTitle('메시지 미리보기');
     useSetHeaderType(HeaderType.LeftArrow);
     useSetFooterMode(false);
 
     const onClickToConfirm = () => {
-        navigate(PATHS.additionalService.linkPayment.confirmSuccess);
+        if (!formData) {
+            console.error('Form data is missing');
+            return;
+        }
+
+        const requestParams: ExtensionLinkPayRequestParams = {
+            mid: formData.mid,
+            sendMethod: formData.sendMethod,
+            goodsName: formData.goodsName,
+            amount: formData.amount,
+            moid: formData.moid,
+            paymentExpiryDate: formData.paymentExpiryDate.replace(/\./g, ''),
+            buyerName: formData.buyerName,
+            email: formData.email,
+            phoneNumber: formData.phoneNumber,
+            isIdentity: formData.isIdentity,
+            identityType: formData.identityType,
+            identityValue: formData.identityValue,
+            language: formData.language,
+            linkContentType: formData.linkContentType
+        };
+
+        console.log("Link Payment 요청 파라미터: ", requestParams);
+
+        linkPayRequest(requestParams)
+            .then((response) => {
+                console.log("Link Payment 성공 응답: ", response);
+                navigate(PATHS.additionalService.linkPayment.confirmSuccess);
+            })
+            .catch((error) => {
+                console.error("Link Payment 실패: ", error);
+                // 에러 처리 로직 추가 가능
+            });
     };
 
     const onClickToBack = () => {
@@ -37,8 +77,8 @@ export const LinkPaymentApplyConfirmPage = () => {
                                 !$&#123;pay_url&#125;<br/><br/>
                                 <b>
                                     가맹점 상호 : 나이스페이먼츠 주식회사<br/>
-                                    상품명 : TEST<br/>
-                                    금액 : 123,123원
+                                    상품명 : {formData.goodsName}<br/>
+                                    금액 : {formData.amount}원
                                 </b>
                             </p>
                         </div>

src/pages/additional-service/link-payment/apply/link-payment-apply-page.tsx

@@ -6,22 +6,47 @@ import {ProcessStep} from '@/entities/transaction/model/types';
 import {useSetFooterMode, useSetHeaderTitle, useSetHeaderType} from '@/widgets/sub-layout/use-sub-layout';
 import {useNavigate} from '@/shared/lib/hooks/use-navigate';
 import {PATHS} from "@/shared/constants/paths";
+import { LinkPaymentFormData, IdentityType, Language, LinkContentType, LinkPaymentSendMethod } from '@/entities/additional-service/model/types';
+
+
 
 export const LinkPaymentApplyPage = () => {
     const { navigate } = useNavigate();
 
     const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);
+    const [formData, setFormData] = useState<LinkPaymentFormData>({
+      mid: 'nictest001m',
+      sendMethod: LinkPaymentSendMethod.SMS,
+      goodsName: '',
+      amount: 0,
+      moid: '',
+      paymentExpiryDate: '',
+      buyerName: '',
+      email: '',
+      phoneNumber: '',
+      isIdentity: false,
+      identityType: IdentityType.INDIVIDUAL,
+      identityValue: '',
+      language: Language.KR,
+      linkContentType: LinkContentType.BASIC
+    });
 
   useSetHeaderTitle('링크결제 신청');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
+
+  const onClickToBack = () => {
+        navigate(-1);
+    };
   
   const onClickToChangeTab = () => {
       if(processStep === ProcessStep.One) {
           setProcessStep(ProcessStep.Two);
       }
       else if(processStep === ProcessStep.Two) {
-          navigate(PATHS.additionalService.linkPayment.requestConfirm)
+          navigate(PATHS.additionalService.linkPayment.requestConfirm, {
+            state: { formData }
+          });
       }
   };
 
@@ -49,11 +74,16 @@ export const LinkPaymentApplyPage = () => {
               </div>
 
                 {(processStep === ProcessStep.One) &&
-                      <LinkPaymentStep1 ></LinkPaymentStep1>
+                      <LinkPaymentStep1
+                        formData={formData}
+                        setFormData={setFormData}
+                      ></LinkPaymentStep1>
                   }
                   { (processStep === ProcessStep.Two) &&
                       <LinkPaymentStep2
                           setProcessStep={ setProcessStep }
+                          formData={formData}
+                          setFormData={setFormData}
                       ></LinkPaymentStep2>
                   }
 
@@ -69,8 +99,9 @@ export const LinkPaymentApplyPage = () => {
               {(processStep === ProcessStep.Two) &&
                   <div className="apply-row two-button">
                       <button
-                          className="btn-50 btn-darkgray flex-1">
-                          이전</button>
+                          className="btn-50 btn-darkgray flex-1"
+                            onClick={() => onClickToBack() }
+                            >이전</button>
                       <button
                           className="btn-50 btn-blue flex-3"
                           onClick={() => onClickToChangeTab() }