[FE][Feat] #264 : 서버에서 받아온 데이터를 지도 및 캔버스와 연동

frontend/src/api/channel.api.ts

@@ -2,6 +2,7 @@ import { ResponseDto } from '@/api/dto/response.dto.ts';
 import {
   createChannelReqEntity,
   createChannelResEntity,
+  getChannelResEntity,
   getUserChannelsResEntity,
 } from '@/api/dto/channel.dto.ts';
 import { getApiClient } from '@/api/client.api.ts';
@@ -56,9 +57,9 @@ export const getUserChannels = (userId: string): Promise<ResponseDto<getUserChan
   return new Promise(promiseFn);
 };
 
-export const getChannelInfo = (userId: string): Promise<ResponseDto<createChannelReqEntity>> => {
+export const getChannelInfo = (userId: string): Promise<ResponseDto<getChannelResEntity>> => {
   const promiseFn = (
-    fnResolve: (value: ResponseDto<createChannelReqEntity>) => void,
+    fnResolve: (value: ResponseDto<getChannelResEntity>) => void,
     fnReject: (reason?: any) => void,
   ) => {
     const apiClient = getApiClient();
@@ -69,7 +70,7 @@ export const getChannelInfo = (userId: string): Promise<ResponseDto<createChanne
           console.error(res);
           fnReject(`msg.${res}`);
         } else {
-          fnResolve(new ResponseDto<createChannelReqEntity>(res.data));
+          fnResolve(new ResponseDto<getChannelResEntity>(res.data));
         }
       })
       .catch(err => {

frontend/src/api/dto/channel.dto.ts

@@ -9,6 +9,8 @@ export class guestMarkerStyleEntity {
 }
 
 export class guestEntity {
+  id: string | undefined;
+
   name: string | undefined;
 
   start_location: locationEntity | undefined;
@@ -57,3 +59,13 @@ export class channelListEntity {
 export class getUserChannelsResEntity {
   channels: channelListEntity[] | undefined;
 }
+
+export class getChannelResEntity {
+  id: string | undefined;
+
+  name: string | undefined;
+
+  host_id: string | undefined;
+
+  guests: guestEntity[] | undefined;
+}

frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx

@@ -36,6 +36,7 @@ export const MapCanvasForView = ({
 
     endImageRef.current = new Image();
     endImageRef.current.src = endmarker;
+    console.log(guests);
   }, []);
 
   useEffect(() => {

frontend/src/lib/types/canvasInterface.ts

@@ -25,12 +25,17 @@ export interface IOtherLiveLocations {
   token: string;
 }
 
+export interface IMarkerStyle {
+  color: string;
+}
+
 export interface IGuestDataInMapProps {
-  guestName: string;
-  guestUUID: string;
+  id: string;
+  name: string;
   startPoint: IPoint;
   endPoint: IPoint;
   paths: IPoint[];
+  markerStyle: IMarkerStyle;
 }
 
 export interface IMapCanvasViewProps {

frontend/src/pages/HostView.tsx

@@ -1,48 +1,101 @@
-// import { HeaderContext } from '@/component/layout/header/LayoutHeaderProvider';
-// import { useContext, useEffect, useState } from 'react';
-// import { IUserChannelInfo } from '@/types/channel.types.ts';
-// import { getChannelInfo } from '@/api/channel.api.ts';
-// import { useLocation } from 'react-router-dom';
-// import { CanvasWithMap } from '@/component/canvas/CanvasWithMap.tsx';
-
-// export const HostView = () => {
-//   const [userChannels, setUserChannels] = useState<IUserChannelInfo>();
-//   const [userNames, setUserNames] = useState<string[]>(['사용자 1']);
-
-//   const headerContext = useContext(HeaderContext);
-
-//   const location = useLocation();
-
-//   const fetchChannelInfo = (id: string) => {
-//     getChannelInfo(id)
-//       .then(res => {
-//         if (res.data) setUserChannels(res.data);
-//       })
-//       .catch((error: any) => {
-//         console.error(error);
-//       });
-//   };
-
-//   useEffect(() => {
-//     headerContext.setRightButton('dropdown');
-//     headerContext.setLeftButton('back');
-//     headerContext.setItems(['1']);
-
-//     fetchChannelInfo(location.pathname.split('/')[2]);
-//   }, []);
-
-//   useEffect(() => {
-//     if (userChannels?.guests) {
-//       const names = userChannels.guests.filter(Boolean).map(guest => guest.name!);
-//       setUserNames(names);
-//     }
-//   }, [userChannels]);
-
-//   useEffect(() => {
-//     headerContext.setItems(userNames);
-//   }, [userNames]);
-
-//   // TODO: geoCoding API를 이용해서 현재 위치나 시작위치를 기반으로 자동 좌표 설정 구현 (현재: 하드코딩)
-//   return <CanvasWithMap lat={37.3595704} lng={127.105399} zoom={21} mapType="naver" allowCanvas />;
-// };
-export const HostView = () => <>Hello</>;
+import { HeaderContext } from '@/component/layout/header/LayoutHeaderProvider';
+import { ReactNode, useContext, useEffect, useState } from 'react';
+import { IGuest, IChannelInfo } from '@/types/channel.types.ts';
+import { getChannelInfo } from '@/api/channel.api.ts';
+import { useLocation } from 'react-router-dom';
+import { MapCanvasForView } from '@/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx';
+import { IGuestDataInMapProps, IPoint } from '@/lib/types/canvasInterface.ts';
+import { getChannelResEntity, guestEntity } from '@/api/dto/channel.dto.ts';
+
+export const HostView = () => {
+  const [channelInfo, setChannelInfo] = useState<IChannelInfo>();
+  const [userNames, setUserNames] = useState<string[]>(['사용자 1']);
+  const [mapProps, setMapProps] = useState<IGuestDataInMapProps[]>([]);
+  const [component, setComponent] = useState<ReactNode>();
+
+  const headerContext = useContext(HeaderContext);
+
+  const location = useLocation();
+
+  const transformTypeGuestEntityToIGuest = (props: guestEntity): IGuest => {
+    return {
+      id: props.id ?? '',
+      name: props.name ?? '',
+      startPoint: {
+        lat: props.start_location?.lat ?? 0,
+        lng: props.start_location?.lng ?? 0,
+      },
+      endPoint: {
+        lat: props.end_location?.lat ?? 0,
+        lng: props.end_location?.lng ?? 0,
+      },
+      paths: (props.path as IPoint[]) ?? [],
+      markerStyle: {
+        color: props.marker_style?.color ?? '',
+      },
+    };
+  };
+
+  const transformTypeFromResToInfo = (props: getChannelResEntity): IChannelInfo => {
+    const guests = props.guests?.map(guest => transformTypeGuestEntityToIGuest(guest)) ?? [];
+
+    return {
+      name: props.name ?? '',
+      hostId: props.host_id ?? '',
+      channelId: props.id ?? '',
+      guests,
+    };
+  };
+
+  const fetchChannelInfo = (userId: string) => {
+    getChannelInfo(userId)
+      .then(res => {
+        if (!res.data) throw new Error('🚀 Fetch Error: responsed undefined');
+        const transfromedData = transformTypeFromResToInfo(res.data);
+        setChannelInfo(transfromedData);
+      })
+      .catch((error: any) => {
+        console.error(error);
+      });
+  };
+
+  useEffect(() => {
+    headerContext.setRightButton('dropdown');
+    headerContext.setLeftButton('back');
+    headerContext.setItems(['1']);
+
+    fetchChannelInfo(location.pathname.split('/')[2]);
+  }, []);
+
+  useEffect(() => {
+    if (channelInfo?.guests) {
+      const names = channelInfo.guests.filter(Boolean).map(guest => guest.name!);
+      setUserNames(names);
+      channelInfo.guests?.map(guest =>
+        setMapProps(prev => [...prev, guest as IGuestDataInMapProps]),
+      );
+    }
+  }, [channelInfo]);
+
+  useEffect(() => {
+    headerContext.setItems(userNames);
+  }, [userNames]);
+
+  useEffect(() => {
+    if (mapProps.length > 1) {
+      setComponent(
+        <MapCanvasForView
+          lat={37.3595704}
+          lng={127.105399}
+          width="100%"
+          height="100%"
+          guests={mapProps}
+        />,
+      );
+    }
+  }, [mapProps]);
+
+  return (
+    <article className="absolute h-full w-screen flex-grow overflow-hidden">{component}</article>
+  );
+};

frontend/src/types/channel.types.ts

@@ -1,22 +1,24 @@
-export interface ILocation {
-  lat: number | undefined;
-  lng: number | undefined;
+export interface IPoint {
+  lat: number;
+  lng: number;
 }
 
 export interface IGuestMarkerStyle {
-  color: string | undefined;
+  color: string;
 }
 
 export interface IGuest {
-  name: string | undefined;
-  start_location: ILocation | undefined;
-  end_location: ILocation | undefined;
-  path: ILocation[] | undefined;
-  marker_style: IGuestMarkerStyle | undefined;
+  id: string;
+  name: string;
+  startPoint: IPoint;
+  endPoint: IPoint;
+  paths: IPoint[];
+  markerStyle: IGuestMarkerStyle;
 }
 
-export interface IUserChannelInfo {
-  host_id: string | undefined;
-  name: string | undefined;
-  guests: IGuest[] | undefined;
+export interface IChannelInfo {
+  channelId: string;
+  hostId: string;
+  name: string;
+  guests: IGuest[];
 }