From ac8b8d8c94d5595e2affd8da75f5cf82a1d35b1b Mon Sep 17 00:00:00 2001
From: Jay Sheen <jay.sheen@bpsoft.co.kr>
Date: Thu, 30 Oct 2025 15:53:09 +0900
Subject: [PATCH] Add localization to transaction filter components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add i18n support to all transaction filter components
- Add translation keys for filter UI elements in ko.json and en.json
- Replace hardcoded Korean text with useTranslation hook
- Updated components: all-transaction-filter, cash-receipt-filter, billing-filter, escrow-filter

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../ui/filter/all-transaction-filter.tsx      | 70 ++++++++++---------
 .../transaction/ui/filter/billing-filter.tsx  | 48 +++++++------
 .../ui/filter/cash-receipt-filter.tsx         | 38 +++++-----
 .../transaction/ui/filter/escrow-filter.tsx   | 42 +++++------
 src/locales/en.json                           | 30 ++++++++
 src/locales/ko.json                           | 30 ++++++++
 6 files changed, 163 insertions(+), 95 deletions(-)

diff --git a/src/entities/transaction/ui/filter/all-transaction-filter.tsx b/src/entities/transaction/ui/filter/all-transaction-filter.tsx
index 62a0335..bd055a1 100644
--- a/src/entities/transaction/ui/filter/all-transaction-filter.tsx
+++ b/src/entities/transaction/ui/filter/all-transaction-filter.tsx
@@ -1,22 +1,23 @@
 import { useEffect } from 'react';
 import { useState } from 'react';
 import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
-import { 
+import {
   AllTransactionMoidTidOptionsGroup,
   AllTracsactionStatusCode,
 } from '@/entities/transaction/model/contant';
-import { 
+import {
   AllTransactionFilterProps,
   AllTransactionSearchCl,
   AllTransactionMoidTid
 } from '../../model/types';
-import { 
+import {
   FilterMotionDuration,
   FilterMotionStyle,
   FilterMotionVariants
@@ -53,6 +54,7 @@ export const AllTransactionFilter = ({
   setSearchValue,
   serviceCodeOptions
 }: AllTransactionFilterProps) => {
+  const { t } = useTranslation();
 
   const [filterMid, setFilterMid] = useState<string>(mid);
   const [filterMoidTidType, setFilterMoidTidType] = useState<AllTransactionMoidTid>(AllTransactionMoidTid.MOID);
@@ -63,7 +65,7 @@ export const AllTransactionFilter = ({
   const [filterServiceCode, setFilterServiceCode] = useState<string>(serviceCode);
   const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
   const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
-  
+
   const [filterCardCode, setFilterCardCode] = useState<string | undefined>(cardCode);
   const [filterBankCode, setFilterBankCode] = useState<string | undefined>(bankCode);
 
@@ -120,36 +122,36 @@ export const AllTransactionFilter = ({
 
     }
     else if(value === '01'){
-      options.push({name: '카드번호', value: AllTransactionSearchCl.CARD_NO});
-      options.push({name: '승인번호', value: AllTransactionSearchCl.CARD_APPROVAL_NO});
+      options.push({name: t('filter.searchOptions.cardNumber'), value: AllTransactionSearchCl.CARD_NO});
+      options.push({name: t('filter.searchOptions.approvalNumber'), value: AllTransactionSearchCl.CARD_APPROVAL_NO});
     }
     else if(value === '02'){
-      options.push({name: '구매자명', value: AllTransactionSearchCl.BANK_BUYER_NM});
+      options.push({name: t('filter.searchOptions.buyerName'), value: AllTransactionSearchCl.BANK_BUYER_NM});
     }
     else if(value === '03'){
-      options.push({name: '가상계좌번호', value: AllTransactionSearchCl.VACCT_NO});
-      options.push({name: '입금자명', value: AllTransactionSearchCl.VACCT_DEPOSIT_NM});
+      options.push({name: t('filter.searchOptions.virtualAccountNumber'), value: AllTransactionSearchCl.VACCT_NO});
+      options.push({name: t('filter.searchOptions.depositorName'), value: AllTransactionSearchCl.VACCT_DEPOSIT_NM});
     }
     else if(value === '05'){
-      options.push({name: '휴대폰번호', value: AllTransactionSearchCl.TEL_NO});
+      options.push({name: t('filter.searchOptions.phoneNumber'), value: AllTransactionSearchCl.TEL_NO});
     }
     else if(value === '14'){
-      options.push({name: '상품권번호', value: AllTransactionSearchCl.SSGMONEY_GIFT_NO}); 
+      options.push({name: t('filter.searchOptions.giftCardNumber'), value: AllTransactionSearchCl.SSGMONEY_GIFT_NO});
     }
     else if(value === '21'){
-      options.push({name: '승인번호', value: AllTransactionSearchCl.SSGBANK_APPROVAL_NO}); 
+      options.push({name: t('filter.searchOptions.approvalNumber'), value: AllTransactionSearchCl.SSGBANK_APPROVAL_NO});
     }
     else if(value === '24'){
-      options.push({name: '고객ID', value: AllTransactionSearchCl.CMSBANK_USER_ID}); 
+      options.push({name: t('filter.searchOptions.customerId'), value: AllTransactionSearchCl.CMSBANK_USER_ID});
     }
     else if(value === '26'){
-      options.push({name: '컬처랜드ID', value: AllTransactionSearchCl.SSGBANK_APPROVAL_NO}); 
+      options.push({name: t('filter.searchOptions.culturelandId'), value: AllTransactionSearchCl.SSGBANK_APPROVAL_NO});
     }
     else if(value === '31'){
-      options.push({name: '카드번호', value: AllTransactionSearchCl.TMONEY_CARD_NO}); 
+      options.push({name: t('filter.searchOptions.tmoneyCardNumber'), value: AllTransactionSearchCl.TMONEY_CARD_NO});
     }
     setSearchClOptionsGroup(options);
-    
+
   };
   
   const onChangeServiceCode = (val: string) => {
@@ -184,29 +186,29 @@ export const AllTransactionFilter = ({
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
-            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-title center">{t('filter.filter')}</div>
             <div className="full-menu-actions">
-              <button 
+              <button
                 id="closeFullMenu"
                 className="full-menu-close"
               >
-                <img 
+                <img
                   src={ IMAGE_ROOT + '/ico_close.svg' }
-                  alt="닫기"
+                  alt={t('filter.close')}
                   onClick={ () => onClickToClose() }
                 />
               </button>
             </div>
           </div>
-      
+
           <div className="option-list pt-16">
             <FilterSelectMid
-              title='가맹점'
+              title={t('filter.merchant')}
               selectSetter={ setMid }
               showType={ 'GID' }
             ></FilterSelectMid>
             <FilterSelectInput
-              title='주문번호/TID'
+              title={t('filter.orderNumberTid')}
               selectValue={ filterMoidTidType }
               selectSetter={ setFilterMoidTidType }
               selectOptions={ AllTransactionMoidTidOptionsGroup }
@@ -214,31 +216,31 @@ export const AllTransactionFilter = ({
               inputSetter={ setFilterMoidTidValue }
             ></FilterSelectInput>
             <FilterCalendar
-              title='조회기간'
+              title={t('filter.period')}
               startDate={ filterFromDate }
               endDate={ filterToDate }
               setStartDate={ setFilterFromDate }
               setEndDate={ setFilterToDate }
             ></FilterCalendar>
-            
+
             <FilterButtonGroups
-              title='거래상태'
+              title={t('filter.transactionStatus')}
               activeValue={ filterStatusCode }
               btnGroups={ statusCodeBtns }
               setter={ setFilterStatusCode }
             ></FilterButtonGroups>
 
-            { serviceCodeOptions && 
+            { serviceCodeOptions &&
             <FilterSelect
-              title='결제수단'
+              title={t('filter.paymentMethod')}
               selectValue={ filterServiceCode }
               selectSetter={ onChangeServiceCode }
               selectOptions={ serviceCodeOptions }
             ></FilterSelect>
             }
-            
+
             <FilterRangeAmount
-              title='거래금액'
+              title={t('filter.transactionAmount')}
               minAmount={ filterMinAmount }
               maxAmount={ filterMaxAmount }
               setMinAmount={ setFilterMinAmount }
@@ -253,20 +255,20 @@ export const AllTransactionFilter = ({
             ></FilterSelect>
             */}
             <FilterSelectInput
-              title='상세조회'
+              title={t('filter.detailSearch')}
               selectValue={ filterSearchCl }
               selectSetter={ setFilterSearchCl }
               selectOptions={ searchClOptionsGroup }
               inputValue={ filterSearchValue }
               inputSetter={ setFilterSearchValue }
             ></FilterSelectInput>
-            
+
           </div>
           <div className="apply-row">
-            <button 
+            <button
               className="btn-50 btn-blue flex-1"
               onClick={ () => onClickToSetFilter() }
-            >적용</button>
+            >{t('filter.apply')}</button>
           </div>
         </div>
       </motion.div>
diff --git a/src/entities/transaction/ui/filter/billing-filter.tsx b/src/entities/transaction/ui/filter/billing-filter.tsx
index a6ceb1a..8c8f3bc 100644
--- a/src/entities/transaction/ui/filter/billing-filter.tsx
+++ b/src/entities/transaction/ui/filter/billing-filter.tsx
@@ -1,26 +1,27 @@
 import { useEffect } from 'react';
 import { useState } from 'react';
 import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
-import { 
+import {
   BillingSearchTypeOptionsGroup,
-  BillingRequestStatusBtnGroup, 
+  BillingRequestStatusBtnGroup,
   BillingProcessResultBtnGroup,
-  BillingPaymentMethodBtnGroup 
+  BillingPaymentMethodBtnGroup
 } from '@/entities/transaction/model/contant';
-import { 
+import {
   BillingFilterProps,
   BillingPaymentMethod,
   BillingProcessResult,
   BillingRequestStatus,
   BillingSearchType
 } from '../../model/types';
-import { 
+import {
   FilterMotionDuration,
   FilterMotionStyle,
   FilterMotionVariants
@@ -52,6 +53,7 @@ export const BillingFilter = ({
   setMinAmount,
   setMaxAmount
 }: BillingFilterProps) => {
+  const { t } = useTranslation();
 
   const [filterMid, setFilterMid] = useState<string>(mid);
   const [filterSearchType, setFilterSearchType] = useState<BillingSearchType>(searchType);
@@ -63,7 +65,7 @@ export const BillingFilter = ({
   const [filterPaymentMethod, setFilterPaymentMethod] = useState<BillingPaymentMethod>(paymentMethod);
   const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
   const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
-  
+
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
 
   const onClickToClose = () => {
@@ -104,29 +106,29 @@ export const BillingFilter = ({
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
-            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-title center">{t('filter.filter')}</div>
             <div className="full-menu-actions">
-              <button 
+              <button
                 id="closeFullMenu"
                 className="full-menu-close"
               >
-                <img 
+                <img
                   src={ IMAGE_ROOT + '/ico_close.svg' }
-                  alt="닫기"
+                  alt={t('filter.close')}
                   onClick={ () => onClickToClose() }
                 />
               </button>
             </div>
           </div>
-      
+
           <div className="option-list pt-16">
             <FilterSelectMid
-              title='가맹점'
+              title={t('filter.merchant')}
               selectSetter={ setMid }
               showType={ 'GID' }
             ></FilterSelectMid>
             <FilterSelectInput
-              title='주문번호/TID'
+              title={t('filter.orderNumberTid')}
               selectValue={ filterSearchType }
               selectSetter={ setFilterSearchType }
               selectOptions={ BillingSearchTypeOptionsGroup }
@@ -134,46 +136,46 @@ export const BillingFilter = ({
               inputSetter={ setFilterSearchKeyword }
             ></FilterSelectInput>
             <FilterCalendar
-              title='조회기간'
+              title={t('filter.period')}
               startDate={ filterStartDate }
               endDate={ filterEndDate }
               setStartDate={ setFilterStartDate }
               setEndDate={ setFilterEndDate }
             ></FilterCalendar>
-            
+
             <FilterButtonGroups
-              title='요청상태'
+              title={t('filter.requestStatus')}
               activeValue={ filterRequestStatus }
               btnGroups={ BillingRequestStatusBtnGroup }
               setter={ setFilterRequestStatus }
             ></FilterButtonGroups>
             <FilterButtonGroups
-              title='처리결과'
+              title={t('filter.processingResult')}
               activeValue={ filterProcessResult }
               btnGroups={ BillingProcessResultBtnGroup }
               setter={ setFilterProcessResult }
             ></FilterButtonGroups>
             <FilterButtonGroups
-              title='결제수단'
+              title={t('filter.paymentMethod')}
               activeValue={ filterPaymentMethod }
               btnGroups={ BillingPaymentMethodBtnGroup }
               setter={ setFilterPaymentMethod }
             ></FilterButtonGroups>
-            
+
             <FilterRangeAmount
-              title='거래금액'
+              title={t('filter.transactionAmount')}
               minAmount={ filterMinAmount }
               maxAmount={ filterMaxAmount }
               setMinAmount={ setFilterMinAmount }
               setMaxAmount={ setFilterMaxAmount }
             ></FilterRangeAmount>
-            
+
           </div>
           <div className="apply-row">
-            <button 
+            <button
               className="btn-50 btn-blue flex-1"
 							onClick={ () => onClickToSetFilter() }
-            >적용</button>
+            >{t('filter.apply')}</button>
           </div>
         </div>
       </motion.div>
diff --git a/src/entities/transaction/ui/filter/cash-receipt-filter.tsx b/src/entities/transaction/ui/filter/cash-receipt-filter.tsx
index d6b0e2d..f651e32 100644
--- a/src/entities/transaction/ui/filter/cash-receipt-filter.tsx
+++ b/src/entities/transaction/ui/filter/cash-receipt-filter.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useState } from 'react';
 import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
@@ -11,14 +12,14 @@ import {
   CashReceiptTransactionTypeBtnGroup,
   CashReceiptProcessResultBtnGroup
 } from '@/entities/transaction/model/contant';
-import { 
+import {
   CashReceiptFilterProps,
   CashReceiptPurposeType,
   CashReceiptTransactionType,
   CashReceiptProcessResult,
   CashReceiptSearchNumberType
 } from '../../model/types';
-import { 
+import {
   FilterMotionDuration,
   FilterMotionStyle,
   FilterMotionVariants
@@ -44,6 +45,7 @@ export const CashReceiptFilter = ({
   setProcessResult,
   setSearchNumberType
 }: CashReceiptFilterProps) => {
+  const { t } = useTranslation();
 
   const [filterMid, setFilterMid] = useState<string>(mid);
   const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
@@ -56,8 +58,8 @@ export const CashReceiptFilter = ({
   const [filterIssueType, setFilterIssueType] = useState<string>('');
   const [filterIssueNumber, setFilterIssueNumber] = useState<string>('');
   const issueTypeOptionsGroup = [
-    {name: '승인번호', value: 'issue'},
-    {name: '발행번호', value: 'issue2'},
+    {name: t('filter.searchOptions.approvalNumber'), value: 'issue'},
+    {name: t('filter.searchOptions.issueNumber'), value: 'issue2'},
   ];
 
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
@@ -96,55 +98,55 @@ export const CashReceiptFilter = ({
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
-            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-title center">{t('filter.filter')}</div>
             <div className="full-menu-actions">
-              <button 
+              <button
                 id="closeFullMenu"
                 className="full-menu-close"
               >
-                <img 
+                <img
                   src={ IMAGE_ROOT + '/ico_close.svg' }
-                  alt="닫기"
+                  alt={t('filter.close')}
                   onClick={ () => onClickToClose() }
                 />
               </button>
             </div>
           </div>
-      
+
           <div className="option-list pt-16">
             <FilterSelectMid
-              title='가맹점'
+              title={t('filter.merchant')}
               selectSetter={ setMid }
               showType={ 'GID' }
             ></FilterSelectMid>
             <FilterCalendar
-              title='발행일자'
+              title={t('filter.issuanceDate')}
               startDate={ filterStartDate }
               endDate={ filterEndDate }
               setStartDate={ setFilterStartDate }
               setEndDate={ setFilterEndDate }
             ></FilterCalendar>
-            
+
             <FilterButtonGroups
-              title='용도'
+              title={t('filter.purpose')}
               activeValue={ filterPurposeType }
               btnGroups={ CashReceiptPurposeTypeBtnGroup }
               setter={ setFilterPurposeType }
             ></FilterButtonGroups>
             <FilterButtonGroups
-              title='거래구분'
+              title={t('filter.transactionCategory')}
               activeValue={ filterTransactionType }
               btnGroups={ CashReceiptTransactionTypeBtnGroup }
               setter={ setFilterTransactionType }
             ></FilterButtonGroups>
             <FilterButtonGroups
-              title='진행상태'
+              title={t('filter.progressStatus')}
               activeValue={ filterProcessResult }
               btnGroups={ CashReceiptProcessResultBtnGroup }
               setter={ setFilterProcessResult }
             ></FilterButtonGroups>
             <FilterSelectInput
-              title='승인번호/발행번호'
+              title={t('filter.approvalIssuanceNumber')}
               selectValue={ filterSearchNumberType }
               selectSetter={ setFilterSearchNumberType }
               selectOptions={ issueTypeOptionsGroup }
@@ -153,10 +155,10 @@ export const CashReceiptFilter = ({
             ></FilterSelectInput>
           </div>
           <div className="apply-row">
-            <button 
+            <button
               className="btn-50 btn-blue flex-1"
               onClick={ () => onClickToSetFilter() }
-            >적용</button>
+            >{t('filter.apply')}</button>
           </div>
         </div>
       </motion.div>
diff --git a/src/entities/transaction/ui/filter/escrow-filter.tsx b/src/entities/transaction/ui/filter/escrow-filter.tsx
index 1a09452..3d77831 100644
--- a/src/entities/transaction/ui/filter/escrow-filter.tsx
+++ b/src/entities/transaction/ui/filter/escrow-filter.tsx
@@ -1,24 +1,25 @@
 import { useEffect } from 'react';
 import { useState } from 'react';
 import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
-import { 
+import {
   EscrowDeliveryStatusBtnGroup,
   EscrowSettlementStatusBtnGroup,
   EscrowSearchTypeOptionsGroup
 } from '@/entities/transaction/model/contant';
-import { 
+import {
   EscrowFilterProps,
   EscrowSearchType,
   EscrowDeliveryStatus,
   EscrowSettlementStatus
 } from '../../model/types';
-import { 
+import {
   FilterMotionDuration,
   FilterMotionStyle,
   FilterMotionVariants
@@ -48,6 +49,7 @@ export const EscrowFilter = ({
   setMinAmount,
   setMaxAmount
 }: EscrowFilterProps) => {
+  const { t } = useTranslation();
 
   const [filterMid, setFilterMid] = useState<string>(mid);
   const [filterSearchType, setFilterSearchType] = useState<EscrowSearchType>(searchType);
@@ -58,7 +60,7 @@ export const EscrowFilter = ({
   const [filterSettlementStatus, setFilterSettlementStatus] = useState<EscrowSettlementStatus>(settlementStatus);
   const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
   const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
-  
+
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
   
   const onClickToClose = () => {
@@ -98,29 +100,29 @@ export const EscrowFilter = ({
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
-            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-title center">{t('filter.filter')}</div>
             <div className="full-menu-actions">
-              <button 
+              <button
                 id="closeFullMenu"
                 className="full-menu-close"
               >
-                <img 
+                <img
                   src={ IMAGE_ROOT + '/ico_close.svg' }
-                  alt="닫기"
+                  alt={t('filter.close')}
                   onClick={ () => onClickToClose() }
                 />
               </button>
             </div>
           </div>
-      
+
           <div className="option-list pt-16">
             <FilterSelectMid
-              title='가맹점'
+              title={t('filter.merchant')}
               selectSetter={ setMid }
               showType={ 'GID' }
             ></FilterSelectMid>
             <FilterSelectInput
-              title='주문번호/TID'
+              title={t('filter.orderNumberTid')}
               selectValue={ filterSearchType }
               selectSetter={ setSearchType }
               selectOptions={ EscrowSearchTypeOptionsGroup }
@@ -128,40 +130,40 @@ export const EscrowFilter = ({
               inputSetter={ setSearchKeyword }
             ></FilterSelectInput>
             <FilterCalendar
-              title='조회기간'
+              title={t('filter.period')}
               startDate={ filterStartDate }
               endDate={ filterEndDate }
               setStartDate={ setFilterStartDate }
               setEndDate={ setFilterEndDate }
             ></FilterCalendar>
-            
+
             <FilterButtonGroups
-              title='배송상태'
+              title={t('filter.deliveryStatus')}
               activeValue={ filterDeliveryStatus }
               btnGroups={ EscrowDeliveryStatusBtnGroup }
               setter={ setFilterDeliveryStatus }
             ></FilterButtonGroups>
             <FilterButtonGroups
-              title='결제수단'
+              title={t('filter.paymentMethod')}
               activeValue={ filterSettlementStatus }
               btnGroups={ EscrowSettlementStatusBtnGroup }
               setter={ setFilterSettlementStatus }
             ></FilterButtonGroups>
-            
+
             <FilterRangeAmount
-              title='거래금액'
+              title={t('filter.transactionAmount')}
               minAmount={ filterMinAmount }
               maxAmount={ filterMaxAmount }
               setMinAmount={ setFilterMinAmount }
               setMaxAmount={ setFilterMaxAmount }
             ></FilterRangeAmount>
-            
+
           </div>
           <div className="apply-row">
-            <button 
+            <button
               className="btn-50 btn-blue flex-1"
               onClick={ () => onClickToSetFilter() }
-            >적용</button>
+            >{t('filter.apply')}</button>
           </div>
         </div>
       </motion.div>
diff --git a/src/locales/en.json b/src/locales/en.json
index 2493256..50b27b6 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -49,7 +49,37 @@
     },
     "filter": {
         "title": "Search Filters",
+        "filter": "Filter",
+        "close": "Close",
+        "apply": "Apply",
+        "merchant": "Merchant",
+        "orderNumberTid": "OID/TID",
         "period": "Period",
+        "issuanceDate": "Issuance Date",
+        "transactionStatus": "Transaction Status",
+        "paymentMethod": "Payment Method",
+        "transactionAmount": "Transaction Amount",
+        "detailSearch": "Detail Search",
+        "purpose": "Purpose",
+        "transactionCategory": "Transaction Category",
+        "progressStatus": "Progress Status",
+        "approvalIssuanceNumber": "Approval/Issuance Number",
+        "requestStatus": "Request Status",
+        "processingResult": "Processing Result",
+        "deliveryStatus": "Delivery Status",
+        "searchOptions": {
+          "cardNumber": "Card Number",
+          "approvalNumber": "Approval Number",
+          "buyerName": "Buyer Name",
+          "virtualAccountNumber": "Virtual Account Number",
+          "depositorName": "Depositor Name",
+          "phoneNumber": "Phone Number",
+          "giftCardNumber": "Gift Card Number",
+          "customerId": "Customer ID",
+          "culturelandId": "Cultureland ID",
+          "tmoneyCardNumber": "T-money Card Number",
+          "issueNumber": "Issue Number"
+        },
         "periods": {
           "1month": "1 Month",
           "3months": "3 Months",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 8fddcf0..866b240 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -49,7 +49,37 @@
     },
     "filter": {
         "title": "조회조건 설정",
+        "filter": "필터",
+        "close": "닫기",
+        "apply": "적용",
+        "merchant": "가맹점",
+        "orderNumberTid": "주문번호/TID",
         "period": "조회기간",
+        "issuanceDate": "발행일자",
+        "transactionStatus": "거래상태",
+        "paymentMethod": "결제수단",
+        "transactionAmount": "거래금액",
+        "detailSearch": "상세조회",
+        "purpose": "용도",
+        "transactionCategory": "거래구분",
+        "progressStatus": "진행상태",
+        "approvalIssuanceNumber": "승인번호/발행번호",
+        "requestStatus": "요청상태",
+        "processingResult": "처리결과",
+        "deliveryStatus": "배송상태",
+        "searchOptions": {
+          "cardNumber": "카드번호",
+          "approvalNumber": "승인번호",
+          "buyerName": "구매자명",
+          "virtualAccountNumber": "가상계좌번호",
+          "depositorName": "입금자명",
+          "phoneNumber": "휴대폰번호",
+          "giftCardNumber": "상품권번호",
+          "customerId": "고객ID",
+          "culturelandId": "컬처랜드ID",
+          "tmoneyCardNumber": "티머니 카드번호",
+          "issueNumber": "발행번호"
+        },
         "periods": {
           "1month": "1개월",
           "3months": "3개월",