[FE] 멤버, 스터디 기록 Cache 적용

frontend/src/components/common/CircularProgress/CircularProgress.tsx

@@ -15,7 +15,7 @@ type Props = {
 
 const CircularProgress = ({ size = 'medium', circleColor = color.white, $style }: Props) => {
   return (
-    <StyledCircularProgress size={size} $style={$style} circleColor={circleColor}>
+    <StyledCircularProgress size={size} $style={$style} $circleColor={circleColor}>
       <div></div>
       <div></div>
       <div></div>
@@ -26,7 +26,13 @@ const CircularProgress = ({ size = 'medium', circleColor = color.white, $style }
 
 export default CircularProgress;
 
-const StyledCircularProgress = styled.div<Props>`
+type StyledCircularProgressProps = {
+  size?: Size;
+  $circleColor?: string;
+  $style?: CSSProp;
+};
+
+const StyledCircularProgress = styled.div<StyledCircularProgressProps>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -36,12 +42,12 @@ const StyledCircularProgress = styled.div<Props>`
     border-radius: 50%;
     animation: loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 
-    ${({ size = 'medium', circleColor, $style }) => css`
+    ${({ size = 'medium', $circleColor, $style }) => css`
       width: ${SIZE[size]};
       height: ${SIZE[size]};
 
-      border: 2px solid ${circleColor};
-      border-color: ${circleColor} transparent transparent transparent;
+      border: 2px solid ${$circleColor};
+      border-color: ${$circleColor} transparent transparent transparent;
 
       ${$style}
     `}

frontend/src/components/record/hooks/useMemberCalendarRecord.ts

@@ -1,8 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useState } from 'react';
 
-import useMutation from '@Hooks/api/useMutation';
+import useCacheFetch from '@Hooks/api/useCacheFetch';
+import usePreFetch from '@Hooks/api/usePreFetch';
 
+import calendar from '@Utils/calendar';
 import format from '@Utils/format';
 
 import { requestGetMemberCalendarRecord } from '@Apis/index';
@@ -27,38 +29,73 @@ const useMemberCalendarRecord = ({ monthStorage, calendarRef, memberId }: Props)
   const startDate = format.date(new Date(monthStorage.at(0)!.date), '-');
   const endDate = format.date(new Date(monthStorage.at(-1)!.date), '-');
 
-  const { mutate, isLoading } = useMutation(() => requestGetMemberCalendarRecord(memberId, startDate, endDate), {
-    onSuccess: (result) => {
-      const studyRecords = result.data.studyRecords;
+  const { cacheFetch, result, isLoading } = useCacheFetch(
+    () => requestGetMemberCalendarRecord(memberId, startDate, endDate),
+    {
+      cacheKey: [startDate, endDate],
+      cacheTime: 60 * 60 * 1000,
+      isRunLater: true,
+    },
+  );
+
+  const { prefetch } = usePreFetch();
+
+  const prefetchSidesCalendarData = (calendarRecord: CalendarRecord[]) => {
+    const currentFirstDay = calendarRecord.find((record) => record.state === 'cur')?.date;
+
+    if (!currentFirstDay) return;
 
-      const calendarRecord = monthStorage.map((item) => {
-        const records = studyRecords[format.date(item.date, '-')] || [];
+    const currentYear = currentFirstDay.getFullYear();
+    const currentMonth = currentFirstDay.getMonth();
 
-        const restRecordsNumber = records && records.length > 3 ? records.length - 3 : 0;
+    const prevMonth = new Date(currentYear, currentMonth - 1);
+    const nextMonth = new Date(currentYear, currentMonth + 1);
 
-        return { ...item, records, restRecordsNumber };
+    const [prevMonthStartDate, prevMonthEndDate] = calendar
+      .getMonthFirstLastDate(prevMonth.getFullYear(), prevMonth.getMonth() + 1)
+      .map((date) => {
+        if (!date) return '';
+
+        return format.date(date.date, '-');
       });
 
-      setCalendarRecord(calendarRecord);
-    },
-  });
+    const [nextMonthStartDate, nextMonthEndDate] = calendar
+      .getMonthFirstLastDate(nextMonth.getFullYear(), nextMonth.getMonth() + 1)
+      .map((date) => {
+        if (!date) return '';
+
+        return format.date(date.date, '-');
+      });
+
+    prefetch(() => requestGetMemberCalendarRecord(memberId, prevMonthStartDate, prevMonthEndDate), {
+      cacheKey: [prevMonthStartDate, prevMonthEndDate],
+      cacheTime: 60 * 60 * 1000,
+    });
+
+    prefetch(() => requestGetMemberCalendarRecord(memberId, nextMonthStartDate, nextMonthEndDate), {
+      cacheKey: [nextMonthStartDate, nextMonthEndDate],
+      cacheTime: 60 * 60 * 1000,
+    });
+  };
 
   useEffect(() => {
-    const currentDate = new Date();
-    const searchedDate = monthStorage.find((storage) => storage.state === 'cur')!.date;
-
-    if (currentDate < searchedDate) {
-      setCalendarRecord(
-        monthStorage.map((item) => {
-          return { ...item, records: [], restRecordsNumber: 0 };
-        }),
-      );
-
-      return;
-    }
-    mutate();
+    cacheFetch();
   }, [startDate, endDate]);
 
+  useEffect(() => {
+    if (!result) return;
+
+    const studyRecords = result.data.studyRecords;
+    const calendarRecord = monthStorage.map((item) => {
+      const records = studyRecords[format.date(item.date, '-')] || [];
+      const restRecordsNumber = records && records.length > 3 ? records.length - 3 : 0;
+      return { ...item, records, restRecordsNumber };
+    });
+
+    setCalendarRecord(calendarRecord);
+    prefetchSidesCalendarData(calendarRecord);
+  }, [result]);
+
   useEffect(() => {
     const calendarResizeObserver = new ResizeObserver(([calendar]) => {
       const calendarWidth = calendar.target.clientWidth;

frontend/src/components/record/hooks/useMemberListRecord.ts

@@ -1,7 +1,8 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useState } from 'react';
 
-import useMutation from '@Hooks/api/useMutation';
+import useCacheFetch from '@Hooks/api/useCacheFetch';
+import usePreFetch from '@Hooks/api/usePreFetch';
 
 import { requestGetMemberListRecord } from '@Apis/index';
 
@@ -19,14 +20,21 @@ const useMemberListRecord = ({ memberId }: Props) => {
   const [memberRecords, setMemberRecords] = useState<StudyInfo[] | null>(null);
   const [totalPagesNumber, setTotalPagesNumber] = useState<number>(1);
 
-  const { mutate, result, isLoading } = useMutation(() =>
-    requestGetMemberListRecord(memberId, page - 1, 20, startDate, endDate),
+  const { cacheFetch, result, isLoading } = useCacheFetch(
+    () => requestGetMemberListRecord(memberId, page - 1, 20, startDate, endDate),
+    {
+      cacheKey: [startDate || '', endDate || '', String(page)],
+      cacheTime: 60 * 60 * 1000,
+      isRunLater: true,
+    },
   );
 
+  const { prefetch } = usePreFetch();
+
   const shiftPage = (page: number) => updatePage(page);
 
   useEffect(() => {
-    mutate();
+    cacheFetch();
   }, [triggerSearchRecord]);
 
   useEffect(() => {
@@ -37,6 +45,11 @@ const useMemberListRecord = ({ memberId }: Props) => {
     setMemberRecords(studyRecords || []);
     if (totalPagesNumber === 1 || pageInfo.totalPages !== pageInfo.totalPages + 1)
       setTotalPagesNumber(pageInfo.totalPages);
+
+    prefetch(() => requestGetMemberListRecord(memberId, page, 20, startDate, endDate), {
+      cacheKey: [startDate || '', endDate || '', String(page + 1)],
+      cacheTime: 60 * 60 * 1000,
+    });
   }, [result]);
 
   return { memberRecords, isLoading, totalPagesNumber, shiftPage, currentPageNumber: page };

frontend/src/components/record/hooks/useParticipantRecordContents.ts

@@ -1,10 +1,11 @@
-import useFetch from '@Hooks/api/useFetch';
+import useCacheFetch from '@Hooks/api/useCacheFetch';
 
 import { requestGetParticipantRecordContents } from '@Apis/index';
 
 const useParticipantRecordContents = (studyId: string, progressId: string) => {
-  const { result, isLoading } = useFetch(() => requestGetParticipantRecordContents(studyId, progressId), {
-    suspense: false,
+  const { result, isLoading } = useCacheFetch(() => requestGetParticipantRecordContents(studyId, progressId), {
+    cacheKey: ['participantRecordContent', studyId, progressId],
+    cacheTime: 24 * 60 * 60 * 1000,
   });
   const participantRecordContents = result?.data.content || [];
 

frontend/src/components/record/hooks/useStudyData.ts

@@ -1,10 +1,11 @@
-import useFetch from '@Hooks/api/useFetch';
+import useCacheFetch from '@Hooks/api/useCacheFetch';
 
 import { requestGetStudyInfo } from '@Apis/index';
 
 const useStudyData = (studyId: string) => {
-  const { result, isLoading } = useFetch(() => requestGetStudyInfo(studyId), {
-    suspense: false,
+  const { result, isLoading } = useCacheFetch(() => requestGetStudyInfo(studyId), {
+    cacheKey: ['studyData', studyId],
+    cacheTime: 24 * 60 * 60 * 1000,
   });
 
   return { studyBasicInfo: result, isLoading };

frontend/src/components/record/hooks/useStudyParticipants.ts

@@ -1,14 +1,16 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-
-import useFetch from '@Hooks/api/useFetch';
+import useCacheFetch from '@Hooks/api/useCacheFetch';
 
 import { requestGetStudyParticipants } from '@Apis/index';
 
 const useStudyParticipants = (studyId: string) => {
-  const { result, refetch } = useFetch(() => requestGetStudyParticipants(studyId));
+  const { result, isLoading } = useCacheFetch(() => requestGetStudyParticipants(studyId), {
+    cacheKey: ['participants', studyId],
+    cacheTime: 24 * 60 * 60 * 1000,
+  });
   const participants = result?.data.participants || [];
 
-  return { participants, refetch };
+  return { participants, isLoading };
 };
 
 export default useStudyParticipants;

frontend/src/components/record/member/calendar/MemberRecordCalendarDayList/MemberRecordCalendarDayList.tsx

@@ -9,7 +9,6 @@ import type { MonthStorage } from '@Types/record';
 
 import useMemberCalendarRecord from '../../../hooks/useMemberCalendarRecord';
 import MemberRecordCalendarDayItem from '../MemberRecordCalendarDayItem/MemberRecordCalendarDayItem';
-import MemberRecordCalendarDayItemSkeleton from '../MemberRecordCalendarDayItem/MemberRecordCalendarDayItemSkeleton';
 
 type Props = {
   monthStorage: MonthStorage;
@@ -20,16 +19,12 @@ type Props = {
 const MemberRecordCalendarDayList = ({ monthStorage, memberId, calendarRef }: Props) => {
   const { calendarRecord, calendarData, isLoading } = useMemberCalendarRecord({ monthStorage, calendarRef, memberId });
 
-  if (isLoading && calendarData === 'name') {
-    return <MemberRecordCalendarDayItemSkeleton monthStorage={monthStorage} />;
-  }
-
   return (
     <>
-      {isLoading && calendarData === 'count' && (
+      {isLoading && (
         <LoadingBar>
           <CircularProgress
-            size="small"
+            size="x-large"
             $style={css`
               border: 2px solid ${color.blue[500]};
               border-color: ${color.blue[500]} transparent transparent transparent;

frontend/src/components/record/member/calendar/MemberRecordListModal/MemberRecordListModal.tsx

@@ -37,9 +37,6 @@ const MemberRecordListModal = ({ fullDate, studies, handleClickStudyItem }: Prop
           />
         ))}
       </StudyList>
-      <Button variant="secondary" size="x-small" onClick={() => closeModal()} $block={false}>
-        닫기
-      </Button>
     </Layout>
   );
 };
@@ -53,9 +50,6 @@ const Layout = styled.div`
 
   padding: 10px;
 
-  max-height: 600px;
-  overflow-y: auto;
-
   button {
     align-self: flex-end;
     font-weight: 300;
@@ -73,5 +67,8 @@ const StudyList = styled.ul`
   flex-direction: column;
   gap: 20px;
 
+  max-height: 600px;
+  overflow-y: auto;
+
   overflow: auto;
 `;

frontend/src/components/record/member/period/MemberRecordPeriod/MemberRecordPeriod.tsx

@@ -27,7 +27,6 @@ const MemberRecordPeriod = ({ memberId }: Props) => {
         <PaginationButton
           totalPagesNumber={totalPagesNumber}
           currentPageNumber={currentPageNumber}
-          isLoading={isLoading}
           shiftPage={shiftPage}
         />
       )}
@@ -36,7 +35,6 @@ const MemberRecordPeriod = ({ memberId }: Props) => {
         <PaginationButton
           totalPagesNumber={totalPagesNumber}
           currentPageNumber={currentPageNumber}
-          isLoading={isLoading}
           shiftPage={shiftPage}
         />
       )}