달력 관련 수정

This commit is contained in:
focp212@naver.com
2025-11-07 12:36:58 +09:00
parent 3b4da4f9d4
commit 1fcbc35aab
9 changed files with 40 additions and 21 deletions

View File

@@ -35,7 +35,7 @@ export const ListWrap = () => {
const [listItems, setListItems] = useState<Array<VatReturnListContent>>([]); const [listItems, setListItems] = useState<Array<VatReturnListContent>>([]);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM); const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [mid, setMid] = useState<string>(userMid); const [mid, setMid] = useState<string>(userMid);
const [startMonth, setStartMonth] = useState<string>(moment().subtract(1, 'month').format('YYYYMM')); const [startMonth, setStartMonth] = useState<string>(moment().format('YYYYMM'));
const [endMonth, setEndMonth] = useState<string>(moment().format('YYYYMM')); const [endMonth, setEndMonth] = useState<string>(moment().format('YYYYMM'));
const [receiptType, setReceiptType] = useState<VatReturnReceiptType>(VatReturnReceiptType.ALL); const [receiptType, setReceiptType] = useState<VatReturnReceiptType>(VatReturnReceiptType.ALL);
const [targetType, setTargetType] = useState<VatReturnTargetType>(VatReturnTargetType.ALL); const [targetType, setTargetType] = useState<VatReturnTargetType>(VatReturnTargetType.ALL);

View File

@@ -56,7 +56,7 @@ export const AllTransactionListPage = () => {
const [tid, setTid] = useState<string>(''); const [tid, setTid] = useState<string>('');
const [dateCl, setDateCl] = useState<string>(''); const [dateCl, setDateCl] = useState<string>('');
const [goodsName, setGoodsName] = useState<string>(''); const [goodsName, setGoodsName] = useState<string>('');
const [fromDate, setFromDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD')); const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
const [toDate, setToDate] = useState(moment().format('YYYYMMDD')); const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
const [statusCode, setStatusCode] = useState<string>(''); const [statusCode, setStatusCode] = useState<string>('');
const [serviceCode, setServiceCode] = useState<string>('01'); const [serviceCode, setServiceCode] = useState<string>('01');

View File

@@ -51,8 +51,7 @@ export const BillingListPage = () => {
const [mid, setMid] = useState<string>(userMid); const [mid, setMid] = useState<string>(userMid);
const [searchType, setSearchType] = useState<BillingSearchType>(BillingSearchType.ALL); const [searchType, setSearchType] = useState<BillingSearchType>(BillingSearchType.ALL);
const [searchKeyword, setSearchKeyword] = useState<string>(''); const [searchKeyword, setSearchKeyword] = useState<string>('');
const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD')); const [startDate, setStartDate] = useState(moment().format('YYYYMMDD'));
//const [startDate, setStartDate] = useState(moment().format('YYYYMMDD'));
const [endDate, setEndDate] = useState(moment().format('YYYYMMDD')); const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
const [requestStatus, setRequestStatus] = useState<BillingRequestStatus>(BillingRequestStatus.ALL); const [requestStatus, setRequestStatus] = useState<BillingRequestStatus>(BillingRequestStatus.ALL);
const [processResult, setProcessResult] = useState<BillingProcessResult>(BillingProcessResult.ALL); const [processResult, setProcessResult] = useState<BillingProcessResult>(BillingProcessResult.ALL);

View File

@@ -52,7 +52,7 @@ export const CashReceiptListPage = () => {
const [filterOn, setFilterOn] = useState<boolean>(false); const [filterOn, setFilterOn] = useState<boolean>(false);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM); const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [mid, setMid] = useState<string>(userMid); const [mid, setMid] = useState<string>(userMid);
const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD')); const [startDate, setStartDate] = useState(moment().format('YYYYMMDD'));
const [endDate, setEndDate] = useState(moment().format('YYYYMMDD')); const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
const [purposeType, setPurposeType] = useState<CashReceiptPurposeType>(CashReceiptPurposeType.ALL); const [purposeType, setPurposeType] = useState<CashReceiptPurposeType>(CashReceiptPurposeType.ALL);
const [transactionType, setTransactionType] = useState<CashReceiptTransactionType>(CashReceiptTransactionType.ALL); const [transactionType, setTransactionType] = useState<CashReceiptTransactionType>(CashReceiptTransactionType.ALL);

View File

@@ -51,8 +51,7 @@ export const EscrowListPage = () => {
const [mid, setMid] = useState<string>(userMid); const [mid, setMid] = useState<string>(userMid);
const [searchType, setSearchType] = useState<EscrowSearchType>(EscrowSearchType.ALL); const [searchType, setSearchType] = useState<EscrowSearchType>(EscrowSearchType.ALL);
const [searchKeyword, setSearchKeyword] = useState<string>(''); const [searchKeyword, setSearchKeyword] = useState<string>('');
const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD')); const [startDate, setStartDate] = useState(moment().format('YYYYMMDD'));
// const [startDate, setStartDate] = useState(moment().format('YYYYMMDD'));
const [endDate, setEndDate] = useState(moment().format('YYYYMMDD')); const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
const [deliveryStatus, setDeliveryStatus] = useState<EscrowDeliveryStatus>(EscrowDeliveryStatus.ALL); const [deliveryStatus, setDeliveryStatus] = useState<EscrowDeliveryStatus>(EscrowDeliveryStatus.ALL);
const [settlementStatus, setSettlementStatus] = useState<EscrowSettlementStatus>(EscrowSettlementStatus.ALL); const [settlementStatus, setSettlementStatus] = useState<EscrowSettlementStatus>(EscrowSettlementStatus.ALL);

View File

@@ -16,6 +16,8 @@ interface NiceCalendarProps {
singleMonth?: string; singleMonth?: string;
calendarType: CalendarType; calendarType: CalendarType;
setNewMonth: (month: string) => void; setNewMonth: (month: string) => void;
searchPeriod?: number;
periodType?: 'year' | 'month';
}; };
const NiceCalendarMonth = ({ const NiceCalendarMonth = ({
@@ -25,7 +27,9 @@ const NiceCalendarMonth = ({
endMonth, endMonth,
singleMonth, singleMonth,
calendarType, calendarType,
setNewMonth setNewMonth,
searchPeriod,
periodType
}: NiceCalendarProps) => { }: NiceCalendarProps) => {
const { i18n } = useTranslation(); const { i18n } = useTranslation();
const currentLocale = i18n.language || 'en'; const currentLocale = i18n.language || 'en';
@@ -39,11 +43,21 @@ const NiceCalendarMonth = ({
}; };
const onClickToClose = () => { const onClickToClose = () => {
// setCalendarOpen(false); setCalendarOpen(false);
}; };
const setMinMaxValueDate = () => { const setMinMaxValueDate = () => {
if(calendarType === CalendarType.Start){ if(calendarType === CalendarType.Start){
setMinMonth(undefined); if(!searchPeriod){
searchPeriod = 3;
}
if(!periodType){
periodType = 'year';
}
if(periodType && searchPeriod && searchPeriod > 0){
const endDate = moment(endMonth, ['YYYY.MM', 'YYYYMM'], true);
setMinMonth(moment(endDate, 'YYYY.MM.DD').subtract(searchPeriod, periodType).toDate());
}
// setMinMonth(undefined);
if(!!endMonth){ if(!!endMonth){
// Parse endMonth with moment, handling both YYYY.MM and YYYYMM formats // Parse endMonth with moment, handling both YYYY.MM and YYYYMM formats
const endDate = moment(endMonth, ['YYYY.MM', 'YYYYMM'], true); const endDate = moment(endMonth, ['YYYY.MM', 'YYYYMM'], true);
@@ -131,7 +145,7 @@ const NiceCalendarMonth = ({
{ (calendarOpen) && { (calendarOpen) &&
<> <>
<div className="bg-dim"></div> <div className="bg-dim"></div>
<CalendarWrapper onClick={ () => onClickToClose() }> <CalendarWrapper className="calendar-container calendar-style">
<FullMenuClose <FullMenuClose
addClass='filter-calendar-close' addClass='filter-calendar-close'
onClickToCallback={ onClickToClose } onClickToCallback={ onClickToClose }
@@ -159,11 +173,6 @@ const NiceCalendarMonth = ({
}; };
const CalendarWrapper = styled.div` const CalendarWrapper = styled.div`
z-index: 1100; z-index: 1100;
position: absolute;
width: 100%;
height: 100%;
top: 100px;
left: 0;
`; `;
export default NiceCalendarMonth; export default NiceCalendarMonth;

View File

@@ -18,6 +18,8 @@ interface NiceCalendarProps {
setNewDate: (date: string) => void; setNewDate: (date: string) => void;
minDate?: Date; minDate?: Date;
maxDate?: Date; maxDate?: Date;
searchPeriod?: number;
periodType?: 'year' | 'month' | 'day';
}; };
interface TileClassNameProps { interface TileClassNameProps {
@@ -35,7 +37,9 @@ const NiceCalendar = ({
calendarType, calendarType,
setNewDate, setNewDate,
minDate: propMinDate, minDate: propMinDate,
maxDate: propMaxDate maxDate: propMaxDate,
searchPeriod,
periodType
}: NiceCalendarProps) => { }: NiceCalendarProps) => {
const { i18n, t } = useTranslation(); const { i18n, t } = useTranslation();
const currentLocale = i18n.language || 'en'; const currentLocale = i18n.language || 'en';
@@ -53,8 +57,16 @@ const NiceCalendar = ({
}; };
const setMinMaxValueDate = () => { const setMinMaxValueDate = () => {
if(calendarType === CalendarType.Start){ if(calendarType === CalendarType.Start){
//setMinDate(propMinDate || moment(endDate, 'YYYY.MM.DD').subtract(1, 'month').toDate()); if(!searchPeriod){
setMinDate(propMinDate || undefined); searchPeriod = 3;
}
if(!periodType){
periodType = 'month';
}
if(periodType && searchPeriod && searchPeriod > 0){
setMinDate(propMinDate || moment(endDate, 'YYYY.MM.DD').subtract(searchPeriod, periodType).toDate());
}
// setMinDate(propMinDate || undefined);
if(!!endDate){ if(!!endDate){
setMaxDate(moment(endDate, 'YYYY.MM.DD').toDate()); setMaxDate(moment(endDate, 'YYYY.MM.DD').toDate());
} }

View File

@@ -24,7 +24,7 @@ export const FilterCalendarMonth = ({
const { t } = useTranslation(); const { t } = useTranslation();
const [filterTitle, setFilterTitle] = useState<string>(title || t('filter.period')); const [filterTitle, setFilterTitle] = useState<string>(title || t('filter.period'));
const [monthReadOnly, setMonthReadyOnly] = useState<boolean>(false); const [monthReadOnly, setMonthReadyOnly] = useState<boolean>(false);
const [filterMonthOptionsBtn, setFilterMonthOptionsBtn] = useState<FilterMonthOptions>(FilterMonthOptions.Input); const [filterMonthOptionsBtn, setFilterMonthOptionsBtn] = useState<FilterMonthOptions>(FilterMonthOptions.Month1);
const [calendarOpen, setCalendarOpen] = useState<boolean>(false); const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
const [calendarType, setCalendarType] = useState<CalendarType>(CalendarType.Start); const [calendarType, setCalendarType] = useState<CalendarType>(CalendarType.Start);

View File

@@ -24,7 +24,7 @@ export const FilterCalendar = ({
const { t } = useTranslation(); const { t } = useTranslation();
const [filterTitle, setFilterTitle] = useState<string>(title || t('filter.period')); const [filterTitle, setFilterTitle] = useState<string>(title || t('filter.period'));
const [dateReadOnly, setDateReadyOnly] = useState<boolean>(false); const [dateReadOnly, setDateReadyOnly] = useState<boolean>(false);
const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input); const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Today);
const [calendarOpen, setCalendarOpen] = useState<boolean>(false); const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
const [calendarType, setCalendarType] = useState<CalendarType>(CalendarType.Start); const [calendarType, setCalendarType] = useState<CalendarType>(CalendarType.Start);