refactor: 맵 상세 페이지를 새로운 API 명세에 맞게 마이그레이션

frontend/src/api-v2/apiv2.ts

@@ -0,0 +1,53 @@
+import axios, { AxiosError } from 'axios';
+import { history } from 'App';
+import PATH from 'constants/path';
+import { LOCAL_STORAGE_KEY } from 'constants/storage';
+import { ErrorResponse } from 'types/response';
+import { getLocalStorageItem, removeLocalStorageItem } from 'utils/localStorage';
+
+const apiV2 = axios.create({
+  baseURL: 'http://localhost:7742',
+  headers: {
+    'Content-type': 'application/json',
+  },
+});
+
+apiV2.interceptors.request.use(
+  (config) => {
+    const token = getLocalStorageItem({
+      key: LOCAL_STORAGE_KEY.ACCESS_TOKEN,
+      defaultValue: '',
+    });
+
+    if (typeof token !== 'string' || !token) return config;
+
+    config.headers = {
+      'Content-type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    };
+
+    return config;
+  },
+
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+apiV2.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+
+  (error: AxiosError<ErrorResponse>) => {
+    if (error?.response?.status === 401) {
+      removeLocalStorageItem({ key: LOCAL_STORAGE_KEY.ACCESS_TOKEN });
+
+      history.push(PATH.LOGIN);
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+export default apiV2;

frontend/src/api-v2/managerMap.ts

@@ -0,0 +1,18 @@
+import { AxiosResponse } from 'axios';
+import { QueryFunction, QueryKey } from 'react-query';
+import { QueryManagerMapSuccessV2 } from 'types/response-v2';
+import apiV2 from './apiv2';
+
+export interface QueryManagerMapParamsV2 {
+  mapId: number;
+}
+
+export const queryManagerMapV2: QueryFunction<
+  AxiosResponse<QueryManagerMapSuccessV2>,
+  [QueryKey, QueryManagerMapParamsV2]
+> = ({ queryKey }) => {
+  const [, data] = queryKey;
+  const { mapId } = data;
+
+  return apiV2.get(`/api/maps/${mapId}`);
+};

frontend/src/components/ManagerIconButtons/SlackNotiButton.tsx

@@ -10,11 +10,12 @@ import Modal from 'components/Modal/Modal';
 import MESSAGE from 'constants/message';
 import useInput from 'hooks/useInput';
 import useSlackWebhookUrl from 'pages/ManagerMapDetail/hooks/useSlackWebhookUrl';
-import { ErrorResponse, QueryManagerMapSuccess } from 'types/response';
+import { ErrorResponse } from 'types/response';
+import { QueryManagerMapSuccessV2 } from 'types/response-v2';
 import * as Styled from './ManagerIconButton.styled';
 
 interface Props extends ComponentProps<typeof IconButton> {
-  map: QueryManagerMapSuccess;
+  map: QueryManagerMapSuccessV2;
 }
 
 const SlackNotiButton = ({ map, ...props }: Props): JSX.Element => {

frontend/src/hooks/query-v2/useManagerMapV2.ts

@@ -0,0 +1,19 @@
+import { AxiosError, AxiosResponse } from 'axios';
+import { QueryKey, useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import { QueryManagerMapParamsV2, queryManagerMapV2 } from 'api-v2/managerMap';
+import { QueryManagerMapParams } from 'api/managerMap';
+import { ErrorResponse } from 'types/response';
+import { QueryManagerMapSuccessV2 } from 'types/response-v2';
+
+const useManagerMapV2 = <TData = AxiosResponse<QueryManagerMapSuccessV2>>(
+  { mapId }: QueryManagerMapParams,
+  options?: UseQueryOptions<
+    AxiosResponse<QueryManagerMapSuccessV2>,
+    AxiosError<ErrorResponse>,
+    TData,
+    [QueryKey, QueryManagerMapParamsV2]
+  >
+): UseQueryResult<TData, AxiosError<ErrorResponse>> =>
+  useQuery(['getManagerMapV2', { mapId }], queryManagerMapV2, options);
+
+export default useManagerMapV2;

frontend/src/pages/ManagerMapDetail/ManagerMapDetail.tsx

@@ -11,13 +11,11 @@ import DateInput from 'components/DateInput/DateInput';
 import Header from 'components/Header/Header';
 import IconButton from 'components/IconButton/IconButton';
 import Layout from 'components/Layout/Layout';
-import MapNoticeButton from 'components/ManagerIconButtons/MapNoticeButton';
-import ShareLinkButton from 'components/ManagerIconButtons/ShareLinkButton';
 import SlackNotiButton from 'components/ManagerIconButtons/SlackNotiButton';
 import PageHeader from 'components/PageHeader/PageHeader';
 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 useManagerMapReservations from 'hooks/query/useManagerMapReservations';
 import useManagerSpaces from 'hooks/query/useManagerSpaces';
 import { Reservation } from 'types/common';
@@ -41,7 +39,7 @@ const ManagerMapDetail = (): JSX.Element => {
 
   const [date, setDate] = useState(targetDate ?? dayjs().tz());
 
-  const getMap = useManagerMap(
+  const getMap = useManagerMapV2(
     { mapId: mapId },
     {
       enabled: !isNullish(mapId),
@@ -158,7 +156,6 @@ const ManagerMapDetail = (): JSX.Element => {
           rightButtons={
             getMap.data?.data != null && (
               <>
-                <MapNoticeButton text="공지사항" size="small" map={getMap.data.data} />
                 <SlackNotiButton text="알림 설정" size="small" map={getMap.data.data} />
                 <Styled.VerticalBar />
                 <IconButton text="맵 편집" size="small" onClick={handleClickMapEditorIcon}>
@@ -167,8 +164,6 @@ const ManagerMapDetail = (): JSX.Element => {
                 <IconButton text="공간 편집" size="small" onClick={handleClickSpaceEditorIcon}>
                   <SpaceEditorIcon width="100%" height="100%" />
                 </IconButton>
-                <Styled.VerticalBar />
-                <ShareLinkButton text="공유 링크" size="small" map={getMap.data.data} />
               </>
             )
           }

frontend/src/types/response-v2.ts

@@ -0,0 +1,13 @@
+import { MapItem } from './common';
+
+export interface MapItemResponseV2
+  extends Omit<MapItem, 'mapDrawing' | 'sharingMapId' | 'notice' | 'managerEmail'> {
+  mapDrawing: string;
+}
+
+export interface QueryManagerMapsSuccessV2 {
+  maps: MapItemResponseV2[];
+  organization: string;
+}
+
+export type QueryManagerMapSuccessV2 = MapItemResponseV2;