From 463464d8c3e34591a084e3b95d205ed28aff26f5 Mon Sep 17 00:00:00 2001
From: effozen <ashgrayblue0@gmail.com>
Date: Wed, 27 Nov 2024 00:45:29 +0900
Subject: [PATCH] =?UTF-8?q?[FE][Feat]=20#280=20:=20GuestView=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20=EA=B5=AC=ED=98=84=20=EB=B0=8F=20=EC=A2=8C=ED=91=9C?=
 =?UTF-8?q?=20=EA=B0=80=EC=9D=B4=EB=93=9C=EC=97=90=20=EB=8C=80=ED=95=9C=20?=
 =?UTF-8?q?=EC=83=89=EC=83=81=20=EA=B3=A0=EB=A0=A4=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/icons/{flag.svg => flag2.svg}      |  0
 .../src/component/IconGuide/GuestMarker.tsx   | 33 +++++++++++++++++++
 .../src/component/IconGuide/HostMarker.tsx    | 21 ++++++++++++
 .../src/component/userMarker/UserMarker.tsx   | 21 ------------
 frontend/src/pages/GuestView.tsx              |  4 +--
 frontend/src/pages/HostView.tsx               |  4 +--
 6 files changed, 58 insertions(+), 25 deletions(-)
 rename frontend/public/assets/icons/{flag.svg => flag2.svg} (100%)
 create mode 100644 frontend/src/component/IconGuide/GuestMarker.tsx
 create mode 100644 frontend/src/component/IconGuide/HostMarker.tsx
 delete mode 100644 frontend/src/component/userMarker/UserMarker.tsx

diff --git a/frontend/public/assets/icons/flag.svg b/frontend/public/assets/icons/flag2.svg
similarity index 100%
rename from frontend/public/assets/icons/flag.svg
rename to frontend/public/assets/icons/flag2.svg
diff --git a/frontend/src/component/IconGuide/GuestMarker.tsx b/frontend/src/component/IconGuide/GuestMarker.tsx
new file mode 100644
index 00000000..5759db71
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/frontend/src/component/IconGuide/HostMarker.tsx b/frontend/src/component/IconGuide/HostMarker.tsx
new file mode 100644
index 00000000..54721b7c
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/frontend/src/component/userMarker/UserMarker.tsx b/frontend/src/component/userMarker/UserMarker.tsx
deleted file mode 100644
index 2aeb209b..00000000
--- a/frontend/src/component/userMarker/UserMarker.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { MdLocationOn } from 'react-icons/md';
-import { IGuestData } from '@/types/channel.types.ts';
-
-interface IUserMarkerProps {
-  userData: IGuestData[];
-}
-
-export const UserMarker = (props: IUserMarkerProps) => {
-  return (
-    <div className="z-4000 absolute bottom-8 right-5 w-fit text-base">
-      <ul className="flex flex-col gap-1">
-        {props.userData.map(data => (
-          <li key={data.name} className="flex items-center">
-            <MdLocationOn color={data.markerStyle.color} className="size-5" />
-            {data.name}
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};
diff --git a/frontend/src/pages/GuestView.tsx b/frontend/src/pages/GuestView.tsx
index 5ced4c97..24e4a6c7 100644
--- a/frontend/src/pages/GuestView.tsx
+++ b/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>
   );
diff --git a/frontend/src/pages/HostView.tsx b/frontend/src/pages/HostView.tsx
index c1c2d36e..abdb80a6 100644
--- a/frontend/src/pages/HostView.tsx
+++ b/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>
   );