Merge pull request #86 from Team-B1ND/refactor/#85

fix :: schedule api #85
Team-B1ND · Nov 14, 2024 · 233fe4c · 233fe4c
2 parents ee7c1ed + 1410367
commit 233fe4c
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 120 deletions.
diff --git a/src/components/Schedule/ScheduleManage/TableView/index.tsx b/src/components/Schedule/ScheduleManage/TableView/index.tsx
@@ -1,53 +1,48 @@
-import { Button, TBody, TD, TR } from "@b1nd/b1nd-dodamdodam-ui";
-import { SCHEDULE_TABLE_ITEMS } from "components/Schedule/constant";
-import TableAttribute from "components/common/TableAttribute";
-import { useGetSchedulesQuery } from "queries/Schedule/schedule.query";
-import { useInView } from "react-intersection-observer";
-import { useEffect } from "react";
-import dataTransform from "utils/Transform/dataTransform";
-import { TBodyStyle, TRStyle } from "./style";
-import useDeleteSchedule from "hooks/Schedule/useDeleteSchedule";
+import { Button, TBody, TD, TR } from '@b1nd/b1nd-dodamdodam-ui';
+import { SCHEDULE_TABLE_ITEMS } from 'components/Schedule/constant';
+import TableAttribute from 'components/common/TableAttribute';
+import { useGetSchedulesByPeriodQuery } from 'queries/Schedule/schedule.query';
+import { useInView } from 'react-intersection-observer';
+import dataTransform from 'utils/Transform/dataTransform';
+import { TBodyStyle, TRStyle } from './style';
+import useDeleteSchedule from 'hooks/Schedule/useDeleteSchedule';
+import dayjs from 'dayjs';
 
 const TableView = () => {
-  const { data: scheduleData, fetchNextPage } = useGetSchedulesQuery();
-  const { ref, inView } = useInView();
+  const { ref } = useInView();
   const { onDeleteSchedule } = useDeleteSchedule();
-
-  useEffect(() => {
-    if (inView) {
-      fetchNextPage();
-    }
-  }, [inView, fetchNextPage]);
+  const { data: scheduleData } = useGetSchedulesByPeriodQuery({
+    startAt: dayjs().format('YYYY-MM-DD'), // 오늘 날짜
+    endAt: dayjs().endOf('month').format('YYYY-MM-DD'), // 이번 달 마지막 날
+  });
 
   return (
-    <TableAttribute constant={SCHEDULE_TABLE_ITEMS} thStyle={{ width: "10.5%" }}>
+    <TableAttribute constant={SCHEDULE_TABLE_ITEMS} thStyle={{ width: '10.5%' }}>
       <TBody customStyle={TBodyStyle}>
-        {scheduleData?.pages.map((page) =>
-          page.data.map((schedule) => (
-            <TR customStyle={TRStyle}>
-              <TD customStyle={{ width: "10.5%" }}>
-                <Button ButtonType="agree">{schedule.type === "ACADEMIC" ? "학사 일정" : "휴일"}</Button>
-              </TD>
-              <TD customStyle={{ width: "10.5%" }}>{schedule.name}</TD>
-              <TD customStyle={{ width: "10.5%" }}>
-                {schedule.targetGrades.map((grade, idx) => (
-                  <>
-                    {dataTransform.convertGrade(grade)}
-                    {idx !== schedule.targetGrades.length - 1 && ", "}
-                  </>
-                ))}
-              </TD>
-              <TD customStyle={{ width: "10.5%" }}>{dataTransform.convertPlaceName(schedule.place)}</TD>
-              <TD customStyle={{ width: "10.5%" }}>{schedule.date[0]} </TD>
-              <TD customStyle={{ width: "10.5%" }}>{schedule.date[1]} </TD>
-              <TD customStyle={{ width: "10.5%" }}>
-                <Button ButtonType="disagreed" onClick={() => onDeleteSchedule(schedule.id)}>
-                  삭제
-                </Button>
-              </TD>
-            </TR>
-          )),
-        )}
+        {scheduleData?.data.map((schedule) => (
+          <TR customStyle={TRStyle}>
+            <TD customStyle={{ width: '10.5%' }}>
+              <Button ButtonType="agree">{schedule.type === 'ACADEMIC' ? '학사 일정' : '휴일'}</Button>
+            </TD>
+            <TD customStyle={{ width: '10.5%' }}>{schedule.name}</TD>
+            <TD customStyle={{ width: '10.5%' }}>
+              {schedule.targetGrades.map((grade, idx) => (
+                <>
+                  {dataTransform.convertGrade(grade)}
+                  {idx !== schedule.targetGrades.length - 1 && ', '}
+                </>
+              ))}
+            </TD>
+            <TD customStyle={{ width: '10.5%' }}>{dataTransform.convertPlaceName(schedule.place)}</TD>
+            <TD customStyle={{ width: '10.5%' }}>{schedule.date[0]} </TD>
+            <TD customStyle={{ width: '10.5%' }}>{schedule.date[1]} </TD>
+            <TD customStyle={{ width: '10.5%' }}>
+              <Button ButtonType="disagreed" onClick={() => onDeleteSchedule(schedule.id)}>
+                삭제
+              </Button>
+            </TD>
+          </TR>
+        ))}
       </TBody>
       <div ref={ref}></div>
     </TableAttribute>

diff --git a/src/hooks/Schedule/useDeleteSchedule.ts b/src/hooks/Schedule/useDeleteSchedule.ts
@@ -1,8 +1,9 @@
-import { B1ndToast } from "@b1nd/b1nd-toastify";
-import { AxiosError } from "axios";
-import { useDeleteSchedulesMutation } from "queries/Schedule/schedule.query";
-import { QUERY_KEYS } from "queries/queryKey";
-import { useQueryClient } from "react-query";
+import { B1ndToast } from '@b1nd/b1nd-toastify';
+import { AxiosError } from 'axios';
+import { useDeleteSchedulesMutation } from 'queries/Schedule/schedule.query';
+import { QUERY_KEYS } from 'queries/queryKey';
+import { useQueryClient } from 'react-query';
+import dayjs from 'dayjs';
 
 const useDeleteSchedule = () => {
   const deleteSchedulesMutation = useDeleteSchedulesMutation();
@@ -11,8 +12,13 @@ const useDeleteSchedule = () => {
   const onDeleteSchedule = (id: number) => {
     deleteSchedulesMutation.mutate(id, {
       onSuccess: () => {
-        queryClient.invalidateQueries(QUERY_KEYS.schedule.getSchedules);
-        B1ndToast.showSuccess("일정이 삭제 되었습니다.");
+        queryClient.invalidateQueries(
+          QUERY_KEYS.schedule.getSchedulesByPeriod(
+            dayjs().format('YYYY-MM-DD'),
+            dayjs().endOf('month').format('YYYY-MM-DD')
+          )
+        );
+        B1ndToast.showSuccess('일정이 삭제 되었습니다.');
       },
       onError: (error) => {
         const errorResponse = (error as AxiosError).response;

diff --git a/src/queries/Schedule/schedule.query.ts b/src/queries/Schedule/schedule.query.ts
@@ -1,45 +1,13 @@
-import { AxiosError } from "axios";
-import { QUERY_KEYS } from "queries/queryKey";
-import {
-  UseInfiniteQueryOptions,
-  UseQueryOptions,
-  useInfiniteQuery,
-  useMutation,
-  useQuery,
-} from "react-query";
-import { GetScheduleByPeriodParam } from "repositories/Schedule/schedule.repository";
-import ScheduleRepositoryImpl from "repositories/Schedule/schedule.repositoryImpl";
-import { ScheduleResponse } from "types/Schedule/schedule.type";
-
-export const useGetSchedulesQuery = (
-  options?: UseInfiniteQueryOptions<
-    ScheduleResponse,
-    AxiosError,
-    ScheduleResponse,
-    ScheduleResponse,
-    string[]
-  >
-) =>
-  useInfiniteQuery(
-    QUERY_KEYS.schedule.getSchedules,
-    ({ pageParam = 1 }) =>
-      ScheduleRepositoryImpl.getSchedules({ page: pageParam }),
-    {
-      ...options,
-      cacheTime: 1000 * 60,
-      staleTime: 1000 * 60 * 60,
-      getNextPageParam: (nextPage) => nextPage.nextPage,
-    }
-  );
+import { AxiosError } from 'axios';
+import { QUERY_KEYS } from 'queries/queryKey';
+import { UseQueryOptions, useMutation, useQuery } from 'react-query';
+import { GetScheduleByPeriodParam } from 'repositories/Schedule/schedule.repository';
+import ScheduleRepositoryImpl from 'repositories/Schedule/schedule.repositoryImpl';
+import { ScheduleResponse } from 'types/Schedule/schedule.type';
 
 export const useGetSchedulesByPeriodQuery = (
   { endAt, startAt }: GetScheduleByPeriodParam,
-  options?: UseQueryOptions<
-    ScheduleResponse,
-    AxiosError,
-    ScheduleResponse,
-    string[]
-  >
+  options?: UseQueryOptions<ScheduleResponse, AxiosError, ScheduleResponse, string[]>
 ) =>
   useQuery(
     QUERY_KEYS.schedule.getSchedulesByPeriod(endAt, startAt),

diff --git a/src/repositories/Schedule/schedule.repository.ts b/src/repositories/Schedule/schedule.repository.ts
@@ -7,7 +7,6 @@ export interface ScheduleRepository {
     param: GetScheduleByPeriodParam
   ): Promise<ScheduleResponse>;
   getSchedulesByKeyword(keyword: string): Promise<ScheduleResponse>;
-  getSchedules({ page }: GetSchedulesParam): Promise<ScheduleResponse>;
   deleteSchedulesById(id: number): Promise<Response>;
 }
 

diff --git a/src/repositories/Schedule/schedule.repositoryImpl.ts b/src/repositories/Schedule/schedule.repositoryImpl.ts
@@ -1,44 +1,24 @@
-import { dodamAxios } from "libs/Axios/customAxios";
-import {
-  GetScheduleByPeriodParam,
-  GetSchedulesParam,
-  ScheduleParam,
-  ScheduleRepository,
-} from "./schedule.repository";
-import { ScheduleResponse } from "types/Schedule/schedule.type";
-import { Response } from "types/util/response.type";
+import { dodamAxios } from 'libs/Axios/customAxios';
+import { GetScheduleByPeriodParam, ScheduleParam, ScheduleRepository } from './schedule.repository';
+import { ScheduleResponse } from 'types/Schedule/schedule.type';
+import { Response } from 'types/util/response.type';
 
 class ScheduleRepositoryImpl implements ScheduleRepository {
   public async createSchedule(param: ScheduleParam): Promise<Response> {
-    const { data } = await dodamAxios.post("/schedule", param);
+    const { data } = await dodamAxios.post('/schedule', param);
     return data;
   }
 
-  public async getSchedulesByKeyword(
-    keyword: string
-  ): Promise<ScheduleResponse> {
-    const { data } = await dodamAxios.get(
-      `/schedule/search?keyword=${keyword}`
-    );
+  public async getSchedulesByKeyword(keyword: string): Promise<ScheduleResponse> {
+    const { data } = await dodamAxios.get(`/schedule/search?keyword=${keyword}`);
     return data;
   }
 
-  public async getScheduleByPeriod({
-    endAt,
-    startAt,
-  }: GetScheduleByPeriodParam): Promise<ScheduleResponse> {
-    const { data } = await dodamAxios.get(
-      `/schedule/search?startAt=${startAt}&endAt=${endAt}`
-    );
+  public async getScheduleByPeriod({ endAt, startAt }: GetScheduleByPeriodParam): Promise<ScheduleResponse> {
+    const { data } = await dodamAxios.get(`/schedule/search?startAt=${startAt}&endAt=${endAt}`);
     return data;
   }
 
-  public async getSchedules({
-    page,
-  }: GetSchedulesParam): Promise<ScheduleResponse> {
-    const { data } = await dodamAxios.get(`/schedule?limit=${10}&page=${page}`);
-    return data;
-  }
   public async deleteSchedulesById(id: number): Promise<Response> {
     const { data } = await dodamAxios.delete(`/schedule/${id}`);
     return data;