통합 거래내역 필터

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

@@ -1,20 +1,157 @@
+import { useEffect } from 'react';
+import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { FilterProps } from '../../model/types';
+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 { 
+  FilterMotionVariants,
+  FilterMotionDuration,
+  FilterMotionStyle,
+  AllTransactionMoidTidOptionsGroup,
+  AllTransactionStateCodeBtnGroup,
+  AllTransactionServiceCodeOptionsGroup,
+  AllTransactionCardBankCodeOptionsGroup,
+  
+} from '@/entities/transaction/model/contant';
+import { 
+  AllTransactionFilterProps,
+  AllTransactionSearchCl,
+  AllTransactionStateCode,
+  AllTransactionServiceCode,
+  AllTransactionMoidTid
+} from '../../model/types';
 
 export const AllTransactionFilter = ({
   filterOn,
-  setFilterOn
-}: FilterProps) => {
+  setFilterOn,
+  mid,
+  fromDate,
+  toDate,
+  stateCode,
+  serviceCode,
+  minAmount,
+  maxAmount,
+  cardCode,
+  bankCode,
+  searchCl,
+  searchValue,
+  setMid,
+  setMoid,
+  setTid,
+  setFromDate,
+  setToDate,
+  setStateCode,
+  setServiceCode,
+  setMinAmount,
+  setMaxAmount,
+  setCardCode,
+  setBankCode,
+  setSearchCl,
+  setSearchValue,
+}: AllTransactionFilterProps) => {
 
-  const variants = {
-    hidden: { x: '100%' },
-    visible: { x: '0%' },
-  };
+  const [filterMid, setFilterMid] = useState<string>(mid);
+  const [filterMoidTidType, setFilterMoidTidType] = useState<AllTransactionMoidTid>(AllTransactionMoidTid.MOID);
+  const [filterMoidTidValue, setFilterMoidTidValue] = useState<string>('');
+  const [filterFromDate, setFilterFromDate] = useState<string>(fromDate);
+  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 [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
+  
+  const [filterCardCode, setFilterCardCode] = useState<string | undefined>(cardCode);
+  const [filterBankCode, setFilterBankCode] = useState<string | undefined>(bankCode);
 
+  const [filterCardBankCode, setFilterCardBankCode] = useState<string>('');
+
+  const [filterSearchCl, setFilterSearchCl] = useState<AllTransactionSearchCl | undefined>(searchCl);
+  const [filterSearchValue, setFilterSearchValue] = useState<string | undefined>(searchValue);
+
+  const [searchClOptionsGroup, setSearchClOptionsGroup] = useState<Array<Record<string, string>>>([]);
   const onClickToClose = () => {
     setFilterOn(false);
   };
+  
+  const setNewDate = (newDate: any) => {
+    console.log(newDate)
+  };
+
+  const onClickToSetFilter = () => {
+    setMid(filterMid);
+    if(filterMoidTidType === AllTransactionMoidTid.MOID){
+      setMoid(filterMoidTidValue);
+      setTid('');
+    }
+    else if(filterMoidTidType === AllTransactionMoidTid.TID){
+      setMoid('');
+      setTid(filterMoidTidValue);
+    }
+    setFromDate(filterFromDate);
+    setToDate(filterToDate);
+    setStateCode(filterStateCode);
+
+    setServiceCode(filterServiceCode);
+    setMinAmount(filterMinAmount);
+    setMaxAmount(filterMaxAmount);
+    setBankCode(filterBankCode);
+    setCardCode(filterCardCode);
+    setSearchCl(filterSearchCl);
+    setSearchValue(filterSearchValue);
+    onClickToClose();
+  };
+  let MidOptions = [
+    {name: 'nictest001m', value: 'nictest001m'}
+  ];
+
+  let setSearchClOptions = (value: AllTransactionServiceCode) => {
+    let options = [];
+    setFilterServiceCode(value);
+    if(value === AllTransactionServiceCode.ALL){
+
+    }
+    else if(value === AllTransactionServiceCode.CREDIT_CARD){
+      options.push({name: '카드번호', value: AllTransactionSearchCl.CARD_NO});
+      options.push({name: '승인번호', value: AllTransactionSearchCl.CARD_APPROVAL_NO});
+    }
+    else if(value === AllTransactionServiceCode.VIRTUAL_ACCOUNT){
+      options.push({name: '가상계좌번호', value: AllTransactionSearchCl.VACCT_NO});
+      options.push({name: '입금자명', value: AllTransactionSearchCl.VACCT_DEPOSIT_NM});
+    }
+    else if(value === AllTransactionServiceCode.ACCOUNT_TRANSFER){
+      options.push({name: '구매자명', value: AllTransactionSearchCl.BANK_BUYER_NM});
+    }
+    else if(value === AllTransactionServiceCode.ACCOUNT_SIMPLE_TRANSFER){
+      
+    }
+    else if(value === AllTransactionServiceCode.MOBILE_PAYMENT){
+      options.push({name: '휴대폰번호', value: AllTransactionSearchCl.TEL_NO});
+    }
+    else if(value === AllTransactionServiceCode.SSGMONEY){
+      options.push({name: '상품권번호', value: AllTransactionSearchCl.SSGMONEY_GIFT_NO}); 
+    }
+    else if(value === AllTransactionServiceCode.SSGBANK){
+      options.push({name: '승인번호', value: AllTransactionSearchCl.SSGBANK_APPROVAL_NO}); 
+    }
+    else if(value === AllTransactionServiceCode.CULT){
+      options.push({name: '컬처랜드ID', value: AllTransactionSearchCl.SSGBANK_APPROVAL_NO}); 
+    }
+    else if(value === AllTransactionServiceCode.TMONEY){
+      options.push({name: '티머니번호', value: AllTransactionSearchCl.TMONEY_CARD_NO}); 
+    }
+    setSearchClOptionsGroup(options);
+  };
+
+  /*
+  useEffect(() => {
+    setFilterDeliveryStatus(deliveryStatus);
+  }, [deliveryStatus]);
+  */
+
   return (
     <>
       <motion.div 
@@ -22,12 +159,9 @@ export const AllTransactionFilter = ({
         className="full-menu-modal" 
         initial="hidden"
         animate={ (filterOn)? 'visible': 'hidden' }
-        variants={ variants }
-        transition={{ duration: 0.3 }}
-        style={{
-          width: '100%',
-          height: '100%',
-        }}
+        variants={ FilterMotionVariants }
+        transition={ FilterMotionDuration }
+        style={ FilterMotionStyle }
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
@@ -46,139 +180,72 @@ export const AllTransactionFilter = ({
             </div>
           </div>
       
-          <div className="option-list pb-120">
-            <div className="opt-field">
-              <div className="opt-label">가맹점</div>
-              <div className="opt-controls">
-                <select className="flex-1">
-                  <option>nictest001m</option>
-                </select>
-              </div>
-            </div>
-
-            <div className="opt-field">
-              <div className="opt-label">주문번호/ID</div>
-              <div className="opt-controls">
-                <select className="w-110">
-                  <option>주문번호</option>
-                  <option>ID</option>
-                </select>
-                <input
-                  className="flex-1"
-                  type="text"
-                  placeholder=""
-                />
-              </div>
-            </div>
-
-            <div className="opt-field">
-              <div className="opt-label">조회기간</div>
-              <div className="opt-controls col below h36">
-                <div className="chip-row">
-                  <span className="keyword-tag active">당일</span>
-                  <span className="keyword-tag">일주일</span>
-                  <span className="keyword-tag">1개월</span>
-                  <span className="keyword-tag">직접입력</span>
-                </div>
-                <div className="range-row">
-                  <div className="input-wrapper date">
-                    <input
-                      className="date-input"
-                      type="text"
-                      placeholder="날짜 선택"
-                      value="2025.06.08"
-                      readOnly={ true }
-                    />
-                    <button
-                      type="button"
-                      className="date-btn"
-                    >
-                      <img
-                        src={ IMAGE_ROOT + '/ico_date.svg' }
-                        alt="날짜 선택"
-                      />
-                    </button>
-                  </div>
-                  <span className="beetween">~</span>
-                  <div className="input-wrapper date">
-                    <input
-                      className="date-input"
-                      type="text"
-                      placeholder="날짜 선택"
-                      value="2025.06.08"
-                      readOnly={ true }
-                    />
-                    <button 
-                      type="button" 
-                      className="date-btn"
-                    >
-                      <img
-                        src={ IMAGE_ROOT + '/ico_date.svg' }
-                        alt="날짜 선택"
-                      />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-           <div className="opt-field">
-              <div className="opt-label">요청상태</div>
-              <div className="opt-controls col below h36">
-                <div className="chip-row">
-                  <span className="keyword-tag active">전체</span>
-                  <span className="keyword-tag">진행중</span>
-                  <span className="keyword-tag">성공</span>
-                  <span className="keyword-tag">요청취소</span>
-                </div>
-              </div>
-            </div>
-
-            <div className="opt-field">
-              <div className="opt-label">저리결과</div>
-              <div className="opt-controls col below h36">
-                <div className="chip-row">
-                  <span className="keyword-tag active">전체</span>
-                  <span className="keyword-tag">성공</span>
-                  <span className="keyword-tag">실패</span>
-                  <span 
-                    className="keyword-tag" 
-                    style={{ visibility: 'hidden' }}
-                  ></span>
-                </div>
-              </div>
-            </div>
-
-            <div className="opt-field">
-              <div className="opt-label">결제수단</div>
-              <div className="opt-controls">
-                <select className="flex-1">
-                  <option>전체</option>
-                </select>
-              </div>
-            </div>
-
-            <div className="opt-field">
-              <div className="opt-label">거래금액</div>
-              <div className="opt-controls">
-                <div className="input-wrapper ">
-                  <input
-                    type="text"
-                    placeholder=""
-                  />
-                </div>
-                <span> ~ </span>
-                <div className="input-wrapper date">
-                  <input
-                    type="text"
-                    placeholder=""
-                    />
-                </div>
-              </div>
-            </div>
+          <div className="option-list pt-16">
+            <FilterSelect
+              title='가맹점'
+              selectValue={ filterMid }
+              selectSetter={ setMid }
+              selectOptions={ MidOptions }
+            ></FilterSelect>
+            <FilterSelectInput
+              title='주문번호/TID'
+              selectValue={ filterMoidTidType }
+              selectSetter={ setFilterMoidTidType }
+              selectOptions={ AllTransactionMoidTidOptionsGroup }
+              inputValue={ filterMoidTidValue }
+              inputSetter={ setFilterMoidTidValue }
+            ></FilterSelectInput>
+            <FilterCalendar
+              title='조회기간'
+              startDate={ filterFromDate }
+              endDate={ filterToDate }
+              setStartDate={ setFilterFromDate }
+              setEndDate={ setFilterToDate }
+            ></FilterCalendar>
+            
+            <FilterButtonGroups
+              title='거래상태'
+              activeValue={ filterStateCode }
+              btnGroups={ AllTransactionStateCodeBtnGroup }
+              setter={ setFilterStateCode }
+            ></FilterButtonGroups>
+            <FilterSelect
+              title='결제수단'
+              selectValue={ filterServiceCode }
+              selectSetter={ setSearchClOptions }
+              selectOptions={ AllTransactionServiceCodeOptionsGroup }
+            ></FilterSelect>
+            
+            <FilterRangeAmount
+              title='거래금액'
+              minAmount={ filterMinAmount }
+              maxAmount={ filterMaxAmount }
+              setMinAmount={ setFilterMinAmount }
+              setMaxAmount={ setFilterMaxAmount }
+            ></FilterRangeAmount>
+            {/*
+            <FilterSelect
+              title='카드사/은행'
+              selectValue={}
+              selectSetter={}
+              selectOptions={}
+            ></FilterSelect>
+            */}
+            <FilterSelectInput
+              title='상세조회'
+              selectValue={ filterSearchCl }
+              selectSetter={ setFilterSearchCl }
+              selectOptions={ searchClOptionsGroup }
+              inputValue={ filterSearchValue }
+              inputSetter={ setFilterSearchValue }
+            ></FilterSelectInput>
+            
           </div>
           <div className="apply-row">
-            <button className="btn-50 btn-blue flex-1">적용</button>
+            <button 
+              className="btn-50 btn-blue flex-1"
+              onClick={ () => onClickToSetFilter() }
+            >적용</button>
           </div>
         </div>
       </motion.div>

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

@@ -8,6 +8,9 @@ import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
 import { 
+  FilterMotionDuration,
+  FilterMotionVariants,
+  FilterMotionStyle,
   BillingSearchTypeOptionsGroup,
   BillingRequestStatusBtnGroup, 
   BillingProcessResultBtnGroup,
@@ -57,11 +60,6 @@ export const BillingFilter = ({
   const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
   const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
   
-  const variants = {
-    hidden: { x: '100%' },
-    visible: { x: '0%' },
-  };
-
   const onClickToClose = () => {
     setFilterOn(false);
   };
@@ -99,12 +97,9 @@ export const BillingFilter = ({
         className="full-menu-modal" 
         initial="hidden"
         animate={ (filterOn)? 'visible': 'hidden' }
-        variants={ variants }
-        transition={{ duration: 0.3 }}
-        style={{
-          width: '100%',
-          height: '100%',
-        }}
+        variants={ FilterMotionVariants }
+        transition={ FilterMotionDuration }
+        style={ FilterMotionStyle }
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
@@ -131,7 +126,7 @@ export const BillingFilter = ({
               selectOptions={ MidOptions }
             ></FilterSelect>
             <FilterSelectInput
-              title='주문번호/ID'
+              title='주문번호/TID'
               selectValue={ filterSearchType }
               selectSetter={ setFilterSearchType }
               selectOptions={ BillingSearchTypeOptionsGroup }

src/entities/transaction/ui/filter/cash-receipt-filter.tsx

@@ -7,6 +7,9 @@ import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import {
+  FilterMotionVariants,
+  FilterMotionDuration,
+  FilterMotionStyle,
   CashReceiptPurposeTypeBtnGroup,
   CashReceiptIssueStatusBtnGroup,
   CashReceiptProcessResultBtnGroup
@@ -42,10 +45,12 @@ export const CashReceiptFilter = ({
   const [filterIssueStatus, setFilterIssueStatus] = useState<CashReceiptIssueStatus>(issueStatus);
   const [filterProcessResult, setFilterProcessResult] = useState<CashReceiptProcessResult>(processResult);
 
-  const variants = {
-    hidden: { x: '100%' },
-    visible: { x: '0%' },
-  };
+  const [filterIssueType, setFilterIssueType] = useState<string>('');
+  const [filterIssueNumber, setFilterIssueNumber] = useState<string>('');
+  const issueTypeOptionsGroup = [
+    {name: '승인번호', value: 'issue'},
+    {name: '발행번호', value: 'issue2'},
+  ];
 
   const onClickToClose = () => {
     setFilterOn(false);
@@ -79,12 +84,9 @@ export const CashReceiptFilter = ({
         className="full-menu-modal" 
         initial="hidden"
         animate={ (filterOn)? 'visible': 'hidden' }
-        variants={ variants }
-        transition={{ duration: 0.3 }}
-        style={{
-          width: '100%',
-          height: '100%',
-        }}
+        variants={ FilterMotionVariants }
+        transition={ FilterMotionDuration }
+        style={ FilterMotionStyle }
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
@@ -136,7 +138,14 @@ export const CashReceiptFilter = ({
               btnGroups={ CashReceiptProcessResultBtnGroup }
               setter={ setFilterProcessResult }
             ></FilterButtonGroups>
-            
+            <FilterSelectInput
+              title='승인번호/발행번호'
+              selectValue={ filterIssueType }
+              selectSetter={ setFilterIssueType }
+              selectOptions={ issueTypeOptionsGroup }
+              inputValue={ filterIssueNumber }
+              inputSetter={ setFilterIssueNumber }
+            ></FilterSelectInput>
           </div>
           <div className="apply-row">
             <button 

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

@@ -8,8 +8,12 @@ import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
 import { 
+  FilterMotionVariants,
+  FilterMotionDuration,
+  FilterMotionStyle,
   EscrowDeliveryStatusBtnGroup,
-  EscrowSettlementStatusBtnGroup
+  EscrowSettlementStatusBtnGroup,
+  EscrowSearchTypeOptionsGroup
 } from '@/entities/transaction/model/contant';
 import { 
   EscrowFilterProps,
@@ -51,11 +55,6 @@ export const EscrowFilter = ({
   const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
   const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
   
-  const variants = {
-    hidden: { x: '100%' },
-    visible: { x: '0%' },
-  };
-
   const onClickToClose = () => {
     setFilterOn(false);
   };
@@ -79,11 +78,7 @@ export const EscrowFilter = ({
   let MidOptions = [
     {name: 'nictest001m', value: 'nictest001m'}
   ];
-  let SearchTypeOptions = [
-    {name: '주문번호', value: EscrowSearchType.ORDER_NUMBER },
-    {name: 'TID', value: EscrowSearchType.TID }
-  ];
-
+  
   useEffect(() => {
     setFilterDeliveryStatus(deliveryStatus);
   }, [deliveryStatus]);
@@ -95,12 +90,9 @@ export const EscrowFilter = ({
         className="full-menu-modal" 
         initial="hidden"
         animate={ (filterOn)? 'visible': 'hidden' }
-        variants={ variants }
-        transition={{ duration: 0.3 }}
-        style={{
-          width: '100%',
-          height: '100%',
-        }}
+        variants={ FilterMotionVariants }
+        transition={ FilterMotionDuration }
+        style={ FilterMotionStyle }
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
@@ -127,10 +119,10 @@ export const EscrowFilter = ({
               selectOptions={ MidOptions }
             ></FilterSelect>
             <FilterSelectInput
-              title='주문번호/ID'
+              title='주문번호/TID'
               selectValue={ filterSearchType }
               selectSetter={ setSearchType }
-              selectOptions={ SearchTypeOptions }
+              selectOptions={ EscrowSearchTypeOptionsGroup }
               inputValue={ searchKeyword }
               inputSetter={ setSearchKeyword }
             ></FilterSelectInput>