- 부가서비스: KeyIn결제 목업 API 연결

2025-09-17 15:22:20 +09:00
parent 4f97767999
commit 67ded00a23
15 changed files with 229 additions and 334 deletions
--- a/src/entities/additional-service/model/types.ts
+++ b/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',
@@ -82,15 +82,9 @@ export enum AdditionalServiceCategory {
 // 각 서비스별 개별 타입들
 export interface KeyInPaymentListItem {
  tid?: string;
-  mid?: string;
-  stateDate?: string;
-  stateCode?: string;
-  stateName?: string;
-  installmentMonth?: string;
-  serviceCode?: string;
-  serviceName?: string;
-  serviceDetailName?: string;
-  goodsAmount?: number;
+  paymentDate?: string;
+  paymentStatus?: string;
+  amount?: number;
 }

 export interface AccountHolderSearchListItem {
@@ -227,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;
@@ -241,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 {

--- a/src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx
+++ b/src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx
@@ -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 (
--- a/src/entities/additional-service/ui/key-in-payment/key-in-payment-item.tsx
+++ b/src/entities/additional-service/ui/key-in-payment/key-in-payment-item.tsx
--- a/src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx
+++ b/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>  
+    </>
+  );
+}
--- a/src/entities/additional-service/ui/link-payment/link-payment-pending-item.tsx
+++ b/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>
-    </>
-  );
-};
--- a/src/entities/additional-service/ui/link-payment/link-payment-pending-list.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-pending-list.tsx
@@ -2,6 +2,7 @@ import { LinkPaymentPendingListProps } from '../../model/types';
 import { ListDateGroup } from '../list-date-group';

 export const LinkPaymentPendingList = ({
+  additionalServiceCategory,
  listItems
 }: LinkPaymentPendingListProps) => {

@@ -10,11 +11,12 @@ export const LinkPaymentPendingList = ({
    for (const [key, value] of Object.entries(listItems)) {
      rs.push(
        <ListDateGroup
+          additionalServiceCategory={additionalServiceCategory}
          key={key}
          date={key}
          items={value}
-        />
-      );  
+        ></ListDateGroup>
+      );
    }
    return rs;
  };
--- a/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx
@@ -6,7 +6,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { PATHS } from "@/shared/constants/paths";
 import { LinkPaymentPendingList } from "./link-payment-pending-list";
 import { AdditionalServiceCategory, LinkPaymentSearchType, LinkPaymentSendingStatus, LinkPaymentSendMethod, SortByKeys } from "../../model/types";
-import { SortOptionsBox } from './sort-options-box';
+import { SortOptionsBox } from '../sort-options-box';

 const sendingStatusBtnGrouup = [
    { name: '전체', value: LinkPaymentSendingStatus.ALL },
--- a/src/entities/additional-service/ui/link-payment/link-payment-shipping-history-item.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-shipping-history-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>
-    </>
-  );
-};
--- a/src/entities/additional-service/ui/link-payment/link-payment-shipping-history-list.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-shipping-history-list.tsx
@@ -2,6 +2,7 @@ import { LinkPaymentShippingListProps } from '../../model/types';
 import { ListDateGroup } from '../list-date-group';

 export const LinkPaymentSHippingHistoryList = ({
+  additionalServiceCategory,
  listItems
 }: LinkPaymentShippingListProps) => {

@@ -10,11 +11,12 @@ export const LinkPaymentSHippingHistoryList = ({
    for (const [key, value] of Object.entries(listItems)) {
      rs.push(
        <ListDateGroup
+          additionalServiceCategory={additionalServiceCategory}
          key={key}
          date={key}
          items={value}
-        />
-      );  
+        ></ListDateGroup>
+      );
    }
    return rs;
  };
--- a/src/entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap.tsx
@@ -5,7 +5,7 @@ import { LinkPaymentShippingHistoryFilter } from "./filter/link-payment-shipping
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { PATHS } from "@/shared/constants/paths";
 import { LinkPaymentSHippingHistoryList } from "./link-payment-shipping-history-list";
-import { SortOptionsBox } from "./sort-options-box";
+import { SortOptionsBox } from "../sort-options-box";
 import { AdditionalServiceCategory, LinkPaymentSendMethod, LinkPaymentTransactionStatus, ProcessResult, SortByKeys } from "../../model/types";
 import { LinkPaymentSearchType, } from "../../model/types";

--- a/src/entities/additional-service/ui/list-date-group.tsx
+++ b/src/entities/additional-service/ui/list-date-group.tsx
@@ -24,15 +24,8 @@ export const ListDateGroup = ({
            additionalServiceCategory={ additionalServiceCategory }
            key={ key }
            tid={ items[i]?.tid }
-            mid={ items[i]?.mid }
-            stateDate={ items[i]?.stateDate }
-            stateCode={ items[i]?.stateCode }
-            stateName={ items[i]?.stateName }
-            installmentMonth={ items[i]?.installmentMonth }
-            serviceCode={ items[i]?.serviceCode }
-            serviceName={ items[i]?.serviceName }
-            serviceDetailName={ items[i]?.serviceDetailName }
-            goodsAmount={ items[i]?.goodsAmount }
+            paymentDate= { items[i]?.paymentDate}
+            paymentStatus={ items[i]?.paymentStatus}

            requestId={ items[i]?.requestId }
            requestDate={ items[i]?.requestDate }
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -6,9 +6,7 @@ import moment from 'moment';

 export const ListItem = ({
  additionalServiceCategory,
-  tid, mid, stateDate, stateCode, stateName,
-  installmentMonth, serviceCode, serviceName,
-  serviceDetailName, goodsAmount,
+  tid, paymentDate, paymentStatus,

  requestId, requestDate, bank, accountNumber,
  accountHolder, processResult,
@@ -19,13 +17,16 @@ export const ListItem = ({
  const { navigate } = useNavigate();
  const getItemClass = () => {
    let rs = '';
-    if(stateCode === '0'){
+    if (paymentStatus === '') {
      rs = '';
    }
-    else if(stateCode === '1'){
+    else if (paymentStatus === "APPROVAL") {
      rs = 'approved';
    }
-    else if(stateCode === '2'){
+    else if (paymentStatus === "ALL_CANCEL") {
+      rs = 'refund';
+    }
+    else if (paymentStatus === 'AFTER_CANCEL') {
      rs = 'refund';
    }
    return rs;
@@ -33,66 +34,65 @@ export const ListItem = ({

  const getDotClass = (str?: string) => {
    let rs = '';
-    if(stateCode === '0'){
+    if (paymentStatus === '') {
      rs = '';
    }
-    else if(stateCode === '1'){
+    else if (paymentStatus === "APPROVAL") {
      rs = 'blue';
    }
-    else if(stateCode === '2'){
+    else if (paymentStatus === "ALL_CANCEL") {
+      rs = 'gray';
+    }
+    else if (paymentStatus === 'AFTER_CANCEL') {
      rs = 'gray';
    }
    return rs;
  };

  const onClickToNavigate = () => {
-    if(additionalServiceCategory === AdditionalServiceCategory.KeyInPayment){
-      navigate(PATHS.additionalService.keyInPayment, {
-        state: {
-          tid: tid,
-          serviceCode: serviceCode
-        }
-      });
+    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
+      
+      return;
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch){
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
      navigate(PATHS.additionalService.accountHolderSearch.detail, {
        state: {
          requestId: requestId
        }
      });
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping){
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
      navigate(PATHS.additionalService.linkPayment.detail, {
        state: {
          transactionId: transactionId
        }
      });
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending){
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
      navigate(PATHS.additionalService.linkPayment.detail, {
        state: {
          transactionId: transactionId
        }
      });
    }
-    else{
+    else {
      alert('additionalServiceCategory가 존재하지 않습니다.');
    }
  };

  const getTime = () => {
    let timeStr = '';
-    if(additionalServiceCategory === AdditionalServiceCategory.KeyInPayment){
-      let time = stateDate?.substring(8, 12);
+    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
+      let time = paymentDate?.substring(8, 12);
      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch){
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
      timeStr = moment(requestDate).format('HH:mm');
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping){
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
      timeStr = moment(transactionDate).format('HH:mm');
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending){
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
      timeStr = moment(sendDate).format('HH:mm');
    }
    return timeStr
@@ -100,16 +100,16 @@ export const ListItem = ({

  const getTitle = () => {
    let str = '';
-    if(additionalServiceCategory === AdditionalServiceCategory.KeyInPayment){
-      str = `${serviceName}(${serviceDetailName})`;
+    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
+      str = `${tid}(${amount})`;
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch){
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
      str = `${accountHolder}(${accountNumber})`
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping){
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
      str = `${customerName}(${transactionId})`
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending){
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
      str = `${customerName}(${transactionId})`
    }
    return str;
@@ -117,54 +117,45 @@ export const ListItem = ({

  const getDetail = () => {
    let rs = [];
-    if(additionalServiceCategory === AdditionalServiceCategory.KeyInPayment){
+    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
      rs.push(
        <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
          <span className="separator">|</span>
-          <span>{ stateName }</span>
-          <span className="separator">|</span>
-          <span>{ mid }</span>
-          {
-            (!!installmentMonth && parseInt(installmentMonth) > 1) &&
-              <>
-                <span className="separator">|</span>
-                <span>{ installmentMonth }개월 할부</span>
-              </>
-          }
+          <span>{paymentStatus}</span>
        </div>
      );
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch){
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
      rs.push(
        <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
          <span className="separator">|</span>
-          <span>{ bank }</span>
+          <span>{bank}</span>
          <span className="separator">|</span>
-          <span>{ processResult }</span>
+          <span>{processResult}</span>
        </div>
      );
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping){
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
      rs.push(
        <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
          <span className="separator">|</span>
-          <span>{ status }</span>
+          <span>{status}</span>
          <span className="separator">|</span>
-          <span>{ channel }</span>
+          <span>{channel}</span>
        </div>
      );
    }
-    else if(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending){
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
      rs.push(
        <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
          <span className="separator">|</span>
-          <span>{ status }</span>
+          <span>{status}</span>
          <span className="separator">|</span>
-          <span>{ channel }</span>
+          <span>{channel}</span>
        </div>
      );
    }
@@ -174,22 +165,22 @@ export const ListItem = ({
  return (
    <>
      <div
-        className={ `transaction-item ${getItemClass()}` }
-        onClick={ () => onClickToNavigate() }
+        className={`transaction-item ${getItemClass()}`}
+        onClick={() => onClickToNavigate()}
      >
        <div className="transaction-status">
-          <div className={ `status-dot ${getDotClass()}`}></div>
+          <div className={`status-dot ${getDotClass()}`}></div>
        </div>
        <div className="transaction-content">
-          <div className="transaction-title">{ getTitle() }</div>
-          { getDetail() }
+          <div className="transaction-title">{getTitle()}</div>
+          {getDetail()}
        </div>
        <div className="transaction-amount">
          <NumericFormat
-            value={ goodsAmount || amount }
+            value={amount}
            thousandSeparator
            displayType="text"
-            suffix={ '원' }
+            suffix={'원'}
          ></NumericFormat>
        </div>
      </div>
--- a/src/entities/additional-service/ui/link-payment/sort-options-box.tsx
+++ b/src/entities/additional-service/ui/link-payment/sort-options-box.tsx
@@ -1,7 +1,7 @@
 import { 
  SortByKeys,
  SortOptionsBoxProps
-} from '../../model/types';
+} from '../model/types';
 export const SortOptionsBox = ({
  sortBy,
  onClickToSort