부가서비스 : 링크결제 발송내역,발송대기 상세페이지 추가

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

@@ -0,0 +1,85 @@
+import {useState} from 'react';
+import {LinkPaymentStep1} from '@/entities/additional-service/ui/link-payment/apply/link-payment-step1';
+import {LinkPaymentStep2} from '@/entities/additional-service/ui/link-payment/apply/link-payment-step2';
+import {HeaderType} from '@/entities/common/model/types';
+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";
+
+export const LinkPaymentApplyPage = () => {
+    const { navigate } = useNavigate();
+
+    const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);
+
+  useSetHeaderTitle('링크결제 신청');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(false);
+  
+  const onClickToChangeTab = () => {
+      if(processStep === ProcessStep.One) {
+          setProcessStep(ProcessStep.Two);
+      }
+      else if(processStep === ProcessStep.Two) {
+          navigate(PATHS.additionalService.linkPayment.requestConfirm)
+      }
+  };
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="option-list">
+              <div className="issue-progress">
+                <div className="bar">
+                    {(processStep === ProcessStep.One) &&
+                        <div
+                            className="fill"
+                            style={{ width: '50%' }}
+                        ></div>
+                    }
+                    {(processStep === ProcessStep.Two) &&
+                        <div
+                            className="fill"
+                            style={{ width: '100%' }}
+                        ></div>
+                    }
+                </div>
+              </div>
+
+                {(processStep === ProcessStep.One) &&
+                      <LinkPaymentStep1 ></LinkPaymentStep1>
+                  }
+                  { (processStep === ProcessStep.Two) &&
+                      <LinkPaymentStep2
+                          setProcessStep={ setProcessStep }
+                      ></LinkPaymentStep2>
+                  }
+
+            </div>
+              {(processStep === ProcessStep.One) &&
+                  <div className="apply-row">
+                      <button
+                          className="btn-50 btn-blue flex-1"
+                          onClick={() => onClickToChangeTab() }
+                      >다음</button>
+                  </div>
+              }
+              {(processStep === ProcessStep.Two) &&
+                  <div className="apply-row two-button">
+                      <button
+                          className="btn-50 btn-darkgray flex-1">
+                          이전</button>
+                      <button
+                          className="btn-50 btn-blue flex-3"
+                          onClick={() => onClickToChangeTab() }
+                      >결제 신청</button>
+                  </div>
+              }
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};