minAmount max amount 타입 변경 및 ars

src/entities/additional-service/model/ars/types.ts

@@ -32,12 +32,12 @@ export interface ExtensionArsListParams {
   page: DefaultRequestPagination;
 };
 export interface ArsListContent {
-  tid: string;
+  tid?: string;
-  paymentDate: string;
+  paymentDate?: string;
-  paymentStatus: string;
+  paymentStatus?: string;
-  orderStatus: string;
+  orderStatus?: string;
-  arsPaymentMethod: string;
+  arsPaymentMethod?: string;
-  amount: number;
+  amount?: number;
 };
 export interface ExtensionArsListResponse extends DefaulResponsePagination {
   content: Array<ArsListContent>;

src/entities/additional-service/model/payout/types.ts

@@ -23,8 +23,8 @@ export interface ExtensionPayoutListParams {
   fromDate: string;
   toDate: string;
   disbursementStatus: PayoutDisbursementStatus;
-  minAmount?: number | string;
+  minAmount?: number;
-  maxAmount?: number | string;
+  maxAmount?: number;
   page?: DefaultRequestPagination;
 };
 export interface ExtensionPayoutListResponse extends DefaulResponsePagination{

src/entities/additional-service/model/types.ts

@@ -2,6 +2,7 @@ import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/c
 import { PayoutContent } from './payout/types';
 import { P } from 'node_modules/framer-motion/dist/types.d-Cjd591yU';
 import { FundAccountResultContentItem, FundAccountTransferContentItem } from './fund-account/types';
+import { ArsListContent } from './ars/types';
 
 // ========================================
 // 공통 Enums 및 타입들
@@ -134,14 +135,14 @@ export interface KeyInPaymentFilterProps extends FilterProps {
   startDate: string;
   endDate: string;
   transactionStatus: KeyInPaymentTransactionStatus;
-  minAmount?: number | string;
+  minAmount?: number;
-  maxAmount?: number | string;
+  maxAmount?: number;
   setMid: (mid: string) => void;
   setStartDate: (startDate: string) => void;
   setEndDate: (endDate: string) => void;
   setTransactionStatus: (transactionStatus: KeyInPaymentTransactionStatus) => void;
-  setMinAmount: (minAmount: string | number) => void;
+  setMinAmount: (minAmount?: number) => void;
-  setMaxAmount: (maxAmount: string | number) => void;
+  setMaxAmount: (maxAmount?: number) => void;
 }
 
 // ========================================
@@ -384,7 +385,8 @@ export interface ListItemProps extends
   KeyInPaymentListItem, AccountHolderSearchListItem,
   AccountHolderAuthListItem, LinkPaymentHistoryListItem,
   LinkPaymentWaitListItem,
-  PayoutContent, FundAccountTransferContentItem {
+  PayoutContent, FundAccountTransferContentItem,
+  ArsListContent {
   additionalServiceCategory?: AdditionalServiceCategory;
   mid?: string
 }
@@ -668,8 +670,8 @@ export interface ExtensionKeyinListParams extends ExtensionRequestParams {
   fromDate: string;
   toDate: string;
   paymentStatus: string;
-  minAmount?: number | string;
+  minAmount?: number;
-  maxAmount?: number | string;
+  maxAmount?: number;
   page?: DefaultRequestPagination;
 }
 
@@ -688,8 +690,8 @@ export interface ExtensionKeyinDownloadExcelParams extends ExtensionRequestParam
   fromDate?: string;
   toDate?: string;
   paymentStatus?: string;
-  minAmount?: number | string;
+  minAmount?: number;
-  maxAmount?: number | string;
+  maxAmount?: number;
 }
 
 export interface ExtensionKeyinDownloadExcelResponse {

src/entities/additional-service/ui/filter/payout-filter.tsx

@@ -28,15 +28,15 @@ export interface PayoutFilterProps {
   fromDate: string;
   toDate: string;
   disbursementStatus: PayoutDisbursementStatus;
-  minAmount?: number | string;
+  minAmount?: number;
-  maxAmount?: number | string;
+  maxAmount?: number;
   setMid: (mid: string) => void;
   setSearchCl: (searchCl: PayoutSearchCl) => void;
   setFromDate: (fromDate: string) => void;
   setToDate: (toDate: string) => void;
   setDisbursementStatus: (disbursementStatus: PayoutDisbursementStatus) => void;
-  setMinAmount: (minAmount: string | number) => void;
+  setMinAmount: (minAmount?: number) => void;
-  setMaxAmount: (maxAmount: string | number) => void;
+  setMaxAmount: (maxAmount?: number) => void;
 };
 
 export const PayoutFilter = ({
@@ -63,8 +63,8 @@ export const PayoutFilter = ({
   const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYY.MM.DD'));
   const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYY.MM.DD'));
   const [filterDisbursementStatus, setFilterDisbursementStatus] = useState<PayoutDisbursementStatus>(disbursementStatus);
-  const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
+  const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
-  const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
+  const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
   
   const onClickToClose = () => {
     setFilterOn(false);

src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx

@@ -34,8 +34,8 @@ export const KeyInPaymentFilter = ({
     const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
     const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
     const [filterTransactionStatus, setFilterTransactionStatus] = useState<KeyInPaymentTransactionStatus>(transactionStatus);
-    const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
+    const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
-    const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
+    const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
 
     const variants = {
         hidden: { x: '100%' },

src/entities/additional-service/ui/list-date-group.tsx

@@ -53,7 +53,10 @@ export const ListDateGroup = ({
             receiveAccountNo={ items[i]?.receiveAccountNo }
             receiveAccountName={ items[i]?.receiveAccountName }
             status={ items[i]?.status }
-            processDate={items[i]?.processDate }
+            processDate={ items[i]?.processDate }
+
+            orderStatus={ items[i]?.orderStatus }
+            arsPaymentMethod={ items[i]?.arsPaymentMethod }
           ></ListItem>
         )
       }  

src/entities/additional-service/ui/list-item.tsx

@@ -20,7 +20,9 @@ export const ListItem = ({
 
   transferAmount, receiveBankName, 
   receiveAccountNo, receiveAccountName,
-  status, processDate
+  status, processDate,
+
+  orderStatus, arsPaymentMethod
 }: ListItemProps) => {
   const { navigate } = useNavigate();
   const getItemClass = () => {
@@ -171,6 +173,15 @@ export const ListItem = ({
         }
       });
     }
+    else if (additionalServiceCategory === AdditionalServiceCategory.Ars){
+      navigate(PATHS.additionalService.payout.detail, {
+        state: {
+          additionalServiceCategory: additionalServiceCategory,
+          mid: mid,
+          tid: tid
+        }
+      });
+    }
     else {
       alert('additionalServiceCategory가 존재하지 않습니다.');
     }
@@ -196,6 +207,10 @@ export const ListItem = ({
     else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
       timeStr = moment(requestDate).format('mm:ss');
     }
+    else if (additionalServiceCategory === AdditionalServiceCategory.Ars){
+      let time = paymentDate?.substring(8, 12);
+      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
+    }
     else {
       return
     }
@@ -208,28 +223,31 @@ export const ListItem = ({
       str = `${tid}(${amount})`;
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
-      str = `${accountName}(${accountNo})`
+      str = `${accountName}(${accountNo})`;
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
-      str = `${accountNo}`
+      str = `${accountNo}`;
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory ||
       additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending
     ) {
       if (sendMethod === "SMS") {
-        str = `${"buyerName"}(${"휴대폰 번호"})`
+        str = `${"buyerName"}(${"휴대폰 번호"})`;
       } else {
-        str = `${"buyerName"}(${"이메일"})`
+        str = `${"buyerName"}(${"이메일"})`;
       }
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
       str = companyName;
     }
     else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer){
-      str = `${receiveAccountName}(${receiveAccountNo})`
+      str = `${receiveAccountName}(${receiveAccountNo})`;
     }
     else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountResult){
-      str = `${receiveAccountName}(${receiveAccountNo})`
+      str = `${receiveAccountName}(${receiveAccountNo})`;
+    }
+    else if(additionalServiceCategory === AdditionalServiceCategory.Ars){
+      str = '이름(' + tid + ')';
     }
 
     return str;
@@ -321,6 +339,19 @@ export const ListItem = ({
         </div>
       );
     }
+    else if(additionalServiceCategory === AdditionalServiceCategory.Ars){
+      rs.push(
+        <div className="transaction-details">
+          <span>{ getTime() }</span>
+          <span className="separator">|</span>
+          <span>{ paymentStatus }</span>
+          <span className="separator">|</span>
+          <span>{ orderStatus }</span>
+          <span className="separator">|</span>
+          <span>{ arsPaymentMethod }</span>
+        </div>
+      );
+    }
     return rs;
   };
 

src/entities/common/model/types.ts

@@ -44,10 +44,10 @@ export enum AltMsgKeys {
 };
 export interface FilterRangeAmountProps {
   title?: string;
-  minAmount?: number | string;
+  minAmount?: number;
-  maxAmount?: number | string;
+  maxAmount?: number;
-  setMinAmount: (minAmount: number | string) => void;
+  setMinAmount: (minAmount: number) => void;
-  setMaxAmount: (maxAmount: number | string) => void;
+  setMaxAmount: (maxAmount: number) => void;
 };
 export interface FilterButtonGroupsProps {
   title: string;

src/entities/transaction/model/types.ts

@@ -231,8 +231,8 @@ export interface AllTransactionListParams {
   toDate: string;
   stateCode: string;
   serviceCode: string;
-  minAmount?: number | string;
+  minAmount?: number;
-  maxAmount?: number | string;
+  maxAmount?: number;
   dateCl: string;
   goodsName: string;
   cardCode?: string;
@@ -260,8 +260,8 @@ export interface EscrowListParams {
   endDate?: string;
   deliveryStatus?: string;
   settlementStatus?: string;
-  minAmount?: number | string;
+  minAmount?: number;
-  maxAmount?: number | string;
+  maxAmount?: number;
   pagination?: DefaultRequestPagination;
 };
 
@@ -274,8 +274,8 @@ export interface BillingListParams {
   requestStatus?: string;
   processResult?: string;
   paymentMethod?: string;
-  minAmount?: number | string;
+  minAmount?: number;
-  maxAmount?: number | string;
+  maxAmount?: number;
   pagination?: DefaultRequestPagination
 };
 
@@ -510,8 +510,8 @@ export interface AllTransactionFilterProps extends FilterProps {
   toDate: string;
   stateCode: AllTransactionStateCode;
   serviceCode: AllTransactionServiceCode;
-  minAmount?: number | string;
+  minAmount?: number;
-  maxAmount?: number | string;
+  maxAmount?: number;
   cardCode?: string;
   bankCode?: string;
   searchCl?: AllTransactionSearchCl;
@@ -523,8 +523,8 @@ export interface AllTransactionFilterProps extends FilterProps {
   setToDate: (endDate: string) => void;
   setStateCode: (stateCode: AllTransactionStateCode) => void;
   setServiceCode: (serviceCode: AllTransactionServiceCode) => void;
-  setMinAmount: (minAmount: string | number) => void;
+  setMinAmount: (minAmount?: number) => void;
-  setMaxAmount: (maxAmount: string | number) => void;
+  setMaxAmount: (maxAmount?: number) => void;
   setCardCode: (cardCode: string | undefined) => void;
   setBankCode: (bankCode: string | undefined) => void;
   setSearchCl: (searchCl: AllTransactionSearchCl | undefined) => void;
@@ -553,8 +553,8 @@ export interface EscrowFilterProps extends FilterProps {
   endDate: string;
   deliveryStatus: EscrowDeliveryStatus;
   settlementStatus: EscrowSettlementStatus;
-  minAmount?: number | string;
+  minAmount?: number;
-  maxAmount?: number | string;
+  maxAmount?: number;
   setMid: (mid: string) => void;
   setSearchType: (searchType: EscrowSearchType) => void;
   setSearchKeyword: (searchKeyword: string) => void;
@@ -562,8 +562,8 @@ export interface EscrowFilterProps extends FilterProps {
   setEndDate: (endDate: string) => void;
   setDeliveryStatus: (deliveryStatus: EscrowDeliveryStatus) => void;
   setSettlementStatus: (settlementStatus: EscrowSettlementStatus) => void;
-  setMinAmount: (minAmount: string | number) => void;
+  setMinAmount: (minAmount?: number) => void;
-  setMaxAmount: (maxAmount: string | number) => void;
+  setMaxAmount: (maxAmount?: number) => void;
 };
 export interface BillingFilterProps extends FilterProps {
   mid: string;
@@ -574,8 +574,8 @@ export interface BillingFilterProps extends FilterProps {
   requestStatus: BillingRequestStatus;
   processResult: BillingProcessResult;
   paymentMethod: BillingPaymentMethod;
-  minAmount?: number | string;
+  minAmount?: number;
-  maxAmount?: number | string;
+  maxAmount?: number;
   setMid: (mid: string) => void;
   setSearchType: (searchType: BillingSearchType) => void;
   setSearchKeyword: (searchKeyword: string) => void;
@@ -584,8 +584,8 @@ export interface BillingFilterProps extends FilterProps {
   setRequestStatus: (requestStatus: BillingRequestStatus) => void;
   setProcessResult: (processResult: BillingProcessResult) => void;
   setPaymentMethod: (paymentMethod: BillingPaymentMethod) => void;
-  setMinAmount: (minAmount: string | number) => void;
+  setMinAmount: (minAmount?: number) => void;
-  setMaxAmount: (maxAmount: string | number) => void;
+  setMaxAmount: (maxAmount?: number) => void;
 };
 
 export interface CashReceiptPurposeUpdateParams {
@@ -620,7 +620,7 @@ export interface CashReceiptManualIssueResponse {
 export interface BillingChargeParams {
   billKey: string;
   productName: string;
-  productAmount: number | string;
+  productAmount: number;
   orderNumber: string;
   buyerName: string;
   paymentRequestDate: string;

src/entities/transaction/ui/cash-receipt-hand-written-issuance-step2.tsx

@@ -4,14 +4,14 @@ import { ProcessStep } from '../model/types';
 
 export interface CashReceiptHandWrittenIssuanceStep2Props {
   setProcessStep: (processStep: ProcessStep) => void;
-  supplyAmount: number | string;
+  supplyAmount: number;
-  vatAmount: number | string;
+  vatAmount: number;
-  taxFreeAmount: number | string;
+  taxFreeAmount: number;
-  serviceCharge: number | string;
+  serviceCharge: number;
-  setSupplyAmount: (supplyAmount: number | string) => void;
+  setSupplyAmount: (supplyAmount: number) => void;
-  setVatAmount: (vatAmount: number | string) => void;
+  setVatAmount: (vatAmount: number) => void;
-  setTaxFreeAmount: (taxFreeAmount: number | string) => void;
+  setTaxFreeAmount: (taxFreeAmount: number) => void;
-  setServiceCharge: (serviceCharge: number | string) => void;
+  setServiceCharge: (serviceCharge: number) => void;
 };
 export const CashReceiptHandWrittenIssuanceStep2 = ({
   setProcessStep,
@@ -63,7 +63,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
               type="text"
               placeholder=""
               value={ supplyAmount }
-              onChange={ (e: ChangeEvent<HTMLInputElement>) => setSupplyAmount(e.target.value) }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setSupplyAmount(parseInt(e.target.value)) }
             />
           </div>
         </div>
@@ -75,7 +75,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
               type="text"
               placeholder=""
               value={ vatAmount }
-              onChange={ (e: ChangeEvent<HTMLInputElement>) => setVatAmount(e.target.value) }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setVatAmount(parseInt(e.target.value)) }
             />
           </div>
         </div>
@@ -87,7 +87,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
               type="text"
               placeholder=""
               value={ taxFreeAmount }
-              onChange={ (e: ChangeEvent<HTMLInputElement>) => setTaxFreeAmount(e.target.value) }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setTaxFreeAmount(parseInt(e.target.value)) }
             />
           </div>
         </div>
@@ -99,7 +99,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
               type="text"
               placeholder=""
               value={ serviceCharge }
-              onChange={ (e: ChangeEvent<HTMLInputElement>) => setServiceCharge(e.target.value) }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setServiceCharge(parseInt(e.target.value)) }
             />
           </div>
         </div>

src/entities/transaction/ui/filter/all-transaction-filter.tsx

@@ -62,8 +62,8 @@ export const AllTransactionFilter = ({
   const [filterToDate, setFilterToDate] = useState<string>(toDate);
   const [filterStateCode, setFilterStateCode] = useState<AllTransactionStateCode>(stateCode);
   const [filterServiceCode, setFilterServiceCode] = useState<AllTransactionServiceCode>(serviceCode);
-  const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
+  const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
-  const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
+  const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
   
   const [filterCardCode, setFilterCardCode] = useState<string | undefined>(cardCode);
   const [filterBankCode, setFilterBankCode] = useState<string | undefined>(bankCode);

src/entities/transaction/ui/filter/billing-filter.tsx

@@ -59,8 +59,8 @@ export const BillingFilter = ({
   const [filterRequestStatus, setFilterRequestStatus] = useState<BillingRequestStatus>(requestStatus);
   const [filterProcessResult, setFilterProcessResult] = useState<BillingProcessResult>(processResult);
   const [filterPaymentMethod, setFilterPaymentMethod] = useState<BillingPaymentMethod>(paymentMethod);
-  const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
+  const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
-  const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
+  const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
   
   const onClickToClose = () => {
     setFilterOn(false);

src/entities/transaction/ui/filter/escrow-filter.tsx

@@ -54,8 +54,8 @@ export const EscrowFilter = ({
   const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
   const [filterDeliveryStatus, setFilterDeliveryStatus] = useState<EscrowDeliveryStatus>(deliveryStatus);
   const [filterSettlementStatus, setFilterSettlementStatus] = useState<EscrowSettlementStatus>(settlementStatus);
-  const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
+  const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
-  const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
+  const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
   
   const onClickToClose = () => {
     setFilterOn(false);

src/pages/additional-service/ars/list-page.tsx

@@ -28,8 +28,8 @@ export const ArsListPage = () => {
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
   const [mid, setMid] = useState<string>('nictest001m');
   const [moid, setMoid] = useState<string>('');
-  const [fromDate, setFromDate] = useState<string>('');
+  const [fromDate, setFromDate] = useState<string>(moment().format('YYYYMMDD'));
-  const [toDate, setToDate] = useState<string>('');
+  const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
   const [paymentStatus, setPaymentStatus] = useState<PaymentStatus>(PaymentStatus.ALL);
   const [orderStatus, setOrderStatus] = useState<OrderStatus>(OrderStatus.ALL);
   const [minAmount, setMinAmount] = useState<number>(0);
@@ -201,140 +201,14 @@ export const ArsListPage = () => {
             </section>
             
             <section className="transaction-list">
-              <div className="date-group">
+              { getArsList() }
-                <div className="date-header">25.06.08(일)</div>
-                <div className="transaction-item approved">
-                  <div className="transaction-status">
-                    <div className="status-dot blue"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">김*환(7000)</div>
-                    <div className="transaction-details">
-                      <span>20:00ㅣ미결제ㅣ결제대기ㅣSMS</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">5,254,000원</div>
-                </div>
-                <div className="transaction-item refund">
-                  <div className="transaction-status">
-                    <div className="status-dot gray"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">최*길(7000)</div>
-                    <div className="transaction-details">
-                      <span>20:00ㅣ결제완료ㅣ결제성공ㅣ호전환</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">23,845,000원</div>
-                </div>
-                <div className="transaction-item approved">
-                  <div className="transaction-status">
-                    <div className="status-dot blue"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">박*준(7000)</div>
-                    <div className="transaction-details">
-                      <span>20:00ㅣ결제완료ㅣ결제성공ㅣ호전환</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">534,000원</div>
-                </div>
-                <div className="transaction-item refund">
-                    <div className="transaction-status">
-                      <div className="status-dot gray"></div>
-                    </div>
-                    <div className="transaction-content">
-                      <div className="transaction-title">이*신(7000)</div>
-                      <div className="transaction-details">
-                        <span>20:00ㅣ미결제ㅣ취소완료ㅣSMS</span>
-                      </div>
-                    </div>
-                    <div className="transaction-amount">4,254,000원</div>
-                </div>
-                <div className="transaction-item approved">
-                  <div className="transaction-status">
-                    <div className="status-dot blue"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">김*환(7000)</div>
-                    <div className="transaction-details">
-                      <span>20:00ㅣ미결제ㅣ기간만료ㅣSMS</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">948,000원</div>
-                </div>
-              </div>
-
-              <div className="date-group">
-                <div className="date-header">25.06.08(일)</div>
-                <div className="transaction-item approved">
-                    <div className="transaction-status">
-                      <div className="status-dot blue"></div>
-                    </div>
-                    <div className="transaction-content">
-                        <div className="transaction-title">신용카드(카카오머니, 카카오)</div>
-                        <div className="transaction-details">
-                            <span>승인ㅣ20:00ㅣcroquis01m</span>
-                        </div>
-                    </div>
-                    <div className="transaction-amount">3,583,000원</div>
-                </div>
-                <div className="transaction-item refund">
-                  <div className="transaction-status">
-                    <div className="status-dot gray"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">신용카드(현대카드., 토스)</div>
-                    <div className="transaction-details">
-                      <span>환불ㅣ20:00ㅣcroquis01m</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">874,000원</div>
-                </div>
-                <div className="transaction-item approved">
-                  <div className="transaction-status">
-                    <div className="status-dot blue"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">계좌간편결제(국민은행, PAYU)</div>
-                    <div className="transaction-details">
-                      <span>승인ㅣ20:00ㅣcroquis01m</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">23,562,000원</div>
-                </div>
-                <div className="transaction-item refund">
-                  <div className="transaction-status">
-                    <div className="status-dot gray"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">휴대폰</div>
-                    <div className="transaction-details">
-                      <span>환불ㅣ20:00ㅣcroquis01m</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">783,000원</div>
-                </div>
-                <div className="transaction-item approved">
-                  <div className="transaction-status">
-                    <div className="status-dot blue"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">SSG 은행계좌(농협중앙회)</div>
-                    <div className="transaction-details">
-                      <span>승인ㅣ20:00ㅣcroquis01m</span>
-                    </div>
-                  </div>
-                  <div className="transaction-amount">3,923,000원</div>
-                </div>
-              </div>
-            </section>
               <div className="apply-row">
                 <button 
                   className="btn-50 btn-blue flex-1"
                   onClick={ () => onClickToNavigation() }
                 >결제 신청</button>
               </div>
+            </section>
           </div>
         </div>
       </main>

src/pages/additional-service/key-in-payment/key-in-payment-page.tsx

@@ -38,8 +38,8 @@ export const KeyInPaymentPage = () => {
   const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
   const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
   const [transactionStatus, setTransactionStatus] = useState<KeyInPaymentTransactionStatus>(KeyInPaymentTransactionStatus.ALL)
-  const [minAmount, setMinAmount] = useState<number | string>();
+  const [minAmount, setMinAmount] = useState<number>();
-  const [maxAmount, setMaxAmount] = useState<number | string>();
+  const [maxAmount, setMaxAmount] = useState<number>();
 
 
   useSetHeaderTitle('KEY-IN 결제');

src/pages/additional-service/payout/list-page.tsx

@@ -37,11 +37,11 @@ export const PayoutListPage = () => {
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
   const [mid, setMid] = useState<string>('nictest001m');
   const [searchCl, setSearchCl] = useState<PayoutSearchCl>(PayoutSearchCl.REQUEST_DATE);
-  const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
+  const [fromDate, setFromDate] = useState<string>(moment().format('YYYYMMDD'));
-  const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
+  const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
   const [disbursementStatus, setDisbursementStatus] = useState<PayoutDisbursementStatus>(PayoutDisbursementStatus.ALL);
-  const [minAmount, setMinAmount] = useState<number | string>();
+  const [minAmount, setMinAmount] = useState<number>();
-	const [maxAmount, setMaxAmount] = useState<number | string>();
+	const [maxAmount, setMaxAmount] = useState<number>();
 
   const { mutateAsync: extensionPayoutList } = useExtensionPayoutListMutation();
   const { mutateAsync: extensionPayoutExcel } = useExtensionPayoutExcelMutation();
@@ -224,7 +224,7 @@ export const PayoutListPage = () => {
                 sortBy={ sortBy }
                 onClickToSort={ onClickToSort }
               ></SortOptionsBox>
-              <div className="excrow">
+              <div className="excrow mr-0">
                 <div className="full-menu-keywords no-padding">
                 {
                   PayoutDisbursementStatusBtnGroup.map((value, index) => (

src/pages/transaction/all-transaction/list-page.tsx

@@ -40,8 +40,8 @@ export const AllTransactionListPage = () => {
   const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
   const [stateCode, setStateCode] = useState<AllTransactionStateCode>(AllTransactionStateCode.ALL);
   const [serviceCode, setServiceCode] = useState<AllTransactionServiceCode>(AllTransactionServiceCode.ALL);
-  const [minAmount, setMinAmount] = useState<number | string>();
+  const [minAmount, setMinAmount] = useState<number>();
-	const [maxAmount, setMaxAmount] = useState<number | string>();
+	const [maxAmount, setMaxAmount] = useState<number>();
   const [cardCode, setCardCode] = useState<string | undefined>();
   const [bankCode, setBankCode] = useState<string | undefined>();
   const [searchCl, setSearchCl] = useState<AllTransactionSearchCl | undefined>();

src/pages/transaction/billing/charge-page.tsx

@@ -16,7 +16,7 @@ export const BillingChargePage = () => {
 
   const [billKey, setBillKey] = useState<string>('BIKYvattest01m');
   const [productName, setProductName] = useState<string>('테스트상품123');
-  const [productAmount, setProductAmount] = useState<number | string>(1000000);
+  const [productAmount, setProductAmount] = useState<number>(1000000);
   const [orderNumber, setOrderNumber] = useState<string>('P146733723');
   const [buyerName, setBuyerName] = useState<string>('김테스트');
   const [paymentRequestDate, setPaymentRequestDate] = useState<string>('2025-06-08');
@@ -109,7 +109,7 @@ export const BillingChargePage = () => {
                     <input 
                       type="text" 
                       value={ productAmount }
-                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductAmount(e.target.value) }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductAmount(parseInt(e.target.value)) }
                     />
                   </div>
                 </div>

src/pages/transaction/billing/list-page.tsx

@@ -37,8 +37,8 @@ export const BillingListPage = () => {
 	const [requestStatus, setRequestStatus] = useState<BillingRequestStatus>(BillingRequestStatus.ALL);
 	const [processResult, setProcessResult] = useState<BillingProcessResult>(BillingProcessResult.ALL);
 	const [paymentMethod, setPaymentMethod] = useState<BillingPaymentMethod>(BillingPaymentMethod.ALL);
-	const [minAmount, setMinAmount] = useState<number | string>();
+	const [minAmount, setMinAmount] = useState<number>();
-	const [maxAmount, setMaxAmount] = useState<number | string>();
+	const [maxAmount, setMaxAmount] = useState<number>();
 
 	useSetHeaderTitle('빌링');
 	useSetHeaderType(HeaderType.LeftArrow);

src/pages/transaction/cash-receipt/hand-written-issuance-page.tsx

@@ -20,10 +20,10 @@ export const CashReceitHandWrittenIssuancePage = () => {
   const [issueNumber, setIssueNumber] = useState<string>('01012341234');
   const [email, setEmail] = useState<string>('test123@nicepay.com');
   const [phoneNumber, setPhoneNumber] = useState<string>('01012341234');
-  const [supplyAmount, setSupplyAmount] = useState<number | string>(9091);
+  const [supplyAmount, setSupplyAmount] = useState<number>(9091);
-  const [vatAmount, setVatAmount] = useState<number | string>(909);
+  const [vatAmount, setVatAmount] = useState<number>(909);
-  const [taxFreeAmount, setTaxFreeAmount] = useState<number | string>(0);
+  const [taxFreeAmount, setTaxFreeAmount] = useState<number>(0);
-  const [serviceCharge, setServiceCharge] = useState<number | string>(0);
+  const [serviceCharge, setServiceCharge] = useState<number>(0);
 
   useSetHeaderTitle('수기 발행');
   useSetHeaderType(HeaderType.RightClose);

src/pages/transaction/escrow/list-page.tsx

@@ -36,8 +36,8 @@ export const EscrowListPage = () => {
 	const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
 	const [deliveryStatus, setDeliveryStatus] = useState<EscrowDeliveryStatus>(EscrowDeliveryStatus.ALL);
 	const [settlementStatus, setSettlementStatus] = useState<EscrowSettlementStatus>(EscrowSettlementStatus.ALL);
-	const [minAmount, setMinAmount] = useState<number | string>();
+	const [minAmount, setMinAmount] = useState<number>();
-	const [maxAmount, setMaxAmount] = useState<number | string>();	
+	const [maxAmount, setMaxAmount] = useState<number>();	
 		
 	useSetHeaderTitle('에스크로');
 	useSetHeaderType(HeaderType.LeftArrow);

src/shared/ui/filter/range-amount.tsx

@@ -25,7 +25,7 @@ export const FilterRangeAmount = ({
               type="number"
               placeholder=""
               value={ minAmount }
-              onChange={ (e: ChangeEvent<HTMLInputElement>) => setMinAmount(e.target.value) }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setMinAmount(parseInt(e.target.value)) }
             />
           </div>
           <span> ~ </span>
@@ -34,7 +34,7 @@ export const FilterRangeAmount = ({
               type="number"
               placeholder=""
               value={ maxAmount }
-              onChange={ (e: ChangeEvent<HTMLInputElement>) => setMaxAmount(e.target.value) }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setMaxAmount(parseInt(e.target.value)) }
             />
           </div>
         </div>