AOS: 링크결제 탭 별 페이지 생성, 필터 적용 -> 링크결제 신청 페이지 연계

src/entities/additional-service/model/types.ts

@@ -7,6 +7,13 @@ export enum FundTransferTabKeys {
 export interface FundTransferTabProps {
   activeTab: FundTransferTabKeys;
 };
+export enum LinkPaymentTabKeys {
+  DispatchList = 'DispatchList',
+  PendingSend = 'PendingSend'
+};
+export interface LinkPaymentTabProps {
+  activeTab: LinkPaymentTabKeys;
+};
 export enum SettlementAgencyTabKeys {
   Manage = 'Manage',
   Deposit = 'Deposit',
@@ -295,4 +302,8 @@ export interface SmsPaymentDetailResendProps {
 export interface SettlementAgencyBottomAgreeProps {
   bottomAgreeOn: boolean;
   setBottomAgreeOn: (bottomAgreeOn: boolean) => void;
-};
+};
+export interface LinkPaymentFilterProps {
+    filterOn: boolean;
+     setFilterOn: (filterOn: boolean) => void;
+}

src/entities/additional-service/ui/link-payment-dispatch-list-wrap.tsx

@@ -0,0 +1,158 @@
+import { IMAGE_ROOT } from "@/shared/constants/common";
+import { useState } from "react";
+import { LinkPaymentFilter } from "./link-payment-filter";
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { PATHS } from "@/shared/constants/paths";
+
+
+export const LinkPaymentDispatchListWrap = () => {
+    const { navigate } = useNavigate();
+    const [filterOn, setFilterOn] = useState<boolean>(false);
+    const onClickToOpenFilter = () => {
+        setFilterOn(!filterOn);
+    };
+    const onClickToNavigate = () => {
+        navigate(PATHS.additionalService.linkPayment.request)
+    }
+
+    return (
+        <>
+            <section className="summary-section">
+                <div className="credit-controls">
+                    <div>
+                        <input
+                            className="credit-period"
+                            type="text"
+                            value="2025.06.01 ~ 2025.06.30"
+                            readOnly={true}
+                        />
+                        <button
+                            className="filter-btn"
+                            aria-label="필터"
+                        >
+                            <img
+                                src={IMAGE_ROOT + '/ico_setting.svg'}
+                                alt="검색옵션"
+                                onClick={() => onClickToOpenFilter()}
+                            />
+                        </button>
+                    </div>
+                    <button
+                        className="download-btn"
+                        aria-label="다운로드"
+                    >
+                        <img
+                            src={IMAGE_ROOT + '/ico_download.svg'}
+                            alt="다운로드"
+                        />
+                    </button>
+                </div>
+            </section>
+
+            <section className="filter-section">
+                <div className="sort-options">
+                    <button className="sort-btn active">최신순</button>
+                    <span className="sort-divider">|</span>
+                    <button className="sort-btn">고액순</button>
+                </div>
+                <div className="excrow">
+                    <div className="full-menu-keywords no-padding">
+                        <span className="keyword-tag active">전체</span>
+                        <span className="keyword-tag">성공</span>
+                        <span className="keyword-tag">실패</span>
+                    </div>
+                </div>
+            </section>
+
+            <section className="transaction-list">
+                <div className="date-header">25.06.08(일)</div>
+                <div className="transaction-item approved">
+                    <div className="transaction-status">
+                        <div className="status-dot blue"></div>
+                    </div>
+                    <div className="transaction-content">
+                        <div className="transaction-title">김*환(7000)</div>
+                        <div className="transaction-details">
+                            <span>결제완료</span>
+                            <span className="separator">ㅣ</span>
+                            <span>SMS</span>
+                            <span className="separator">ㅣ</span>
+                            <span>신용카드</span>
+                        </div>
+                    </div>
+                    <div className="transaction-amount">5,254,000원</div>
+                </div>
+                <div className="transaction-item approved">
+                    <div className="transaction-status">
+                        <div className="status-dot blue"></div>
+                    </div>
+                    <div className="transaction-content">
+                        <div className="transaction-title">김*환(7000)</div>
+                        <div className="transaction-details">
+                            <span>결제완료</span>
+                            <span className="separator">ㅣ</span>
+                            <span>이메일</span>
+                            <span className="separator">ㅣ</span>
+                            <span>신용카드</span>
+                        </div>
+                    </div>
+                    <div className="transaction-amount">5,254,000원</div>
+                </div>
+                <div className="transaction-item approved">
+                    <div className="transaction-status">
+                        <div className="status-dot blue"></div>
+                    </div>
+                    <div className="transaction-content">
+                        <div className="transaction-title">김*환(7000)</div>
+                        <div className="transaction-details">
+                            <span>입금요청</span>
+                            <span className="separator">ㅣ</span>
+                            <span>이메일</span>
+                            <span className="separator">ㅣ</span>
+                            <span>신용카드</span>
+                        </div>
+                    </div>
+                    <div className="transaction-amount">5,254,000원</div>
+                </div>
+                <div className="transaction-item approved">
+                    <div className="transaction-status">
+                        <div className="status-dot gray"></div>
+                    </div>
+                    <div className="transaction-content">
+                        <div className="transaction-title">김*환(7000)</div>
+                        <div className="transaction-details">
+                            <span>결제중단</span>
+                            <span className="separator">ㅣ</span>
+                            <span>SMS</span>
+                        </div>
+                    </div>
+                    <div className="transaction-amount">5,254,000원</div>
+                </div>
+                <div className="transaction-item approved">
+                    <div className="transaction-status">
+                        <div className="status-dot gray"></div>
+                    </div>
+                    <div className="transaction-content">
+                        <div className="transaction-title">김*환(7000)</div>
+                        <div className="transaction-details">
+                            <span>결제실패</span>
+                            <span className="separator">ㅣ</span>
+                            <span>SMS</span>
+                        </div>
+                    </div>
+                    <div className="transaction-amount">5,254,000원</div>
+                </div>
+            </section>
+            <div className="apply-row">
+                <button
+                    className="btn-50 btn-blue flex-1"
+                    onClick={() => onClickToNavigate()}
+                >결제 신청</button>
+            </div>
+            <LinkPaymentFilter
+                filterOn={filterOn}
+                setFilterOn={setFilterOn}
+            ></LinkPaymentFilter>
+        </>
+    )
+}

src/entities/additional-service/ui/link-payment-filter.tsx

@@ -0,0 +1,193 @@
+import { motion } from 'framer-motion';
+import {IMAGE_ROOT} from "@/shared/constants/common";
+import {LinkPaymentFilterProps} from "@/entities/additional-service/model/types";
+
+export const LinkPaymentFilter = ({
+                                      filterOn,
+                                      setFilterOn
+}: LinkPaymentFilterProps) => {
+    const variants = {
+        hidden:{ x: '100%'},
+        visible: {x: '0%'}
+    };
+
+    const onClickToClose = () => {
+        setFilterOn(false);
+    };
+    return (
+        <>
+            <motion.div
+                id="fullMenuModal"
+                className="full-menu-modal"
+                initial="hidden"
+                animate={ (filterOn)? 'visible': 'hidden' }
+                variants={ variants }
+                transition={{ duration: 0.3 }}
+                style={{
+                    width: '100%',
+                    height: '100%',
+                }}
+            >
+                <div className="full-menu-container">
+                    <div className="full-menu-header">
+                        <div className="full-menu-title center">필터</div>
+                        <div className="full-menu-actions">
+                            <button
+                                id="closeFullMenu"
+                                className="full-menu-close"
+                            >
+                                <img
+                                    src={ IMAGE_ROOT + '/ico_close.svg' }
+                                    alt="닫기"
+                                    onClick={ () => onClickToClose() }
+                                />
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className="option-list pb-120">
+                        <div className="opt-field">
+                            <div className="opt-label">가맹점</div>
+                            <div className="opt-controls">
+                                <select className="flex-1">
+                                    <option>nictest001m</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div className="opt-field">
+                            <div className="opt-label">휴대폰번호, 이메일</div>
+                            <div className="opt-controls">
+                                <select className="flex-1">
+                                    <option>휴대폰번호</option>
+                                    <option>이메일</option>
+                                </select>
+                                <input
+                                    type="text"/>
+                            </div>
+                        </div>
+
+                        <div className="opt-field">
+                            <div className="opt-label">결제수단</div>
+                            <div className="opt-controls">
+                                <select className="flex-1">
+                                    <option>nictext001m</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div className="opt-field mt_top">
+                            <div className="opt-label">조회기간</div>
+                            <div className="opt-controls col below h36">
+                                <div className="chip-row">
+                                    <span className="keyword-tag">당일</span>
+                                    <span className="keyword-tag">일주일</span>
+                                    <span className="keyword-tag">1개월</span>
+                                    <span className="keyword-tag active">직접입력</span>
+                                </div>
+
+                                <div className="range-row">
+                                    <div className="input-wrapper date">
+                                        <input
+                                            className="date-input"
+                                            type="text"
+                                            placeholder="날짜 선택"
+                                            value="2025.06.08"
+                                            readOnly={ true }
+                                        />
+                                        <button
+                                            className="date-btn"
+                                            type="button"
+                                        >
+                                            <img
+                                                src={ IMAGE_ROOT + '/ico_date.svg' }
+                                                alt="날짜 선택"
+                                            />
+                                        </button>
+                                    </div>
+                                    <span className="beetween">~</span>
+                                    <div className="input-wrapper date">
+                                        <input
+                                            className="date-input"
+                                            type="text"
+                                            placeholder="날짜 선택"
+                                            value="2025.06.08"
+                                            readOnly={ true }
+                                        />
+                                        <button
+                                            className="date-btn"
+                                            type="button"
+                                        >
+                                            <img
+                                                src={ IMAGE_ROOT + '/ico_date.svg' }
+                                                alt="날짜 선택"
+                                            />
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="opt-field">
+                            <div className="opt-label">거래 구분</div>
+                            <div className="opt-controls col below h36">
+                                <div className="chip-row">
+                                    <span className="keyword-tag flex-1 active">전체</span>
+                                    <span className="keyword-tag flex-1">미완료/ <br/> 활성화</span>
+                                    <span className="keyword-tag flex-1">입금요청</span>
+                                    <span className="keyword-tag flex-1">결제완료</span>
+                                    <span
+                                        className="keyword-tag"
+                                        style={{ visibility: 'hidden' }}
+                                    ></span>
+                                </div>
+                            </div>
+                            <div className="opt-controls col below h50 mt-10">
+                                <div className="chip-row">
+                                    <span className="keyword-tag flex-1">결제실패</span>
+                                    <span className="keyword-tag flex-1">결제중단/ <br/> 비활성화</span>
+                                    <span
+                                        className="keyword-tag"
+                                        style={{ visibility: 'hidden' }}
+                                    ></span>
+                                    <span
+                                        className="keyword-tag"
+                                        style={{ visibility: 'hidden' }}
+                                    ></span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="opt-field">
+                            <div className="opt-label">전송결과</div>
+                            <div className="opt-controls col below h36">
+                                <div className="chip-row">
+                                    <span className="keyword-tag flex-1 active">전체</span>
+                                    <span className="keyword-tag flex-1">성공</span>
+                                    <span className="keyword-tag flex-1">실패</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="opt-field">
+                            <div className="opt-label">발송수단</div>
+                            <div className="opt-controls col below h36">
+                                <div className="chip-row">
+                                    <span className="keyword-tag flex-1 active">전체</span>
+                                    <span className="keyword-tag flex-1">SMS</span>
+                                    <span className="keyword-tag flex-1">이메일</span>
+                                    <span className="keyword-tag flex-1">카카오</span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="apply-row">
+                            <button className="btn-50 btn-blue flex-1">적용</button>
+                        </div>
+
+                    </div>
+                </div>
+            </motion.div>
+        </>
+    )
+}

src/entities/additional-service/ui/link-payment-pending-send-wrap.tsx

@@ -0,0 +1,150 @@
+import { IMAGE_ROOT } from "@/shared/constants/common";
+import { useState } from "react";
+import { LinkPaymentFilter } from "./link-payment-filter";
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { PATHS } from "@/shared/constants/paths";
+
+export const LinkPaymentPendingSendWrap = () => {
+    const { navigate } = useNavigate();
+    const [filterOn, setFilterOn] = useState<boolean>(false);
+    const onClickToOpenFilter = () => {
+        setFilterOn(!filterOn);
+    };
+    const onClickToNavigate = () => {
+        navigate(PATHS.additionalService.linkPayment.request)
+    }
+    return (
+        <>
+            <section className="summary-section">
+                <div className="credit-controls">
+                    <div>
+                        <input
+                            className="credit-period"
+                            type="text"
+                            value="2025.06.01 ~ 2025.06.30"
+                            readOnly={true}
+                        />
+                        <button
+                            className="filter-btn"
+                            aria-label="필터"
+                        >
+                            <img
+                                src={IMAGE_ROOT + '/ico_setting.svg'}
+                                alt="검색옵션"
+                                onClick={() => onClickToOpenFilter()}
+                            />
+                        </button>
+                    </div>
+                    <button
+                        className="download-btn"
+                        aria-label="다운로드"
+                    >
+                        <img
+                            src={IMAGE_ROOT + '/ico_download.svg'}
+                            alt="다운로드"
+                        />
+                    </button>
+                </div>
+            </section>
+
+            <section className="filter-section">
+                <div className="sort-options">
+                    <button className="sort-btn active">최신순</button>
+                    <span className="sort-divider">|</span>
+                    <button className="sort-btn">고액순</button>
+                </div>
+                <div className="excrow">
+                    <div className="full-menu-keywords no-padding">
+                        <span className="keyword-tag active">전체</span>
+                        <span className="keyword-tag">성공</span>
+                        <span className="keyword-tag">실패</span>
+                    </div>
+                </div>
+            </section>
+
+            <section className="transaction-list">
+                <div className="date-header">25.06.08(일)</div>
+                <div className="transaction-item approved">
+                    <div className="transaction-status">
+                        <div className="status-dot blue"></div>
+                    </div>
+                    <div className="transaction-content">
+                        <div className="transaction-title">김*환(7000)</div>
+                        <div className="transaction-details">
+                            <span>발송요청</span>
+                            <span className="separator">ㅣ</span>
+                            <span>SMS</span>
+                        </div>
+                    </div>
+                    <div className="transaction-amount">5,254,000원</div>
+                </div>
+                <div className="transaction-item approved">
+                    <div className="transaction-status">
+                        <div className="status-dot blue"></div>
+                    </div>
+                    <div className="transaction-content">
+                        <div className="transaction-title">김*환(7000)</div>
+                        <div className="transaction-details">
+                            <span>발송요청</span>
+                            <span className="separator">ㅣ</span>
+                            <span>SMS</span>
+                        </div>
+                    </div>
+                    <div className="transaction-amount">5,254,000원</div>
+                </div>
+                <div className="transaction-item approved">
+                    <div className="transaction-status">
+                        <div className="status-dot blue"></div>
+                    </div>
+                    <div className="transaction-content">
+                        <div className="transaction-title">김*환(7000)</div>
+                        <div className="transaction-details">
+                            <span>발송요청</span>
+                            <span className="separator">ㅣ</span>
+                            <span>이메일</span>
+                        </div>
+                    </div>
+                    <div className="transaction-amount">5,254,000원</div>
+                </div>
+                <div className="transaction-item approved">
+                    <div className="transaction-status">
+                        <div className="status-dot gray"></div>
+                    </div>
+                    <div className="transaction-content">
+                        <div className="transaction-title">김*환(7000)</div>
+                        <div className="transaction-details">
+                            <span>발송취소</span>
+                            <span className="separator">ㅣ</span>
+                            <span>SMS</span>
+                        </div>
+                    </div>
+                    <div className="transaction-amount">5,254,000원</div>
+                </div>
+                <div className="transaction-item approved">
+                    <div className="transaction-status">
+                        <div className="status-dot gray"></div>
+                    </div>
+                    <div className="transaction-content">
+                        <div className="transaction-title">김*환(7000)</div>
+                        <div className="transaction-details">
+                            <span>발송취소</span>
+                            <span className="separator">ㅣ</span>
+                            <span>SMS</span>
+                        </div>
+                    </div>
+                    <div className="transaction-amount">5,254,000원</div>
+                </div>
+            </section>
+            <div className="apply-row">
+                <button
+                    className="btn-50 btn-blue flex-1"
+                    onClick={() => onClickToNavigate()}
+                >결제 신청</button>
+            </div>
+            <LinkPaymentFilter
+                filterOn={filterOn}
+                setFilterOn={setFilterOn}
+            ></LinkPaymentFilter>
+        </>
+    )
+}

src/entities/additional-service/ui/link-payment-tab.tsx

@@ -0,0 +1,38 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import {
+    LinkPaymentTabKeys,
+    LinkPaymentTabProps
+} from '../model/types'
+
+export const LinkPaymentTab = ({
+    activeTab
+}: LinkPaymentTabProps) => {
+    const {navigate} = useNavigate();
+
+      const onClickToNavigation = (tab: LinkPaymentTabKeys) => {
+        if(activeTab !== tab){
+          if(tab === LinkPaymentTabKeys.DispatchList){
+            navigate(PATHS.additionalService.linkPayment.dispatchList);
+          }
+          else if(tab === LinkPaymentTabKeys.PendingSend){
+            navigate(PATHS.additionalService.linkPayment.pendingSend);
+          }
+        }
+      };
+
+        return (
+          <>
+      <div className="subTab">
+        <button 
+          className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.DispatchList)? 'active': ''}` }
+          onClick={ () => onClickToNavigation(LinkPaymentTabKeys.DispatchList) } 
+        >발송내역</button>
+        <button 
+          className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.PendingSend)? 'active': ''}` }
+          onClick={ () => onClickToNavigation(LinkPaymentTabKeys.PendingSend) } 
+        >발송대기</button>
+      </div>
+          </>
+        );
+}

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

@@ -9,7 +9,8 @@ import { KeyInPaymentPage } from './key-in-payment/key-in-payment-page';
 import { SmsPaymentNotificationPage } from './sms-payment-notification/sms-payment-notification-page';
 import { AccountHolderSearchPage } from './account-holder-search/account-holder-search-page';
 import { AccountHolderAuthPage } from './account-holder-auth/account-holder-auth-page';
-import { LinkPaymentPage } from './link-payment/link-payment-page';
+import { LinkPaymentDispatchListPage } from './link-payment/link-payment-dispatch-list-page';
+import { LinkPaymentPendingSendPage } from './link-payment/link-payment-pending-send-page';
 import { KakaoPaymentNotificationListPage } from './kakao-payment-notification/list-page';
 import { KakaoPaymentNotificationSettingPage } from './kakao-payment-notification/setting-page';
 import { FundTransferRequestListPage } from './fund-transfer/request-list-page';
@@ -23,6 +24,7 @@ import { SettlementAgencyDetailPage } from './settlement-agency/detail-page';
 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';
 
 export const AdditionalServicePages = () => {
   return (
@@ -39,7 +41,12 @@ export const AdditionalServicePages = () => {
         <Route path={ROUTE_NAMES.additionalService.smsPaymentNotification} element={<SmsPaymentNotificationPage />} />
         <Route path={ROUTE_NAMES.additionalService.accountHolderSearch} element={<AccountHolderSearchPage />} />
         <Route path={ROUTE_NAMES.additionalService.accountHolderAuth} element={<AccountHolderAuthPage />} />
-        <Route path={ROUTE_NAMES.additionalService.linkPayment} element={<LinkPaymentPage />} />
+        <Route path={ROUTE_NAMES.additionalService.linkPayment.base}>
+          <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>
         <Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}>
           <Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.list} element={<KakaoPaymentNotificationListPage />} />
           <Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.setting} element={<KakaoPaymentNotificationSettingPage />} />

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

@@ -49,7 +49,7 @@ export const IntroPage = () => {
     },
     {
       className: 'list-wrap02', serviceName: '링크 결제', serviceDesc: '결제 링크 전송만으로 어디서든 결제 가능 서비스',
-      icon: IMAGE_ROOT + '/icon_ing07.svg', path: PATHS.additionalService.linkPayment
+      icon: IMAGE_ROOT + '/icon_ing07.svg', path: PATHS.additionalService.linkPayment.dispatchList
     },
     {
       className: 'list-wrap02', serviceName: '자금이체', serviceDesc: '예치금으로 즉시 송금, 파일 등록만으로 다중 송금 가능',

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

@@ -7,8 +7,9 @@ import {useSetFooterMode, useSetHeaderTitle, useSetHeaderType} from '@/widgets/s
 import {useNavigate} from '@/shared/lib/hooks/use-navigate';
 import {PATHS} from "@/shared/constants/paths";
 
-export const LinkPaymentPage = () => {
+export const LinkPaymentApplyPage = () => {
     const { navigate } = useNavigate();
+
     const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);
 
   useSetHeaderTitle('링크결제 신청');

src/pages/additional-service/link-payment/link-payment-dispatch-list-page.tsx

@@ -0,0 +1,41 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useState } from 'react';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { HeaderType } from '@/entities/common/model/types';
+import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment-tab';
+import { LinkPaymentTabKeys } from '@/entities/additional-service/model/types';
+import { LinkPaymentDispatchListWrap } from '../../../entities/additional-service/ui/link-payment-dispatch-list-wrap';
+import {
+    useSetHeaderTitle,
+    useSetHeaderType,
+    useSetFooterMode,
+    useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+
+export const LinkPaymentDispatchListPage = () => {
+    const { navigate } = useNavigate();
+
+    const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.DispatchList)
+
+    useSetHeaderTitle('링크결제')
+    useSetHeaderType(HeaderType.LeftArrow);
+    useSetFooterMode(false);
+    useSetOnBack(() => {
+        navigate(PATHS.home);
+    });
+
+    return (
+        <>
+            <main>
+                <div className="tab-content">
+                    <div className="tab-pane sub active">
+                        <LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
+                        <LinkPaymentDispatchListWrap></LinkPaymentDispatchListWrap>
+                    </div>
+                </div>
+            </main>
+        </>
+    )
+}

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

@@ -0,0 +1,40 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useState } from 'react';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { HeaderType } from '@/entities/common/model/types';
+import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment-tab';
+import { LinkPaymentTabKeys } from '@/entities/additional-service/model/types';
+import { LinkPaymentPendingSendWrap } from '../../../entities/additional-service/ui/link-payment-pending-send-wrap';
+import {
+    useSetHeaderTitle,
+    useSetHeaderType,
+    useSetFooterMode,
+    useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const LinkPaymentPendingSendPage = () => {
+    const { navigate } = useNavigate();
+
+    const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.PendingSend)
+
+    useSetHeaderTitle('링크결제')
+    useSetHeaderType(HeaderType.LeftArrow);
+    useSetFooterMode(false);
+    useSetOnBack(() => {
+        navigate(PATHS.home);
+    });
+
+    return (
+        <>
+            <main>
+                <div className="tab-content">
+                    <div className="tab-pane sub active">
+                        <LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
+                        <LinkPaymentPendingSendWrap></LinkPaymentPendingSendWrap>
+                    </div>
+                </div>
+            </main>
+        </>
+    )
+}

src/shared/constants/paths.ts

@@ -110,7 +110,7 @@ export const PATHS: RouteNamesType = {
       addAccount: generatePath(
         `${ROUTE_NAMES.account.base}${ROUTE_NAMES.account.user.base}`,
         ROUTE_NAMES.account.user.addAccount,
-      ), 
+      ),
     },
     password: {
       base: generatePath(`${ROUTE_NAMES.account.base}${ROUTE_NAMES.account.password.base}`),
@@ -136,7 +136,7 @@ export const PATHS: RouteNamesType = {
         `${ROUTE_NAMES.tax.base}${ROUTE_NAMES.tax.invoice.base}`,
         ROUTE_NAMES.tax.invoice.detail,
       ),
-    },    
+    },
     vatReference: generatePath(ROUTE_NAMES.tax.base, ROUTE_NAMES.tax.vatReference),
   },
   additionalService: {
@@ -161,7 +161,25 @@ export const PATHS: RouteNamesType = {
     smsPaymentNotification: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.smsPaymentNotification),
     accountHolderSearch: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.accountHolderSearch),
     accountHolderAuth: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.accountHolderAuth),
-    linkPayment: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.linkPayment),
+    linkPayment: {
+      base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`),
+      dispatchList: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`,
+        ROUTE_NAMES.additionalService.linkPayment.dispatchList,
+      ),
+      pendingSend: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`,
+        ROUTE_NAMES.additionalService.linkPayment.pendingSend,
+      ),
+      request: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`,
+        ROUTE_NAMES.additionalService.linkPayment.request,
+      ),
+      requestSuccess: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`,
+        ROUTE_NAMES.additionalService.linkPayment.requestSuccess,
+      )
+    },
     kakaoPaymentNotification: {
       base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}`),
       list: generatePath(

src/shared/constants/route-names.ts

@@ -80,7 +80,13 @@ export const ROUTE_NAMES = {
     smsPaymentNotification: 'sms-payment-notification',
     accountHolderSearch: 'account-holder-search',
     accountHolderAuth: 'account-holder-auth',
-    linkPayment: 'link-payment',
+    linkPayment: {
+      base: '/link-payment/*',
+      dispatchList: 'dispatch-list',
+      pendingSend: 'pending-send',
+      request: 'request',
+      requestSuccess: 'request-success'
+    },
     kakaoPaymentNotification: {
       base: '/kakao-payment-notification/*',
       list: 'list',
@@ -113,7 +119,7 @@ export const ROUTE_NAMES = {
     notice: {
       base: '/notice/*',
       list: 'list',
-      detail: 'detail',
+      detail: 'detail/:noticeId',
     },
     faq: {
       base: '/faq/*',

src/shared/ui/menu/index.tsx

@@ -87,7 +87,7 @@ export const Menu = ({
         {title: 'SMS 결제 통보', path: PATHS.additionalService.smsPaymentNotification},
         {title: '계좌성명조회', path: PATHS.additionalService.accountHolderSearch},
         {title: '계좌점유인증', path: PATHS.additionalService.accountHolderAuth},
-        {title: '링크결제', path: PATHS.additionalService.linkPayment},
+        {title: '링크결제', path: PATHS.additionalService.linkPayment.dispatchList},
         {title: '알림톡 결제통보', path: PATHS.additionalService.kakaoPaymentNotification.list},
         {title: '자금이체', path: PATHS.additionalService.fundTransfer.requestList},
         {title: '정산대행', path: PATHS.additionalService.settlementAgency.manage},