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

2025-11-04 10:41:06 +09:00
parent 0092ae00ad 7e7f0879b5
commit 872a3f74db
13 changed files with 337 additions and 109 deletions
--- a/src/entities/additional-service/model/account-holder-auth/types.ts
+++ b/src/entities/additional-service/model/account-holder-auth/types.ts
@@ -25,7 +25,7 @@ export interface AccountHolderAuthListItem {
 }
 export interface AccountHolderAuthListProps {
  additionalServiceCategory: AdditionalServiceCategory;
-  listItems: Array<ExtensionAccountHolderAuthContentItem>;
+  listItems: Array<AccountHolderAuthItem>;
  mid: string;
  setDetailData: (detailData: DetailData) => void;
 }
@@ -51,10 +51,10 @@ export interface ExtensionAccountHolderAuthListParams {
 }

 export interface ExtensionAccountHolderAuthListResponse extends DefaulResponsePagination {
-  content: Array<ExtensionAccountHolderAuthContentItem>
+  content: Array<AccountHolderAuthItem>
 }

-export interface ExtensionAccountHolderAuthContentItem {
+export interface AccountHolderAuthItem {
  tid?: string;
  accountName?: string;
  accountNo?: string;
--- a/src/entities/additional-service/model/ars/types.ts
+++ b/src/entities/additional-service/model/ars/types.ts
@@ -2,6 +2,7 @@ import {
  DefaulResponsePagination,
  DefaultRequestPagination
 } from '@/entities/common/model/types';
+import { AdditionalServiceCategory, DetailData, ListItemProps } from '../types';

 export enum PaymentStatus {
  ALL = '',
@@ -19,6 +20,14 @@ export enum ArsPaymentMethod {
  SMS = 'SMS',
  ARS = 'ARS'
 };
+
+export interface ArsListProps {
+  additionalServiceCategory: AdditionalServiceCategory;
+  listItems: Array<ListItemProps>;
+  mid: string;
+  setDetailData: (detailData: DetailData) => void;
+}
+
 export interface ExtensionArsResendParams {
  mid: string;
  tid: string;
@@ -47,7 +56,8 @@ export interface ExtensionArsListParams {
  maxAmount?: number;
  page?: DefaultRequestPagination;
 };
-export interface ArsListContent {
+
+export interface ArsListItem {
  tid?: string;
  orderDate?: string;
  orderTime?: string;
@@ -59,7 +69,7 @@ export interface ArsListContent {
  statusColor?: string;
 };
 export interface ExtensionArsListResponse extends DefaulResponsePagination {
-  content: Array<ArsListContent>;
+  content: Array<ListItemProps>;
 };
 export interface ExtensionArsDownloadExcelParams {
  mid?: string;
--- a/src/entities/additional-service/model/sms-payment/types.ts
+++ b/src/entities/additional-service/model/sms-payment/types.ts
@@ -29,7 +29,6 @@ export interface SmsPaymentListProps {
  additionalServiceCategory: AdditionalServiceCategory;
  mid: string;
  onResendClick?: (mid: string, tid: string) => void;
-  setDetailData: (detailData: DetailData) => void;
 }

 export interface SmsPaymentFilterProps extends FilterProps {
--- a/src/entities/additional-service/model/types.ts
+++ b/src/entities/additional-service/model/types.ts
@@ -1,7 +1,7 @@
 import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';
 import { PayoutListItem } from './payout/types';
 import { FundAccountTransferContentItem, FundAccountResultContentItem } from './fund-account/types';
-import { ArsListContent } from './ars/types';
+import { ArsListItem } from './ars/types';
 import { AlimtalkListContent } from './alimtalk/types';
 import { SmsPaymentListItem } from './sms-payment/types';
 import type { ExtensionSmsDetailResponse } from './sms-payment/types';
@@ -186,7 +186,7 @@ export interface SettlementAgencyBottomAgreeProps {
 // ========================================

 export interface ListItemProps extends
-  ArsListContent, AccountHolderSearchListItem, PayoutListItem, LinkPaymentHistoryListItem, LinkPaymentWaitListItem,
+  ArsListItem, AccountHolderSearchListItem, PayoutListItem, LinkPaymentHistoryListItem, LinkPaymentWaitListItem,
  FundAccountResultContentItem, FundAccountTransferContentItem, KeyInPaymentListItem, SmsPaymentListItem, AlimtalkListContent,
  AccountHolderAuthListItem, AccountHolderSearchListItem, FaceAuthListItem {
  additionalServiceCategory?: AdditionalServiceCategory;
--- a/src/entities/additional-service/ui/ars/ars-list.tsx
+++ b/src/entities/additional-service/ui/ars/ars-list.tsx
@@ -0,0 +1,68 @@
+import { ArsListProps } from "../../model/ars/types";
+import { AdditionalServiceCategory, ListItemProps } from "../../model/types";
+import { ListDateGroup } from "../list-date-group";
+
+export const ArsList = ({
+    additionalServiceCategory,
+    listItems,
+    mid,
+    setDetailData
+}: ArsListProps) => {
+
+    const getListDateGroup = () => {
+        let rs = [];
+        let date = '';
+        let list: Array<ListItemProps> = [];
+        for (let i = 0; i < listItems.length; i++) {
+            let item = listItems[i];
+            if (!!item) {
+                let orderDate = item?.orderDate || '';
+                let itemDate = orderDate.substring(0, 8);
+                if (!!itemDate) {
+                    if (i === 0) {
+                        date = itemDate;
+                    }
+                    if (date !== itemDate) {
+                        if (list.length > 0) {
+                            rs.push(
+                                <ListDateGroup
+                                    additionalServiceCategory={additionalServiceCategory}
+                                    mid={mid}
+                                    key={date + '-' + i}
+                                    date={date}
+                                    items={list}
+                                    setDetailData={setDetailData}
+                                ></ListDateGroup>
+                            );
+                        }
+                        date = itemDate;
+                        list = [];
+                    }
+                    list.push(item);
+                }
+            }
+        }
+        if (list.length > 0) {
+            rs.push(
+                <ListDateGroup
+                    additionalServiceCategory={additionalServiceCategory}
+                    mid={mid}
+                    key={date + '-last'}
+                    date={date}
+                    items={list}
+                    setDetailData={setDetailData}
+                ></ListDateGroup>
+            );
+        }
+        return rs;
+    };
+
+    return (
+        <>
+            <section className="transaction-list">
+                {getListDateGroup()}
+            </section>
+        </>
+    )
+
+}
--- a/src/entities/additional-service/ui/ars/detail/ars-detail.tsx
+++ b/src/entities/additional-service/ui/ars/detail/ars-detail.tsx
@@ -0,0 +1,187 @@
+import moment from 'moment';
+import { motion } from 'framer-motion';
+import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
+import { useEffect, useState } from 'react';
+import { getArsOrderStatusName, getArsPaymentStatusName } from '@/entities/additional-service/model/ars/constant';
+import { ArsPaymentMethod, ExtensionArsDetailParams, ExtensionArsDetailResponse, ExtensionArsResendParams, ExtensionArsResendResponse } from "@/entities/additional-service/model/ars/types";
+import { useTranslation } from "react-i18next";
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { useExtensionArsDetailMutation } from '@/entities/additional-service/api/ars/use-extension-ars-detail-mutation';
+import { useExtensionArsResendMutation } from '@/entities/additional-service/api/ars/use-extension-ars-resend-mutation';
+import { snackBar } from '@/shared/lib';
+import { ArsResendSmsBottomSheet } from '../resend-sms-bottom-sheet';
+
+export interface ArsDetailProps {
+    detailOn: boolean;
+    setDetailOn: (detailOn: boolean) => void;
+    mid: string;
+    tid: string;
+};
+
+export const ArsDetail = ({
+    detailOn,
+    setDetailOn,
+    mid,
+    tid
+}: ArsDetailProps) => {
+    const { t } = useTranslation();
+
+    const [detail, setDetail] = useState<ExtensionArsDetailResponse>();
+    const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
+
+    const { mutateAsync: extensionArsDetail } = useExtensionArsDetailMutation();
+    const { mutateAsync: extensionArsResend } = useExtensionArsResendMutation();
+
+    const callDetail = () => {
+        let arsDetailParams: ExtensionArsDetailParams = {
+            mid: mid,
+            tid: tid
+        };
+        extensionArsDetail(arsDetailParams).then((rs: ExtensionArsDetailResponse) => {
+            setDetail(rs);
+        });
+    }
+
+    const arsResend = () => {
+        let arsResendParams: ExtensionArsResendParams = {
+            mid: mid,
+            tid: tid
+        };
+        extensionArsResend(arsResendParams).then((rs: ExtensionArsResendResponse) => {
+            if (rs.status) {
+                snackBar("SMS 재전송을 성공하였습니다.");
+                setBottomSheetOn(false);
+                callDetail(); // 상세 정보 갱신
+            } else {
+                const errorMessage = rs.error?.message || 'SMS 재전송이 실패하였습니다.';
+                snackBar(`[실패] ${errorMessage}`);
+            }
+        }).catch((error) => {
+            const errorMessage = error?.response?.data?.error?.message ||
+                error?.message ||
+                'SMS 재전송 중 오류가 발생했습니다.';
+            snackBar(`[실패] ${errorMessage}`);
+        });
+    }
+
+    const onClickToOpenResendBottomSheet = () => {
+        setBottomSheetOn(true);
+    };
+    const onClickToClose = () => {
+        setDetailOn(false);
+    };
+
+    const getDate = (date?: string) => {
+        return (date) ? moment(date.substr(0, 8)).format('YYYY.MM.DD') : '';
+    };
+
+    useEffect(() => {
+        if (!!mid && !!tid) {
+            callDetail();
+        }
+    }, [mid, tid]);
+
+    return (
+        <>
+            <motion.div
+                className="full-menu-modal"
+                initial="hidden"
+                animate={(detailOn) ? 'visible' : 'hidden'}
+                variants={DetailMotionVariants}
+                transition={DetailMotionDuration}
+                style={DetailMotionStyle}
+            >
+                <div className="full-menu-container pdw-16">
+                    <div className="full-menu-header">
+                        <div className="full-menu-title center">{'ARS 결제 상세'}</div>
+                        <div className="full-menu-actions">
+                            <FullMenuClose
+                                addClass="full-menu-close"
+                                onClickToCallback={onClickToClose}
+                            ></FullMenuClose>
+                        </div>
+                    </div>
+                    <div className="tab-pane sub active">
+                        <div className="pay-top">
+                            <div className="num-amount">
+                                <span className="amount">
+                                    {t('home.money', { value: new Intl.NumberFormat('en-US').format(Number(detail?.amount) || 0) })}
+                                </span>
+                            </div>
+                            <div className="num-store">{detail?.corpName}</div>
+                            <div className="num-day">{getDate(detail?.paymentDate)}</div>
+                        </div>
+                        <div className="detail-divider"></div>
+                        <div className="pay-detail">
+                            <div className="detail-title">거래 정보</div>
+                            <ul className="kv-list">
+                                <li className="kv-row">
+                                    <span className="k">MID</span>
+                                    <span className="v">{detail?.mid}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">결제방식</span>
+                                    <span className="v">{detail?.arsPaymentMethod}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">결제상태</span>
+                                    <span className="v">{getArsPaymentStatusName(t)(detail?.paymentStatus)}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">주문상태</span>
+                                    <span className="v">{getArsOrderStatusName(t)(detail?.orderStatus)}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">주문일시</span>
+                                    <span className="v">{
+                                        detail?.paymentDate ? moment(detail.paymentDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '-'
+                                    }</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">상품명</span>
+                                    <span className="v">{detail?.goodsName}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">주문번호</span>
+                                    <span className="v">{detail?.tid}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">구매자</span>
+                                    <span className="v">{detail?.buyerName}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">휴대폰번호</span>
+                                    <span className="v">{detail?.maskPhoneNumber}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">이메일</span>
+                                    <span className="v">{detail?.email}</span>
+                                </li>
+                                <li className="kv-row">
+                                    <span className="k">발송 인증번호</span>
+                                    <span className="v">{detail?.smsVerificationCode}</span>
+                                </li>
+                            </ul>
+                        </div>
+                        {detail?.arsPaymentMethod === ArsPaymentMethod.SMS && (
+                            <div className="apply-row">
+                                <button
+                                    className="btn-50 btn-blue flex-1"
+                                    onClick={() => onClickToOpenResendBottomSheet()}
+                                //disabled={ detail?.orderStatus !== OrderStatus.PENDING }
+                                >SMS 재전송</button>
+                            </div>
+                        )}
+                    </div>
+                </div>
+                <ArsResendSmsBottomSheet
+                    setBottomSheetOn={setBottomSheetOn}
+                    bottomSheetOn={bottomSheetOn}
+                    phoneNumber={detail?.phoneNumber}
+                    callResendSms={arsResend}
+                ></ArsResendSmsBottomSheet>
+            </motion.div>
+        </>
+    )
+
+}
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -18,11 +18,11 @@ import { getPayoutStatusText } from '../model/payout/constant';
 export const ListItem = ({
  additionalServiceCategory,
  mid, tid, orderDate, paymentStatus,
-  orderTime,buyerPhoneLast4,statusColor,
+  orderTime, buyerPhoneLast4, statusColor,
  applicationDate, requestDate, bankName, accountNo, resultStatus, resultMessage,
  amount, sendMethod, processStatus, registDate,
-  transactionTime,transactionCode,transactionType,
-  accountName,submallId, settlementDate, companyName,orderStatus,
+  transactionTime, transactionCode, transactionType,
+  accountName, submallId, settlementDate, companyName, orderStatus,

  alimCl, sendType, sendCl,
  paymentMethod, receiverName,
@@ -170,7 +170,7 @@ export const ListItem = ({
      }
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
-      if(setDetailData && !!mid && !!tid){
+      if (setDetailData && !!mid && !!tid) {
        setDetailData({
          mid: mid,
          tid: tid,
@@ -229,13 +229,13 @@ export const ListItem = ({
      });
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
-      navigate(PATHS.additionalService.ars.detail, {
-        state: {
-          additionalServiceCategory: additionalServiceCategory,
+      if (setDetailData && !!mid && !!tid) {
+        setDetailData({
          mid: mid,
-          tid: tid
-        }
-      });
+          tid: tid,
+          detailOn: true
+        });
+      }
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
      if(setDetailData && !!mid && !!tid){
@@ -348,7 +348,7 @@ export const ListItem = ({
    else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
      str = `${userMallId}(${mid})`;
    }
-    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory 
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory
    ) {
      str = `${buyerName}`;
    } else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait) {
@@ -368,7 +368,7 @@ export const ListItem = ({
      } else {
        str = `${buyerName}`
      }
-      
+
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
      str = `${buyerName}(${tid})`;
--- a/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
+++ b/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
@@ -20,7 +20,7 @@ import { useTranslation } from 'react-i18next';
 import { useExtensionAccountHolderAuthDownloadExcelMutation } from '@/entities/additional-service/api/account-holder-auth/use-extension-account-holder-auth-download-excel-mutation';
 import { AccountHolderAuthFilter } from '@/entities/additional-service/ui/account-holder-auth/filter/account-holder-auth-filter';
 import { useStore } from '@/shared/model/store';
-import { AccountHolderAuthStatus, ExtensionAccountHolderAuthContentItem, ExtensionAccountHolderAuthDownloadExcelParams, ExtensionAccountHolderAuthDownloadExcelResponse } from '@/entities/additional-service/model/account-holder-auth/types';
+import { AccountHolderAuthStatus, AccountHolderAuthItem, ExtensionAccountHolderAuthDownloadExcelParams, ExtensionAccountHolderAuthDownloadExcelResponse } from '@/entities/additional-service/model/account-holder-auth/types';
 import { AdditionalServiceCategory, DetailData } from '@/entities/additional-service/model/types';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
@@ -40,7 +40,7 @@ export const AccountHolderAuthPage = () => {

  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
-  const [listItems, setListItems] = useState<Array<ExtensionAccountHolderAuthContentItem>>([]);
+  const [listItems, setListItems] = useState<Array<AccountHolderAuthItem>>([]);
  const [filterOn, setFilterOn] = useState<boolean>(false);
  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
  const [mid, setMid] = useState<string>(userMid);
--- a/src/pages/additional-service/additional-service-pages.tsx
+++ b/src/pages/additional-service/additional-service-pages.tsx
@@ -45,7 +45,6 @@ export const AdditionalServicePages = () => {
        <Route path={ROUTE_NAMES.additionalService.list} element={<ListPage />} />
        <Route path={ROUTE_NAMES.additionalService.ars.base}>
          <Route path={ROUTE_NAMES.additionalService.ars.list} element={<ArsListPage />} />
-          <Route path={ROUTE_NAMES.additionalService.ars.detail} element={<ArsDetailPage />} />
          <Route path={ROUTE_NAMES.additionalService.ars.request} element={<ArsRequestPage />} />
        </Route>
        <Route path={ROUTE_NAMES.additionalService.keyInPayment.base}>
--- a/src/pages/additional-service/ars/list-page.tsx
+++ b/src/pages/additional-service/ars/list-page.tsx
@@ -10,12 +10,12 @@ import {
 } from '@/widgets/sub-layout/use-sub-layout';
 import { JSX, 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 { ArsListItem, 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 { AdditionalServiceCategory, DetailData } from '@/entities/additional-service/model/types';
 import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
 import { getArsPaymentStatusBtnGroup } from '@/entities/additional-service/model/ars/constant';
 import { ArsFilter } from '@/entities/additional-service/ui/filter/ars-filter';
@@ -24,6 +24,8 @@ import { useStore } from '@/shared/model/store';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
 import useIntersectionObserver from '@/widgets/intersection-observer';
+import { ArsList } from '@/entities/additional-service/ui/ars/ars-list';
+import { ArsDetail } from '@/entities/additional-service/ui/ars/detail/ars-detail';

 export const ArsListPage = () => {
  const { navigate } = useNavigate();
@@ -38,7 +40,7 @@ export const ArsListPage = () => {

  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
-  const [listItems, setListItems] = useState<Array<ArsListContent>>([]);
+  const [listItems, setListItems] = useState<Array<ArsListItem>>([]);
  const [filterOn, setFilterOn] = useState<boolean>(false);
  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
  const [mid, setMid] = useState<string>(userMid);
@@ -51,22 +53,26 @@ export const ArsListPage = () => {
  const [maxAmount, setMaxAmount] = useState<number>();
  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);

+  const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailMid, setDetailMid] = useState<string>('');
+  const [detailTid, setDetailTid] = useState<string>('');
+
  const { mutateAsync: extensionArsList } = useExtensionArsListMutation();
  const { mutateAsync: extensionArsDownloadExcel } = useExtensionArsDownloadExcelMutation();
  const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
    entries.forEach((entry: IntersectionObserverEntry) => {
-      if(entry.isIntersecting){
-        if(onActionIntersect && !!pageParam.cursor){
+      if (entry.isIntersecting) {
+        if (onActionIntersect && !!pageParam.cursor) {
          setOnActionIntersect(false);
          callList('page');
-        } 
+        }
      }
    });
  };

-  const { setTarget } = useIntersectionObserver({ 
-    threshold: 1, 
-    onIntersect 
+  const { setTarget } = useIntersectionObserver({
+    threshold: 1,
+    onIntersect
  });

  useSetHeaderTitle(t('additionalService.ars.title'));
@@ -88,41 +94,41 @@ export const ArsListPage = () => {
      minAmount: minAmount,
      maxAmount: maxAmount,
      page: {
-				...pageParam,
-				...{ sortType: sortType }
-			}
+        ...pageParam,
+        ...{ sortType: sortType }
+      }
    };
-    if(type !== 'page' && listParams.page){
+    if (type !== 'page' && listParams.page) {
      listParams.page.cursor = null;
    }
-    
+
    extensionArsList(listParams).then((rs: ExtensionArsListResponse) => {
-      if(type === 'page'){
+      if (type === 'page') {
        setListItems([
          ...listItems,
          ...rs.content
        ]);
      }
-      else{
+      else {
        setListItems(rs.content);
      }
-			if(rs.hasNext 
+      if (rs.hasNext
        && rs.nextCursor !== pageParam.cursor
        && rs.content.length === DEFAULT_PAGE_PARAM.size
-      ){
+      ) {
        setPageParam({
          ...pageParam,
          ...{ cursor: rs.nextCursor }
        });
      }
-      else{
+      else {
        setPageParam({
          ...pageParam,
          ...{ cursor: null }
        });
      }
      setOnActionIntersect(
-        !!rs.hasNext 
+        !!rs.hasNext
        && rs.nextCursor !== pageParam.cursor
        && rs.content.length === DEFAULT_PAGE_PARAM.size
      );
@@ -153,6 +159,16 @@ export const ArsListPage = () => {
    setEmailBottomSheetOn(false);
  };

+  const setDetailData = (detailData: DetailData) => {
+    setDetailOn(detailData.detailOn);
+    if (detailData.mid) {
+      setDetailMid(detailData.mid);
+    }
+    if (detailData.tid) {
+      setDetailTid(detailData.tid);
+    }
+  };
+
  const onClickToNavigate = () => {
    navigate(PATHS.additionalService.ars.request, {
      state: { mid }
@@ -182,52 +198,6 @@ export const ArsListPage = () => {
    sortType
  ]);

-  const getListDateGroup = () => {
-    let rs = [];
-    let date = '';
-    let list = [];
-    for (let i = 0; i < listItems.length; i++) {
-      let item = listItems[i];
-      if (!!item) {
-        let orderDate = item?.orderDate || '';
-        let itemDate = orderDate.substring(0, 8);
-        if (!!itemDate) {
-          if (i === 0) {
-            date = itemDate;
-          }
-          if (date !== itemDate) {
-            date = itemDate;
-            if (list.length > 0) {
-              rs.push(
-                <ListDateGroup
-                  additionalServiceCategory={AdditionalServiceCategory.Ars}
-                  mid={mid}
-                  key={date + '-' + i}
-                  date={date}
-                  items={list}
-                ></ListDateGroup>
-              );
-            }
-            list = [];
-          }
-          list.push(item);
-        }
-      }
-    }
-    if (list.length > 0) {
-      rs.push(
-        <ListDateGroup
-          additionalServiceCategory={AdditionalServiceCategory.Ars}
-          mid={mid}
-          key={date + '-last'}
-          date={date}
-          items={list as any}
-        ></ListDateGroup>
-      );
-    }
-    return rs;
-  }
-
  // if (!hasAccess) {
  //   return <AccessDeniedDialog />;
  // }
@@ -270,7 +240,7 @@ export const ArsListPage = () => {
              </div>
            </section>

-            <section className="filter-section">
+            <div className="filter-section">
              <SortTypeBox
                sortType={sortType}
                onClickToSort={onClickToSort}
@@ -288,12 +258,15 @@ export const ArsListPage = () => {
                  }
                </div>
              </div>
-            </section>
+            </div>

-            <section className="transaction-list">
-              { getListDateGroup() }
-            </section>
-            <div ref={ setTarget }></div>
+            <ArsList
+              additionalServiceCategory={AdditionalServiceCategory.Ars}
+              listItems={listItems}
+              mid={mid}
+              setDetailData={setDetailData}
+            ></ArsList>
+            <div ref={setTarget}></div>
          </div>
        </div>
        <div className="apply-row">
@@ -323,6 +296,12 @@ export const ArsListPage = () => {
        setMinAmount={setMinAmount}
        setMaxAmount={setMaxAmount}
      ></ArsFilter>
+      <ArsDetail
+        detailOn={detailOn}
+        setDetailOn={setDetailOn}
+        mid={detailMid}
+        tid={detailTid}
+      ></ArsDetail>
      <EmailBottomSheet
        bottomSheetOn={emailBottomSheetOn}
        setBottomSheetOn={setEmailBottomSheetOn}
--- a/src/pages/additional-service/sms-payment/sms-payment-page.tsx
+++ b/src/pages/additional-service/sms-payment/sms-payment-page.tsx
@@ -172,14 +172,6 @@ export const SmsPaymentPage = () => {
    setBottomSmsPaymentDetailResendOn(true);
  };

-  const setDetailData = (detailData: DetailData) => {
-    setDetailOn(detailData.detailOn);
-    setDetailTid(detailData.tid);
-    if (detailData?.serviceCode) {
-      setDetailServiceCode(detailData?.serviceCode);
-    }
-  };
-
  useEffect(() => {
    callList();
  }, [
@@ -238,7 +230,6 @@ export const SmsPaymentPage = () => {
              additionalServiceCategory={AdditionalServiceCategory.SMSPayment}
              mid={mid}
              onResendClick={onClickToShowDetail}
-              setDetailData={setDetailData}
            ></SmsPaymentList>
          </div>
        </div>
--- a/src/shared/constants/paths.ts
+++ b/src/shared/constants/paths.ts
@@ -125,10 +125,6 @@ export const PATHS: RouteNamesType = {
        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.ars.base}`,
        ROUTE_NAMES.additionalService.ars.list,
      ),
-      detail: generatePath(
-        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.ars.base}`,
-        ROUTE_NAMES.additionalService.ars.detail,
-      ),
      request: generatePath(
        `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.ars.base}`,
        ROUTE_NAMES.additionalService.ars.request,
--- a/src/shared/constants/route-names.ts
+++ b/src/shared/constants/route-names.ts
@@ -65,7 +65,6 @@ export const ROUTE_NAMES = {
    ars: {
      base: '/ars/*',
      list: 'list',
-      detail: 'detail',
      request: 'request',
      requestSuccess: 'request-success',
    },