diff --git a/src/hooks/useCalendar.ts b/src/hooks/useCalendar.ts index 7a24608..519d454 100644 --- a/src/hooks/useCalendar.ts +++ b/src/hooks/useCalendar.ts @@ -1,8 +1,12 @@ import { getDaysInMonth } from 'date-fns'; -import { useEffect, useMemo, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useQuery } from 'react-query'; import { getCalendarData } from '../apis/home'; import useCalendarStore from '../stores/calendarStore'; +import { + formatCalendarListDay, + formatRequestCalendarDate, +} from '../utils/dateFormatters'; interface IChatData { dates: string; @@ -15,42 +19,44 @@ export interface ICalendar { character: string | null; } -const DATE_MONTH_FIXER = 1; const CALENDER_LENGTH = 42; const DEFAULT_TRASH_VALUE = 0; const DAY_OF_WEEK = 7; -const TWO_DIGIT_FORMAT = 10; const useCalendar = () => { const { currentDate, setCurrentDate } = useCalendarStore(); const [formattedDate, setFormattedDate] = useState( - `${currentDate.getFullYear()}-${ - currentDate.getMonth() + 1 < TWO_DIGIT_FORMAT - ? '0' + (currentDate.getMonth() + 1) - : currentDate.getMonth() + 1 - }`, + formatRequestCalendarDate( + currentDate.getFullYear(), + currentDate.getMonth(), + ), ); const totalMonthDays = getDaysInMonth(currentDate); const [chatData, setChatData] = useState([]); useEffect(() => { const year = currentDate.getFullYear(); - const month = currentDate.getMonth() + 1; - setFormattedDate( - `${year}-${month < TWO_DIGIT_FORMAT ? '0' + month : month}`, - ); + const month = currentDate.getMonth(); + const date = formatRequestCalendarDate(year, month); + setFormattedDate(date); }, [currentDate]); - const { data, isLoading, error } = useQuery( - ['calendarData', formattedDate], - () => getCalendarData(formattedDate), - ); + const { data, isLoading, error } = useQuery({ + queryKey: ['calendarData', formattedDate], + queryFn: () => getCalendarData(formattedDate), + }); useEffect(() => { - if (!isLoading && !error && data) { + if (data) { setChatData(data); } - }, [data, isLoading, error]); + }, [data]); + if (isLoading) { + console.log('calendar Loading'); + } + if (error) { + console.log(error); + } const firstDayOfMonth = new Date( currentDate.getFullYear(), @@ -75,16 +81,12 @@ const useCalendar = () => { if (!acc[chunkIndex]) { acc[chunkIndex] = []; } - const currentDateStr = `${currentDate.getFullYear()}-${ - currentDate.getMonth() + DATE_MONTH_FIXER < 10 - ? '0' + (currentDate.getMonth() + DATE_MONTH_FIXER) - : currentDate.getMonth() + DATE_MONTH_FIXER - }-${cur < 10 ? '0' + cur : cur}`; - const chatInfo = useMemo(() => { - if (chatData && chatData.length > 0) { - return chatData.find((chat) => chat.dates === currentDateStr); - } - }, [chatData, currentDateStr]); + const currentDateStr = formatCalendarListDay( + currentDate.getFullYear(), + currentDate.getMonth(), + cur, + ); + const chatInfo = chatData.find((chat) => chat.dates === currentDateStr); acc[chunkIndex].push({ day: cur, character: diff --git a/src/utils/dateFormatters.ts b/src/utils/dateFormatters.ts index d216f54..cb18add 100644 --- a/src/utils/dateFormatters.ts +++ b/src/utils/dateFormatters.ts @@ -39,3 +39,19 @@ export const isNotToday = ( dayInfo.day !== today.getDate() ); }; + +//YYYY-MM 형태 +export const formatRequestCalendarDate = (year: number, month: number) => { + return `${year}-${month + 1 < 10 ? '0' + (month + 1) : month + 1}`; +}; + +//YYYY-MM-DD 형태 +export const formatCalendarListDay = ( + year: number, + month: number, + day: number, +) => { + return `${year}-${month + 1 < 10 ? '0' + (month + 1) : month + 1}-${ + day < 10 ? '0' + day : day + }`; +};