fix: 백엔드와 API를 연동한다.

frontend/src/api-v2/apiv2.ts

@@ -6,7 +6,7 @@ import { ErrorResponse } from 'types/response';
 import { getLocalStorageItem, removeLocalStorageItem } from 'utils/localStorage';
 
 const apiV2 = axios.create({
-  baseURL: 'http://localhost:7742',
+  baseURL: process.env.REACT_APP_SERVER_URL,
   headers: {
     'Content-type': 'application/json',
   },

frontend/src/api-v2/guestMap.ts

@@ -0,0 +1,18 @@
+import { AxiosResponse } from 'axios';
+import { QueryFunction, QueryKey } from 'react-query';
+import { QueryGuestMapSuccessV2 } from 'types/response-v2';
+import apiV2 from './apiv2';
+
+export interface QueryGuestMapParamsV2 {
+  sharingMapId: string;
+}
+
+export const queryGuestMapV2: QueryFunction<
+  AxiosResponse<QueryGuestMapSuccessV2>,
+  [QueryKey, QueryGuestMapParamsV2]
+> = ({ queryKey }) => {
+  const [, data] = queryKey;
+  const { sharingMapId } = data;
+
+  return apiV2.get(`/api/maps/sharing?sharingMapId=${sharingMapId}`);
+};

frontend/src/api-v2/guestSpace.ts

@@ -0,0 +1,34 @@
+import { AxiosResponse } from 'axios';
+import { QueryFunction, QueryKey } from 'react-query';
+import { MapItem, SpaceV2 } from 'types/common';
+import { QueryGuestSpaceSuccessV2, QuerySpacesSuccessV2 } from 'types/response-v2';
+import apiV2 from './apiv2';
+
+export interface QueryGuestSpacesParamsV2 {
+  mapId: MapItem['mapId'];
+}
+
+export interface QueryGuestSpaceParamsV2 {
+  mapId: MapItem['mapId'];
+  spaceId: SpaceV2['id'];
+}
+
+export const queryGuestSpacesV2: QueryFunction<
+  AxiosResponse<QuerySpacesSuccessV2>,
+  [QueryKey, QueryGuestSpacesParamsV2]
+> = ({ queryKey }) => {
+  const [, data] = queryKey;
+  const { mapId } = data;
+
+  return apiV2.get(`/api/maps/${mapId}/spaces`);
+};
+
+export const queryGuestSpaceV2: QueryFunction<
+  AxiosResponse<QueryGuestSpaceSuccessV2>,
+  [QueryKey, QueryGuestSpaceParamsV2]
+> = ({ queryKey }) => {
+  const [, data] = queryKey;
+  const { mapId, spaceId } = data;
+
+  return apiV2.get(`/api/maps/${mapId}/spaces/${spaceId}`);
+};

frontend/src/components/ManagerIconButtons/SlackNotiButton.tsx

@@ -27,19 +27,19 @@ const SlackNotiButton = ({ map, ...props }: Props): JSX.Element => {
     setIsModalOpened(false);
   };
 
-  const getSlackWebhookUrl = useSlackWebhookUrl(
-    { mapId: map.mapId },
-    {
-      refetchOnWindowFocus: false,
-      onSuccess: (response) => {
-        if (!slackUrl) setSlackUrl(response.data.slackUrl);
-      },
-    }
-  );
+  // const getSlackWebhookUrl = useSlackWebhookUrl(
+  //   { mapId: map.mapId },
+  //   {
+  //     refetchOnWindowFocus: false,
+  //     onSuccess: (response) => {
+  //       if (!slackUrl) setSlackUrl(response.data.slackUrl);
+  //     },
+  //   }
+  // );
 
   const createSlackWebhookUrl = useMutation(postSlackWebhookUrl, {
     onSuccess: () => {
-      getSlackWebhookUrl.refetch();
+      // getSlackWebhookUrl.refetch();
       alert(MESSAGE.MANAGER_MAIN.SLACK_WEBHOOK_CREATE_SUCCESS);
 
       setIsModalOpened(false);

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

@@ -0,0 +1,18 @@
+import { AxiosError, AxiosResponse } from 'axios';
+import { QueryKey, useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import { QueryGuestMapParamsV2, queryGuestMapV2 } from 'api-v2/guestMap';
+import { ErrorResponse } from 'types/response';
+import { QueryGuestMapSuccessV2 } from 'types/response-v2';
+
+const useGuestMapV2 = <TData = AxiosResponse<QueryGuestMapSuccessV2>>(
+  { sharingMapId }: QueryGuestMapParamsV2,
+  options?: UseQueryOptions<
+    AxiosResponse<QueryGuestMapSuccessV2>,
+    AxiosError<ErrorResponse>,
+    TData,
+    [QueryKey, QueryGuestMapParamsV2]
+  >
+): UseQueryResult<TData, AxiosError<ErrorResponse>> =>
+  useQuery(['getGuestMapV2', { sharingMapId }], queryGuestMapV2, options);
+
+export default useGuestMapV2;

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

@@ -0,0 +1,18 @@
+import { AxiosError, AxiosResponse } from 'axios';
+import { QueryKey, useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import { QueryGuestSpaceParamsV2, queryGuestSpaceV2 } from 'api-v2/guestSpace';
+import { ErrorResponse } from 'types/response';
+import { QueryGuestSpaceSuccessV2 } from 'types/response-v2';
+
+const useGuestSpaceV2 = <TData = AxiosResponse<QueryGuestSpaceSuccessV2>>(
+  { mapId, spaceId }: QueryGuestSpaceParamsV2,
+  options?: UseQueryOptions<
+    AxiosResponse<QueryGuestSpaceSuccessV2>,
+    AxiosError<ErrorResponse>,
+    TData,
+    [QueryKey, QueryGuestSpaceParamsV2]
+  >
+): UseQueryResult<TData, AxiosError<ErrorResponse>> =>
+  useQuery(['getGuestSpaceV2', { mapId, spaceId }], queryGuestSpaceV2, options);
+
+export default useGuestSpaceV2;

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

@@ -0,0 +1,18 @@
+import { AxiosError, AxiosResponse } from 'axios';
+import { QueryKey, useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import { QueryGuestSpacesParamsV2, queryGuestSpacesV2 } from 'api-v2/guestSpace';
+import { ErrorResponse } from 'types/response';
+import { QuerySpacesSuccessV2 } from 'types/response-v2';
+
+const useGuestSpacesV2 = <TData = AxiosResponse<QuerySpacesSuccessV2>>(
+  { mapId }: QueryGuestSpacesParamsV2,
+  options?: UseQueryOptions<
+    AxiosResponse<QuerySpacesSuccessV2>,
+    AxiosError<ErrorResponse>,
+    TData,
+    [QueryKey, QueryGuestSpacesParamsV2]
+  >
+): UseQueryResult<TData, AxiosError<ErrorResponse>> =>
+  useQuery(['getGuestSpacesV2', { mapId }], queryGuestSpacesV2, options);
+
+export default useGuestSpacesV2;

frontend/src/hooks/useTimePicker.ts

@@ -52,8 +52,8 @@ const useTimePicker = ({
 } => {
   const [selectedTime, setSelectedTime] = useState<SelectedTime>(null);
   const [range, setRange] = useState<Range>({
-    start: initialStartTime ? generateDateToTime(dayjs(initialStartTime).tz(), step) : null,
-    end: initialEndTime ? generateDateToTime(dayjs(initialEndTime).tz(), step) : null,
+    start: initialStartTime ? generateDateToTime(dayjs(initialStartTime), step) : null,
+    end: initialEndTime ? generateDateToTime(dayjs(initialEndTime), step) : null,
   });
 
   const setInitialTime = (key: keyof Range) => {

frontend/src/pages/GuestMap/GuestMap.tsx

@@ -7,8 +7,8 @@ import { deleteGuestReservationV2 } from 'api-v2/guestReservation';
 import Header from 'components/Header/Header';
 import MESSAGE from 'constants/message';
 import { HREF } from 'constants/path';
+import useGuestSpacesV2 from 'hooks/query-v2/useGuestSpacesV2';
 import useGuestReservations from 'hooks/query/useGuestReservations';
-import useGuestSpaces from 'hooks/query/useGuestSpaces';
 import { AccessTokenContext } from 'providers/AccessTokenProvider';
 import { Area, MapItem, Reservation, ScrollPosition, Space } from 'types/common';
 import { GuestPageURLParams } from 'types/guest';
@@ -69,7 +69,7 @@ const GuestMap = ({ map }: GuestMapProps): JSX.Element => {
     return result;
   }, [spaceList]);
 
-  useGuestSpaces(
+  useGuestSpacesV2(
     { mapId: map.mapId },
     {
       enabled: map.mapId !== undefined,

frontend/src/pages/GuestMap/GuestMapContainer.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 import MESSAGE from 'constants/message';
 import PATH from 'constants/path';
-import useGuestMap from 'hooks/query/useGuestMap';
+import useGuestMapV2 from 'hooks/query-v2/useGuestMapV2';
 import { MapDrawing, MapItem } from 'types/common';
 import { GuestPageURLParams } from 'types/guest';
 import GuestMap from './GuestMap';
@@ -15,7 +15,7 @@ const GuestMapContainer = () => {
 
   const [map, setMap] = useState<MapItem | null>(null);
 
-  useGuestMap(
+  useGuestMapV2(
     { sharingMapId },
     {
       onError: () => {

frontend/src/pages/GuestMap/providers/GuestMapFormProvider.tsx

@@ -1,6 +1,7 @@
 import { createContext, useMemo, useState } from 'react';
 import DATE from 'constants/date';
 import SPACE from 'constants/space';
+import useGuestSpacesV2 from 'hooks/query-v2/useGuestSpacesV2';
 import useGuestSpaceAvailable from 'hooks/query/useGuestSpaceAvailable';
 import useGuestSpaces from 'hooks/query/useGuestSpaces';
 import useInputs from 'hooks/useInputs';
@@ -64,7 +65,7 @@ const GuestMapFormProvider = ({ mapId, children }: GuestMapFormProviderProps) =>
     initialEndTime: undefined,
   });
 
-  const getSpaces = useGuestSpaces({ mapId });
+  const getSpaces = useGuestSpacesV2({ mapId });
   const spacesMap = useMemo(() => {
     if (!getSpaces.data?.data) {
       return {};
@@ -87,10 +88,10 @@ const GuestMapFormProvider = ({ mapId, children }: GuestMapFormProviderProps) =>
 
   const spaceList = getSpaces.data?.data.spaces ?? [];
 
-  const availableSpaceList =
-    getSpaceAvailable.data?.data.spaces
-      .filter((space) => space.isAvailable)
-      .map((space) => spacesMap[space.spaceId]) ?? [];
+  const availableSpaceList = spaceList;
+  // getSpaceAvailable.data?.data.spaces
+  //   .filter((space) => space.isAvailable)
+  //   .map((space) => spacesMap[space.spaceId]) ?? [];
 
   const value: GuestMapFormProviderValue = {
     formValues,

frontend/src/pages/GuestMap/units/ReservationForm.tsx

@@ -106,12 +106,8 @@ const ReservationForm = ({ map }: Props) => {
 
     if (timePicker?.range.start == null || timePicker?.range.end == null) return;
 
-    const startDateTime = `${formValues.date}T${formatTimeWithSecond(timePicker.range.start)}${
-      DATE.TIMEZONE_OFFSET
-    }`;
-    const endDateTime = `${formValues.date}T${formatTimeWithSecond(timePicker.range.end)}${
-      DATE.TIMEZONE_OFFSET
-    }`;
+    const startDateTime = `${formValues.date}T${formatTimeWithSecond(timePicker.range.start)}`;
+    const endDateTime = `${formValues.date}T${formatTimeWithSecond(timePicker.range.end)}`;
 
     accessToken
       ? addMemberGuestReservation.mutate({

frontend/src/pages/GuestMap/units/ReservationList.tsx

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import { Dispatch, SetStateAction, useContext, useState } from 'react';
+import { useContext, useState } from 'react';
 import { ReactComponent as CalendarIcon } from 'assets/svg/calendar.svg';
 import { ReactComponent as DeleteIcon } from 'assets/svg/delete.svg';
 import { ReactComponent as EditIcon } from 'assets/svg/edit.svg';
@@ -10,7 +10,6 @@ import ManagerReservationListItem from 'components/ManagerReservationListItem/Ma
 import Select from 'components/Select/Select';
 import DATE from 'constants/date';
 import useGuestReservationsV2 from 'hooks/query-v2/useGuestReservationsV2';
-import useGuestReservations from 'hooks/query/useGuestReservations';
 import useGuestSpace from 'hooks/query/useGuestSpace';
 import { AccessTokenContext } from 'providers/AccessTokenProvider';
 import { MapItem, Reservation } from 'types/common';
@@ -27,12 +26,7 @@ interface Props {
   onDelete: (reservation: Reservation) => void;
 }
 
-const ReservationList = ({
-  map: { mapId },
-  // selectedSpaceId,
-  onDelete,
-  onEdit,
-}: Props) => {
+const ReservationList = ({ map: { mapId }, onDelete, onEdit }: Props) => {
   const { accessToken } = useContext(AccessTokenContext);
   const { spaceList, selectedSpaceId, setSelectedSpaceId } = useContext(GuestMapFormContext);
 

frontend/src/pages/GuestReservation/GuestReservation.tsx

@@ -8,7 +8,6 @@ import {
   GuestReservationParams,
   MemberGuestReservationParams,
   postMemberGuestReservation,
-  putMemberGuestReservation,
 } from 'api/guestReservation';
 import Header from 'components/Header/Header';
 import Layout from 'components/Layout/Layout';
@@ -17,8 +16,8 @@ import PageHeader from 'components/PageHeader/PageHeader';
 import DATE from 'constants/date';
 import MESSAGE from 'constants/message';
 import { HREF } from 'constants/path';
+import useGuestSpaceV2 from 'hooks/query-v2/useGuestSpaceV2';
 import useGuestReservations from 'hooks/query/useGuestReservations';
-import useGuestSpace from 'hooks/query/useGuestSpace';
 import useMember from 'hooks/query/useMember';
 import useInput from 'hooks/useInput';
 import { GuestMapState } from 'pages/GuestMap/GuestMap';
@@ -70,7 +69,7 @@ const GuestReservation = (): JSX.Element => {
   });
   const userName = member.data?.data.userName;
 
-  const getSpace = useGuestSpace({ mapId, spaceId }, { enabled: spaceId != null });
+  const getSpace = useGuestSpaceV2({ mapId, spaceId }, { enabled: spaceId != null });
 
   const getReservations = useGuestReservations(
     { mapId, spaceId, date },
@@ -146,7 +145,7 @@ const GuestReservation = (): JSX.Element => {
     },
   });
 
-  const updateMemberGuestReservation = useMutation(putMemberGuestReservation, {
+  const updateMemberGuestReservation = useMutation(putGuestReservationV2, {
     onSuccess: () => {
       history.push({
         pathname: HREF.GUEST_MAP(sharingMapId),