Refactor: useGetCalendarData

src/components/coffee/MyCalendar.tsx

@@ -1,18 +1,18 @@
 import dayjs from 'dayjs';
 import { useState } from 'react';
+import { useRecoilState } from 'recoil';
 import ReactCalendar, { OnArgs, TileArgs } from 'react-calendar';
 
 import { COFFEE_CALENDAR_TEXTS } from '@/constants/coffee';
 import { validateDay } from '@/utils/validateDay';
 import { useGetCalendarData } from 'hooks/coffee/useGetCalendarData';
 import { CalendarData } from '@/types/types';
+import { activeMonthState } from '@/atoms/atoms';
 
 import { Blur, InputByteCheck, SumTitle } from '@/styles/styles';
 import { Align, Flex } from '@/styles/layout';
 import { css, cx } from 'styled-system/css';
 import { styled } from 'styled-system/jsx';
-import { useRecoilState } from 'recoil';
-import { activeMonthState } from '@/atoms/atoms';
 
 const { title, legend } = COFFEE_CALENDAR_TEXTS;
 
@@ -135,6 +135,7 @@ const MyCoffeeCalendar = css`
   }
 
   & .react-calendar__month-view__days__day {
+    line-height: 23px;
     color: var(--colors-main-dark);
   }
 
@@ -161,6 +162,8 @@ const MyCoffeeCalendar = css`
     & abbr {
       font-weight: 600;
       width: 30px;
+      text-align: center;
+      line-height: 23px;
       border-radius: 50%;
       color: #fff;
       background-color: var(--colors-main);

src/hooks/coffee/useGetCalendarData.ts

@@ -1,13 +1,19 @@
-import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+
 import { getCoffeeCaledar } from '@/api/coffee';
 import { CalendarData } from '@/types/types';
 
 export const useGetCalendarData = (signedIn: string, activeMonth: string) => {
-  const [coffeeData, setCoffeeData] = useState<(CalendarData | null)[]>();
-  const getCalendarData = async (date: string) => {
-    const res = await getCoffeeCaledar(date);
-    res && setCoffeeData(res.days);
-  };
+  const { data } = useQuery({
+    queryKey: ['coffeeCalendar', activeMonth],
+    queryFn: async () => {
+      const data = await getCoffeeCaledar(activeMonth);
+      return data.days;
+    },
+    enabled: !!signedIn
+  });
+
+  const coffeeData = data as CalendarData[];
 
   const healthy = coffeeData?.filter(
     item => item && Number(item.caffeineSum) <= 200
@@ -22,9 +28,5 @@ export const useGetCalendarData = (signedIn: string, activeMonth: string) => {
     item => item && Number(item.caffeineSum) > 401
   );
 
-  useEffect(() => {
-    signedIn && getCalendarData(activeMonth);
-  }, [activeMonth, signedIn]);
-
   return { healthy, recommended, excessive };
 };

src/hooks/coffee/useGetMyCoffeeSum.ts

@@ -1,6 +1,3 @@
-import { getCoffeeIntake } from '@/api/coffee';
-import { activeMonthState } from '@/atoms/atoms';
-import { COFFEE_TEXTS } from '@/constants/coffee';
 import {
   InvalidateQueryFilters,
   useQuery,
@@ -9,7 +6,12 @@ import {
 import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 
+import { getCoffeeIntake } from '@/api/coffee';
+import { activeMonthState } from '@/atoms/atoms';
+import { COFFEE_TEXTS } from '@/constants/coffee';
+
 const { week } = COFFEE_TEXTS;
+
 export const useGetMyCoffeeSum = (signedIn: string | null) => {
   const queryClient = useQueryClient();
   const activeMonth = useRecoilValue(activeMonthState);