Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

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

@@ -2,9 +2,9 @@ import { Route } from 'react-router-dom';
 import { SentryRoutes } from '@/shared/configs/sentry';
 import { ROUTE_NAMES } from '@/shared/constants/route-names';
 import { IntroPage } from './intro/intro-page';
-import { ArsCardPaymentListPage } from './ars-card-payment/list-page';
-import { ArsCardPaymentRequestPage } from './ars-card-payment/request-page';
-import { ArsCardPaymentRequestSuccessPage } from './ars-card-payment/request-success-page';
+import { ArsListPage } from './ars/list-page';
+import { ArsRequestPage } from './ars/request-page';
+import { ArsRequestSuccessPage } from './ars/request-success-page';
 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';
@@ -17,6 +17,7 @@ import { FundAccountTransferListPage } from './fund-account/transfer-list-page';
 import { FundAccountTransferDetailPage } from './fund-account/transfer-detail-page';
 import { FundAccountTransferRequestPage } from './fund-account/transfer-request-page';
 import { FundAccountResultListPage } from './fund-account/result-list-page';
+import { FundAccountResultDetailPage } from './fund-account/result-detail-page';
 import { SettlementAgencyManagePage } from './settlement-agency/manage-page';
 import { SettlementAgencyDepositPage } from './settlement-agency/deposit-page';
 import { SettlementAgencyMemberPage } from './settlement-agency/member-page';
@@ -42,10 +43,10 @@ export const AdditionalServicePages = () => {
       <SentryRoutes>
         <Route path={ROUTE_NAMES.additionalService.intro} element={<IntroPage />} />
 
-        <Route path={ROUTE_NAMES.additionalService.arsCardPayment.base}>
-          <Route path={ROUTE_NAMES.additionalService.arsCardPayment.list} element={<ArsCardPaymentListPage />} />
-          <Route path={ROUTE_NAMES.additionalService.arsCardPayment.request} element={<ArsCardPaymentRequestPage />} />
-          <Route path={ROUTE_NAMES.additionalService.arsCardPayment.requestSuccess} element={<ArsCardPaymentRequestSuccessPage />} />
+        <Route path={ROUTE_NAMES.additionalService.ars.base}>
+          <Route path={ROUTE_NAMES.additionalService.ars.list} element={<ArsListPage />} />
+          <Route path={ROUTE_NAMES.additionalService.ars.request} element={<ArsRequestPage />} />
+          <Route path={ROUTE_NAMES.additionalService.ars.requestSuccess} element={<ArsRequestSuccessPage />} />
         </Route>
         <Route path={ROUTE_NAMES.additionalService.keyInPayment.base}>
           <Route path={ROUTE_NAMES.additionalService.keyInPayment.list} element={<KeyInPaymentPage />} />
@@ -80,6 +81,7 @@ export const AdditionalServicePages = () => {
           <Route path={ROUTE_NAMES.additionalService.fundAccount.transferDetail} element={<FundAccountTransferDetailPage />} />
           <Route path={ROUTE_NAMES.additionalService.fundAccount.transferRequest} element={<FundAccountTransferRequestPage />} />
           <Route path={ROUTE_NAMES.additionalService.fundAccount.resultList} element={<FundAccountResultListPage />} />
+          <Route path={ROUTE_NAMES.additionalService.fundAccount.resultDetail} element={<FundAccountResultDetailPage />} />
         </Route>
         <Route path={ROUTE_NAMES.additionalService.settlementAgency.base}>
           <Route path={ROUTE_NAMES.additionalService.settlementAgency.manage} element={<SettlementAgencyManagePage />} />

src/pages/additional-service/ars-card-payment/list-page.tsx

@@ -1,217 +0,0 @@
-import { PATHS } from '@/shared/constants/paths';
-import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { IMAGE_ROOT } from '@/shared/constants/common';
-import { HeaderType } from '@/entities/common/model/types';
-import { 
-	useSetHeaderTitle,
-	useSetHeaderType,
-	useSetFooterMode,
-  useSetOnBack
-} from '@/widgets/sub-layout/use-sub-layout';
-
-export const ArsCardPaymentListPage = () => {
-  const { navigate } = useNavigate();
-
-  useSetHeaderTitle('신용카드 ARS 결제');
-  useSetHeaderType(HeaderType.LeftArrow);
-  useSetFooterMode(false);
-  useSetOnBack(() => {
-    navigate(PATHS.home);
-  });
-
-  const onClickToNavigation = () => {
-    navigate(PATHS.additionalService.arsCardPayment.request);
-  };
-
-  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>
-            </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-group">
-                <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>20:00ㅣ미결제ㅣ결제대기ㅣSMS</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">5,254,000원</div>
-                </div>
-                <div className="transaction-item refund">
-                  <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>20:00ㅣ결제완료ㅣ결제성공ㅣ호전환</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">23,845,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>20:00ㅣ결제완료ㅣ결제성공ㅣ호전환</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">534,000원</div>
-                </div>
-                <div className="transaction-item refund">
-                    <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>20:00ㅣ미결제ㅣ취소완료ㅣSMS</span>
-                      </div>
-                    </div>
-                    <div className="transaction-amount">4,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>20:00ㅣ미결제ㅣ기간만료ㅣSMS</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">948,000원</div>
-                </div>
-              </div>
-
-              <div className="date-group">
-                <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">
-                            <span>승인ㅣ20:00ㅣcroquis01m</span>
-                        </div>
-                    </div>
-                    <div className="transaction-amount">3,583,000원</div>
-                </div>
-                <div className="transaction-item refund">
-                  <div className="transaction-status">
-                    <div className="status-dot gray"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">신용카드(현대카드., 토스)</div>
-                    <div className="transaction-details">
-                      <span>환불ㅣ20:00ㅣcroquis01m</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">874,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">계좌간편결제(국민은행, PAYU)</div>
-                    <div className="transaction-details">
-                      <span>승인ㅣ20:00ㅣcroquis01m</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">23,562,000원</div>
-                </div>
-                <div className="transaction-item refund">
-                  <div className="transaction-status">
-                    <div className="status-dot gray"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">휴대폰</div>
-                    <div className="transaction-details">
-                      <span>환불ㅣ20:00ㅣcroquis01m</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">783,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">SSG 은행계좌(농협중앙회)</div>
-                    <div className="transaction-details">
-                      <span>승인ㅣ20:00ㅣcroquis01m</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">3,923,000원</div>
-                </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/ars/list-page.tsx

@@ -0,0 +1,217 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { HeaderType, SortByKeys } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+import { useEffect, useState } from 'react';
+import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
+import { ArsListContent, ExtensionArsDownloadExcelParams, ExtensionArsDownloadExcelResponse, ExtensionArsListParams, ExtensionArsListResponse, OrderStatus, PaymentStatus } from '@/entities/additional-service/model/ars/types';
+import { useExtensionArsListMutation } from '@/entities/additional-service/api/ars/use-extension-ars-list-mutation';
+import moment from 'moment';
+import { useExtensionArsDownloadExcelMutation } from '@/entities/additional-service/api/ars/use-extension-ars-download-excel-mutation';
+import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
+import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';
+import { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
+import { PaymentStatusBtnGroup } from '@/entities/additional-service/model/ars/constant';
+
+export const ArsListPage = () => {
+  const { navigate } = useNavigate();
+
+  const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
+  const [listItems, setListItems] = useState<Record<string, Array<ArsListContent>>>({});
+  const [filterOn, setFilterOn] = useState<boolean>(false);
+  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [mid, setMid] = useState<string>('nictest001m');
+  const [moid, setMoid] = useState<string>('');
+  const [fromDate, setFromDate] = useState<string>(moment().format('YYYYMMDD'));
+  const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
+  const [paymentStatus, setPaymentStatus] = useState<PaymentStatus>(PaymentStatus.ALL);
+  const [orderStatus, setOrderStatus] = useState<OrderStatus>(OrderStatus.ALL);
+  const [minAmount, setMinAmount] = useState<number>(0);
+  const [maxAmount, setMaxAmount] = useState<number>(0);
+
+  const { mutateAsync: extensionArsList } = useExtensionArsListMutation();
+  const { mutateAsync: extensionArsDownloadExcel } = useExtensionArsDownloadExcelMutation();
+  
+  useSetHeaderTitle('신용카드 ARS 결제');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
+
+  const callList = (option?: {
+    sortBy?: string, 
+    val?: string
+  }) => {
+    pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
+    setPageParam(pageParam);
+
+    let params: ExtensionArsListParams = {
+      mid: mid,
+      moid: moid,
+      fromDate: fromDate,
+      toDate: toDate,
+      paymentStatus: paymentStatus,
+      orderStatus: orderStatus,
+      minAmount: minAmount,
+      maxAmount: maxAmount,
+      page: pageParam
+    };
+    extensionArsList(params).then((rs: ExtensionArsListResponse) => {
+      setListItems(assembleData(rs.content));
+    });
+  };
+
+  const callDownloadExcel = () => {
+    let params: ExtensionArsDownloadExcelParams = {
+      mid: mid,
+      moid: moid,
+      fromDate: fromDate,
+      toDate: toDate,
+      paymentStatus: paymentStatus,
+      orderStatus: orderStatus,
+      minAmount: minAmount,
+      maxAmount: maxAmount,
+    };
+    extensionArsDownloadExcel(params).then((rs: ExtensionArsDownloadExcelResponse) => {
+
+    });
+  };
+
+  const assembleData = (content: Array<ArsListContent>) => {
+    let data: any = {};
+    if(content && content.length > 0){
+      for(let i=0;i<content?.length;i++){
+        let date = content[i]?.paymentDate?.substring(0, 8);
+        let groupDate = moment(date).format('YYYYMMDD');
+        if(!!groupDate && !data.hasOwnProperty(groupDate)){
+          data[groupDate] = [];
+        }
+        if(!!groupDate && data.hasOwnProperty(groupDate)){
+          data[groupDate].push(content[i]);
+        }
+      }
+    }
+    return data;
+  };
+
+  const onClickToNavigation = () => {
+    navigate(PATHS.additionalService.ars.request);
+  };
+
+  const onClickToDownloadExcel = () => {
+    callDownloadExcel();
+  };
+  const onClickToOpenFilter = () => {
+    setFilterOn(!filterOn);
+  };
+  const onClickToSort = (sort: SortByKeys) => {
+    setSortBy(sort);
+    callList({sortBy: sort});
+  };
+  const onClickToPaymentStatus = (val: PaymentStatus) => {
+    setPaymentStatus(val);
+    callList({val: val});
+  };
+
+  useEffect(() => {
+    callList();
+  }, []);
+
+  const getArsList = () => {
+    let rs = [];
+    if(Object.keys(listItems).length > 0){
+      for (const [key, value] of Object.entries(listItems)) {
+        rs.push(
+          <ListDateGroup
+            additionalServiceCategory={ AdditionalServiceCategory.Ars }
+            mid={ mid }
+            key={ key }
+            date={ key }
+            items={ value }
+          ></ListDateGroup>
+        );  
+      }
+    }
+    return rs;
+  }
+
+  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={ moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD') } 
+                    readOnly={ true }
+                  />
+                  <button 
+                    className="filter-btn" 
+                    aria-label="필터"
+                    onClick={ () => onClickToOpenFilter() }
+                  >
+                    <img 
+                      src={ IMAGE_ROOT + '/ico_setting.svg' }
+                      alt="검색옵션"
+                    />
+                  </button>
+                </div>
+                <button 
+                  className="download-btn" 
+                  aria-label="다운로드"
+                  onClick={ () => onClickToDownloadExcel() }
+                >
+                  <img 
+                    src={ IMAGE_ROOT +'/ico_download.svg' }
+                    alt="다운로드"
+                  />
+                </button>
+              </div>
+            </section>
+
+            <section className="filter-section">
+              <SortOptionsBox
+                sortBy={ sortBy }
+                onClickToSort={ onClickToSort }
+              ></SortOptionsBox>
+              <div className="excrow mr-0">
+                <div className="full-menu-keywords no-padding">
+                  {
+                    PaymentStatusBtnGroup.map((value, index) => (
+                      <span 
+                        key={ `key-service-code=${ index }` }
+                        className={ `keyword-tag ${(paymentStatus === value.value)? 'active': ''}` }
+                        onClick={ () => onClickToPaymentStatus(value.value) }
+                      >{ value.name }</span>
+                    ))
+                  }
+                </div>
+              </div>
+            </section>
+            
+            <section className="transaction-list">
+              { getArsList() }
+              <div className="apply-row">
+                <button 
+                  className="btn-50 btn-blue flex-1"
+                  onClick={ () => onClickToNavigation() }
+                >결제 신청</button>
+              </div>
+            </section>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

src/pages/additional-service/ars/request-page.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { useExtensionArsApplyMutation } from '@/entities/additional-service/api/use-extension-ars-apply-mutation';
+import { useExtensionArsApplyMutation } from '@/entities/additional-service/api/ars/use-extension-ars-apply-mutation';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
 	useSetHeaderTitle,
@@ -11,7 +11,7 @@ import {
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 
-export const ArsCardPaymentRequestPage = () => {
+export const ArsRequestPage = () => {
   const { navigate } = useNavigate();
 
   const { mutateAsync: arsApply } = useExtensionArsApplyMutation();
@@ -20,10 +20,10 @@ export const ArsCardPaymentRequestPage = () => {
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
   useSetOnBack(() => {
-    navigate(PATHS.additionalService.arsCardPayment.list);
+    navigate(PATHS.additionalService.ars.list);
   });
 
-  const callArsCardPaymentRequest = () => {
+  const callArsRequest = () => {
     let arsApplyParams = {
       mid: 'string',
       moid: 'string',
@@ -36,7 +36,7 @@ export const ArsCardPaymentRequestPage = () => {
       arsPaymentMethod: 'SMS',
     };
     arsApply(arsApplyParams).then((rs) => {
-      navigate(PATHS.additionalService.arsCardPayment.requestSuccess);
+      navigate(PATHS.additionalService.ars.requestSuccess);
       console.log(rs)
     }).catch(() => {
 
@@ -47,7 +47,7 @@ export const ArsCardPaymentRequestPage = () => {
   };
 
   const onClickToRequest = () => {
-    callArsCardPaymentRequest();
+    callArsRequest();
   };  
 
   return (

src/pages/additional-service/ars/request-success-page.tsx

@@ -5,14 +5,14 @@ import {
   useSetHeaderType,
   useSetFooterMode,
 } from '@/widgets/sub-layout/use-sub-layout';
-export const ArsCardPaymentRequestSuccessPage = () => {
+export const ArsRequestSuccessPage = () => {
   const { navigate } = useNavigate();
 
   useSetHeaderType(HeaderType.NoHeader);
   useSetFooterMode(false);
 
   const onClickToNavigate = () => {
-    navigate(PATHS.additionalService.arsCardPayment.list);
+    navigate(PATHS.additionalService.ars.list);
   };
 
   return (

src/pages/additional-service/fund-account/result-detail-page.tsx

@@ -0,0 +1,123 @@
+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';
+import { useLocation } from 'react-router';
+import { useEffect, useState } from 'react';
+import { NumericFormat } from 'react-number-format';
+import { 
+  ExtensionFundAccountResultDetailParams, 
+  ExtensionFundAccountResultDetailResponse, 
+} from '@/entities/additional-service/model/fund-account/types';
+import moment from 'moment';
+import { useExtensionFundAccountResultDetailMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-result-detail-mutation';
+
+export const FundAccountResultDetailPage = () => {
+  const { navigate } = useNavigate();
+  const location = useLocation();
+
+  const tid = location.state.tid;
+  const mid = location.state.mid;
+
+  const [detail, setDetail] = useState<ExtensionFundAccountResultDetailResponse>();
+
+  const { mutateAsync: extensionFundAccountResultDetail } = useExtensionFundAccountResultDetailMutation();
+  
+  const callDetail = () => {
+    let params: ExtensionFundAccountResultDetailParams = {
+      tid: tid,
+      mid: mid,
+    };
+
+    extensionFundAccountResultDetail(params).then((rs: ExtensionFundAccountResultDetailResponse) => {
+      setDetail(rs);
+    });
+  };
+
+  useSetHeaderTitle('자금이체 상세');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.additionalService.fundAccount.resultList);
+  });
+
+  useEffect(() => {
+    callDetail();
+  }, []);
+
+  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">
+                  <NumericFormat
+                    value={ detail?.transferAmount } 
+                    thousandSeparator
+                    displayType="text"
+                    suffix='원'
+                  ></NumericFormat>
+                </span>
+              </div>
+              <div className="num-store">{ detail?.receiveAccountName }({ detail?.receiveAccountNo })</div>
+              <div className="num-day">{ moment(detail?.processDate).format('YYYY.MM.DD') }</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">{ moment(detail?.processDate).format('YYYY.MM.DD') }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">이체일시</span>
+                  <span className="v">{ moment(detail?.requestDate).format('YYYY.MM.DD') }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">이체결과</span>
+                  <span className="v">{ detail?.status }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">실패사유</span>
+                  <span className="v">{ detail?.failReason }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">수취인명</span>
+                  <span className="v">{ detail?.receiveAccountName }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">은행</span>
+                  <span className="v">{ detail?.receiveBankName }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">계좌번호</span>
+                  <span className="v">{ detail?.receiveAccountNo }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">MID</span>
+                  <span className="v">{ mid }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">주문번호</span>
+                  <span className="v">{ '주문번호' }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">TID</span>
+                  <span className="v">{ detail?.bankTid }</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

src/pages/additional-service/fund-account/transfer-detail-page.tsx

@@ -81,8 +81,8 @@ export const FundAccountTransferDetailPage = () => {
                   ></NumericFormat>
                 </span>
               </div>
-              <div className="num-store">나이스테스트가맹점</div>
-              <div className="num-day">2025.08.19</div>
+              <div className="num-store">{ detail?.receiveAccountName }({ detail?.receiveAccountNo })</div>
+              <div className="num-day">{ moment(detail?.processDate).format('YYYY.MM.DD') }</div>
             </div>
             <div className="detail-divider"></div>
             <div className="pay-detail">

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

@@ -27,7 +27,7 @@ export const IntroPage = () => {
     },
     {
       className: 'list-wrap01', serviceName: '신용카드 ARS 결제', serviceDesc: '전화 한 통으로 결제 성공 편리하고 안전한 서비스',
-      icon: IMAGE_ROOT + '/icon_ing01.svg', path: PATHS.additionalService.arsCardPayment.list
+      icon: IMAGE_ROOT + '/icon_ing01.svg', path: PATHS.additionalService.ars.list
     },
     {
       className: 'list-wrap01', serviceName: 'KEY-IN 결제', serviceDesc: '상담 중 카드정보 입력으로 간편한 결제 지원',

src/pages/additional-service/key-in-payment/key-in-payment-page.tsx

@@ -38,8 +38,8 @@ export const KeyInPaymentPage = () => {
   const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
   const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
   const [transactionStatus, setTransactionStatus] = useState<KeyInPaymentTransactionStatus>(KeyInPaymentTransactionStatus.ALL)
-  const [minAmount, setMinAmount] = useState<number | string>();
-  const [maxAmount, setMaxAmount] = useState<number | string>();
+  const [minAmount, setMinAmount] = useState<number>();
+  const [maxAmount, setMaxAmount] = useState<number>();
 
 
   useSetHeaderTitle('KEY-IN 결제');

src/pages/additional-service/link-payment/link-payment-wait-detail-page.tsx

@@ -103,14 +103,14 @@ export const LinkPaymentWaitDetailPage = () => {
           <div className="tab-pane sub active">
             <div className="pay-top">
               <TitleInfoWrap
-                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentPending}
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentWait}
                 titleInfo={titleInfo}
               ></TitleInfoWrap>
 
               <div className="txn-divider minus"></div>
 
               <PaymentInfoWrap
-                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentPending}
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentWait}
                 paymentInfo={paymentInfo}
               ></PaymentInfoWrap>
             </div>

src/pages/additional-service/payout/list-page.tsx

@@ -37,11 +37,11 @@ export const PayoutListPage = () => {
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
   const [mid, setMid] = useState<string>('nictest001m');
   const [searchCl, setSearchCl] = useState<PayoutSearchCl>(PayoutSearchCl.REQUEST_DATE);
-  const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
-  const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
+  const [fromDate, setFromDate] = useState<string>(moment().format('YYYYMMDD'));
+  const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
   const [disbursementStatus, setDisbursementStatus] = useState<PayoutDisbursementStatus>(PayoutDisbursementStatus.ALL);
-  const [minAmount, setMinAmount] = useState<number | string>();
-	const [maxAmount, setMaxAmount] = useState<number | string>();
+  const [minAmount, setMinAmount] = useState<number>();
+	const [maxAmount, setMaxAmount] = useState<number>();
 
   const { mutateAsync: extensionPayoutList } = useExtensionPayoutListMutation();
   const { mutateAsync: extensionPayoutExcel } = useExtensionPayoutExcelMutation();
@@ -224,7 +224,7 @@ export const PayoutListPage = () => {
                 sortBy={ sortBy }
                 onClickToSort={ onClickToSort }
               ></SortOptionsBox>
-              <div className="excrow">
+              <div className="excrow mr-0">
                 <div className="full-menu-keywords no-padding">
                 {
                   PayoutDisbursementStatusBtnGroup.map((value, index) => (

src/pages/transaction/all-transaction/list-page.tsx

@@ -40,8 +40,8 @@ export const AllTransactionListPage = () => {
   const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
   const [stateCode, setStateCode] = useState<AllTransactionStateCode>(AllTransactionStateCode.ALL);
   const [serviceCode, setServiceCode] = useState<AllTransactionServiceCode>(AllTransactionServiceCode.ALL);
-  const [minAmount, setMinAmount] = useState<number | string>();
-	const [maxAmount, setMaxAmount] = useState<number | string>();
+  const [minAmount, setMinAmount] = useState<number>();
+	const [maxAmount, setMaxAmount] = useState<number>();
   const [cardCode, setCardCode] = useState<string | undefined>();
   const [bankCode, setBankCode] = useState<string | undefined>();
   const [searchCl, setSearchCl] = useState<AllTransactionSearchCl | undefined>();

src/pages/transaction/billing/charge-page.tsx

@@ -16,7 +16,7 @@ export const BillingChargePage = () => {
 
   const [billKey, setBillKey] = useState<string>('BIKYvattest01m');
   const [productName, setProductName] = useState<string>('테스트상품123');
-  const [productAmount, setProductAmount] = useState<number | string>(1000000);
+  const [productAmount, setProductAmount] = useState<number>(1000000);
   const [orderNumber, setOrderNumber] = useState<string>('P146733723');
   const [buyerName, setBuyerName] = useState<string>('김테스트');
   const [paymentRequestDate, setPaymentRequestDate] = useState<string>('2025-06-08');
@@ -109,7 +109,7 @@ export const BillingChargePage = () => {
                     <input 
                       type="text" 
                       value={ productAmount }
-                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductAmount(e.target.value) }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductAmount(parseInt(e.target.value)) }
                     />
                   </div>
                 </div>

src/pages/transaction/billing/list-page.tsx

@@ -37,8 +37,8 @@ export const BillingListPage = () => {
 	const [requestStatus, setRequestStatus] = useState<BillingRequestStatus>(BillingRequestStatus.ALL);
 	const [processResult, setProcessResult] = useState<BillingProcessResult>(BillingProcessResult.ALL);
 	const [paymentMethod, setPaymentMethod] = useState<BillingPaymentMethod>(BillingPaymentMethod.ALL);
-	const [minAmount, setMinAmount] = useState<number | string>();
-	const [maxAmount, setMaxAmount] = useState<number | string>();
+	const [minAmount, setMinAmount] = useState<number>();
+	const [maxAmount, setMaxAmount] = useState<number>();
 
 	useSetHeaderTitle('빌링');
 	useSetHeaderType(HeaderType.LeftArrow);

src/pages/transaction/cash-receipt/hand-written-issuance-page.tsx

@@ -20,10 +20,10 @@ export const CashReceitHandWrittenIssuancePage = () => {
   const [issueNumber, setIssueNumber] = useState<string>('01012341234');
   const [email, setEmail] = useState<string>('test123@nicepay.com');
   const [phoneNumber, setPhoneNumber] = useState<string>('01012341234');
-  const [supplyAmount, setSupplyAmount] = useState<number | string>(9091);
-  const [vatAmount, setVatAmount] = useState<number | string>(909);
-  const [taxFreeAmount, setTaxFreeAmount] = useState<number | string>(0);
-  const [serviceCharge, setServiceCharge] = useState<number | string>(0);
+  const [supplyAmount, setSupplyAmount] = useState<number>(9091);
+  const [vatAmount, setVatAmount] = useState<number>(909);
+  const [taxFreeAmount, setTaxFreeAmount] = useState<number>(0);
+  const [serviceCharge, setServiceCharge] = useState<number>(0);
 
   useSetHeaderTitle('수기 발행');
   useSetHeaderType(HeaderType.RightClose);

src/pages/transaction/escrow/list-page.tsx

@@ -36,8 +36,8 @@ export const EscrowListPage = () => {
 	const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
 	const [deliveryStatus, setDeliveryStatus] = useState<EscrowDeliveryStatus>(EscrowDeliveryStatus.ALL);
 	const [settlementStatus, setSettlementStatus] = useState<EscrowSettlementStatus>(EscrowSettlementStatus.ALL);
-	const [minAmount, setMinAmount] = useState<number | string>();
-	const [maxAmount, setMaxAmount] = useState<number | string>();	
+	const [minAmount, setMinAmount] = useState<number>();
+	const [maxAmount, setMaxAmount] = useState<number>();	
 		
 	useSetHeaderTitle('에스크로');
 	useSetHeaderType(HeaderType.LeftArrow);