[FE][Feat] #280 : GuestView 화면 구현 및 좌표 가이드에 대한 색상 고려 로직 추가

frontend/src/component/IconGuide/GuestMarker.tsx

@@ -0,0 +1,33 @@
+import { MdAssistantNavigation, MdFlag, MdLocationOn } from 'react-icons/md';
+import { IconContext } from 'react-icons';
+import { ReactNode, useMemo } from 'react';
+
+interface IMarkerData {
+  name: string;
+  icon: ReactNode;
+}
+
+export const GusetMarker = () => {
+  const markerData: IMarkerData[] = [
+    { name: '내 위치', icon: <MdAssistantNavigation color="blue" /> },
+    { name: '도착지', icon: <MdFlag color="purple" /> },
+    { name: '출발지', icon: <MdLocationOn color="red" /> },
+  ];
+
+  const iconContextValue = useMemo(() => ({ color: 'purple', className: 'size-5' }), []);
+
+  return (
+    <div className="z-4000 absolute bottom-8 right-5 w-fit text-base">
+      <ul className="flex flex-col gap-1">
+        <IconContext.Provider value={iconContextValue}>
+          {markerData.map(data => (
+            <li className="flex items-center justify-between gap-2">
+              {data.icon}
+              <span>{data.name}</span>
+            </li>
+          ))}
+        </IconContext.Provider>
+      </ul>
+    </div>
+  );
+};

frontend/src/component/IconGuide/HostMarker.tsx

@@ -0,0 +1,21 @@
+import { MdAssistantNavigation } from 'react-icons/md';
+import { IGuestData } from '@/types/channel.types.ts';
+
+interface IUserMarkerProps {
+  userData: IGuestData[];
+}
+
+export const HostMarker = (props: IUserMarkerProps) => {
+  return (
+    <div className="z-4000 absolute bottom-8 right-5 w-fit text-base">
+      <ul className="flex flex-col gap-2">
+        {props.userData.map(data => (
+          <li key={data.name} className="flex items-center justify-between gap-2">
+            <MdAssistantNavigation color={data.markerStyle.color} className="size-5" />
+            {data.name}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

frontend/src/pages/GuestView.tsx

@@ -5,7 +5,7 @@ import { useLocation } from 'react-router-dom';
 import { MapCanvasForView } from '@/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx';
 import { IPoint } from '@/lib/types/canvasInterface.ts';
 import { guestEntity } from '@/api/dto/channel.dto.ts';
-// import { UserMarker } from '@/component/userMarker/UserMarker.tsx';
+import { GusetMarker } from '@/component/IconGuide/GuestMarker.tsx';
 
 export const GuestView = () => {
   const [guestInfo, setGuestInfo] = useState<IGuest>({
@@ -73,7 +73,7 @@ export const GuestView = () => {
 
   return (
     <article className="absolute h-full w-screen flex-grow overflow-hidden">
-      {/* <UserMarker userData={[guestInfo]} /> */}
+      <GusetMarker />
       {component}
     </article>
   );

frontend/src/pages/HostView.tsx

@@ -6,7 +6,7 @@ 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';
-import { UserMarker } from '@/component/userMarker/UserMarker.tsx';
+import { HostMarker } from '@/component/IconGuide/HostMarker.tsx';
 
 export const HostView = () => {
   const [channelInfo, setChannelInfo] = useState<IChannelInfo>();
@@ -102,7 +102,7 @@ export const HostView = () => {
 
   return (
     <article className="absolute h-full w-screen flex-grow overflow-hidden">
-      <UserMarker userData={guestData} />
+      <HostMarker userData={guestData} />
       {component}
     </article>
   );