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>
2025-11-04 10:31:03 +09:00
parent 4f87f40a0e
commit 86c5421c21
14 changed files with 339 additions and 111 deletions
--- 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 { 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);
--- a/src/pages/additional-service/additional-service-pages.tsx
+++ b/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}>
--- 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>