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

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

@@ -1,4 +1,4 @@
-import { DefaulResponsePagination } from '@/entities/common/model/types';
+import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';
 
 export enum FundTransferTabKeys {
   RequestList = 'RequestList',
@@ -31,8 +31,8 @@ export enum ProcessResult {
 export enum KeyInPaymentTransactionStatus {
   ALL = 'ALL',
   APPROVE = 'APPROVE',
-  BF_CANCEL = 'BF_CANCEL',
-  AF_CANCEL = 'AF_CANCEL'
+  ALL_CANCEL = 'ALL_CANCEL',
+  AFTER_CANCEL = 'AFTER_CANCEL'
 }
 export enum AccountHolderSearchType {
   ALL = 'ALL',
@@ -68,6 +68,86 @@ export interface SortOptionsBoxProps {
   sortBy: SortByKeys;
   onClickToSort: (sortBy: SortByKeys) => void;
 };
+
+// 부가서비스 카테고리 enum
+export enum AdditionalServiceCategory {
+  KeyInPayment = 'KeyInPayment',
+  AccountHolderSearch = 'AccountHolderSearch',
+  LinkPaymentShipping = 'LinkPaymentShipping',
+  LinkPaymentPending = 'LinkPaymentPending',
+  FundTransfer = 'FundTransfer',
+  SettlementAgency = 'SettlementAgency',
+}
+
+// 각 서비스별 개별 타입들
+export interface KeyInPaymentListItem {
+  tid?: string;
+  paymentDate?: string;
+  paymentStatus?: string;
+  amount?: number;
+}
+
+export interface AccountHolderSearchListItem {
+  requestId?: string;
+  requestDate?: string;
+  bank?: string;
+  accountNumber?: string;
+  accountHolder?: string;
+  processResult?: string;
+}
+
+export interface LinkPaymentShippingListItem {
+  transactionId?: string;
+  customerName?: string;
+  status?: string;
+  channel?: string;
+  amount?: number;
+  sendDate?: string;
+  transactionDate?: string;
+}
+
+export interface LinkPaymentPendingListItem {
+  transactionId?: string;
+  customerName?: string;
+  status?: string;
+  channel?: string;
+  amount?: number;
+  requestDate?: string;
+}
+
+// 공통 ListItemProps (transaction과 동일한 패턴)
+export interface ListItemProps extends KeyInPaymentListItem, AccountHolderSearchListItem, LinkPaymentShippingListItem, LinkPaymentPendingListItem {
+  additionalServiceCategory?: AdditionalServiceCategory;
+}
+
+// 공통 ListDateGroupProps
+export interface ListDateGroupProps {
+  additionalServiceCategory?: AdditionalServiceCategory;
+  date?: string;
+  items?: Array<ListItemProps>;
+}
+// 공통 리스트 Props
+export interface AdditionalServiceListProps {
+  additionalServiceCategory: AdditionalServiceCategory;
+  listItems: Record<string, Array<ListItemProps>>;
+}
+export interface LinkPaymentShippingListProps {
+  additionalServiceCategory: AdditionalServiceCategory;
+  listItems: Record<string, Array<ListItemProps>>;
+}
+export interface LinkPaymentPendingListProps {
+  additionalServiceCategory: AdditionalServiceCategory;
+  listItems: Record<string, Array<ListItemProps>>;
+}
+export interface AccountHolderSearchListProps {
+  additionalServiceCategory: AdditionalServiceCategory;
+  listItems: Record<string, Array<ListItemProps>>;
+}
+export interface KeyInPaymentListProps {
+  additionalServiceCategory: AdditionalServiceCategory;
+  listItems: Record<string, Array<ListItemProps>>;
+}
+
 export interface SettlementAgencyTabProps {
   activeTab: SettlementAgencyTabKeys;
 };
@@ -141,9 +221,10 @@ export interface ExtensionListResponse extends DefaulResponsePagination {
 export interface ExtensionKeyinListParams extends ExtensionRequestParams {
   fromDate: string;
   toDate: string;
-  paymentStatus: string;
-  minAmount: number;
-  maxAmount: number;
+  paymentStatus: KeyInPaymentTransactionStatus;
+  minAmount?: number | string;
+  maxAmount?: number | string;
+  page?: DefaultRequestPagination;
 };
 export interface ExtensionKeyinListItemProps {
   tid: string;
@@ -155,11 +236,11 @@ export interface ExtensionKeyinListResponse extends DefaulResponsePagination {
   content: Array<ExtensionKeyinListItemProps>
 };
 export interface ExtensionKeyinDownloadExcelParams extends ExtensionRequestParams {
-  fromDate: string;
-  toDate: string;
-  paymentStatus: string;
-  minAmount: number;
-  maxAmount: number;
+  fromDate?: string;
+  toDate?: string;
+  paymentStatus?: string;
+  minAmount?: number | string;
+  maxAmount?: number | string;
 };
 export interface ExtensionKeyinDownloadExcelResponse {
 

src/entities/additional-service/ui/fund-transfer/fund-transfer-tab.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { 
   FundTransferTabKeys, 
   FundTransferTabProps 
-} from '../model/types';
+} from '../../model/types';
 export const FundTransferTab = ({
   activeTab
 }: FundTransferTabProps) => {

src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx

@@ -11,7 +11,7 @@ import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
 import {
     KeyInPaymentFilterProps,
     KeyInPaymentTransactionStatus
-} from '../../model/types';
+} from '../../../model/types';
 
 export const KeyInPaymentFilter = ({
     filterOn,
@@ -66,8 +66,8 @@ export const KeyInPaymentFilter = ({
     let transactionStatusOption = [
         { name: '전체', value: KeyInPaymentTransactionStatus.ALL },
         { name: '승인', value: KeyInPaymentTransactionStatus.APPROVE },
-        { name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL },
-        { name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL },
+        { name: '전취소', value: KeyInPaymentTransactionStatus.ALL_CANCEL },
+        { name: '후취소', value: KeyInPaymentTransactionStatus.AFTER_CANCEL },
     ]
 
     return (

src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx

@@ -0,0 +1,44 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { KeyInPaymentListProps } from '../../model/types'
+import { ListDateGroup } from '../list-date-group';
+
+export const KeyInPaymentList = ({
+    additionalServiceCategory,
+    listItems
+}: KeyInPaymentListProps ) => {
+    const { navigate } = useNavigate();
+
+  const getListDateGroup = () => {
+    let rs = [];
+    for (const [key, value] of Object.entries(listItems)) {
+      rs.push(
+        <ListDateGroup
+          additionalServiceCategory ={ additionalServiceCategory }
+          key={ key }
+          date={ key }
+          items={ value }
+        ></ListDateGroup>
+      );  
+    }
+    return rs;
+  };
+
+  const onClickToNavigate = () => {
+    navigate(PATHS.additionalService.keyInPayment.request)
+  };
+  
+  return (
+    <>
+      <div className="transaction-list">
+        { getListDateGroup() }
+        <div className="apply-row">
+          <button 
+            className="btn-50 btn-blue flex-1"
+            onClick={ () => onClickToNavigate() }          
+          >결제 신청</button>
+        </div>
+      </div>  
+    </>
+  );
+}

src/entities/additional-service/ui/link-payment/link-payment-date-group.tsx

@@ -1,58 +0,0 @@
-import moment from 'moment';
-import 'moment/dist/locale/ko';
-import { LinkPaymentItem } from './link-payment-item';
-import { JSX } from 'react';
-
-interface LinkPaymentTransaction {
-  transactionId: string;
-  customerName: string;
-  status: string;
-  channel: string;
-  paymentMethod: string;
-  amount: number;
-}
-
-interface LinkPaymentDateGroupProps {
-  date: string;
-  items: LinkPaymentTransaction[];
-}
-
-export const LinkPaymentDateGroup = ({
-  date,
-  items
-}: LinkPaymentDateGroupProps) => {
-  moment.locale('ko');
-  const getStateDate = () => {
-    let stateDate = moment(date).format('YY.MM.DD(ddd)');
-    return stateDate;
-  };
-
-  const getLinkPaymentItem = () => {
-    const rs: JSX.Element[] = [];
-    if (items && items.length > 0) {
-      items.forEach((item, index) => {
-        const key = 'LinkPaymentItem-' + index;
-        rs.push(
-          <LinkPaymentItem
-            key={key}
-            transactionId={item.transactionId}
-            customerName={item.customerName}
-            status={item.status}
-            channel={item.channel}
-            paymentMethod={item.paymentMethod}
-            amount={item.amount}         
-            />
-        )
-      });
-    }
-    
-    return rs;
-  };
-
-  return (
-    <>
-      <div className="date-header">{getStateDate()}</div>
-      {getLinkPaymentItem()}
-    </>
-  );
-};

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

@@ -1,62 +0,0 @@
-import { PATHS } from '@/shared/constants/paths';
-import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import moment from 'moment';
-
-interface LinkPaymentItemProps {
-  transactionId: string;
-  customerName: string;
-  status: string;
-  channel: string;
-  paymentMethod: string;
-  amount: number;
-}
-
-export const LinkPaymentItem = ({
-  transactionId,
-  customerName,
-  status,
-  channel,
-  paymentMethod,
-  amount
-}: LinkPaymentItemProps) => {
-  const { navigate } = useNavigate();
-  
-  const onClickToNavigate = () => {
-    navigate(PATHS.additionalService.linkPayment.detail, {
-      state: {
-        transactionId: transactionId
-      }
-    });
-  };
-  
-  const getStatusDotClass = () => {
-    if (status === '결제완료' || status === '입금요청') {
-      return 'status-dot blue';
-    }
-    return 'status-dot gray';
-  };
-
-  return (
-    <>
-      <div 
-        className="transaction-item approved"
-        onClick={() => onClickToNavigate()}
-      >
-        <div className="transaction-status">
-          <div className={getStatusDotClass()}></div>
-        </div>
-        <div className="transaction-content">
-          <div className="transaction-title">{customerName}</div>
-          <div className="transaction-details">
-            <span>{status}</span>
-            <span className="separator">ㅣ</span>
-            <span>{channel}</span>
-            <span className="separator">ㅣ</span>
-            <span>{paymentMethod}</span>
-          </div>
-        </div>
-        <div className="transaction-amount">{amount.toLocaleString()}원</div>
-      </div>
-    </>
-  );
-};

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

@@ -1,41 +0,0 @@
-import { LinkPaymentDateGroup } from './link-payment-date-group';
-
-interface LinkPaymentTransaction {
-  transactionId: string;
-  customerName: string;
-  status: string;
-  channel: string;
-  paymentMethod: string;
-  amount: number;
-}
-
-interface LinkPaymentListProps {
-  listItems: Record<string, LinkPaymentTransaction[]>;
-}
-
-export const LinkPaymentList = ({
-  listItems
-}: LinkPaymentListProps) => {
-
-  const getListDateGroup = () => {
-    let rs = [];
-    for (const [key, value] of Object.entries(listItems)) {
-      rs.push(
-        <LinkPaymentDateGroup
-          key={key}
-          date={key}
-          items={value}
-        />
-      );  
-    }
-    return rs;
-  };
-
-  return (
-    <>
-      <div className="transaction-list">
-        {getListDateGroup()}
-      </div>
-    </>
-  )
-};

src/entities/additional-service/ui/link-payment/link-payment-pending-date-group.tsx

@@ -1,56 +0,0 @@
-import moment from 'moment';
-import 'moment/dist/locale/ko';
-import { LinkPaymentPendingItem } from './link-payment-pending-item';
-import { JSX } from 'react';
-
-interface LinkPaymentPendingTransaction {
-  transactionId: string;
-  customerName: string;
-  status: string;
-  channel: string;
-  amount: number;
-}
-
-interface LinkPaymentPendingDateGroupProps {
-  date: string;
-  items: LinkPaymentPendingTransaction[];
-}
-
-export const LinkPaymentPendingDateGroup = ({
-  date,
-  items
-}: LinkPaymentPendingDateGroupProps) => {
-  moment.locale('ko');
-  const getStateDate = () => {
-    let stateDate = moment(date).format('YY.MM.DD(ddd)');
-    return stateDate;
-  };
-
-  const getLinkPaymentPendingItem = () => {
-    const rs: JSX.Element[] = [];
-    if (items && items.length > 0) {
-      items.forEach((item, index) => {
-        const key = 'LinkPaymentPendingItem-' + index;
-        rs.push(
-          <LinkPaymentPendingItem
-            key={key}
-            transactionId={item.transactionId}
-            customerName={item.customerName}
-            status={item.status}
-            channel={item.channel}
-            amount={item.amount}
-          />
-        )
-      });
-    }
-    
-    return rs;
-  };
-
-  return (
-    <>
-      <div className="date-header">{getStateDate()}</div>
-      {getLinkPaymentPendingItem()}
-    </>
-  );
-};

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

@@ -1,57 +0,0 @@
-import { PATHS } from '@/shared/constants/paths';
-import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-
-interface LinkPaymentPendingItemProps {
-  transactionId: string;
-  customerName: string;
-  status: string;
-  channel: string;
-  amount: number;
-}
-
-export const LinkPaymentPendingItem = ({
-  transactionId,
-  customerName,
-  status,
-  channel,
-  amount
-}: LinkPaymentPendingItemProps) => {
-  const { navigate } = useNavigate();
-  
-  const onClickToNavigate = () => {
-    navigate(PATHS.additionalService.linkPayment.pendingDetail, {
-      state: {
-        transactionId: transactionId
-      }
-    });
-  };
-  
-  const getStatusDotClass = () => {
-    if (status === '발송요청') {
-      return 'status-dot blue';
-    }
-    return 'status-dot gray';
-  };
-
-  return (
-    <>
-      <div 
-        className="transaction-item approved"
-        onClick={() => onClickToNavigate()}
-      >
-        <div className="transaction-status">
-          <div className={getStatusDotClass()}></div>
-        </div>
-        <div className="transaction-content">
-          <div className="transaction-title">{customerName}</div>
-          <div className="transaction-details">
-            <span>{status}</span>
-            <span className="separator">ㅣ</span>
-            <span>{channel}</span>
-          </div>
-        </div>
-        <div className="transaction-amount">{amount.toLocaleString()}원</div>
-      </div>
-    </>
-  );
-};

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

@@ -1,18 +1,8 @@
-import { LinkPaymentPendingDateGroup } from './link-payment-pending-date-group';
-
-interface LinkPaymentPendingTransaction {
-  transactionId: string;
-  customerName: string;
-  status: string;
-  channel: string;
-  amount: number;
-}
-
-interface LinkPaymentPendingListProps {
-  listItems: Record<string, LinkPaymentPendingTransaction[]>;
-}
+import { LinkPaymentPendingListProps } from '../../model/types';
+import { ListDateGroup } from '../list-date-group';
 
 export const LinkPaymentPendingList = ({
+  additionalServiceCategory,
   listItems
 }: LinkPaymentPendingListProps) => {
 
@@ -20,12 +10,13 @@ export const LinkPaymentPendingList = ({
     let rs = [];
     for (const [key, value] of Object.entries(listItems)) {
       rs.push(
-        <LinkPaymentPendingDateGroup
+        <ListDateGroup
+          additionalServiceCategory={additionalServiceCategory}
           key={key}
           date={key}
           items={value}
-        />
-      );  
+        ></ListDateGroup>
+      );
     }
     return rs;
   };

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

@@ -5,8 +5,8 @@ import { LinkPaymentPendingSendFilter } from "./filter/link-payment-pending-send
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { PATHS } from "@/shared/constants/paths";
 import { LinkPaymentPendingList } from "./link-payment-pending-list";
-import { LinkPaymentSearchType, LinkPaymentSendingStatus, LinkPaymentSendMethod, SortByKeys } from "../../model/types";
-import { SortOptionsBox } from './sort-options-box';
+import { AdditionalServiceCategory, LinkPaymentSearchType, LinkPaymentSendingStatus, LinkPaymentSendMethod, SortByKeys } from "../../model/types";
+import { SortOptionsBox } from '../sort-options-box';
 
 const sendingStatusBtnGrouup = [
     { name: '전체', value: LinkPaymentSendingStatus.ALL },
@@ -148,7 +148,8 @@ export const LinkPaymentPendingSendWrap = () => {
 
             <LinkPaymentPendingList
                 listItems={listItems}
-            />
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentPending}
+            ></LinkPaymentPendingList>
             <div className="apply-row">
                 <button
                     className="btn-50 btn-blue flex-1"

src/entities/additional-service/ui/link-payment/link-payment-shipping-history-list.tsx

@@ -0,0 +1,31 @@
+import { LinkPaymentShippingListProps } from '../../model/types';
+import { ListDateGroup } from '../list-date-group';
+
+export const LinkPaymentSHippingHistoryList = ({
+  additionalServiceCategory,
+  listItems
+}: LinkPaymentShippingListProps) => {
+
+  const getListDateGroup = () => {
+    let rs = [];
+    for (const [key, value] of Object.entries(listItems)) {
+      rs.push(
+        <ListDateGroup
+          additionalServiceCategory={additionalServiceCategory}
+          key={key}
+          date={key}
+          items={value}
+        ></ListDateGroup>
+      );
+    }
+    return rs;
+  };
+
+  return (
+    <>
+      <div className="transaction-list">
+        {getListDateGroup()}
+      </div>
+    </>
+  )
+};

src/entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap.tsx

@@ -4,9 +4,9 @@ import { useState, useEffect } from "react";
 import { LinkPaymentShippingHistoryFilter } from "./filter/link-payment-shipping-history-filter";
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { PATHS } from "@/shared/constants/paths";
-import { LinkPaymentList } from "./link-payment-list";
-import { SortOptionsBox } from "./sort-options-box";
-import { LinkPaymentSendMethod, LinkPaymentTransactionStatus, ProcessResult, SortByKeys } from "../../model/types";
+import { LinkPaymentSHippingHistoryList } from "./link-payment-shipping-history-list";
+import { SortOptionsBox } from "../sort-options-box";
+import { AdditionalServiceCategory, LinkPaymentSendMethod, LinkPaymentTransactionStatus, ProcessResult, SortByKeys } from "../../model/types";
 import { LinkPaymentSearchType, } from "../../model/types";
 
 const processResultBtnGroup = [
@@ -149,9 +149,10 @@ export const LinkPaymentShippingHistoryWrap = () => {
                 </div>
             </div>
 
-            <LinkPaymentList
+            <LinkPaymentSHippingHistoryList
                 listItems={listItems}
-            />
+                additionalServiceCategory={ AdditionalServiceCategory.LinkPaymentShipping }
+            ></LinkPaymentSHippingHistoryList>
             <div className="apply-row">
                 <button
                     className="btn-50 btn-blue flex-1"

src/entities/additional-service/ui/list-date-group.tsx

@@ -0,0 +1,60 @@
+import moment from 'moment';
+import 'moment/dist/locale/ko';
+import { ListDateGroupProps } from '../model/types';
+import { ListItem } from '../ui/list-item';
+
+export const ListDateGroup = ({
+  additionalServiceCategory,
+  date,
+  items
+}: ListDateGroupProps) => {
+  moment.locale('ko');
+  const getStateDate = () => {
+    let stateDate = moment(date).format('YY.MM.DD(ddd)');
+    return stateDate;
+  };
+
+  const getListItem = () => {
+    let rs = [];
+    if(!!items && items.length>0){
+      for(let i=0;i<items.length;i++){
+        let key = 'ListItem-'+i;
+        rs.push(
+          <ListItem
+            additionalServiceCategory={ additionalServiceCategory }
+            key={ key }
+            tid={ items[i]?.tid }
+            paymentDate= { items[i]?.paymentDate}
+            paymentStatus={ items[i]?.paymentStatus}
+
+            requestId={ items[i]?.requestId }
+            requestDate={ items[i]?.requestDate }
+            bank={ items[i]?.bank }
+            accountNumber={ items[i]?.accountNumber }
+            accountHolder={ items[i]?.accountHolder }
+            processResult={ items[i]?.processResult }
+
+            transactionId={ items[i]?.transactionId }
+            customerName={ items[i]?.customerName }
+            status={ items[i]?.status }
+            channel={ items[i]?.channel }
+            amount={ items[i]?.amount }
+            sendDate={ items[i]?.sendDate }
+            transactionDate={ items[i]?.transactionDate }
+          ></ListItem>
+        )
+      }  
+    }
+    
+    return rs;
+  };
+
+  return (
+    <>
+      <div className="date-group">
+        <div className="date-header">{ getStateDate() }</div>
+        { getListItem() }
+      </div>
+    </>
+  );
+};

src/entities/additional-service/ui/list-item.tsx

@@ -0,0 +1,189 @@
+import { NumericFormat } from 'react-number-format';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { ListItemProps, AdditionalServiceCategory } from '../model/types';
+import moment from 'moment';
+
+export const ListItem = ({
+  additionalServiceCategory,
+  tid, paymentDate, paymentStatus,
+
+  requestId, requestDate, bank, accountNumber,
+  accountHolder, processResult,
+
+  transactionId, customerName, status, channel,
+  amount, sendDate, transactionDate
+}: ListItemProps) => {
+  const { navigate } = useNavigate();
+  const getItemClass = () => {
+    let rs = '';
+    if (paymentStatus === '') {
+      rs = '';
+    }
+    else if (paymentStatus === "APPROVAL") {
+      rs = 'approved';
+    }
+    else if (paymentStatus === "ALL_CANCEL") {
+      rs = 'refund';
+    }
+    else if (paymentStatus === 'AFTER_CANCEL') {
+      rs = 'refund';
+    }
+    return rs;
+  };
+
+  const getDotClass = (str?: string) => {
+    let rs = '';
+    if (paymentStatus === '') {
+      rs = '';
+    }
+    else if (paymentStatus === "APPROVAL") {
+      rs = 'blue';
+    }
+    else if (paymentStatus === "ALL_CANCEL") {
+      rs = 'gray';
+    }
+    else if (paymentStatus === 'AFTER_CANCEL') {
+      rs = 'gray';
+    }
+    return rs;
+  };
+
+  const onClickToNavigate = () => {
+    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
+      
+      return;
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
+      navigate(PATHS.additionalService.accountHolderSearch.detail, {
+        state: {
+          requestId: requestId
+        }
+      });
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
+      navigate(PATHS.additionalService.linkPayment.detail, {
+        state: {
+          transactionId: transactionId
+        }
+      });
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
+      navigate(PATHS.additionalService.linkPayment.detail, {
+        state: {
+          transactionId: transactionId
+        }
+      });
+    }
+    else {
+      alert('additionalServiceCategory가 존재하지 않습니다.');
+    }
+  };
+
+  const getTime = () => {
+    let timeStr = '';
+    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
+      let time = paymentDate?.substring(8, 12);
+      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
+      timeStr = moment(requestDate).format('HH:mm');
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
+      timeStr = moment(transactionDate).format('HH:mm');
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
+      timeStr = moment(sendDate).format('HH:mm');
+    }
+    return timeStr
+  };
+
+  const getTitle = () => {
+    let str = '';
+    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
+      str = `${tid}(${amount})`;
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
+      str = `${accountHolder}(${accountNumber})`
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
+      str = `${customerName}(${transactionId})`
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
+      str = `${customerName}(${transactionId})`
+    }
+    return str;
+  };
+
+  const getDetail = () => {
+    let rs = [];
+    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
+      rs.push(
+        <div className="transaction-details">
+          <span>{getTime()}</span>
+          <span className="separator">|</span>
+          <span>{paymentStatus}</span>
+        </div>
+      );
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
+      rs.push(
+        <div className="transaction-details">
+          <span>{getTime()}</span>
+          <span className="separator">|</span>
+          <span>{bank}</span>
+          <span className="separator">|</span>
+          <span>{processResult}</span>
+        </div>
+      );
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
+      rs.push(
+        <div className="transaction-details">
+          <span>{getTime()}</span>
+          <span className="separator">|</span>
+          <span>{status}</span>
+          <span className="separator">|</span>
+          <span>{channel}</span>
+        </div>
+      );
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
+      rs.push(
+        <div className="transaction-details">
+          <span>{getTime()}</span>
+          <span className="separator">|</span>
+          <span>{status}</span>
+          <span className="separator">|</span>
+          <span>{channel}</span>
+        </div>
+      );
+    }
+    return rs;
+  };
+
+  return (
+    <>
+      <div
+        className={`transaction-item ${getItemClass()}`}
+        onClick={() => onClickToNavigate()}
+      >
+        <div className="transaction-status">
+          <div className={`status-dot ${getDotClass()}`}></div>
+        </div>
+        <div className="transaction-content">
+          <div className="transaction-title">{getTitle()}</div>
+          {getDetail()}
+        </div>
+        <div className="transaction-amount">
+          <NumericFormat
+            value={amount}
+            thousandSeparator
+            displayType="text"
+            suffix={'원'}
+          ></NumericFormat>
+        </div>
+      </div>
+    </>
+  );
+};

src/entities/additional-service/ui/settlement-agency/settlement-agency-bottom-agree.tsx

@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion';
-import { SettlementAgencyBottomAgreeProps } from '../model/types';
+import { SettlementAgencyBottomAgreeProps } from '../../model/types';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 export const SettlementAgencyBottomAgree = ({
   bottomAgreeOn,

src/entities/additional-service/ui/settlement-agency/settlement-agency-tab.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { 
   SettlementAgencyTabKeys,
   SettlementAgencyTabProps
-} from '../model/types';
+} from '../../model/types';
 
 export const SettlementAgencyTab = ({
   activeTab  

src/entities/additional-service/ui/sort-options-box.tsx

@@ -1,7 +1,7 @@
 import { 
   SortByKeys,
   SortOptionsBoxProps
-} from '../../model/types';
+} from '../model/types';
 export const SortOptionsBox = ({
   sortBy,
   onClickToSort

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

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { FundTransferTab } from '@/entities/additional-service/ui/fund-transfer-tab'; 
-import { FundTransferRequestListWrap } from '@/entities/additional-service/ui/fund-transfer-request-list-wrap';
+import { FundTransferTab } from '@/entities/additional-service/ui/fund-transfer/fund-transfer-tab'; 
+import { FundTransferRequestListWrap } from '@/entities/additional-service/ui/fund-transfer/fund-transfer-request-list-wrap';
 import { FundTransferTabKeys } from '@/entities/additional-service/model/types';
 import { HeaderType } from '@/entities/common/model/types';
 import { 

src/pages/additional-service/fund-transfer/result-inquiry-page.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { FundTransferTab } from '@/entities/additional-service/ui/fund-transfer-tab'; 
-import { FundTransferResultInquiryWrap } from '@/entities/additional-service/ui/fund-transfer-result-inquiry-wrap';
+import { FundTransferTab } from '@/entities/additional-service/ui/fund-transfer/fund-transfer-tab'; 
+import { FundTransferResultInquiryWrap } from '@/entities/additional-service/ui/fund-transfer/fund-transfer-result-inquiry-wrap';
 import { FundTransferTabKeys } from '@/entities/additional-service/model/types';
 import { HeaderType } from '@/entities/common/model/types';
 import { 

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

@@ -6,21 +6,24 @@ import { HeaderType } from '@/entities/common/model/types';
 import {
   useSetHeaderTitle,
   useSetHeaderType,
-  useSetFooterMode
+  useSetFooterMode,
+  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import { PATHS } from '@/shared/constants/paths';
 import { useExtensionKeyinDownloadExcelMutation } from '@/entities/additional-service/api/use-extension-keyin-download-excel-mutation';
-import { KeyInPaymentFilter } from '@/entities/additional-service/ui/key-in-payment/key-in-payment-filter';
-import { KeyInPaymentTransactionStatus, SortByKeys } from '@/entities/additional-service/model/types';
-import { SortOptionsBox } from '@/entities/additional-service/ui/link-payment/sort-options-box';
+import { KeyInPaymentFilter } from '@/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter';
+import { AdditionalServiceCategory, KeyInPaymentListItem, KeyInPaymentTransactionStatus, SortByKeys } from '@/entities/additional-service/model/types';
+import { SortOptionsBox } from '@/entities/additional-service/ui/sort-options-box';
 import { useExtensionKeyinListMutation } from '@/entities/additional-service/api/use-extension-keyin-list-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
+import { KeyInPaymentList } from '@/entities/additional-service/ui/key-in-payment/key-in-payment-list';
 
+// contant로 옮기기
 const requestStatusBtnGroup = [
   { name: '전체', value: KeyInPaymentTransactionStatus.ALL },
   { name: '승인', value: KeyInPaymentTransactionStatus.APPROVE },
-  { name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL },
-  { name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL }
+  { name: '전취소', value: KeyInPaymentTransactionStatus.ALL_CANCEL },
+  { name: '후취소', value: KeyInPaymentTransactionStatus.AFTER_CANCEL }
 ];
 
 export const KeyInPaymentPage = () => {
@@ -42,43 +45,99 @@ export const KeyInPaymentPage = () => {
   useSetHeaderTitle('KEY-IN 결제');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
 
   const { mutateAsync: keyinList } = useExtensionKeyinListMutation();
   const { mutateAsync: downloadExcel } = useExtensionKeyinDownloadExcelMutation();
 
+  const callList = (option?: {
+    sortBy?: string,
+    val?: string
+  }) => {
+    pageParam.sortBy = (option?.sortBy) ? option.sortBy : sortBy;
+    setPageParam(pageParam);
+    let newMinAmount = minAmount;
+    if (!!minAmount && typeof (minAmount) === 'string') {
+      newMinAmount = parseInt(minAmount);
+    }
+    let newMaxAmount = maxAmount;
+    if (!!maxAmount && typeof (maxAmount) === 'string') {
+      newMaxAmount = parseInt(maxAmount);
+    }
+    let listParams = {
+      mid: mid,
+      fromDate: startDate,
+      toDate: endDate,
+      paymentStatus: transactionStatus,
+      minAmount: newMinAmount,
+      maxAmount: newMaxAmount,
+      page: pageParam
+    };
+
+    keyinList(listParams).then((rs) => {
+      setListItems(assembleData(rs.content));
+    });
+  }
+
+  const assembleData = (content: Array<KeyInPaymentListItem>) => {
+    console.log('rs.content:', content)
+    let data: any = {};
+    if (content && content.length > 0) {
+      for (let i = 0; i < content?.length; i++) {
+        let paymentDate = content[i]?.paymentDate?.substring(0, 8);
+        let groupDate = moment(paymentDate).format('YYYYMMDD');
+        if (!!groupDate && !data.hasOwnProperty(groupDate)) {
+          data[groupDate] = [];
+        }
+        if (!!groupDate && data.hasOwnProperty(groupDate)) {
+          data[groupDate].push(content[i]);
+        }
+      }
+    }
+    console.log('Data : ', data)
+    return data;
+  };
+
+
   const onClickToOpenFilter = () => {
     setFilterOn(!filterOn);
   };
 
   const onClickToDownloadExcel = () => {
-    // downloadExcel({
-    //   mid,
-    //   fromDate: '',
-    //   toDate: '',
-    //   paymentStatus: '',
-    //   minAmount: 0,
-    //   maxAmount: 0
-    // }).then((rs) => {
+    let newMinAmount = minAmount;
+    if (!!minAmount && typeof (minAmount) === 'string') {
+      newMinAmount = parseInt(minAmount);
+    }
+    let newMaxAmount = maxAmount;
+    if (!!maxAmount && typeof (maxAmount) === 'string') {
+      newMaxAmount = parseInt(maxAmount);
+    }
+    downloadExcel({
+      mid: mid,
+      fromDate: startDate,
+      toDate: endDate,
+      paymentStatus: transactionStatus,
+      minAmount: minAmount,
+      maxAmount: maxAmount
+    }).then((rs) => {
 
-    // });
+    });
   };
 
   const onClickToSort = (sort: SortByKeys) => {
     setSortBy(sort);
-    // TODO : callList 구현
+    callList({ sortBy: sort })
   };
 
   const onClickToTransactionStatus = (val: KeyInPaymentTransactionStatus) => {
     setTransactionStatus(val);
-    // TODO : callList 구현
+    callList({ val: val });
   };
 
-  const onClickToNavigation = () => {
-    navigate(PATHS.additionalService.keyInPayment.request)
-  }
-
   useEffect(() => {
-    // TODO : callList();
+    callList();
   }, []);
 
   return (
@@ -92,7 +151,7 @@ export const KeyInPaymentPage = () => {
                   <input
                     className="credit-period"
                     type="text"
-                    value={ moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD') } 
+                    value={moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD')}
                     readOnly={true}
                   />
                   <button
@@ -109,6 +168,7 @@ export const KeyInPaymentPage = () => {
                 <button
                   className="download-btn"
                   aria-label="다운로드"
+                  onClick={() => onClickToDownloadExcel()}
                 >
                   <img
                     src={IMAGE_ROOT + '/ico_download.svg'}
@@ -138,102 +198,29 @@ export const KeyInPaymentPage = () => {
                 </div>
               </div>
             </div>
-
-            <section className="transaction-list">
-              <div className="date-group">
-                <div className="date-header">2025.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ㅣ승인</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>08:35ㅣ승인</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">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>20:00ㅣ후취소</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>
-            </section>
-            <div className="apply-row">
-              <button
-                className="btn-50 btn-blue flex-1"
-                onClick={() => onClickToNavigation()}
-              >결제 신청</button>
-            </div>
-            <KeyInPaymentFilter
-              filterOn={filterOn}
-              setFilterOn={setFilterOn}
-              mid={mid}
-              startDate={startDate}
-              endDate={endDate}
-              transactionStatus={transactionStatus}
-              minAmount={minAmount}
-              maxAmount={maxAmount}
-              setMid={setMid}
-              setStartDate={setStartDate}
-              setEndDate={setEndDate}
-              setTransactionStatus={setTransactionStatus}
-              setMinAmount={setMinAmount}
-              setMaxAmount={setMaxAmount}
-            ></KeyInPaymentFilter>
+            <KeyInPaymentList
+              listItems={listItems}
+              additionalServiceCategory={AdditionalServiceCategory.KeyInPayment}
+            ></KeyInPaymentList>
           </div>
         </div>
       </main>
+      <KeyInPaymentFilter
+        filterOn={filterOn}
+        setFilterOn={setFilterOn}
+        mid={mid}
+        startDate={startDate}
+        endDate={endDate}
+        transactionStatus={transactionStatus}
+        minAmount={minAmount}
+        maxAmount={maxAmount}
+        setMid={setMid}
+        setStartDate={setStartDate}
+        setEndDate={setEndDate}
+        setTransactionStatus={setTransactionStatus}
+        setMinAmount={setMinAmount}
+        setMaxAmount={setMaxAmount}
+      ></KeyInPaymentFilter>
     </>
   );
 };

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

@@ -38,7 +38,7 @@ export const KeyInPaymentRequestPage = () => {
             moid: 'SMS',
         };
         keyInApply(keyInApplyParams).then((rs) => {
-            navigate(PATHS.additionalService.arsCardPayment.requestSuccess);
+            navigate(PATHS.additionalService.keyInPayment.requestSuccess);
             console.log(rs)
         }).catch(() => {
 

src/pages/additional-service/settlement-agency/deposit-page.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency-tab'; 
-import { SettlementAgencyDepositWrap } from '@/entities/additional-service/ui/settlement-agency-deposit-wrap';
+import { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-tab'; 
+import { SettlementAgencyDepositWrap } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-deposit-wrap';
 import { SettlementAgencyTabKeys } from '@/entities/additional-service/model/types';
 import { HeaderType } from '@/entities/common/model/types';
 import { 

src/pages/additional-service/settlement-agency/detail-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 { SettlementAgencyBottomAgree } from '@/entities/additional-service/ui/settlement-agency-bottom-agree';
+import { SettlementAgencyBottomAgree } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-bottom-agree';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
 	useSetHeaderTitle,

src/pages/additional-service/settlement-agency/manage-page.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency-tab'; 
-import { SettlementAgencyManageWrap } from '@/entities/additional-service/ui/settlement-agency-manage-wrap';
+import { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-tab'; 
+import { SettlementAgencyManageWrap } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-manage-wrap';
 import { SettlementAgencyTabKeys } from '@/entities/additional-service/model/types';
 import { HeaderType } from '@/entities/common/model/types';
 import { 

src/pages/additional-service/settlement-agency/member-page.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency-tab'; 
-import { SettlementAgencyMemberWrap } from '@/entities/additional-service/ui/settlement-agency-member-wrap';
+import { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-tab'; 
+import { SettlementAgencyMemberWrap } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-member-wrap';
 import { SettlementAgencyTabKeys } from '@/entities/additional-service/model/types';
 import { HeaderType } from '@/entities/common/model/types';
 import {