From 42a3892e30077f1f5c9f07e74258dbcb65106d7c Mon Sep 17 00:00:00 2001 From: "focp212@naver.com" Date: Mon, 15 Sep 2025 11:12:30 +0900 Subject: [PATCH] =?UTF-8?q?=EC=BA=98=EB=A6=B0=EB=8D=94=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/entities/common/model/types.ts | 4 + .../transaction/ui/filter/billing-filter.tsx | 2 +- src/shared/ui/calendar/nice-calendar.tsx | 79 ++++++++++++++++--- .../{filter-calendar.tsx => calendar.tsx} | 28 ++++--- 4 files changed, 92 insertions(+), 21 deletions(-) rename src/shared/ui/filter/{filter-calendar.tsx => calendar.tsx} (83%) diff --git a/src/entities/common/model/types.ts b/src/entities/common/model/types.ts index 39d373d..783350b 100644 --- a/src/entities/common/model/types.ts +++ b/src/entities/common/model/types.ts @@ -14,6 +14,10 @@ export enum FilterDateOptions { Month = 'Month', Input = 'Input' }; +export enum CalendarType { + Start = 'Start', + End = 'End' +}; export interface DefaultRequestPagination { cursor: string; size: number; diff --git a/src/entities/transaction/ui/filter/billing-filter.tsx b/src/entities/transaction/ui/filter/billing-filter.tsx index 8d66e27..38f004a 100644 --- a/src/entities/transaction/ui/filter/billing-filter.tsx +++ b/src/entities/transaction/ui/filter/billing-filter.tsx @@ -5,7 +5,7 @@ import { motion } from 'framer-motion'; import { IMAGE_ROOT } from '@/shared/constants/common'; import { FilterSelect } from '@/shared/ui/filter/select'; import { FilterSelectInput } from '@/shared/ui/filter/select-input'; -import { FilterCalendar } from '@/shared/ui/filter/filter-calendar'; +import { FilterCalendar } from '@/shared/ui/filter/calendar'; import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; import { FilterRangeAmount } from '@/shared/ui/filter/range-amount'; import { diff --git a/src/shared/ui/calendar/nice-calendar.tsx b/src/shared/ui/calendar/nice-calendar.tsx index bd1e7a0..8bd0a04 100644 --- a/src/shared/ui/calendar/nice-calendar.tsx +++ b/src/shared/ui/calendar/nice-calendar.tsx @@ -1,40 +1,101 @@ -import moment from 'moment'; +import moment, { locale } from 'moment'; import styled from "styled-components"; import { useState } from 'react'; import Calendar from 'react-calendar'; import 'react-calendar/dist/Calendar.css'; import { useEffect } from 'react'; +import { CalendarType } from '@/entities/common/model/types'; interface NiceCalendarProps { calendarOpen: boolean; + setCalendarOpen: (calendarOpen: boolean) => void; + startDate: string; + endDate: string; + calendarType: CalendarType; setNewDate: (date: string) => void; }; const NiceCalendar = ({ calendarOpen, + setCalendarOpen, + startDate, + endDate, + calendarType, setNewDate }: NiceCalendarProps) => { - const [calendarDate, setCalendarDate] = useState(moment().format('YYYY-MM-DD')); - const [isOpen, setIsOpen] = useState(false); + const [valueDate, setValueDate] = useState(); + const [minDate, setMinDate] = useState(); + const [maxDate, setMaxDate] = useState(); const onchangeToDate = (selectedDate: any) => { setNewDate(moment(selectedDate).format('YYYY-MM-DD')); - setIsOpen(false); + setCalendarOpen(false); + }; + + const onClickToClose = () => { + setCalendarOpen(false); + }; + const setMinMaxValueDate = () => { + if(calendarType === CalendarType.Start){ + setMinDate(undefined); + setMaxDate(new Date(endDate)); + setValueDate(startDate); + } + else if(calendarType === CalendarType.End){ + setMinDate(new Date(startDate)); + setMaxDate(new Date()); + setValueDate(endDate); + } + }; + + const formatMonthYear = (locale: string | undefined, date: Date) => { + return date.toLocaleDateString('en', { + month: 'long', + year: 'numeric' + }); + }; + const formatYear = (locale: string | undefined, date: Date) => { + return date.toLocaleDateString('en', { + year: 'numeric' + }); + }; + const formmatMonth = (locale: string | undefined, date: Date) => { + return date.toLocaleDateString('en', { + month: 'short' + }); + }; + const formatDay = (locale: string | undefined, date: Date) => { + return date.toLocaleString('en', { + day: 'numeric' + }); + }; + const formatShortWeekday = (locale: string | undefined, date: Date) => { + return date.toLocaleString('en', { + weekday: 'short' + }); }; useEffect(() => { - console.log(calendarOpen) - setIsOpen(calendarOpen); + setMinMaxValueDate(); + }, [calendarOpen]) return ( <> - { (isOpen) && + { (calendarOpen) && <>
- + onClickToClose() }> diff --git a/src/shared/ui/filter/filter-calendar.tsx b/src/shared/ui/filter/calendar.tsx similarity index 83% rename from src/shared/ui/filter/filter-calendar.tsx rename to src/shared/ui/filter/calendar.tsx index 7e36c30..f6c44da 100644 --- a/src/shared/ui/filter/filter-calendar.tsx +++ b/src/shared/ui/filter/calendar.tsx @@ -1,6 +1,6 @@ import moment from 'moment'; import { ChangeEvent, useState } from 'react'; -import { FilterDateOptions } from '@/entities/common/model/types'; +import { CalendarType, FilterDateOptions } from '@/entities/common/model/types'; import { IMAGE_ROOT } from '@/shared/constants/common'; import NiceCalendar from '../calendar/nice-calendar'; import { useEffect } from 'react'; @@ -24,7 +24,7 @@ export const FilterCalendar = ({ const [dateReadOnly, setDateReadyOnly] = useState(false); const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState(FilterDateOptions.Input); const [calendarOpen, setCalendarOpen] = useState(false); - const [activceCalendar, setActiveCalendar] = useState(); + const [calendarType, setCalendarType] = useState(CalendarType.Start); const setFilterDate = (dateOptions: FilterDateOptions) => { if(dateOptions === FilterDateOptions.Today){ @@ -52,22 +52,22 @@ export const FilterCalendar = ({ }; - const onClickToOpenCalendar = (key: string) => { + const onClickToOpenCalendar = (calendarType: CalendarType) => { if(!dateReadOnly){ setCalendarOpen(true); - setActiveCalendar(key); + setCalendarType(calendarType); } else{ setCalendarOpen(false); - setActiveCalendar(''); + } }; const setNewDate = (date: string) => { - if(activceCalendar === 'start'){ + if(calendarType === CalendarType.Start){ setStartDate(date); } - else if(activceCalendar === 'end'){ + else if(calendarType === CalendarType.End){ setEndDate(date); } setCalendarOpen(false); @@ -107,12 +107,13 @@ export const FilterCalendar = ({ type="text" placeholder="날짜 선택" value={ startDate } - readOnly={ true } + onChange={ (e: ChangeEvent) => {} } + readOnly={ dateReadOnly } />