부가서비스 관련 1

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

@@ -10,10 +10,14 @@ import { SmsPaymentNotificationPage } from './sms-payment-notification/sms-payme
 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 { KakaoPaymentNotificationPage } from './kakao-payment-notification/kakao-payment-notification-page';
+import { KakaoPaymentNotificationListPage } from './kakao-payment-notification/list-page';
-import { FundTransferPage } from './fund-transfer/fund-transfer-page';
+import { KakaoPaymentNotificationSettingPage } from './kakao-payment-notification/setting-page';
+import { FundTransferRequestListPage } from './fund-transfer/request-list-page';
+import { FundTransferRequestRegisterPage } from './fund-transfer/request-register-page';
 import { SettlementAgencyPage } from './settlement-agency/settlement-agency-page';
-import { PaymentAgencyPage } from './payment-agency/payment-agency-page';
+import { PaymentAgencyListPage } from './payment-agency/list-page';
+import { PaymentAgencyDetailPage } from './payment-agency/detail-page';
+import { PaymentAgencyRequestPage } from './payment-agency/request-page';
 
 export const AdditionalServicePages = () => {
   return (
@@ -31,10 +35,20 @@ export const AdditionalServicePages = () => {
         <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.kakaoPaymentNotification} element={<KakaoPaymentNotificationPage />} />
+        <Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}>
-        <Route path={ROUTE_NAMES.additionalService.fundTransfer} element={<FundTransferPage />} />
+          <Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.list} element={<KakaoPaymentNotificationListPage />} />
+          <Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.setting} element={<KakaoPaymentNotificationSettingPage />} />
+        </Route>
+        <Route path={ROUTE_NAMES.additionalService.fundTransfer.base}>
+          <Route path={ROUTE_NAMES.additionalService.fundTransfer.requestList} element={<FundTransferRequestListPage />} />
+          <Route path={ROUTE_NAMES.additionalService.fundTransfer.requestRegister} element={<FundTransferRequestRegisterPage />} />
+        </Route>
         <Route path={ROUTE_NAMES.additionalService.settlementAgency} element={<SettlementAgencyPage />} />
-        <Route path={ROUTE_NAMES.additionalService.paymentAgency} element={<PaymentAgencyPage />} />
+        <Route path={ROUTE_NAMES.additionalService.paymentAgency.base}>
+          <Route path={ROUTE_NAMES.additionalService.paymentAgency.list} element={<PaymentAgencyListPage />} />
+          <Route path={ROUTE_NAMES.additionalService.paymentAgency.detail} element={<PaymentAgencyDetailPage />} />
+          <Route path={ROUTE_NAMES.additionalService.paymentAgency.request} element={<PaymentAgencyRequestPage />} />        
+        </Route>
       </SentryRoutes>
     </>
   );

src/pages/additional-service/fund-transfer/request-list-page.tsx

@@ -5,7 +5,7 @@ import {
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 
-export const FundTransferPage = () => {
+export const FundTransferRequestListPage = () => {
   useSetHeaderTitle('자금이체');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(true);

src/pages/additional-service/fund-transfer/request-register-page.tsx

@@ -0,0 +1,6 @@
+export const FundTransferRequestRegisterPage = () => {
+
+  return (
+    <></>
+  );
+};

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

@@ -41,7 +41,7 @@ export const IntroPage = () => {
   const requestList = [
     {
       className: 'list-wrap02', serviceName: '지급대행', serviceDesc: '하위 가맹점에 빠른 정산금 지급 지급대행 서비스',
-      icon: IMAGE_ROOT + '/icon_ing05.svg', path: PATHS.additionalService.paymentAgency
+      icon: IMAGE_ROOT + '/icon_ing05.svg', path: PATHS.additionalService.paymentAgency.list
     },
     {
       className: 'list-wrap02', serviceName: '정산대행', serviceDesc: '하위 가맹점 정산금 계산부터 지급까지 자동 해결 서비스',
@@ -53,7 +53,7 @@ export const IntroPage = () => {
     },
     {
       className: 'list-wrap02', serviceName: '자금이체', serviceDesc: '예치금으로 즉시 송금, 파일 등록만으로 다중 송금 가능',
-      icon: IMAGE_ROOT + '/icon_ing08.svg', path: PATHS.additionalService.fundTransfer
+      icon: IMAGE_ROOT + '/icon_ing08.svg', path: PATHS.additionalService.fundTransfer.requestList
     },
     {
       className: 'list-wrap02', serviceName: '계좌점유인증', serviceDesc: '1원 송금으로 실제 계좌 점유 확인 여부',
@@ -61,7 +61,7 @@ export const IntroPage = () => {
     },
     {
       className: 'list-wrap02', serviceName: '알림톡 결제통보', serviceDesc: '결제 상태를 알림톡으로 쉽고 빠른 안내',
-      icon: IMAGE_ROOT + '/icon_ing10.svg', path: PATHS.additionalService.kakaoPaymentNotification
+      icon: IMAGE_ROOT + '/icon_ing10.svg', path: PATHS.additionalService.kakaoPaymentNotification.list
     },
   ];
 

src/pages/additional-service/kakao-payment-notification/list-page.tsx

@@ -1,15 +1,27 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { 
 	useSetHeaderTitle,
 	useSetHeaderType,
-	useSetFooterMode
+	useSetFooterMode,
+  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 
-export const KakaoPaymentNotificationPage = () => {
+export const KakaoPaymentNotificationListPage = () => {
+  const { navigate } = useNavigate();
+
   useSetHeaderTitle('알림톡 결제통보');
   useSetHeaderType(HeaderType.LeftArrow);
-  useSetFooterMode(true);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
+
+  const onClickToNavigate = () => {
+    navigate(PATHS.additionalService.kakaoPaymentNotification.setting);
+  };
 
   return (
     <>
@@ -124,6 +136,12 @@ export const KakaoPaymentNotificationPage = () => {
           </div>
         </div>
       </main>
+      <div className="apply-row">
+        <button 
+          className="btn-50 btn-blue flex-1"
+          onClick={ () => onClickToNavigate() }
+        >서비스 설정</button>
+      </div>
     </>
   );
 };

src/pages/additional-service/kakao-payment-notification/setting-page.tsx

@@ -0,0 +1,161 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { HeaderType } from '@/entities/common/model/types';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const KakaoPaymentNotificationSettingPage = () => {
+  const { navigate } = useNavigate();
+
+  useSetHeaderTitle('알림톡 결제통보');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.additionalService.kakaoPaymentNotification.list);
+  });
+
+  const onClickToSave = () => {
+    
+  };
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="option-list pb-120">
+              <div className="service-settings">
+                <div className="service-notice">
+                  <div>알림톡을 발송할 대상을 설정할 수 있습니다.</div>
+                  <div>알림톡 발송 대상과 유형을 설정해 주세요.</div>
+                </div>
+
+                <div className="service-merchant">
+                  <div className="service-title">가맹점</div>
+                  <div className="service-select">
+                    <select>
+                      <option>nictest001m</option>
+                    </select>
+                    <span className="ic20 arrow-down" aria-hidden="true"></span>
+                  </div>
+                </div>
+
+                <div className="service-section">
+                  <div className="service-row align-right">
+                    <span>가맹점에 발송</span>
+                    <span>고객에게 발송</span>
+                  </div>
+                </div>
+
+                <div className="service-section">
+                  <div className="service-row">
+                    <span>신용카드(승인)</span>
+                    <div className="switch-group">
+                      <label className="settings-switch">
+                        <input type="checkbox"/>
+                        <span className="slider"></span>
+                      </label>
+                      <label className="settings-switch">
+                        <input type="checkbox"/>
+                        <span className="slider"></span>
+                      </label>
+                    </div>
+                  </div>
+                  <div className="service-row">
+                    <span>신용카드(취소)</span>
+                    <div className="switch-group">
+                      <label className="settings-switch">
+                        <input type="checkbox" checked/>
+                        <span className="slider"></span>
+                      </label>
+                      <label className="settings-switch">
+                        <input type="checkbox" checked/>
+                        <span className="slider"></span>
+                      </label>
+                    </div>
+                  </div>
+                  <div className="service-row">
+                    <span>계좌이체(승인)</span>
+                    <div className="switch-group">
+                      <label className="settings-switch">
+                        <input type="checkbox" checked/>
+                        <span className="slider"></span>
+                      </label>
+                      <label className="settings-switch">
+                        <input type="checkbox" checked/>
+                        <span className="slider"></span>
+                      </label>
+                    </div>
+                  </div>
+                  <div className="service-row">
+                    <span>계좌이체(취소)</span>
+                    <div className="switch-group">
+                      <label className="settings-switch">
+                        <input type="checkbox" checked/>
+                        <span className="slider"></span>
+                      </label>
+                      <label className="settings-switch">
+                        <input type="checkbox" checked/>
+                        <span className="slider"></span>
+                      </label>
+                    </div>
+                  </div>
+                  <div className="service-row">
+                    <span>가상계좌(입금요청)</span>
+                    <div className="switch-group">
+                      <label className="settings-switch">
+                        <input type="checkbox"/>
+                        <span className="slider"></span>
+                      </label>
+                      <label className="settings-switch">
+                        <input type="checkbox"/>
+                        <span className="slider"></span>
+                      </label>
+                    </div>
+                  </div>
+                  <div className="service-row">
+                    <span>가상계좌(입금완료)</span>
+                    <div className="switch-group">
+                      <label className="settings-switch">
+                        <input type="checkbox"/>
+                        <span className="slider"></span>
+                      </label>
+                      <label className="settings-switch">
+                        <input type="checkbox"/>
+                        <span className="slider"></span>
+                      </label>
+                    </div>
+                  </div>
+                  <div className="service-row">
+                    <span>가상계좌(환불)</span>
+                    <div className="switch-group">
+                      <label className="settings-switch">
+                        <input type="checkbox"/>
+                        <span className="slider"></span>
+                      </label>
+                      <label className="settings-switch">
+                        <input type="checkbox"/>
+                        <span className="slider"></span>
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="apply-row">
+              <button
+                className="btn-50 btn-blue flex-1"
+                onClick={ () => onClickToSave() }
+              >저장</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

src/pages/additional-service/payment-agency/detail-page.tsx

@@ -0,0 +1,93 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const PaymentAgencyDetailPage = () => {
+  const { navigate } = useNavigate();
+
+  useSetHeaderTitle('지급대행 상세');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.additionalService.paymentAgency.list);
+  });
+
+  return (
+    <>
+      <main className="full-height">
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="pay-top">
+              <div className="num-amount">
+                <span className="amount">10,000,000원</span>
+              </div>
+              <div className="num-store">나이스테스트가맹점</div>
+              <div className="num-day">2025.08.19</div>
+              <div className="receipt-row">
+                <button
+                  className="receipt-btn"
+                  type="button" 
+                >
+                  <span className="icon-24 download"></span>
+                  <span>입출금 확인증</span>
+                </button>
+              </div>
+            </div>
+            <div className="detail-divider"></div>
+            <div className="pay-detail">
+              <div className="detail-title">상세 정보</div>
+              <ul className="kv-list">
+                <li className="kv-row">
+                  <span className="k">지급상태</span>
+                  <span className="v">요청</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">거래유형</span>
+                  <span className="v">최초요청</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">요청일</span>
+                  <span className="v">2025.06.05</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">지급일시</span>
+                  <span className="v">2025.06.08 11:00:00</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">사업자번호</span>
+                  <span className="v">'123456789'</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">예금주</span>
+                  <span className="v">김테스트</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">은행</span>
+                  <span className="v">기업은행</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">계좌번호</span>
+                  <span className="v">'1123456789'</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">입금인자</span>
+                  <span className="v">나이스정산금</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">실패사유</span>
+                  <span className="v">&nbsp;</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

src/pages/additional-service/payment-agency/list-page.tsx

@@ -0,0 +1,170 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { HeaderType } from '@/entities/common/model/types';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const PaymentAgencyListPage = () => {
+  const { navigate } = useNavigate();
+  
+  useSetHeaderTitle('지급대행');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
+
+  const onClickToNavigation = () => {
+    navigate(PATHS.additionalService.paymentAgency.request);
+  };
+  const onClickToGoDetail = (tid?: string) => {
+    navigate(PATHS.additionalService.paymentAgency.detail, {
+      state: {
+        tid: 'A123456'
+      }
+    });
+  };
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <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="검색옵션"
+                    />
+                  </button>
+                </div>
+                <button 
+                  className="download-btn" 
+                  aria-label="다운로드"
+                >
+                  <img 
+                    src={ IMAGE_ROOT + '/ico_download.svg' } 
+                    alt="다운로드"
+                  />
+                </button>
+              </div>
+              <div className="account-frame">
+                <div className="credit-summary">
+                  <div className="row">
+                    <span className="label">예치금 잔액</span>
+                    <span className="amount22">
+                      50,000,000<span className="unit">원</span>
+                    </span>
+                  </div>
+                </div>
+              </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>
+                  <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"
+                onClick={ () => onClickToGoDetail() }
+              >
+                <div className="transaction-status">
+                  <div className="status-dot blue"></div>
+                </div>
+                <div className="transaction-content">
+                  <div className="transaction-title">카카오스타일</div>
+                  <div className="transaction-details gap-0">
+                    <span>요청</span>
+                    <span className="separator">ㅣ</span>
+                    <span>cruiquis01m</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">카카오스타일</div>
+                  <div className="transaction-details gap-0">
+                    <span>요청</span>
+                    <span className="separator">ㅣ</span>
+                    <span>cruiquis01m</span>
+                  </div>
+                </div>
+                <div className="transaction-amount">5,254,000원</div>
+              </div>
+
+              <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">카카오스타일</div>
+                  <div className="transaction-details gap-0">
+                    <span>요청</span>
+                    <span className="separator">ㅣ</span>
+                    <span>cruiquis01m</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">카카오스타일</div>
+                  <div className="transaction-details gap-0">
+                    <span>요청</span>
+                    <span className="separator">ㅣ</span>
+                    <span>cruiquis01m</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={ () => onClickToNavigation() }
+              >지급대행 신청</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

src/pages/additional-service/payment-agency/payment-agency-page.tsx

@@ -1,18 +0,0 @@
-import { HeaderType } from '@/entities/common/model/types';
-import { 
-	useSetHeaderTitle,
-	useSetHeaderType,
-	useSetFooterMode
-} from '@/widgets/sub-layout/use-sub-layout';
-
-export const PaymentAgencyPage = () => {
-  useSetHeaderTitle('지급대행');
-  useSetHeaderType(HeaderType.LeftArrow);
-  useSetFooterMode(true);
-
-  return (
-    <>
-
-    </>
-  );
-};

src/pages/additional-service/payment-agency/request-page.tsx

@@ -0,0 +1,78 @@
+import { IMAGE_ROOT } from "@/shared/constants/common";
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const PaymentAgencyRequestPage = () => {
+  const { navigate } = useNavigate();
+
+  useSetHeaderTitle('지급대행 신청');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.additionalService.paymentAgency.list);
+  });
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="ing-list">
+              <div className="billing-form gap-30">
+                <div className="billing-row">
+                  <div className="billing-label">서브ID</div>
+                  <div className="billing-field">
+                    <input 
+                      type="text" 
+                      value="BIKYvattest01m" 
+                      readOnly={ true }
+                    />
+                  </div>
+                </div>
+                <div className="billing-row">
+                  <div className="billing-label">지급액</div>
+                  <div className="billing-field">
+                    <input 
+                      type="text" 
+                      value="테스트상품123" 
+                      readOnly={ true }
+                     />
+                  </div>
+                </div>
+                <div className="billing-row">
+                  <div className="billing-label">지급일</div>
+                  <div className="billing-field">
+                    <div className="input-wrapper date">
+                      <input 
+                        className="date-input"
+                        type="text" 
+                        placeholder="날짜 선택" 
+                        value="2025.06.08" 
+                      />
+                      <button 
+                        className="date-btn"
+                        type="button"
+                      >
+                        <img
+                          src={ IMAGE_ROOT + '/ico_date.svg' }
+                          alt="날짜 선택"
+                        />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

src/shared/constants/paths.ts

@@ -162,10 +162,44 @@ export const PATHS: RouteNamesType = {
     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),
-    kakaoPaymentNotification: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.kakaoPaymentNotification),
+    kakaoPaymentNotification: {
-    fundTransfer: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.fundTransfer),
+      base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}`),
+      list: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}`,
+        ROUTE_NAMES.additionalService.kakaoPaymentNotification.list,
+      ),
+      setting: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}`,
+        ROUTE_NAMES.additionalService.kakaoPaymentNotification.setting,
+      ),
+    },
+    fundTransfer: {
+      base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.fundTransfer.base}`),
+      requestList: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.fundTransfer.base}`,
+        ROUTE_NAMES.additionalService.fundTransfer.requestList,
+      ),
+      requestRegister: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.fundTransfer.base}`,
+        ROUTE_NAMES.additionalService.fundTransfer.requestRegister,
+      ),
+    },
     settlementAgency: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.settlementAgency),
-    paymentAgency: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.paymentAgency),
+    paymentAgency: {
+      base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.paymentAgency.base}`),
+      list: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.paymentAgency.base}`,
+        ROUTE_NAMES.additionalService.paymentAgency.list,
+      ),
+      detail: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.paymentAgency.base}`,
+        ROUTE_NAMES.additionalService.paymentAgency.detail,
+      ),
+      request: generatePath(
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.paymentAgency.base}`,
+        ROUTE_NAMES.additionalService.paymentAgency.request,
+      ),
+    },
   },
   support: {
     base: generatePath(ROUTE_NAMES.support.base),

src/shared/constants/route-names.ts

@@ -81,10 +81,24 @@ export const ROUTE_NAMES = {
     accountHolderSearch: 'account-holder-search',
     accountHolderAuth: 'account-holder-auth',
     linkPayment: 'link-payment',
-    kakaoPaymentNotification: 'kakao-payment-notification',
+    kakaoPaymentNotification: {
-    fundTransfer: 'fund-transfer',
+      base: '/kakao-payment-notification/*',
+      list: 'list',
+      setting: 'setting',
+    },
+    fundTransfer: {
+      base: '/fund-transfer/*',
+      requestList: 'request-list',
+      requestRegister: 'request-register',
+    },
     settlementAgency: 'settlement-agency',
-    paymentAgency: 'payment-agency',
+    paymentAgency: {
+      base: '/payment-agency/*',
+      list: 'list',
+      detail: 'detail',
+      request: 'request',
+    },
+    
   },
   support: {
     base: '/support/*',

src/shared/ui/assets/css/style.css

@@ -115,8 +115,10 @@ body {}
 .mb-16 {margin-bottom: 16px !important;}
 .mb-20 {margin-bottom: 20px !important;}
 
+.mr-0 {margin-right: 0px !important;}
 .mr-10 {margin-right: 10px !important;}
-
+.mr-26 {margin-right: 26px !important;}
+.max-70 {max-width: 70% !important;}
 .wid-100 {
     width: 100% !important;
 }
@@ -1919,6 +1921,10 @@ input[type="radio"] {
     box-sizing: border-box;
 }
 
+.subTab.three {
+    grid-template-columns: 1fr 1fr 1fr !important;
+}
+
 .subtab-btn {
     height: 46px;
     background: var(--color-white);
@@ -1972,6 +1978,17 @@ input[type="radio"] {
     color: var(--color-111111);
 }
 
+.amount-text.states {
+    font-size: var(--fs-16);
+    font-weight: var(--fw-700);
+    color: var(--color-111111);
+}
+.amount-text.states-17 {
+    font-size: var(--fs-17);
+    font-weight: var(--fw-700);
+    color: var(--color-111111);
+}
+
 .summary-actions {
     display: flex;
     gap: 10px;
@@ -2054,7 +2071,7 @@ input[type="radio"] {
     font-size: var(--fs-16);
     font-weight: var(--fw-600);
     color: var(--color-2D3436);
-    padding: 16px 0;
+    padding: 16px 0 12px 0;
 }
 
 .transaction-item {
@@ -2073,13 +2090,13 @@ input[type="radio"] {
 }
 
 .status-dot {
-    width: 8px;
+    width: 9px;
-    height: 8px;
+    height: 9px;
     border-radius: 50%;
 }
 
 .status-dot.blue {
-    background: var(--color-4968BD);
+    background: var(--color-3E6AFC);
 }
 
 .status-dot.gray {
@@ -2103,8 +2120,8 @@ input[type="radio"] {
     color: var(--color-999999);
     display: flex;
     flex-wrap: nowrap;
-    gap: 6px;
+    gap: 0;
-    align-items: center;
+    align-items: start;
     width: 100%;
     overflow-x: auto;
     width: calc(100vw - 90px);
@@ -2240,6 +2257,10 @@ div .credit-period {
     background-color: var(--color-F4F8FF);
 }
 
+.summary-extend .summary-amount-list .bdr-6 {
+    border-radius: 6px;
+}
+
 .summary-extend .summary-amount-item {
     display: flex;
     justify-content: space-between;
@@ -2259,7 +2280,7 @@ div .credit-period {
     display: inline-block;
     margin-right: 8px;
     position: relative;
-    top: -2px;
+    top: -1px;
 }
 
 .summary-extend .summary-amount-item .value {
@@ -2320,6 +2341,10 @@ div .credit-period {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
 }
+.notice-tabs.sub { 
+    margin-bottom: 0; 
+}
+
 .notice-tabs::-webkit-scrollbar{ display:none; height:0; }
 
 .tab36 { 
@@ -2626,6 +2651,10 @@ div .credit-period {
     flex-wrap: wrap;
 }
 
+.kv-row:last-child {
+    padding-bottom: 0 !important;
+}
+
 .gap-50 .kv-row {
     gap: 50px;
 }
@@ -3279,6 +3308,10 @@ div .credit-period {
     gap: 16px;
 }
 
+.gap-30 {
+    gap: 30px;
+}
+
 .billing-row {
     display: flex;
     align-items: center;
@@ -3297,6 +3330,7 @@ div .credit-period {
 }
 
 .billing-field {
+    position: relative;
     flex: 1;
 }
 
@@ -4458,6 +4492,7 @@ ul.txn-amount-detail li span:last-child {
     background: #F5F5F5;
     border-radius: 6px;
 }
+.transfer-filter { display:flex; align-items:center; gap:10px; padding:30px 26px 0; }
 
 .icon-24.adjust {
     width: 24px;
@@ -4877,15 +4912,240 @@ ul.txn-amount-detail li span:last-child {
     width: 100%;
     display: block;
 }
+
+.account-frame .credit-summary .row.horizontal > span {
+    width: inherit;
+}
+
 .account-frame .credit-summary .label {
     font-size: var(--fs-16);
     color: var(--color-111111);
     font-weight: var(--fw-700);
 }
+
 .account-frame .credit-summary .amount22 {
     font-size: var(--fs-28);
     font-weight: var(--fw-700);
 }
+
+.account-frame .credit-summary .amount20 {
+    font-size: var(--fs-22);
+    font-weight: var(--fw-700);
+}
+
 .transaction-details.gap-0 {
     gap: 0;
+}
+/* 104 지급대행_상세 */
+.pay-top {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    padding: 30px 10px 0;
+}
+.pay-top .num-amount .amount {
+    font-size: var(--fs-28);
+    font-weight: var(--fw-700);
+    color: var(--color-2D3436);
+}
+.pay-top .num-store,
+.pay-top .num-day {
+    font-size: var(--fs-17);
+    font-weight: 600;
+    color: #999999;
+}
+.receipt-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding-top: 26px;
+}
+.receipt-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 2px 10px;
+    border-radius: 6px;
+    background: #F4F8FF;
+}
+.detail-divider {
+    height: 1px;
+    background: #EAEAEA;
+    margin: 26px -26px;
+}
+.pay-detail {
+    padding: 0 10px;
+}
+.pay-detail .detail-title {
+    font-size: var(--fs-17);
+    font-weight: var(--fw-700);
+    color: var(--color-2D3436);
+    padding-bottom: 16px;
+}
+/* 105 알림톡 결제 통보 -> 지급대행 신청 폼 */
+.billing-form.gap-16 { 
+    gap: 16px; 
+}
+
+.billing-row { 
+    display: flex; 
+    align-items: center; 
+    gap: 10px; 
+    justify-content: space-between;
+}
+
+.billing-label { 
+    width: 90px; 
+    font-size: var(--fs-16); 
+    font-weight: var(--fw-500); 
+    color: var(--color-2D3436); 
+}
+
+.billing-field { 
+    flex: 1; 
+}
+
+.billing-inline { 
+    display: grid; 
+    grid-template-columns: 1fr 40px; 
+    gap: 10px; 
+}
+
+.calendar-btn { 
+    background: none; 
+    border: none; 
+}
+.notice-bar.style-note {
+    background: none;
+    padding: 0;
+}
+
+.notice-bar.style-note > span {
+    position: relative;
+    display: block;
+    padding-left: 13px;
+}
+.notice-bar.style-note > span > span {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+/* 107 자금이체_결과조회 */
+/* Uses existing .summary-extend, .summary-amount-list styles from 106 */
+/* 108 안면인증_리스트 */
+.face-list { 
+    padding: 0 10px; 
+}
+
+.face-item { 
+    display:flex; 
+    justify-content: space-between; 
+    align-items: flex-start; 
+    gap:10px; 
+    padding:16px 0; 
+    border-bottom:1px solid #EAEAEA; 
+}
+
+.face-item:last-child { 
+    border-bottom:0; 
+}
+
+.face-txt { 
+    flex:1; 
+    min-width:0; 
+}
+
+.face-id { 
+    font-size: var(--fs-16); 
+    color: var(--color-2D3436); 
+}
+
+.face-msg { 
+    font-size: var(--fs-14); 
+    color: #777777; 
+    margin-top: 6px; 
+}
+
+.face-status { 
+    display: flex; 
+    align-items: center; 
+    gap: 6px; 
+    white-space: nowrap; 
+}
+
+.face-status .dot { 
+    width: 9px; 
+    height: 9px; 
+    border-radius: 50%; 
+    display: inline-block; 
+}
+
+.face-status .dot.blue { 
+    background:#3E6AFC; 
+}
+
+.face-status .dot.gray { 
+    background:#C6C6C6; 
+}
+
+.face-status .status { 
+    font-size: var(--fs-16); 
+    font-weight: var(--fw-500); 
+    color: #3E6AFC; 
+}
+
+.face-status .status.fail { color: #999999; }
+
+/* 108 안면인증_리스트 - 두줄 말줄임 처리 */
+.face-list .transaction-details span:last-child {
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: 100%;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+}
+/* 109 정산대행_정산대행관리_정산 데이터 펼침 */
+/* Uses existing .summary-extend, .summary-amount-list, .notice-tabs, .tab36 styles */
+.account-frame .credit-summary .row.horizontal {
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+}
+
+
+/* 110 정산대행 관리_상세 - 상태 변경 이력 */
+.sd-history {
+    padding: 0 10px;
+}
+.sd-history-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    height: 70px;
+}
+.sd-history-item .left { width: 180px; }
+.sd-history-item .right { width: 140px; text-align: right; }
+.sd-history-item .name {
+    font-size: 16px;
+    font-weight: 400;
+    color: var(--color-2D3436);
+}
+.sd-history-item .time {
+    font-size: 14px;
+    color: var(--color-777777);
+}
+.sd-history-item .reason {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--color-2D3436);
+}
+
+.detail-title.summary-amount.divTop {
+    justify-content: space-between;
 }

src/shared/ui/menu/index.tsx

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