부가 서비스: 링크결제 신청 최종확인 페이지 추가(UI 추가 작업 필요)

src/pages/additional-service/additional-service-pages.tsx

@@ -25,6 +25,7 @@ import { PaymentAgencyListPage } from './payment-agency/list-page';
 import { PaymentAgencyDetailPage } from './payment-agency/detail-page';
 import { PaymentAgencyRequestPage } from './payment-agency/request-page';
 import { LinkPaymentApplyPage } from './link-payment/link-payment-apply-page';
+import { LinkPaymentApplyConfirmPage } from './link-payment/link-payment-apply-confirm-page';
 
 export const AdditionalServicePages = () => {
   return (
@@ -45,7 +46,7 @@ export const AdditionalServicePages = () => {
           <Route path={ROUTE_NAMES.additionalService.linkPayment.dispatchList} element={<LinkPaymentDispatchListPage/>} />
           <Route path={ROUTE_NAMES.additionalService.linkPayment.pendingSend} element={<LinkPaymentPendingSendPage />} />
           <Route path={ROUTE_NAMES.additionalService.linkPayment.request} element={<LinkPaymentApplyPage />} />
-          <Route path={ROUTE_NAMES.additionalService.linkPayment.requestSuccess} element={<LinkPaymentApplyPage />} />
+          <Route path={ROUTE_NAMES.additionalService.linkPayment.requestConfirm} element={<LinkPaymentApplyConfirmPage />} />
         </Route>
         <Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}>
           <Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.list} element={<KakaoPaymentNotificationListPage />} />

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

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+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 { PATHS } from "@/shared/constants/paths";
+import { IMAGE_ROOT } from "@/shared/constants/common";
+
+export const LinkPaymentApplyConfirmPage = () => {
+    const { navigate } = useNavigate();
+
+    useSetHeaderTitle('링크결제 신청');
+    useSetHeaderType(HeaderType.LeftArrow);
+    useSetFooterMode(false);
+
+    const onClickToConfirm = () => {
+    navigate(PATHS.home);
+    };
+
+    const onClickToBack = () => {
+        navigate(-1);
+    };
+
+    return (
+        <>
+            <main>
+                <div className="tab-content">
+                    <div className="tab-pane sub active">
+                        <div className="option-list">
+                            <div className="confirm-section">
+                                <div className="confirm-icon-container">
+                                    <div className="confirm-icon">
+                                        <img
+                                            src={IMAGE_ROOT + '/ico_alert.svg'}
+                                            className="alert-icon"
+                                        />
+                                    </div>
+                                </div>
+                                
+                                <h2 className="confirm-title">
+                                    발송 메시지를 최종 확인하세요
+                                </h2>
+                                
+                                <div className="confirm-details">
+                                    <div className="detail-item">
+                                        <span className="detail-label">결제 방식</span>
+                                        <span className="detail-value">링크 결제</span>
+                                    </div>
+                                    <div className="detail-item">
+                                        <span className="detail-label">결제 금액</span>
+                                        <span className="detail-value">5,254,000원</span>
+                                    </div>
+                                    <div className="detail-item">
+                                        <span className="detail-label">발송 방법</span>
+                                        <span className="detail-value">SMS</span>
+                                    </div>
+                                    <div className="detail-item">
+                                        <span className="detail-label">수신자</span>
+                                        <span className="detail-value">김*환(010-7000-****)</span>
+                                    </div>
+                                    <div className="detail-item">
+                                        <span className="detail-label">신청일</span>
+                                        <span className="detail-value">{new Date().toLocaleDateString('ko-KR', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\./g, '.').replace(/ /g, '')}</span>
+                                    </div>
+                                </div>
+                                
+                                <div className="confirm-notice">
+                                    <p className="notice-text">
+                                        • 결제 링크는 발송 후 24시간 동안 유효합니다.
+                                    </p>
+                                    <p className="notice-text">
+                                        • 결제 완료 후 취소/환불은 별도 문의가 필요합니다.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div className="apply-row two-button">
+                            <button
+                                className="btn-50 btn-darkgray flex-1"
+                                onClick={() => onClickToBack()}
+                            >이전</button>
+                            <button
+                                className="btn-50 btn-blue flex-3"
+                                onClick={() => onClickToConfirm()}
+                            >결제 신청</button>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </>
+    );
+};

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

@@ -21,8 +21,7 @@ export const LinkPaymentApplyPage = () => {
           setProcessStep(ProcessStep.Two);
       }
       else if(processStep === ProcessStep.Two) {
-          alert('완료')
+          navigate(PATHS.additionalService.linkPayment.requestConfirm)
-          navigate(PATHS.home)
       }
   };
 

src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx

@@ -12,6 +12,7 @@ import {
     useSetFooterMode,
     useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
+import { LinkPaymentFilter } from '@/entities/additional-service/ui/link-payment-filter';
 
 export const LinkPaymentPendingSendPage = () => {
     const { navigate } = useNavigate();

src/shared/constants/paths.ts

@@ -175,9 +175,9 @@ export const PATHS: RouteNamesType = {
         `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`,
         ROUTE_NAMES.additionalService.linkPayment.request,
       ),
-      requestSuccess: generatePath(
+      requestConfirm: generatePath(
         `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`,
-        ROUTE_NAMES.additionalService.linkPayment.requestSuccess,
+        ROUTE_NAMES.additionalService.linkPayment.requestConfirm,
       )
     },
     kakaoPaymentNotification: {

src/shared/constants/route-names.ts

@@ -85,7 +85,7 @@ export const ROUTE_NAMES = {
       dispatchList: 'dispatch-list',
       pendingSend: 'pending-send',
       request: 'request',
-      requestSuccess: 'request-success'
+      requestConfirm: 'request-confirm'
     },
     kakaoPaymentNotification: {
       base: '/kakao-payment-notification/*',