..

src/shared/ui/calendar/filter-calendar.tsx

@@ -1,128 +0,0 @@
-import moment from 'moment';
-import { ChangeEvent, useState } from 'react';
-import { FilterDateOptions } from '@/entities/common/model/types';
-import { IMAGE_ROOT } from '@/shared/constants/common';
-import NiceCalendar from './nice-calendar';
-
-interface FilterCalendarProps {
-  startDate: string;
-  endDate: string;
-  setStartDate: (startDate: string) => void;
-  setEndDate: (endDate: string) => void;
-};
-
-export const FilterCalendar = ({
-  startDate,
-  endDate,
-  setStartDate,
-  setEndDate
-}: FilterCalendarProps) => {
-  const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
-  const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
-  const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
-  const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
-  const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
-  
-  const setFilterDate = (dateOptions: FilterDateOptions) => {
-    if(dateOptions === FilterDateOptions.Today){
-      setFilterStartDate(moment().format('YYYY-MM-DD'));
-      setFilterEndDate(moment().format('YYYY-MM-DD'));
-      setDateReadyOnly(true);
-      setFilterDateOptionsBtn(FilterDateOptions.Today);
-    } 
-    else if(dateOptions === FilterDateOptions.Week){
-      setFilterStartDate(moment().subtract(1, 'week').format('YYYY-MM-DD'));
-      setFilterEndDate(moment().format('YYYY-MM-DD'));
-      setDateReadyOnly(true);
-      setFilterDateOptionsBtn(FilterDateOptions.Week);
-    }
-    else if(dateOptions === FilterDateOptions.Month){
-      setFilterStartDate(moment().subtract(1, 'month').format('YYYY-MM-DD'));
-      setFilterEndDate(moment().format('YYYY-MM-DD'));
-      setDateReadyOnly(true);
-      setFilterDateOptionsBtn(FilterDateOptions.Month);
-    }
-    else if(dateOptions === FilterDateOptions.Input){
-      setDateReadyOnly(false);
-      setFilterDateOptionsBtn(FilterDateOptions.Input);
-    }
-  };
-
-  const onClickToOpenCalendar = () => {
-    if(!dateReadOnly){
-      setCalendarOpen(true);
-    }
-    else{
-      setCalendarOpen(false);
-    }
-  };
-
-  return (
-    <>
-      <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>
-    </>
-  );
-};