filter-calendar

2025-09-12 15:21:52 +09:00
parent 0224ed6c14
commit 2bbae7eed3
6 changed files with 424 additions and 115 deletions
--- a/src/shared/ui/calendar/filter-calendar.tsx
+++ b/src/shared/ui/calendar/filter-calendar.tsx
@@ -0,0 +1,128 @@
+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>
+    </>
+  );
+};
--- a/src/shared/ui/calendar/index.tsx
+++ b/src/shared/ui/calendar/index.tsx
@@ -1,43 +0,0 @@
-import moment from 'moment';
-import styled from "styled-components";
-import { useState } from 'react';
-import Calendar from 'react-calendar';
-import 'react-calendar/dist/Calendar.css';
-
-const NiceCalendar = ({
-  setNewDate
-}: any) => {
-  const [calendarDate, setCalendarDate] = useState<string>(moment().format('YYYY-MM-DD'));
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  
-  const onchangeToDate = (selectedDate: any) => {
-    setNewDate(selectedDate)
-    setIsOpen(false);
-  };
-
-  return (
-    <>
-      <CalendarContainer>
-        <CalendarWrapper isOpen={isOpen}>
-          <Calendar
-            onChange={ onchangeToDate }
-            value={ calendarDate }
-          ></Calendar>
-        </CalendarWrapper>
-      </CalendarContainer>
-    </>
-  );
-};
-
-const CalendarContainer = styled.div`
-  position: relative;
-`;
-const CalendarWrapper: any = styled.div`
-  z-index: 11;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  display: ${(props: any) => ((props.isOpen)? 'block': 'none')};
-`;
-
-export default NiceCalendar;
--- a/src/shared/ui/calendar/nice-calendar.tsx
+++ b/src/shared/ui/calendar/nice-calendar.tsx
@@ -0,0 +1,31 @@
+import moment from 'moment';
+import styled from "styled-components";
+import { useState } from 'react';
+import Calendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
+
+const NiceCalendar = ({
+  calendarOpen,
+  setNewDate
+}: any) => {
+  const [calendarDate, setCalendarDate] = useState<string>(moment().format('YYYY-MM-DD'));
+  const [isOpen, setIsOpen] = useState<boolean>(calendarOpen);
+  
+  const onchangeToDate = (selectedDate: any) => {
+    setNewDate(selectedDate)
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      
+        <Calendar
+          onChange={ onchangeToDate }
+          value={ calendarDate }
+        ></Calendar>
+        
+    </>
+  );
+};
+
+export default NiceCalendar;