feat(member): 일정 모아보기 API 연동 (#91)

apps/member/src/api/schedule.ts

@@ -6,7 +6,11 @@ import type {
   PaginationPramsType,
   PaginationType,
 } from '@type/api';
-import type { ScheduleItem, ScheduleRegisterItem } from '@type/schedule';
+import type {
+  ScheduleCollect,
+  ScheduleItem,
+  ScheduleRegisterItem,
+} from '@type/schedule';
 
 interface GetScheduleParams extends PaginationPramsType {
   startDate: string;
@@ -30,6 +34,16 @@ export const getSchedule = async ({
 
   return data;
 };
+/**
+ * 일정 모아보기
+ */
+export const getScheduleCollect = async () => {
+  const { data } = await server.get<BaseResponse<ScheduleCollect>>({
+    url: END_POINT.SCHEDULE_COLLECT,
+  });
+
+  return data;
+};
 /**
  * 일정 등록
  */

apps/member/src/components/calendar/CalendarStatusSection/CalendarStatusSection.tsx

@@ -0,0 +1,49 @@
+import Section from '@components/common/Section/Section';
+import StatusCard from '@components/common/StatusCard/StatusCard';
+import { useSchedule } from '@hooks/queries';
+import { calculateDDay, findClosestEvent, transformEvents } from '@utils/date';
+import { FcCalendar, FcLeave, FcOvertime, FcAlarmClock } from 'react-icons/fc';
+import { useScheduleCollect } from '@hooks/queries/useScheduleCollect';
+
+const CalendarStatusSection = () => {
+  const { data: yearData } = useScheduleCollect();
+  const { data: monthData } = useSchedule();
+
+  const closestEvent = findClosestEvent(transformEvents(monthData.items));
+  const closestDDay = closestEvent?.startDate
+    ? `D-${calculateDDay(closestEvent.startDate)}`
+    : '이번 달에 남은 일정이 없어요';
+
+  return (
+    <Section>
+      <Section.Header
+        title="모아보기"
+        description="일정을 한 눈에 확인하세요"
+      />
+      <Section.Body className="grid grid-cols-2 gap-4 md:grid-cols-4 break-keep">
+        <StatusCard
+          icon={<FcCalendar size={32} />}
+          label={`${yearData.totalScheduleCount}회`}
+          description="이번 연도 동아리의 모든 일정 횟수에요."
+        />
+        <StatusCard
+          icon={<FcLeave size={32} />}
+          label={`${yearData.totalEventCount}회`}
+          description="이번 연도 총회, MT 등 중요도가 높은 행사 횟수에요."
+        />
+        <StatusCard
+          icon={<FcOvertime size={32} />}
+          label={`${monthData.totalItems}회`}
+          description="이번 달 동아리 일정 횟수에요."
+        />
+        <StatusCard
+          icon={<FcAlarmClock size={32} />}
+          label={closestDDay}
+          description="가장 가까운 일정까지 남은 일수에요."
+        />
+      </Section.Body>
+    </Section>
+  );
+};
+
+export default CalendarStatusSection;

apps/member/src/components/common/StatusCard/StatusCard.types.ts

@@ -1,5 +1,5 @@
 export interface StatusCardProps {
   icon: React.ReactNode;
-  label: string;
+  label: string | number;
   description: string;
 }

apps/member/src/constants/api.ts

@@ -5,8 +5,10 @@ export const API_BASE_URL: string = import.meta.env.VITE_API_BASE_URL;
 
 export const ACCESS_TOKEN_KEY = 'ACCESS_TOKEN';
 export const REFRESH_TOKEN_KEY = 'REFRESH_TOKEN';
+
 export const FORM_DATA_KEY = 'multipartFile';
 export const STORAGE_PERIOD = (period: number) => `?storagePeriod=${period}`;
+export const MAX_PAGINATION_SIZE = 99999;
 
 export const END_POINT = {
   LOGIN_REISSUE: '/v1/login/reissue',
@@ -35,6 +37,7 @@ export const END_POINT = {
   MY_BIRTHDAY: `/v1/members/birthday`,
   MY_ACTIVITY: `/v1/schedule/activity`,
   MAIN_SCHEDULE: `/v1/schedule`,
+  SCHEDULE_COLLECT: `/v1/schedule/collect`,
   MAIN_ACTIVITY_PHOTO: `/v1/activity-photos`,
   MEMBERSHIP_FEE: `/v1/membership-fees`,
   SHARED_ACCOUNT: `/v1/shared-accounts`,

apps/member/src/constants/key.ts

@@ -24,6 +24,7 @@ export const QUERY_KEY = {
   HIRE: 'Hire',
   BIRTHDAY: 'Birthday',
   SCHEDULE: 'Schedule',
+  SCHEDULE_COLLECT: 'ScheduleCollect',
   MAIN_ACTIVITY_PHOTO: 'MainActivityPhoto',
   COMMENTS: 'Comments',
   MEMBERSHIP_FEE: 'MembershipFee',

apps/member/src/hooks/queries/useScheduleCollect.ts

@@ -0,0 +1,13 @@
+import { getScheduleCollect } from '@api/schedule';
+import { QUERY_KEY } from '@constants/key';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+/**
+ * 일정 모아보기를 조회합니다.
+ */
+export const useScheduleCollect = () => {
+  return useSuspenseQuery({
+    queryKey: [QUERY_KEY.SCHEDULE_COLLECT],
+    queryFn: getScheduleCollect,
+  });
+};

apps/member/src/pages/CalendarPage/CalendarPage.tsx

@@ -1,52 +1,19 @@
-import { startTransition, useState } from 'react';
+import { Suspense } from 'react';
 import Content from '@components/common/Content/Content';
 import Header from '@components/common/Header/Header';
-import Section from '@components/common/Section/Section';
-import Calendar from '@components/calendar/Calendar/Calendar';
-import { now } from '@utils/date';
-import { Dayjs } from 'dayjs';
-
-const today = now();
+import CalendarSection from '@components/calendar/CalendarSection/CalendarSection';
+import CalendarStatusSection from '@components/calendar/CalendarStatusSection/CalendarStatusSection';
 
 const CalendarPage = () => {
-  const [date, setDate] = useState<Dayjs>(today);
-  const onClickPrev = () => {
-    startTransition(() => {
-      setDate((prev) => prev.subtract(1, 'month'));
-    });
-  };
-
-  const onClickNext = () => {
-    startTransition(() => {
-      setDate((prev) => prev.add(1, 'month'));
-    });
-  };
-
-  const onClickToday = () => {
-    startTransition(() => {
-      setDate(today);
-    });
-  };
-
   return (
     <Content>
       <Header title="일정" />
-      <Section>
-        <Section.Header title={date.format('YYYY년 MM월')}>
-          <button className="hover:font-semibold" onClick={onClickPrev}>
-            &lt;
-          </button>
-          <button className="px-3 hover:font-semibold" onClick={onClickToday}>
-            오늘
-          </button>
-          <button className="hover:font-semibold" onClick={onClickNext}>
-            &gt;
-          </button>
-        </Section.Header>
-        <Section.Body className="grid grid-cols-7">
-          <Calendar date={date} />
-        </Section.Body>
-      </Section>
+      <Suspense>
+        <CalendarStatusSection />
+      </Suspense>
+      <Suspense>
+        <CalendarSection />
+      </Suspense>
     </Content>
   );
 };

apps/member/src/types/schedule.ts

@@ -1,10 +1,13 @@
+type SchedulePriority = 'HIGH' | 'MIDDLE' | 'LOW';
+
 export interface ScheduleItem {
   id: number;
   title: string;
   detail: string;
   activityName: string | null;
   startDate: string;
   endDate: string;
+  priority: SchedulePriority;
 }
 
 export interface ScheduleRegisterItem {
@@ -15,3 +18,8 @@ export interface ScheduleRegisterItem {
   endDateTime: string;
   activityGroupId?: number;
 }
+
+export interface ScheduleCollect {
+  totalScheduleCount: number;
+  totalEventCount: number;
+}