refactor: 맵 편집/생성 페이지를 API 명세에 맞게 마이그레이션 (#979)

* refactor: api v2 추상화로직 작성 - mockoon의 port를 7742로 설정해야함. * refactor: 맵 단건조회 API 사용부분 V2로 변경 * refactor: 맵 생성 API V2로 마이그레이션 * refactor: 맵 수정 API V2로 마이그레이션 * refactor: query key 변경
woowacourse-teams · Nov 2, 2023 · 41f7d4c · 41f7d4c
1 parent a99cde1
commit 41f7d4c
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 11 deletions.
diff --git a/frontend/src/api-v2/managerMap.ts b/frontend/src/api-v2/managerMap.ts
@@ -1,14 +1,60 @@
 import { AxiosResponse } from 'axios';
-import { QueryFunction } from 'react-query';
-import { QueryManagerMapsSuccessV2 } from 'types/response-v2';
+import { QueryFunction, QueryKey } from 'react-query';
+import { QueryManagerMapSuccessV2 } from 'types/response-v2';
 import apiV2 from './apiv2';
 
+export interface QueryManagerMapParamsV2 {
+  mapId: number;
+}
+
+interface PostMapParamsV2 {
+  mapName: string;
+  mapDrawing: string;
+  thumbnail: string;
+  slackUrl: string;
+}
+
+interface PutMapParamsV2 {
+  mapId: number;
+  mapName: string;
+  mapDrawing: string;
+  thumbnail: string;
+  slackUrl: string;
+}
+
 interface DeleteMapParamsV2 {
   mapId: number;
 }
 
+export const queryManagerMapV2: QueryFunction<
+  AxiosResponse<QueryManagerMapSuccessV2>,
+  [QueryKey, QueryManagerMapParamsV2]
+> = ({ queryKey }) => {
+  const [, data] = queryKey;
+  const { mapId } = data;
+
+  return apiV2.get(`/api/maps/${mapId}`);
+};
+
 export const queryManagerMapsV2: QueryFunction<AxiosResponse<QueryManagerMapsSuccessV2>> = () =>
   apiV2.get('/api/maps');
 
+export const postMapV2 = ({
+  mapName,
+  mapDrawing,
+  thumbnail,
+  slackUrl,
+}: PostMapParamsV2): Promise<AxiosResponse<never>> =>
+  apiV2.post('/api/maps', { mapName, mapDrawing, thumbnail, slackUrl });
+
+export const putMapV2 = ({
+  mapId,
+  mapName,
+  mapDrawing,
+  thumbnail,
+  slackUrl,
+}: PutMapParamsV2): Promise<AxiosResponse<never>> =>
+  apiV2.put(`/api/maps/${mapId}`, { mapName, mapDrawing, thumbnail, slackUrl });
+
 export const deleteMapV2 = ({ mapId }: DeleteMapParamsV2): Promise<AxiosResponse<never>> =>
   apiV2.delete(`/api/maps/${mapId}`);
diff --git a/frontend/src/hooks/query-v2/useManagerMapV2.ts b/frontend/src/hooks/query-v2/useManagerMapV2.ts
@@ -0,0 +1,18 @@
+import { AxiosError, AxiosResponse } from 'axios';
+import { QueryKey, useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import { QueryManagerMapParamsV2, queryManagerMapV2 } from 'api-v2/managerMap';
+import { ErrorResponse } from 'types/response';
+import { QueryManagerMapSuccessV2 } from 'types/response-v2';
+
+const useManagerMapV2 = <TData = AxiosResponse<QueryManagerMapSuccessV2>>(
+  { mapId }: QueryManagerMapParamsV2,
+  options?: UseQueryOptions<
+    AxiosResponse<QueryManagerMapSuccessV2>,
+    AxiosError<ErrorResponse>,
+    TData,
+    [QueryKey, QueryManagerMapParamsV2]
+  >
+): UseQueryResult<TData, AxiosError<ErrorResponse>> =>
+  useQuery(['getManagerMapV2', { mapId }], queryManagerMapV2, { ...options });
+
+export default useManagerMapV2;
diff --git a/frontend/src/pages/ManagerMapEditor/ManagerMapEditor.tsx b/frontend/src/pages/ManagerMapEditor/ManagerMapEditor.tsx
@@ -2,15 +2,15 @@ import { AxiosError } from 'axios';
 import React, { createRef, useMemo, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useHistory, useParams } from 'react-router';
-import { postMap, putMap } from 'api/managerMap';
+import { postMapV2, putMapV2 } from 'api-v2/managerMap';
 import Button from 'components/Button/Button';
 import EditorOverlay from 'components/EditorOverlay/EditorOverlay';
 import Header from 'components/Header/Header';
 import Layout from 'components/Layout/Layout';
 import { BOARD } from 'constants/editor';
 import MESSAGE from 'constants/message';
 import PATH, { HREF } from 'constants/path';
-import useManagerMap from 'hooks/query/useManagerMap';
+import useManagerMapV2 from 'hooks/query-v2/useManagerMapV2';
 import useManagerSpaces from 'hooks/query/useManagerSpaces';
 import useInputs from 'hooks/useInputs';
 import { Area, ManagerSpace, MapDrawing, MapElement } from 'types/common';
@@ -41,6 +41,7 @@ const ManagerMapEditor = (): JSX.Element => {
     width: `${BOARD.DEFAULT_WIDTH}`,
     height: `${BOARD.DEFAULT_HEIGHT}`,
   });
+  const [mapSlackUrl, setMapSlackUrl] = useState('');
 
   const managerSpaces = useManagerSpaces({ mapId: Number(mapId) }, { enabled: isEdit });
   const spaces: ManagerSpace[] = useMemo(() => {
@@ -56,14 +57,14 @@ const ManagerMapEditor = (): JSX.Element => {
     }
   }, [managerSpaces.data?.data.spaces]);
 
-  useManagerMap(
+  useManagerMapV2(
     { mapId: Number(mapId) },
     {
       enabled: isEdit,
       refetchOnWindowFocus: false,
       onSuccess: ({ data }) => {
-        const { mapName, mapDrawing } = data;
-
+        const { mapName, mapDrawing, slackUrl } = data;
+        setMapSlackUrl(slackUrl);
         try {
           const { mapElements, width, height } = JSON.parse(mapDrawing) as MapDrawing;
           const mapElementsWithRef = mapElements.map((element) => ({
@@ -84,7 +85,7 @@ const ManagerMapEditor = (): JSX.Element => {
     }
   );
 
-  const createMap = useMutation(postMap, {
+  const createMap = useMutation(postMapV2, {
     onSuccess: (response) => {
       const headers = response.headers as { location: string };
       const mapId = Number(headers.location.split('/').pop());
@@ -102,7 +103,7 @@ const ManagerMapEditor = (): JSX.Element => {
     },
   });
 
-  const updateMap = useMutation(putMap, {
+  const updateMap = useMutation(putMapV2, {
     onSuccess: () => {
       alert(MESSAGE.MANAGER_MAP.UPDATE_SUCCESS);
     },
@@ -136,12 +137,18 @@ const ManagerMapEditor = (): JSX.Element => {
     });
 
     if (isEdit) {
-      updateMap.mutate({ mapId: Number(mapId), mapName: name, mapDrawing, thumbnail });
+      updateMap.mutate({
+        mapId: Number(mapId),
+        mapName: name,
+        mapDrawing,
+        thumbnail,
+        slackUrl: mapSlackUrl,
+      });
 
       return;
     }
 
-    createMap.mutate({ mapName: name, mapDrawing, thumbnail });
+    createMap.mutate({ mapName: name, mapDrawing, thumbnail, slackUrl: mapSlackUrl });
   };
 
   return (

diff --git a/frontend/src/types/response-v2.ts b/frontend/src/types/response-v2.ts
@@ -3,6 +3,7 @@ import { MapItem } from './common';
 export interface MapItemResponseV2
   extends Omit<MapItem, 'mapDrawing' | 'sharingMapId' | 'notice' | 'managerEmail'> {
   mapDrawing: string;
+  slackUrl: string;
 }
 
 export interface QueryManagerMapsSuccessV2 {