ars

2025-09-23 18:18:55 +09:00
parent b92d7c6a44
commit 0e1d624b41
17 changed files with 271 additions and 126 deletions
--- a/src/pages/additional-service/additional-service-pages.tsx
+++ b/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';
@@ -43,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 />} />
--- a/src/pages/additional-service/ars-card-payment/list-page.tsx
+++ b/src/pages/additional-service/ars-card-payment/list-page.tsx
@@ -1,17 +1,43 @@
 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 { 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 ArsCardPaymentListPage = () => {
+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>('');
+  const [toDate, setToDate] = useState<string>('');
+  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);
@@ -19,10 +45,103 @@ export const ArsCardPaymentListPage = () => {
    navigate(PATHS.home);
  });

-  const onClickToNavigation = () => {
-    navigate(PATHS.additionalService.arsCardPayment.request);
+  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>
@@ -32,14 +151,15 @@ export const ArsCardPaymentListPage = () => {
              <div className="credit-controls">
                <div>
                  <input 
-                    className="credit-period" 
-                    type="text" 
-                    value="2025.06.01 ~ 2025.06.30" 
+                    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' }
@@ -50,6 +170,7 @@ export const ArsCardPaymentListPage = () => {
                <button 
                  className="download-btn" 
                  aria-label="다운로드"
+                  onClick={ () => onClickToDownloadExcel() }
                >
                  <img 
                    src={ IMAGE_ROOT +'/ico_download.svg' }
@@ -60,16 +181,21 @@ export const ArsCardPaymentListPage = () => {
            </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">
+              <SortOptionsBox
+                sortBy={ sortBy }
+                onClickToSort={ onClickToSort }
+              ></SortOptionsBox>
+              <div className="excrow mr-0">
                <div className="full-menu-keywords no-padding">
-                  <span className="keyword-tag active">전체</span>
-                  <span className="keyword-tag">결제완료</span>
-                  <span className="keyword-tag">배송등록</span>
+                  {
+                    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>
--- a/src/pages/additional-service/ars-card-payment/request-page.tsx
+++ b/src/pages/additional-service/ars-card-payment/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 (
--- a/src/pages/additional-service/ars-card-payment/request-success-page.tsx
+++ b/src/pages/additional-service/ars-card-payment/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 (
--- a/src/pages/additional-service/intro/intro-page.tsx
+++ b/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: '상담 중 카드정보 입력으로 간편한 결제 지원',