에스크로 필터

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

@@ -1,4 +1,3 @@
-import moment from 'moment';
 import { useEffect } from 'react';
 import { useState } from 'react';
 import { motion } from 'framer-motion';

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

@@ -1,12 +1,52 @@
+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 { 
+  EscrowFilterProps,
+  EscrowSearchType,
+  EscrowDeliveryStatus,
+  EscrowSettlementStatus
+} from '../../model/types';
 
 export const EscrowFilter = ({
   filterOn,
-  setFilterOn
-}: FilterProps) => {
+  setFilterOn,
+  mid,
+  searchType,
+  searchKeyword,
+  startDate,
+  endDate,
+  deliveryStatus,
+  settlementStatus,
+  minAmount,
+  maxAmount,
+  setMid,
+  setSearchType,
+  setSearchKeyword,
+  setStartDate,
+  setEndDate,
+  setDeliveryStatus,
+  setSettlementStatus,
+  setMinAmount,
+  setMaxAmount
+}: EscrowFilterProps) => {
 
+  const [filterMid, setFilterMid] = useState<string>(mid);
+  const [filterSearchType, setFilterSearchType] = useState<EscrowSearchType>(searchType);
+  const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
+  const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
+  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 [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
+  
   const variants = {
     hidden: { x: '100%' },
     visible: { x: '0%' },
@@ -15,6 +55,52 @@ export const EscrowFilter = ({
   const onClickToClose = () => {
     setFilterOn(false);
   };
+  
+  const setNewDate = (newDate: any) => {
+    console.log(newDate)
+  };
+
+  const onClickToSetFilter = () => {
+    setMid(filterMid);
+    setSearchType(filterSearchType);
+    setSearchKeyword(filterSearchKeyword);
+    setStartDate(filterStartDate);
+    setEndDate(filterEndDate);
+    setDeliveryStatus(filterDeliveryStatus);
+    setSettlementStatus(filterSettlementStatus);
+    setMinAmount(filterMinAmount);
+    setMaxAmount(filterMaxAmount);
+    onClickToClose();
+  };
+  let MidOptions = [
+    {name: 'nictest001m', value: 'nictest001m'}
+  ];
+  let SearchTypeOptions = [
+    {name: '주문번호', value: EscrowSearchType.ORDER_NUMBER },
+    {name: 'TID', value: EscrowSearchType.TID }
+  ];
+
+  let deliveryStatusBtnGroup = [
+    {name: '전체', value: EscrowDeliveryStatus.ALL},
+    {name: '결제완료', value: EscrowDeliveryStatus.PAY_COMPLETE},
+    {name: '배송등록', value: EscrowDeliveryStatus.DELIVERY_INSERT},
+    {name: '배송완료', value: EscrowDeliveryStatus.DELIVERY_COMPLETE},
+    {name: '구매확인', value: EscrowDeliveryStatus.PURCHASE_CONFIRM},
+    {name: '구매거절', value: EscrowDeliveryStatus.PURCHASE_REJECT},
+    {name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING},
+    {name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE},
+  ];
+  let settlementStatusBtnGroup = [
+    {name: '전체', value: EscrowSettlementStatus.ALL},
+    {name: '신용카드', value: EscrowSettlementStatus.CREDIT_CARD},
+    {name: '가상계좌', value: EscrowSettlementStatus.REAL_ACCOUNT},
+    {name: '계좌이체', value: EscrowSettlementStatus.ACCOUNT_TRANSFER},
+  ];
+ 
+  useEffect(() => {
+    setFilterDeliveryStatus(deliveryStatus);
+  }, [deliveryStatus]);
+
   return (
     <>
       <motion.div 
@@ -46,139 +132,56 @@ export const EscrowFilter = ({
             </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='주문번호/ID'
+              selectValue={ filterSearchType }
+              selectSetter={ setSearchType }
+              selectOptions={ SearchTypeOptions }
+              inputValue={ searchKeyword }
+              inputSetter={ setSearchKeyword }
+            ></FilterSelectInput>
+            <FilterCalendar
+              title='조회기간'
+              startDate={ filterStartDate }
+              endDate={ filterEndDate }
+              setStartDate={ setFilterStartDate }
+              setEndDate={ setFilterEndDate }
+            ></FilterCalendar>
+            
+            <FilterButtonGroups
+              title='배송상태'
+              activeValue={ filterDeliveryStatus }
+              btnGroups={ deliveryStatusBtnGroup }
+              setter={ setFilterDeliveryStatus }
+            ></FilterButtonGroups>
+            <FilterButtonGroups
+              title='결제수단'
+              activeValue={ filterSettlementStatus }
+              btnGroups={ settlementStatusBtnGroup }
+              setter={ setFilterSettlementStatus }
+            ></FilterButtonGroups>
+            
+            <FilterRangeAmount
+              title='거래금액'
+              minAmount={ filterMinAmount }
+              maxAmount={ filterMaxAmount }
+              setMinAmount={ setFilterMinAmount }
+              setMaxAmount={ setFilterMaxAmount }
+            ></FilterRangeAmount>
+            
           </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>