Refactor additional service pages and add localization

- ARS 페이지 컴포넌트 분리 및 리팩토링
- SMS 재전송 성공/실패 snackBar 추가
- 부가서비스 페이지 다국어(i18n) 적용
- 계좌명의인증 리스트 UI 개선
- 라우트 경로 상수 정리

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

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;
 }
 export interface AccountHolderAuthFilterProps extends FilterProps {
@@ -50,10 +50,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;

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;

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 {

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;

src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx

@@ -1,6 +1,6 @@
 import { ListDateGroup } from '../list-date-group';
 import { AdditionalServiceCategory } from '../../model/types';
-import { AccountHolderAuthListProps, ExtensionAccountHolderAuthContentItem } from '../../model/account-holder-auth/types';
+import { AccountHolderAuthListProps, AccountHolderAuthItem } from '../../model/account-holder-auth/types';
 import { JSX } from 'react';
 
 export const AccountHolderAuthList = ({

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

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

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,
+  transactionTime, transactionCode, transactionType,
-  accountName,submallId, settlementDate, companyName,orderStatus,
+  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,
@@ -230,13 +230,13 @@ export const ListItem = ({
       });
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
-      navigate(PATHS.additionalService.ars.detail, {
+      if (setDetailData && !!mid && !!tid) {
-        state: {
+        setDetailData({
-          additionalServiceCategory: additionalServiceCategory,
           mid: mid,
-          tid: tid
+          tid: tid,
-        }
+          detailOn: true
-      });
+        });
+      }
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
       navigate(PATHS.additionalService.alimtalk.detail, {

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 { AccountHolderAuthListItem, AccountHolderAuthStatus, ExtensionAccountHolderAuthContentItem, ExtensionAccountHolderAuthDownloadExcelParams, ExtensionAccountHolderAuthDownloadExcelResponse } from '@/entities/additional-service/model/account-holder-auth/types';
+import { AccountHolderAuthListItem, AccountHolderAuthStatus, AccountHolderAuthItem, ExtensionAccountHolderAuthDownloadExcelParams, ExtensionAccountHolderAuthDownloadExcelResponse } from '@/entities/additional-service/model/account-holder-auth/types';
 import { AdditionalServiceCategory } 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';
@@ -39,7 +39,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);

src/pages/additional-service/additional-service-pages.tsx

@@ -48,7 +48,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}>

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,12 +53,16 @@ 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 (entry.isIntersecting) {
-        if(onActionIntersect && !!pageParam.cursor){
+        if (onActionIntersect && !!pageParam.cursor) {
           setOnActionIntersect(false);
           callList('page');
         }
@@ -88,34 +94,34 @@ export const ArsListPage = () => {
       minAmount: minAmount,
       maxAmount: maxAmount,
       page: {
-				...pageParam,
+        ...pageParam,
-				...{ sortType: sortType }
+        ...{ 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 }
@@ -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">
+            <ArsList
-              { getListDateGroup() }
+              additionalServiceCategory={AdditionalServiceCategory.Ars}
-            </section>
+              listItems={listItems}
-            <div ref={ setTarget }></div>
+              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}

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>

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,

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',
     },