ars

src/entities/additional-service/api/ars/use-extension-ars-apply-mutation.ts

@@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error';
 import { 
   ExtensionArsApplyParams,
   ExtensionArsApplyResponse
-} from '../model/types';
+} from '../../model/ars/types';
 import { 
   useMutation,
   UseMutationOptions

src/entities/additional-service/api/ars/use-extension-ars-detail-mutation.ts

@@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error';
 import { 
   ExtensionArsDetailParams,
   ExtensionArsDetailResponse
-} from '../model/types';
+} from '../../model/ars/types';
 import { 
   useMutation,
   UseMutationOptions

src/entities/additional-service/api/ars/use-extension-ars-download-excel-mutation.ts

@@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error';
 import { 
   ExtensionArsDownloadExcelParams,
   ExtensionArsDownloadExcelResponse
-} from '../model/types';
+} from '../../model/ars/types';
 import { 
   useMutation,
   UseMutationOptions

src/entities/additional-service/api/ars/use-extension-ars-list-mutation.ts

@@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error';
 import { 
   ExtensionArsListParams,
   ExtensionArsListResponse
-} from '../model/types';
+} from '../../model/ars/types';
 import { 
   useMutation,
   UseMutationOptions

src/entities/additional-service/api/ars/use-extension-ars-resend-mutation.ts

@@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error';
 import { 
   ExtensionArsResendParams,
   ExtensionArsResendResponse
-} from '../model/types';
+} from '../../model/ars/types';
 import { 
   useMutation,
   UseMutationOptions

src/entities/additional-service/model/ars/constant.ts

@@ -0,0 +1,7 @@
+import { PaymentStatus } from './types';
+
+export const PaymentStatusBtnGroup = [
+  {name: '전체', value: PaymentStatus.ALL },
+  {name: '결제완료', value: PaymentStatus.COMPLETE },
+  {name: '미결제', value: PaymentStatus.UNPAID }
+];

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

@@ -0,0 +1,86 @@
+import { 
+  DefaulResponsePagination,
+  DefaultRequestPagination
+} from '@/entities/common/model/types';
+
+export enum PaymentStatus {
+  ALL = 'ALL',
+  COMPLETE = 'COMPLETE',
+  UNPAID = 'UNPAID'
+};
+export enum OrderStatus {
+  ALL = 'ALL',
+  PENDING = 'PENDING',
+  SUCCESS = 'SUCCESS',
+  EXPIRED = 'EXPIRED',
+  CANCELED = 'CANCELED',
+};
+export interface ExtensionArsResendParams {
+  mid: string;
+  tid: string;
+};
+export interface ExtensionArsResendResponse {};
+export interface ExtensionArsListParams {
+  mid: string;
+  moid: string;
+  fromDate: string;
+  toDate: string;
+  paymentStatus: string;
+  orderStatus: string;
+  minAmount: number;
+  maxAmount: number;
+  page: DefaultRequestPagination;
+};
+export interface ArsListContent {
+  tid: string;
+  paymentDate: string;
+  paymentStatus: string;
+  orderStatus: string;
+  arsPaymentMethod: string;
+  amount: number;
+};
+export interface ExtensionArsListResponse extends DefaulResponsePagination {
+  content: Array<ArsListContent>;
+};
+export interface ExtensionArsDownloadExcelParams {
+  mid: string;
+  moid: string;
+  fromDate: string;
+  toDate: string;
+  paymentStatus: string;
+  orderStatus: string;
+  minAmount: number;
+  maxAmount: number;
+};
+export interface ExtensionArsDownloadExcelResponse {};
+export interface ExtensionArsDetailParams {
+  mid: string;
+  tid: string;
+};
+export interface ExtensionArsDetailResponse {
+  corpName: string;
+  mid: string;
+  arsPaymentMethod: string;
+  paymentStatus: string;
+  orderStatus: string;
+  paymentDate: string;
+  goodsName: string;
+  tid: string;
+  buyerName: string;
+  phoneNumber: string;
+  maskPhoneNumber: string;
+  email: string;
+  smsVerificationCode: string;
+};
+export interface ExtensionArsApplyParams {
+  mid: string;
+  moid: string;
+  goodsName: string;
+  amount: number;
+  instmntMonth: string;
+  buyerName: string;
+  phoneNumber: string;
+  email: string;
+  arsPaymentMethod: string;
+};
+export interface ExtensionArsApplyResponse {};

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

@@ -34,6 +34,7 @@ export enum AdditionalServiceCategory {
   FundAccountResult = 'FundAccountResult',
   SettlementAgency = 'SettlementAgency',
   Payout = 'Payout',
+  Ars = 'Ars',
 }
 
 // ========================================
@@ -766,86 +767,8 @@ export interface ExtensionSmsDetailResponse {
   sendMessage: string;
 }
 
-// ARS 카드결제 확장 서비스
-export interface ExtensionArsResendParams extends ExtensionRequestParams {
-  tid: string;
-}
 
-export interface ExtensionArsResendResponse {
 
-}
-
-export interface ExtensionArsListParams extends ExtensionRequestParams {
-  moid: string;
-  fromDate: string;
-  toDate: string;
-  paymentStatus: string;
-  orderStatus: string;
-  minAmount: number;
-  maxAmount: number;
-}
-
-export interface ExtensionArsListItemProps {
-  tid: string;
-  paymentDate: string;
-  paymentStatus: string;
-  orderStatus: string;
-  arsPaymentMethod: string;
-  amount: number;
-}
-
-export interface ExtensionArsListResponse extends DefaulResponsePagination {
-  content: Array<ExtensionArsListItemProps>
-}
-
-export interface ExtensionArsDownloadExcelParams extends ExtensionRequestParams {
-  moid: string;
-  fromDate: string;
-  toDate: string;
-  paymentStatus: string;
-  orderStatus: string;
-  minAmount: number;
-  maxAmount: number;
-}
-
-export interface ExtensionArsDownloadExcelResponse {
-
-}
-
-export interface ExtensionArsDetailParams extends ExtensionRequestParams {
-  tid: string;
-}
-
-export interface ExtensionArsDetailResponse {
-  corpName: string;
-  mid: string;
-  arsPaymentMethod: string;
-  paymentStatus: string;
-  orderStatus: string;
-  paymentDate: string;
-  goodsName: string;
-  tid: string;
-  buyerName: string;
-  phoneNumber: string;
-  maskPhoneNumber: string;
-  email: string;
-  smsVerificationCode: string;
-}
-
-export interface ExtensionArsApplyParams extends ExtensionRequestParams {
-  moid: string;
-  goodsName: string;
-  amount: number;
-  instmntMonth: string;
-  buyerName: string;
-  phoneNumber: string;
-  email: string;
-  arsPaymentMethod: string;
-}
-
-export interface ExtensionArsApplyResponse {
-
-}
 
 // 알림톡 확장 서비스
 export interface SendMerchantInfoItem {

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 />} />

src/pages/additional-service/ars/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>

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/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/shared/constants/paths.ts

@@ -142,19 +142,19 @@ export const PATHS: RouteNamesType = {
   additionalService: {
     base: generatePath(ROUTE_NAMES.additionalService.base),
     intro: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.intro),
-    arsCardPayment: {
-      base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.arsCardPayment.base}`),
+    ars: {
+      base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.ars.base}`),
       list: generatePath(
-        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.arsCardPayment.base}`,
-        ROUTE_NAMES.additionalService.arsCardPayment.list,
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.ars.base}`,
+        ROUTE_NAMES.additionalService.ars.list,
       ),
       request: generatePath(
-        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.arsCardPayment.base}`,
-        ROUTE_NAMES.additionalService.arsCardPayment.request,
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.ars.base}`,
+        ROUTE_NAMES.additionalService.ars.request,
       ),
       requestSuccess: generatePath(
-        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.arsCardPayment.base}`,
-        ROUTE_NAMES.additionalService.arsCardPayment.requestSuccess,
+        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.ars.base}`,
+        ROUTE_NAMES.additionalService.ars.requestSuccess,
       ),
     },
     keyInPayment: {

src/shared/constants/route-names.ts

@@ -70,8 +70,8 @@ export const ROUTE_NAMES = {
   additionalService: {
     base: '/additional-service/*',
     intro: 'intro',
-    arsCardPayment: {
-      base: '/ars-card-payment/*',
+    ars: {
+      base: '/ars/*',
       list: 'list',
       request: 'request',
       requestSuccess: 'request-success',

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

@@ -77,4 +77,7 @@ main {
 }
 .notice-box {
   margin-top: 1rem;
+}
+.menu-category:last-of-type{
+  padding-bottom: 15px;
 }

src/shared/ui/menu/index.tsx

@@ -82,7 +82,7 @@ export const Menu = ({
       categoryIcon: 'service-icon',
       items: [
         {title: '부가서비스소개', path: PATHS.additionalService.intro},
-        {title: 'ARS 카드결제', path: PATHS.additionalService.arsCardPayment.list},
+        {title: 'ARS 카드결제', path: PATHS.additionalService.ars.list},
         {title: 'KEY-IN 결제', path: PATHS.additionalService.keyInPayment.list},
         {title: 'SMS 결제 통보', path: PATHS.additionalService.smsPaymentNotification},
         {title: '계좌성명조회', path: PATHS.additionalService.accountHolderSearch.list},