filter-calendar

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

@@ -1,3 +1,4 @@
+import moment from 'moment';
 import { ChangeEvent, useState } from 'react';
 import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
@@ -9,8 +10,7 @@ import {
   BillingSearchType
 } from '../../model/types';
 import { FilterDateOptions } from '@/entities/common/model/types';
-import moment from 'moment';
-import NiceCalendar from '@/shared/ui/calendar';
+import { FilterCalendar } from '@/shared/ui/calendar/filter-calendar';
 
 export const BillingFilter = ({
   filterOn,
@@ -163,73 +163,13 @@ export const BillingFilter = ({
                 />
               </div>
             </div>
-
+            <FilterCalendar
+              startDate={ filterStartDate }
+              endDate={ filterEndDate }
+              setStartDate={ setFilterStartDate }
+              setEndDate={ setFilterEndDate }
+            ></FilterCalendar>
             <div className="opt-field">
-              <div className="opt-label">조회기간</div>
-              <div className="opt-controls col below h36">
-                <div className="chip-row">
-                  <span 
-                    className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Today)? 'active': ''}` }
-                    onClick={ () => setFilterDate(FilterDateOptions.Today) }
-                  >당일</span>
-                  <span 
-                    className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Week)? 'active': ''}` }
-                    onClick={ () => setFilterDate(FilterDateOptions.Week) }
-                  >일주일</span>
-                  <span 
-                    className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Month)? 'active': ''}` }
-                    onClick={ () => setFilterDate(FilterDateOptions.Month) }
-                  >1개월</span>
-                  <span 
-                    className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Input)? 'active': ''}` }
-                    onClick={ () => setFilterDate(FilterDateOptions.Input) }
-                  >직접입력</span>
-                </div>
-                <div className="range-row">
-                  <div className="input-wrapper date">
-                    <input
-                      className="date-input"
-                      type="text"
-                      placeholder="날짜 선택"
-                      value={ filterStartDate }
-                      readOnly={ true }
-                    />
-                    <button
-                      type="button"
-                      className="date-btn"
-                      onClick={ () => onClickToOpenCalendar() }
-                    >
-                      <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={ filterEndDate }
-                      readOnly={ true }
-                    />
-                    <button 
-                      type="button" 
-                      className="date-btn"
-                      onClick={ () => onClickToOpenCalendar() }
-                    >
-                      <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">
@@ -327,10 +267,6 @@ export const BillingFilter = ({
             >적용</button>
           </div>
         </div>
-        <NiceCalendar
-          calendarOpen={ calendarOpen }
-          setNewDate={ setNewDate }
-        ></NiceCalendar>
       </motion.div>
     </>
   );