[FE][Feat] #114 : Header 통신해서 드랍다운에 표시하는 기능 구현

frontend/src/component/layout/header/LayoutHeader.tsx

@@ -1,21 +1,23 @@
+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">
       <Header.MainLayout
         leftButton={headerOption.leftButton}
         rightButton={headerOption.rightButton}
         title={`${params.user || ''}${headerOption.title}`}
-        // items={headerOption.items} 이부분 어떻게 해야할까요?
+        items={headerContext.headerOption.items}
       />
       {headerOption.subtitle && (
         <Header.Subtitle>

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 />;
+};

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;
+}