From c497dec5a96fe85287fed8357770b0560e3356ca Mon Sep 17 00:00:00 2001
From: effozen <ashgrayblue0@gmail.com>
Date: Mon, 25 Nov 2024 19:01:51 +0900
Subject: [PATCH] =?UTF-8?q?[FE][Feat]=20#114=20:=20Header=20=ED=86=B5?=
 =?UTF-8?q?=EC=8B=A0=ED=95=B4=EC=84=9C=20=EB=93=9C=EB=9E=8D=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=EC=97=90=20=ED=91=9C=EC=8B=9C=ED=95=98=EB=8A=94=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/layout/header/LayoutHeader.tsx  |  6 ++-
 frontend/src/pages/HostView.tsx               | 48 ++++++++++++++++++-
 frontend/src/types/channel.types.ts           | 22 +++++++++
 3 files changed, 73 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/types/channel.types.ts

diff --git a/frontend/src/component/layout/header/LayoutHeader.tsx b/frontend/src/component/layout/header/LayoutHeader.tsx
index 1c0487f8..36d08de9 100644
--- a/frontend/src/component/layout/header/LayoutHeader.tsx
+++ b/frontend/src/component/layout/header/LayoutHeader.tsx
@@ -1,13 +1,15 @@
+import { useContext } from 'react';
 import { Header } from '@/component/header/Header';
 import { NoticeText } from '@/component/text/NoticeText';
 import { useLocation, useParams } from 'react-router-dom';
 import { getHeaderInfo } from '@/utils/mapping/HeaderMapping';
+import { HeaderContext } from '@/component/layout/header/LayoutHeaderProvider.tsx';
 
 export const LayoutHeader = () => {
-  // const { headerOption } = useContext(HeaderContext);
   const params = useParams<Record<string, string | undefined>>();
   const urlPath = useLocation();
   const headerOption = getHeaderInfo(urlPath.pathname);
+  const headerContext = useContext(HeaderContext);
 
   return (
     <Header className="z-4000">
@@ -15,7 +17,7 @@ export const LayoutHeader = () => {
         leftButton={headerOption.leftButton}
         rightButton={headerOption.rightButton}
         title={`${params.user || ''}${headerOption.title}`}
-        // items={headerOption.items} 이부분 어떻게 해야할까요?
+        items={headerContext.headerOption.items}
       />
       {headerOption.subtitle && (
         <Header.Subtitle>
diff --git a/frontend/src/pages/HostView.tsx b/frontend/src/pages/HostView.tsx
index bf6a93bc..ea188923 100644
--- a/frontend/src/pages/HostView.tsx
+++ b/frontend/src/pages/HostView.tsx
@@ -1 +1,47 @@
-export const HostView = () => <>Hello</>;
+import { HeaderContext } from '@/component/layout/header/LayoutHeaderProvider';
+import { useContext, useEffect, useState } from 'react';
+import { CanvasWithMap } from '@/component/canvas/CanvasWithMap.tsx';
+import { IUserChannelInfo } from '@/types/channel.types.ts';
+import { getChannelInfo } from '@/api/channel.api.ts';
+import { useLocation } from 'react-router-dom';
+
+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 />;
+};
diff --git a/frontend/src/types/channel.types.ts b/frontend/src/types/channel.types.ts
new file mode 100644
index 00000000..c96961e0
--- /dev/null
+++ b/frontend/src/types/channel.types.ts
@@ -0,0 +1,22 @@
+export interface ILocation {
+  lat: number | undefined;
+  lng: number | undefined;
+}
+
+export interface IGuestMarkerStyle {
+  color: string | undefined;
+}
+
+export interface IGuest {
+  name: string | undefined;
+  start_location: ILocation | undefined;
+  end_location: ILocation | undefined;
+  path: ILocation[] | undefined;
+  marker_style: IGuestMarkerStyle | undefined;
+}
+
+export interface IUserChannelInfo {
+  host_id: string | undefined;
+  name: string | undefined;
+  guests: IGuest[] | undefined;
+}