Refactor: CHAT-325-useCalendar-리팩토링

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<IChatData[]>([]);
 
   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<IChatData[]>(
-    ['calendarData', formattedDate],
-    () => getCalendarData(formattedDate),
-  );
+  const { data, isLoading, error } = useQuery<IChatData[]>({
+    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:

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
+  }`;
+};