Fix TypeScript errors in additional-service module

Updated 24 files to resolve 111 TypeScript compilation errors by: - Updating imports from direct constant exports to getter functions - Adding i18n support with useTranslation hook - Fixing curried function calls to use translation function parameter - Adding explicit type annotations to map callbacks All filter components, list wrappers, and page components now properly use internationalized getter functions for status text and button groups. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-31 09:21:07 +09:00
parent 4d40fa1cf7
commit 95c83ebd7e
25 changed files with 125 additions and 87 deletions
--- a/src/entities/additional-service/ui/account-holder-auth/filter/account-holder-auth-filter.tsx
+++ b/src/entities/additional-service/ui/account-holder-auth/filter/account-holder-auth-filter.tsx
@@ -5,11 +5,12 @@ import { useEffect, useState } from 'react';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
-import { authStatusBtnGroup } from '@/entities/additional-service/model/account-holder-auth/constant';
+import { getAuthStatusBtnGroup } from '@/entities/additional-service/model/account-holder-auth/constant';
 import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
 import { useStore } from '@/shared/model/store';
 import { AccountHolderAuthFilterProps, AccountHolderAuthStatus } from '@/entities/additional-service/model/account-holder-auth/types';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
+import { useTranslation } from 'react-i18next';

 export const AccountHolderAuthFilter = ({
 	filterOn,
@@ -23,6 +24,7 @@ export const AccountHolderAuthFilter = ({
 	setEndDate,
 	setAuthStatus
 }: AccountHolderAuthFilterProps) => {
+	const { t } = useTranslation();

 	const [filterMid, setFilterMid] = useState<string>(mid);
 	const [filterStartDate, setFilterStartDate] = useState<string>(moment(startDate).format('YYYYMMDD'));
@@ -88,7 +90,7 @@ export const AccountHolderAuthFilter = ({
 						<FilterButtonGroups
 							title='지급상태'
 							activeValue={filterAuthStatus}
-							btnGroups={authStatusBtnGroup}
+							btnGroups={getAuthStatusBtnGroup(t)}
 							setter={setFilterAuthStatus}
 						></FilterButtonGroups>
 					</div>
--- a/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx
+++ b/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx
@@ -9,8 +9,9 @@ import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
 import { useStore } from '@/shared/model/store';
 import { AccountHolderSearchFilterProps, AccountHolderSearchCl, AccountHolderResultStatus } from '@/entities/additional-service/model/account-holder-search/types';
-import { resultStatusBtnGroup, SearchTypeOption } from '@/entities/additional-service/model/account-holder-search/constant';
+import { getResultStatusBtnGroup, getSearchTypeOption } from '@/entities/additional-service/model/account-holder-search/constant';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
+import { useTranslation } from 'react-i18next';

 export const AccountHolderSearchFilter = ({
 	filterOn,
@@ -30,6 +31,7 @@ export const AccountHolderSearchFilter = ({
 	setBank,
 	setResultStatus
 }: AccountHolderSearchFilterProps) => {
+	const { t } = useTranslation();

 	const [filterMid, setFilterMid] = useState<string>(mid);
 	const [filterSearchType, setFilterSearchType] = useState<AccountHolderSearchCl>(searchType);
@@ -104,7 +106,7 @@ export const AccountHolderSearchFilter = ({
 							title='예금주/계좌번호'
 							selectValue={filterSearchType}
 							selectSetter={setFilterSearchType}
-							selectOptions={SearchTypeOption}
+							selectOptions={getSearchTypeOption(t)}
 							inputValue={filterSearchKeyword}
 							inputSetter={setFilterSearchKeyword}
 						></FilterSelectInput>
@@ -125,7 +127,7 @@ export const AccountHolderSearchFilter = ({
 						<FilterButtonGroups
 							title='조회결과'
 							activeValue={filterResultStatus}
-							btnGroups={resultStatusBtnGroup}
+							btnGroups={getResultStatusBtnGroup(t)}
 							setter={setFilterResultStatus}
 						></FilterButtonGroups>
 					</div>
--- a/src/entities/additional-service/ui/face-auth/filter/face-auth-filter.tsx
+++ b/src/entities/additional-service/ui/face-auth/filter/face-auth-filter.tsx
@@ -9,8 +9,9 @@ import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
 import { useStore } from '@/shared/model/store';
 import { FaceAuthFilterProps, FaceAuthResult, FaceAuthTransType } from '@/entities/additional-service/model/face-auth/types';
-import { AuthResultBtnGroup, TransactionTypeBtnGroup } from '@/entities/additional-service/model/face-auth/constant';
+import { getAuthResultBtnGroup, getTransactionTypeBtnGroup } from '@/entities/additional-service/model/face-auth/constant';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
+import { useTranslation } from 'react-i18next';

 export const FaceAuthFilter = ({
 	filterOn,
@@ -28,6 +29,7 @@ export const FaceAuthFilter = ({
 	setTransType,
 	setAuthResult
 }: FaceAuthFilterProps) => {
+	const { t } = useTranslation();

 	const [filterMid, setFilterMid] = useState<string>(mid);
 	const [filterMemberId, setFilterMemberId] = useState<string>(userMallId);
@@ -104,14 +106,14 @@ export const FaceAuthFilter = ({
 						<FilterButtonGroups
 							title='거래유형'
 							activeValue={filterTransType}
-							btnGroups={TransactionTypeBtnGroup}
+							btnGroups={getTransactionTypeBtnGroup(t)}
 							setter={setFIlterTransType}
 						></FilterButtonGroups>

 						<FilterButtonGroups
 							title='인증결과'
 							activeValue={filterAuthResult}
-							btnGroups={AuthResultBtnGroup}
+							btnGroups={getAuthResultBtnGroup(t)}
 							setter={setFilterAuthResult}
 						></FilterButtonGroups>
 					</div>
--- a/src/entities/additional-service/ui/filter/alimtalk-filter.tsx
+++ b/src/entities/additional-service/ui/filter/alimtalk-filter.tsx
@@ -14,8 +14,9 @@ import moment from 'moment';
 import { useStore } from '@/shared/model/store';
 import { AlimtalkAlimCl, AlimtalkSearchCl, AlimTalkSendCl, AlimtalkSendType, ServiceCode } from '../../model/alimtalk/types';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
-import { AlimtalkAlimClBtnGroupForGeneral, AlimtalkAlimClBtnGroupForVBank, AlimtalkSearchClOptionGroup, AlimtalkSendClBtnGroup, AlimtalkSendTypeBtnGroup, AlimtalkServiceCodeOptionGroup } from '../../model/alimtalk/constant';
+import { getAlimtalkAlimClBtnGroupForGeneral, getAlimtalkAlimClBtnGroupForVBank, getAlimtalkSearchClOptionGroup, getAlimtalkSendClBtnGroup, getAlimtalkSendTypeBtnGroup, getAlimtalkServiceCodeOptionGroup } from '../../model/alimtalk/constant';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
+import { useTranslation } from 'react-i18next';

 export interface AlimtalkFilterProps {
  filterOn: boolean;
@@ -62,6 +63,7 @@ export const AlimtalkFilter = ({
  setSendType,
  setSendCl
 }: AlimtalkFilterProps) => {
+  const { t } = useTranslation();

  const [filterMid, setFilterMid] = useState<string>(mid);
  const [filterSearchCl, setFilterSearchCl] = useState<AlimtalkSearchCl>(searchCl);
@@ -76,10 +78,10 @@ export const AlimtalkFilter = ({
  // 결제수단에 따라 알림구분 버튼 그룹 선택
  const alimClBtnGroup = useMemo(() => {
    if (filterServiceCode === ServiceCode.VBANK) {
-      return AlimtalkAlimClBtnGroupForVBank;
+      return getAlimtalkAlimClBtnGroupForVBank(t);
    }
-    return AlimtalkAlimClBtnGroupForGeneral;
-  }, [filterServiceCode]);
+    return getAlimtalkAlimClBtnGroupForGeneral(t);
+  }, [filterServiceCode, t]);

  const onClickToClose = () => {
    setFilterOn(false);
@@ -143,7 +145,7 @@ export const AlimtalkFilter = ({
              title='주문자,TID'
              selectValue={filterSearchCl}
              selectSetter={setFilterSearchCl}
-              selectOptions={AlimtalkSearchClOptionGroup}
+              selectOptions={getAlimtalkSearchClOptionGroup(t)}
              inputValue={filterSearchValue}
              inputSetter={setFilterSearchValue}
            ></FilterSelectInput>
@@ -151,7 +153,7 @@ export const AlimtalkFilter = ({
              title='결제수단'
              selectValue={filterServiceCode}
              selectSetter={setFilterServiceCode}
-              selectOptions={AlimtalkServiceCodeOptionGroup}
+              selectOptions={getAlimtalkServiceCodeOptionGroup(t)}
            ></FilterSelect>
            <FilterButtonGroups
              title='알림구분'
@@ -169,13 +171,13 @@ export const AlimtalkFilter = ({
            <FilterButtonGroups
              title='발송 종류'
              activeValue={filterSendType}
-              btnGroups={AlimtalkSendTypeBtnGroup}
+              btnGroups={getAlimtalkSendTypeBtnGroup(t)}
              setter={setFilterSendType}
            ></FilterButtonGroups>
            <FilterButtonGroups
              title='발송 구분'
              activeValue={filterSendCl}
-              btnGroups={AlimtalkSendClBtnGroup}
+              btnGroups={getAlimtalkSendClBtnGroup(t)}
              setter={setFilterSendCl}
            ></FilterButtonGroups>
          </div>
--- a/src/entities/additional-service/ui/filter/fund-account-result-filter.tsx
+++ b/src/entities/additional-service/ui/filter/fund-account-result-filter.tsx
@@ -6,11 +6,12 @@ import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
-import { FundAccountResultSearchDateTypeBtnGroup, FundAccountResultStatusBtnGroup, FundAccountSearchClOptionsGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
+import { getFundAccountResultSearchDateTypeBtnGroup, getFundAccountResultStatusBtnGroup, getFundAccountSearchClOptionsGroup, getFundAccountStatusBtnGroup } from '../../model/fund-account/constant';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
+import { useTranslation } from 'react-i18next';

 export interface FundAccountResultFilterProps {
  filterOn: boolean;
@@ -52,6 +53,7 @@ export const FundAccountResultFilter = ({
  setBankCode,
  setResultStatus
 }: FundAccountResultFilterProps) => {
+  const { t } = useTranslation();

  const [filterMid, setFilterMid] = useState<string>(mid);
  const [filterSearchCl, setFilterSearchCl] = useState<FundAccountSearchCl>(searchCl);
@@ -132,14 +134,14 @@ export const FundAccountResultFilter = ({
              title='수취인/계좌번호'
              selectValue={filterSearchCl}
              selectSetter={setFilterSearchCl}
-              selectOptions={FundAccountSearchClOptionsGroup}
+              selectOptions={getFundAccountSearchClOptionsGroup(t)}
              inputValue={filterSearchValue}
              inputSetter={setFilterSearchValue}
            ></FilterSelectInput>
            <FilterButtonGroups
              title='조회 기준'
              activeValue={filterSearchDateType}
-              btnGroups={FundAccountResultSearchDateTypeBtnGroup}
+              btnGroups={getFundAccountResultSearchDateTypeBtnGroup(t)}
              setter={setFilterSearchDateType}
            ></FilterButtonGroups>
            <FilterCalendar
@@ -158,7 +160,7 @@ export const FundAccountResultFilter = ({
            <FilterButtonGroups
              title='처리 결과'
              activeValue={filterResultStatus}
-              btnGroups={FundAccountResultStatusBtnGroup}
+              btnGroups={getFundAccountResultStatusBtnGroup(t)}
              setter={setFilterResultStatus}
            ></FilterButtonGroups>
          </div>
--- a/src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx
+++ b/src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx
@@ -6,11 +6,12 @@ import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
-import { FundAccountSearchClOptionsGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
+import { getFundAccountSearchClOptionsGroup, getFundAccountStatusBtnGroup } from '../../model/fund-account/constant';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
+import { useTranslation } from 'react-i18next';

 export interface FundAccountTransactionFilterProps {
  filterOn: boolean;
@@ -48,6 +49,7 @@ export const FundAccountTransactionFilter = ({
  setBankCode,
  setStatus
 }: FundAccountTransactionFilterProps) => {
+  const { t } = useTranslation();

  const [filterMid, setFilterMid] = useState<string>(mid);
  const [filterSearchCl, setFilterSearchCl] = useState<FundAccountSearchCl>(searchCl);
@@ -126,7 +128,7 @@ export const FundAccountTransactionFilter = ({
              title='수취인/계좌번호'
              selectValue={filterSearchCl}
              selectSetter={setFilterSearchCl}
-              selectOptions={FundAccountSearchClOptionsGroup}
+              selectOptions={getFundAccountSearchClOptionsGroup(t)}
              inputValue={filterSearchValue}
              inputSetter={setFilterSearchValue}
            ></FilterSelectInput>
@@ -146,7 +148,7 @@ export const FundAccountTransactionFilter = ({
            <FilterButtonGroups
              title='처리 결과'
              activeValue={filterStatus}
-              btnGroups={FundAccountStatusBtnGroup}
+              btnGroups={getFundAccountStatusBtnGroup(t)}
              setter={setFilterStatus}
            ></FilterButtonGroups>
          </div>
--- a/src/entities/additional-service/ui/filter/payout-filter.tsx
+++ b/src/entities/additional-service/ui/filter/payout-filter.tsx
@@ -10,8 +10,8 @@ import {
  PayoutSearchDateType
 } from '../../model/payout/types';
 import {
-  PayoutSearchClBtnGroup,
-  PayoutDisbursementStatusBtnGroup
+  getPayoutSearchClBtnGroup,
+  getPayoutDisbursementStatusBtnGroup
 } from '../../model/payout/constant';
 import {
  FilterMotionDuration,
@@ -21,6 +21,7 @@ import {
 import moment from 'moment';
 import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
+import { useTranslation } from 'react-i18next';

 export interface PayoutFilterProps {
  filterOn: boolean;
@@ -59,6 +60,7 @@ export const PayoutFilter = ({
  setMinAmount,
  setMaxAmount
 }: PayoutFilterProps) => {
+  const { t } = useTranslation();

  const [filterMid, setFilterMid] = useState<string>(mid);
  const [filterSearchDateType, setFilterSearchDateType] = useState<PayoutSearchDateType>(searchDateType);
@@ -122,7 +124,7 @@ export const PayoutFilter = ({
            <FilterButtonGroups
              title='조회기준'
              activeValue={filterSearchDateType}
-              btnGroups={PayoutSearchClBtnGroup}
+              btnGroups={getPayoutSearchClBtnGroup(t)}
              setter={setFilterSearchDateType}
            ></FilterButtonGroups>
            <FilterCalendar
@@ -135,7 +137,7 @@ export const PayoutFilter = ({
            <FilterButtonGroups
              title='지급상태'
              activeValue={filterStatus}
-              btnGroups={PayoutDisbursementStatusBtnGroup}
+              btnGroups={getPayoutDisbursementStatusBtnGroup(t)}
              setter={setFilterStatus}
            ></FilterButtonGroups>
            <FilterRangeAmount
--- a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
+++ b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
@@ -13,14 +13,16 @@ import { useExtensionFundAccountResultListMutation } from '../../api/fund-accoun
 import { PATHS } from '@/shared/constants/paths';
 import { NumericFormat } from 'react-number-format';
 import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
-import { FundAccountResultStatusBtnGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
+import { getFundAccountResultStatusBtnGroup, getFundAccountStatusBtnGroup } from '../../model/fund-account/constant';
 import { FundAccountResultFilter } from '../filter/fund-account-result-filter';
 import { useStore } from '@/shared/model/store';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
+import { useTranslation } from 'react-i18next';

 export const FundAccountResultListWrap = () => {
  const { navigate } = useNavigate();
+  const { t } = useTranslation();

  let recentCursor = null;

@@ -348,7 +350,7 @@ export const FundAccountResultListWrap = () => {
        <div className="excrow mr-0">
          <div className="full-menu-keywords no-padding">
            {
-              FundAccountResultStatusBtnGroup.map((value, index) => (
+              getFundAccountResultStatusBtnGroup(t).map((value: any, index: number) => (
                <span
                  key={`key-service-code=${index}`}
                  className={`keyword-tag ${(resultStatus === value.value) ? 'active' : ''}`}
--- a/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
+++ b/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
@@ -19,7 +19,7 @@ import { ListDateGroup } from '../list-date-group';
 import { AdditionalServiceCategory } from '../../model/types';
 import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
 import { useExtensionFundAccountTransferExcelMutation } from '../../api/fund-account/use-extension-fund-account-transfer-excel-mutation';
-import { FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
+import { getFundAccountStatusBtnGroup } from '../../model/fund-account/constant';
 import { useExtensionFundAccountBalanceMutation } from '../../api/fund-account/use-extension-fund-account-balance-mutation';
 import { NumericFormat } from 'react-number-format';
 import { FundAccountTransactionFilter } from '../filter/fund-account-trnasaction-filter';
@@ -27,9 +27,11 @@ import { PATHS } from '@/shared/constants/paths';
 import { useStore } from '@/shared/model/store';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
+import { useTranslation } from 'react-i18next';

 export const FundAccountTransferListWrap = () => {
  const { navigate } = useNavigate();
+  const { t } = useTranslation();

  const userMid = useStore.getState().UserStore.mid;

@@ -283,7 +285,7 @@ export const FundAccountTransferListWrap = () => {
        <div className="excrow mr-0">
          <div className="full-menu-keywords no-padding">
            {
-              FundAccountStatusBtnGroup.map((value, index) => (
+              getFundAccountStatusBtnGroup(t).map((value: any, index: number) => (
                <span
                  key={`key-service-code=${index}`}
                  className={`keyword-tag ${(status === value.value) ? 'active' : ''}`}
--- a/src/entities/additional-service/ui/info-wrap/payment-info-wrap.tsx
+++ b/src/entities/additional-service/ui/info-wrap/payment-info-wrap.tsx
@@ -2,11 +2,13 @@
 import moment from 'moment';
 import { AdditionalServiceCategory, DetailInfoSectionProps } from '../../model/types';
 import { getPaymentStatusText, getProcessStatusText, getSendMethodText } from '../../lib/payment-status-utils';
+import { useTranslation } from 'react-i18next';

 export const PaymentInfoWrap = ({
    additionalServiceCategory,
    paymentInfo
 }: DetailInfoSectionProps) => {
+    const { t } = useTranslation();

    console.log("PaymentInfo Check: ", paymentInfo)

@@ -23,7 +25,7 @@ export const PaymentInfoWrap = ({
                            </li>
                            <li className="kv-row">
                                <span className="k">발송수단</span>
-                                <span className="v">{getSendMethodText(paymentInfo?.sendMethod)}</span>
+                                <span className="v">{getSendMethodText(t)(paymentInfo?.sendMethod)}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">발송일자</span>
@@ -33,7 +35,7 @@ export const PaymentInfoWrap = ({
                            </li>
                            <li className="kv-row">
                                <span className="k">결제상태(실패횟수)</span>
-                                <span className="v">  {`${getPaymentStatusText(paymentInfo?.paymentStatus)}(${paymentInfo?.failCount})`}</span>
+                                <span className="v">  {`${getPaymentStatusText(t)(paymentInfo?.paymentStatus)}(${paymentInfo?.failCount})`}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">결제수단</span>
@@ -56,7 +58,7 @@ export const PaymentInfoWrap = ({
                        <>
                            <li className="kv-row">
                                <span className="k">진행상태</span>
-                                <span className="v">{getProcessStatusText(paymentInfo?.processStatus)}</span>
+                                <span className="v">{getProcessStatusText(t)(paymentInfo?.processStatus)}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">요청일자</span>
--- a/src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx
+++ b/src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx
@@ -9,8 +9,9 @@ import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
 import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
 import { useStore } from '@/shared/model/store';
 import { KeyInPaymentFilterProps, KeyInPaymentTansactionType } from '@/entities/additional-service/model/key-in/types';
-import { keyInPaymentPaymentStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant';
+import { getKeyInPaymentPaymentStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
+import { useTranslation } from 'react-i18next';

 export const KeyInPaymentFilter = ({
 	filterOn,
@@ -28,6 +29,7 @@ export const KeyInPaymentFilter = ({
 	setMinAmount,
 	setMaxAmount
 }: KeyInPaymentFilterProps) => {
+	const { t } = useTranslation();

 	const [filterMid, setFilterMid] = useState<string>(mid);
 	const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
@@ -94,7 +96,7 @@ export const KeyInPaymentFilter = ({
 						<FilterButtonGroups
 							title='거래상태'
 							activeValue={filterTransactionStatus}
-							btnGroups={keyInPaymentPaymentStatusBtnGroup}
+							btnGroups={getKeyInPaymentPaymentStatusBtnGroup(t)}
 							setter={setFilterTransactionStatus}
 						></FilterButtonGroups>

--- a/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
@@ -13,15 +13,17 @@ import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import { useExtensionLinkPayWaitDownloadExcelMutation } from '../../api/link-payment/use-extension-link-pay-wait-download-excel-mutation';
 import { useStore } from '@/shared/model/store';
 import { LinkPaymentProcessStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus, LinkPaymentWaitListItem } from '../../model/link-pay/types';
-import { ProcessStatusBtnGrouup } from '../../model/link-pay/constant';
+import { getProcessStatusBtnGroup } from '../../model/link-pay/constant';
 import { useExtensionLinkPayWaitDeleteMutation } from '../../api/link-payment/use-extension-link-pay-wait-delete-mutation';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
+import { useTranslation } from 'react-i18next';



 export const LinkPaymentWaitSendWrap = () => {
  const { navigate } = useNavigate();
+  const { t } = useTranslation();
  const userMid = useStore.getState().UserStore.mid;

  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
@@ -199,7 +201,7 @@ export const LinkPaymentWaitSendWrap = () => {
        <div className="excrow">
          <div className="full-menu-keywords no-padding">
            {
-              ProcessStatusBtnGrouup.map((value, index) => (
+              getProcessStatusBtnGroup(t).map((value: any, index: number) => (
                <span
                  key={`key-service-code=${index}`}
                  className={`keyword-tag ${(processStatus === value.value) ? 'active' : ''}`}
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -308,10 +308,10 @@ export const ListItem = ({
  const getStatus = () => {
    let statusText = '';
    if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
-      statusText = getFundAccountStatusName(resultStatus);
+      statusText = getFundAccountStatusName(t)(resultStatus);
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
-      statusText = getFundAccountResultStatusName(resultStatus);
+      statusText = getFundAccountResultStatusName(t)(resultStatus);
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
      statusText = resultStatus || '';
@@ -320,16 +320,16 @@ export const ListItem = ({
      statusText = authStatus || '';
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
-      statusText = getTransTypeText(transType)
+      statusText = getTransTypeText(t)(transType)
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
-      statusText = getSmsClName(smsCl);
+      statusText = getSmsClName(t)(smsCl);
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
-      statusText = getKeyInPaymentPaymentStatusName(transactionType)
+      statusText = getKeyInPaymentPaymentStatusName(t)(transactionType)
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
-      statusText = getArsPaymentStatusName(paymentStatus)
+      statusText = getArsPaymentStatusName(t)(paymentStatus)
    }
    else {
      statusText = resultStatus || status || '';
@@ -377,7 +377,7 @@ export const ListItem = ({
      str = `${buyerName}(${tid})`;
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
-      str = `${receiverName}(${getAlimtalkSendTypeText(sendType)})`;
+      str = `${receiverName}(${getAlimtalkSendTypeText(t)(sendType)})`;
    }

    return str;
@@ -419,8 +419,8 @@ export const ListItem = ({
          <span className="separator">|</span>
          <span>
            {authResult === 'FAIL'
-              ? `${getAuthResultStatusText(authResult)}: ${failReason}`
-              : getAuthResultStatusText(authResult)
+              ? `${getAuthResultStatusText(t)(authResult)}: ${failReason}`
+              : getAuthResultStatusText(t)(authResult)
            }
          </span>
        </div>
@@ -430,17 +430,17 @@ export const ListItem = ({
      if (paymentStatus === "0" || paymentStatus === "3" || paymentStatus === "4") {
        rs.push(
          <div key="link-payment-history" className="transaction-details">
-            <span>{getPaymentStatusText(paymentStatus)}</span>
+            <span>{getPaymentStatusText(t)(paymentStatus)}</span>
            <span className="separator">|</span>
-            <span>{getSendMethodText(sendMethod)}</span>
+            <span>{getSendMethodText(t)(sendMethod)}</span>
          </div>
        )
      } else {
        rs.push(
          <div key="link-payment-history" className="transaction-details">
-            <span>{getPaymentStatusText(paymentStatus)}</span>
+            <span>{getPaymentStatusText(t)(paymentStatus)}</span>
            <span className="separator">|</span>
-            <span>{getSendMethodText(sendMethod)}</span>
+            <span>{getSendMethodText(t)(sendMethod)}</span>
            <span className="separator">|</span>
            <span>{paymentMethod}</span>
          </div>
@@ -450,16 +450,16 @@ export const ListItem = ({
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait) {
      rs.push(
        <div key="link-payment-wait" className="transaction-details">
-          <span>{getProcessStatusText(processStatus)}</span>
+          <span>{getProcessStatusText(t)(processStatus)}</span>
          <span className="separator">|</span>
-          <span>{getSendMethodText(sendMethod)}</span>
+          <span>{getSendMethodText(t)(sendMethod)}</span>
        </div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
      rs.push(
        <div className="transaction-details">
-          <span>{getPayoutStatusText(status)}</span>
+          <span>{getPayoutStatusText(t)(status)}</span>
          <span className="separator">|</span>
          <span>{submallId}</span>
        </div>
@@ -499,7 +499,7 @@ export const ListItem = ({
          <span className="separator">|</span>
          <span>{getStatus()}</span>
          <span className="separator">|</span>
-          <span>{getArsOrderStatusName(orderStatus)}</span>
+          <span>{getArsOrderStatusName(t)(orderStatus)}</span>
          <span className="separator">|</span>
          <span>{transactionType}</span>
        </div>
@@ -511,9 +511,9 @@ export const ListItem = ({
        <div className="transaction-details">
          <span>{getTime()}</span>
          <span className="separator">|</span>
-          <span>{getAlimtalkServiceCodeText(serviceCode)}</span>
+          <span>{getAlimtalkServiceCodeText(t)(serviceCode)}</span>
          <span className="separator">|</span>
-          <span>{getAlimtalkAlimClText(alimCl)}</span>
+          <span>{getAlimtalkAlimClText(t)(alimCl)}</span>
        </div>
      );
    }
@@ -605,7 +605,7 @@ export const ListItem = ({
    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
      rs.push(
        <div key="payout-item-amount" className={`status-label ${(sendCl === 'REQUEST' || sendCl === 'SUCCESS') ? 'success' : 'fail'}`}
-        >{getAlimtalkSendClTypeText(sendCl)}</div>
+        >{getAlimtalkSendClTypeText(t)(sendCl)}</div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment && onResendClick) {