diff --git a/frontend/src/App.css b/frontend/src/App.css
index e6a56888..8aab6cad 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -44,3 +44,22 @@
   -ms-user-select:none;
   user-select:none
 }
+
+.spinner {
+  width: 3rem;
+  height: 3rem;
+  border: 0.5rem solid rgba(0, 0, 0, 0.1);
+  border-top: 0.5rem solid #1c58b3;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 10px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/frontend/src/api/channel.api.ts b/frontend/src/api/channel.api.ts
index de9d6fe4..1907acdc 100644
--- a/frontend/src/api/channel.api.ts
+++ b/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 => {
diff --git a/frontend/src/api/dto/auth.dto.ts b/frontend/src/api/dto/auth.dto.ts
index 528a074a..9d63e921 100644
--- a/frontend/src/api/dto/auth.dto.ts
+++ b/frontend/src/api/dto/auth.dto.ts
@@ -1,7 +1,11 @@
 export class LoginResEntity {
-  token: string | undefined;
-
-  userId: string | undefined;
+  data: {
+    token: string | undefined;
+    userId: string | undefined;
+  } = {
+    token: undefined,
+    userId: undefined,
+  };
 }
 
 export class RegisterResEntity {
diff --git a/frontend/src/api/dto/channel.dto.ts b/frontend/src/api/dto/channel.dto.ts
index 58150eeb..dcc67f64 100644
--- a/frontend/src/api/dto/channel.dto.ts
+++ b/frontend/src/api/dto/channel.dto.ts
@@ -1,4 +1,12 @@
 export class locationEntity {
+  title: string | undefined;
+
+  lat: number | undefined;
+
+  lng: number | undefined;
+}
+
+export class pathLocationEntity {
   lat: number | undefined;
 
   lng: number | undefined;
@@ -9,13 +17,15 @@ export class guestMarkerStyleEntity {
 }
 
 export class guestEntity {
+  id: string | undefined;
+
   name: string | undefined;
 
   start_location: locationEntity | undefined;
 
   end_location: locationEntity | undefined;
 
-  path: locationEntity[] | undefined;
+  path: pathLocationEntity[] | undefined;
 
   marker_style: guestMarkerStyleEntity | undefined;
 }
@@ -52,8 +62,20 @@ export class channelListEntity {
   name: string | undefined;
 
   generated_at: string | undefined;
+
+  guest_count: number | undefined;
 }
 
 export class getUserChannelsResEntity {
   channels: channelListEntity[] | undefined;
 }
+
+export class getChannelResEntity {
+  id: string | undefined;
+
+  name: string | undefined;
+
+  host_id: string | undefined;
+
+  guests: guestEntity[] | undefined;
+}
diff --git a/frontend/src/component/authmodal/AuthModal.tsx b/frontend/src/component/authmodal/AuthModal.tsx
index e99edf4b..dd565f01 100644
--- a/frontend/src/component/authmodal/AuthModal.tsx
+++ b/frontend/src/component/authmodal/AuthModal.tsx
@@ -28,6 +28,7 @@ export const AuthModal = (props: IAuthModalProps) => {
   });
 
   const [modalType, setModalType] = useState<'login' | 'register'>(props.type);
+  const [error, setError] = useState('');
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
@@ -46,42 +47,46 @@ export const AuthModal = (props: IAuthModalProps) => {
   };
 
   const switchToRegister = () => {
+    setError('');
     setModalType('register');
   };
 
   const switchToLogin = () => {
+    setError('');
     setModalType('login');
   };
 
   const handleLoginClick = () => {
     doLogin(loginData.id, loginData.pw)
       .then(el => {
-        if (el.data?.token && el.data?.userId) {
-          saveLocalData(AppConfig.KEYS.LOGIN_TOKEN, el.data.token);
-          saveLocalData(AppConfig.KEYS.LOGIN_USER, el.data.userId);
+        if (el.data?.data.token && el.data?.data.userId) {
+          saveLocalData(AppConfig.KEYS.LOGIN_TOKEN, el.data?.data.token);
+          saveLocalData(AppConfig.KEYS.LOGIN_USER, el.data?.data.userId);
         }
+        setError('');
+        props.onClose();
+
         window.location.reload();
       })
       .catch(() => {
-        alert('아이디와 비밀번호를 다시 확인해주세요.');
+        setError('아이디 혹은 비밀번호를 다시 확인해주세요.');
       });
   };
 
   const handleSignUpClick = () => {
     if (registerData.pw !== registerData.confirmPw) {
-      alert('비밀번호가 일치하지 않습니다.');
+      setError('비밀번호가 일치하지 않습니다.');
       return;
     }
     doRegister(registerData.id, registerData.name, registerData.pw, registerData.email)
       .then(el => {
         if (el.data) {
-          alert('회원가입에 성공했습니다. 로그인해주세요.');
           switchToLogin();
         }
       })
       .catch(() => {
-        alert(
-          '회원가입에 실패했습니다. 다시 확인해주세요.\nid는 4자 이상, 비밀번호는 6자리 이상이어야 합니다.',
+        setError(
+          `회원가입에 실패했습니다. 다시 확인해주세요.\nid는 4자 이상, 비밀번호는 6자리 이상이어야 합니다.`,
         );
       });
   };
@@ -105,6 +110,7 @@ export const AuthModal = (props: IAuthModalProps) => {
             value={loginData.pw}
             onChange={handleChange}
           />
+          {error ? <p className="pt-2 text-sm font-normal text-red-500">{error}</p> : ''}
           <Modal.Footer
             text="로그인"
             onClick={handleLoginClick}
@@ -150,6 +156,8 @@ export const AuthModal = (props: IAuthModalProps) => {
             value={registerData.confirmPw}
             onChange={handleChange}
           />
+          {error ? <p className="pt-2 text-sm font-normal text-red-500">{error}</p> : ''}
+
           <Modal.Footer
             text="회원가입"
             onClick={handleSignUpClick}
diff --git a/frontend/src/component/bottomsheet/BottomSheet.tsx b/frontend/src/component/bottomsheet/BottomSheet.tsx
index 661fa928..83845649 100644
--- a/frontend/src/component/bottomsheet/BottomSheet.tsx
+++ b/frontend/src/component/bottomsheet/BottomSheet.tsx
@@ -1,53 +1,86 @@
-import React from 'react';
-import { useBottomSheet } from '@/hooks/useBottomSheet';
+import React, { useState, useRef } from 'react';
 
 interface IBottomSheetProps {
   minHeight: number;
   maxHeight: number;
+  backgroundColor: string;
   children: React.ReactNode;
 }
 
-/**
- * `BottomSheet` 컴포넌트는 하단에서 올라오는 시트 형태의 UI를 제공합니다.
- *
- * @param {IBottomSheetProps} props - `children`을 포함한 컴포넌트 속성
- * @param {number} props.minHeight - Bottom Sheet의 최소 높이를 화면 비율로 나타냅니다 (0.0 - 1.0).
- * @param {number} props.maxHeight - Bottom Sheet의 최대 높이를 화면 비율로 나타냅니다 (0.0 - 1.0).
- * @param {ReactNode} props.children - Bottom Sheet 내부에 렌더링할 콘텐츠입니다.
- * @returns {ReactNode} - 하단 시트를 렌더링합니다.
- *
- * @remarks
- * - 드래그 동작을 통해 시트를 열고 닫을 수 있습니다.
- * - `useBottomSheet` 훅을 사용하여 위치 및 드래그 동작을 관리합니다.
- * - `minHeight`는 Bottom Sheet가 닫힌 상태의 높이 비율을 나타냅니다.
- * - `maxHeight`는 Bottom Sheet가 열린 상태의 최대 높이 비율을 나타냅니다.
- *
- * @example
- * ```tsx
- * <BottomSheet minHeight={0.5} maxHeight={0.85}>
- *   <div className="p-4">
- *     <h2>예시 콘텐츠</h2>
- *     <p>BottomSheet의 children</p>
- *   </div>
- * </BottomSheet>
- * ```
- */
-
-export const BottomSheet = (props: IBottomSheetProps) => {
-  const { sheet } = useBottomSheet({ minHeight: props.minHeight, maxHeight: props.maxHeight });
+export const BottomSheet = ({
+  minHeight,
+  maxHeight,
+  backgroundColor,
+  children,
+}: IBottomSheetProps) => {
+  const [sheetHeight, setSheetHeight] = useState(minHeight);
+  const startY = useRef(0);
+  const startHeight = useRef(minHeight);
+
+  const handleStart = (y: number) => {
+    startY.current = y;
+    startHeight.current = sheetHeight;
+  };
+
+  const handleMove = (y: number) => {
+    const deltaY = startY.current - y;
+    const newHeight = startHeight.current + deltaY / window.innerHeight;
+    setSheetHeight(Math.max(minHeight, Math.min(maxHeight, newHeight)));
+  };
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    handleStart(e.touches[0].clientY);
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    handleMove(e.touches[0].clientY);
+  };
+
+  const handleMouseMove = (e: MouseEvent) => {
+    handleMove(e.clientY);
+  };
+
+  const handleMouseUp = () => {
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', handleMouseUp);
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    handleStart(e.clientY);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+  };
+
+  const handleClose = () => {
+    setSheetHeight(minHeight);
+  };
 
   return (
     <div
-      ref={sheet}
-      className="bg-grayscale-25 shadow-dark fixed left-0 right-0 z-[1000] flex h-full flex-col rounded-t-lg transition-transform duration-700"
+      className="fixed bottom-0 left-0 right-0 z-50 rounded-t-2xl bg-white shadow-lg transition-transform duration-700 ease-out"
       style={{
-        top: `calc(100% - ${props.minHeight * 100}%)`,
+        backgroundColor: `${backgroundColor}`,
+        height: `${sheetHeight * 100}vh`,
+        transform: `translateY(${(1 - sheetHeight) * 100}%)`,
       }}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onMouseDown={handleMouseDown}
     >
       <div className="flex items-center justify-center pb-1 pt-2">
         <div className="h-1.5 w-12 rounded-full bg-gray-300" />
       </div>
-      {props.children}
+      <div className="flex items-center justify-end pb-1 pr-5 pt-2">
+        <button
+          type="button"
+          className="bg-grayscale-180 h-[30px] w-[30px] rounded-full text-lg font-semibold text-gray-500"
+          onClick={handleClose}
+        >
+          <p className="text-grayscale-850">✕</p>
+        </button>
+      </div>
+
+      <div className="h-full overflow-auto">{children}</div>
     </div>
   );
 };
diff --git a/frontend/src/component/common/loadingSpinner/LoadingSpinner.tsx b/frontend/src/component/common/loadingSpinner/LoadingSpinner.tsx
new file mode 100644
index 00000000..a39e2c16
--- /dev/null
+++ b/frontend/src/component/common/loadingSpinner/LoadingSpinner.tsx
@@ -0,0 +1,8 @@
+export const LoadingSpinner = () => {
+  return (
+    <section className="flex h-full flex-col items-center justify-center gap-2 text-xl text-gray-700">
+      <div className="spinner" />
+      Loading map data...
+    </section>
+  );
+};
diff --git a/frontend/src/component/content/Content.tsx b/frontend/src/component/content/Content.tsx
index 3ac6cf9a..5f241726 100644
--- a/frontend/src/component/content/Content.tsx
+++ b/frontend/src/component/content/Content.tsx
@@ -3,9 +3,9 @@ import { useNavigate } from 'react-router-dom';
 
 interface IContentProps {
   title: string;
-  time: string;
   person: number;
   link: string;
+  time: string;
 }
 
 /**
@@ -30,6 +30,16 @@ interface IContentProps {
  */
 
 export const Content = (props: IContentProps) => {
+  const formattedDate = new Date(props.time).toLocaleDateString('ko-KR', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  });
+
+  const formattedTime = new Date(props.time).toLocaleTimeString('ko-KR', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
   const navigate = useNavigate();
   return (
     <div
@@ -41,8 +51,9 @@ export const Content = (props: IContentProps) => {
       <div>
         <header className="border-gray-200 pb-1 text-lg">{props.title}</header>
         <section className="flex items-center text-sm leading-5 text-gray-500">
-          <time className="mr-4">시간</time>
-          <span className="mr-6">{props.time}</span>
+          <time className="mr-4">
+            {formattedDate} {formattedTime}
+          </time>
           {props.person > 0 && (
             <>
               <MdGroup className="mr-2 h-5 w-5" aria-label="인원수 아이콘" />
diff --git a/frontend/src/component/routebutton/RouteResultButton.tsx b/frontend/src/component/routebutton/RouteResultButton.tsx
index 59cf11e7..f064f030 100644
--- a/frontend/src/component/routebutton/RouteResultButton.tsx
+++ b/frontend/src/component/routebutton/RouteResultButton.tsx
@@ -29,7 +29,7 @@ export const RouteResultButton = (props: IRouteResultButtonProps) => {
           )}
         >
           <div className="h-full w-24 overflow-hidden text-ellipsis whitespace-nowrap rounded border-2 px-2 py-[16px] text-start text-xs font-normal">
-            {props.user.end_location.title}
+            {props.user.start_location.title}
           </div>
           <GoArrowRight className="mx-2 h-8 w-8" />
           <div className="h-full w-24 overflow-hidden text-ellipsis whitespace-nowrap rounded border-2 px-2 py-[16px] text-start text-xs font-normal">
diff --git a/frontend/src/component/searchbox/SearchBox.tsx b/frontend/src/component/searchbox/SearchBox.tsx
index 95fd8a4b..8d5d85a8 100644
--- a/frontend/src/component/searchbox/SearchBox.tsx
+++ b/frontend/src/component/searchbox/SearchBox.tsx
@@ -79,7 +79,6 @@ export const SearchBox = (props: ISearchBoxProps) => {
         lat: parseFloat(item.mapy) / 1e7,
         lng: parseFloat(item.mapx) / 1e7,
       }));
-      console.log(data);
       setSearchResults(formattedResults); // 검색 결과 상태 업데이트
     } catch (err) {
       setError(err instanceof Error ? err.message : '알 수 없는 오류');
@@ -177,7 +176,7 @@ export const SearchBox = (props: ISearchBoxProps) => {
           {searchResults.map(result => (
             <button
               type="button"
-              key={result.roadAddress}
+              key={`${result.lat}-${result.lng}`}
               onClick={() => handleSelectResult(result)}
               className="flex flex-col items-start gap-2 p-2"
             >
diff --git a/frontend/src/component/tooldescription/ToolDescription.tsx b/frontend/src/component/tooldescription/ToolDescription.tsx
index d0235825..a0aa24d4 100644
--- a/frontend/src/component/tooldescription/ToolDescription.tsx
+++ b/frontend/src/component/tooldescription/ToolDescription.tsx
@@ -10,7 +10,7 @@ export const ToolDescription = () => {
     // 조건부 렌더링: description이 빈 문자열이 아니면 렌더링
     description ? (
       <div className="bg-blueGray-200 absolute bottom-6 ml-6 h-9 w-64 rounded-lg bg-opacity-[0.5]">
-        <p className="flex h-full w-full items-center justify-center whitespace-pre-line text-center text-xs text-white text-opacity-100">
+        <p className="flex h-full w-full select-none items-center justify-center whitespace-pre-line text-center text-xs text-white text-opacity-100">
           {description}
         </p>
       </div>
diff --git a/frontend/src/lib/types/canvasInterface.ts b/frontend/src/lib/types/canvasInterface.ts
index 924592a5..15445017 100644
--- a/frontend/src/lib/types/canvasInterface.ts
+++ b/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 {
diff --git a/frontend/src/pages/AddChannel.tsx b/frontend/src/pages/AddChannel.tsx
index 22072bad..1eb5111f 100644
--- a/frontend/src/pages/AddChannel.tsx
+++ b/frontend/src/pages/AddChannel.tsx
@@ -2,10 +2,12 @@ import { useContext, useEffect, useState } from 'react';
 import { HiMiniInformationCircle } from 'react-icons/hi2';
 import { FooterContext } from '@/component/layout/footer/LayoutFooterProvider';
 import { RouteSettingButton } from '@/component/routebutton/RouteSettingButton';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useNavigate } from 'react-router-dom';
 import { RouteResultButton } from '@/component/routebutton/RouteResultButton';
 import { IUser, UserContext } from '@/context/UserContext';
 import { buttonActiveType } from '@/component/layout/enumTypes';
+import { createChannelReqEntity } from '@/api/dto/channel.dto';
+import { createChannel } from '@/api/channel.api';
 import { InputBox } from '../component/common/InputBox';
 
 /**
@@ -35,7 +37,15 @@ const Divider = () => <hr className="my-6 w-full border-gray-300" />;
 export const AddChannel = () => {
   const [channelName, setChannelName] = useState<string>('');
   const { users, setUsers } = useContext(UserContext);
-  const { setFooterTitle, setFooterTransparency, setFooterActive } = useContext(FooterContext);
+  const {
+    setFooterTitle,
+    setFooterTransparency,
+    setFooterActive,
+    footerOption,
+    setFooterOnClick,
+    resetFooterContext,
+  } = useContext(FooterContext);
+  const navigate = useNavigate();
 
   /**
    * 사용자 추가 함수
@@ -114,7 +124,6 @@ export const AddChannel = () => {
     setFooterTitle('제작 완료');
     setFooterTransparency(false);
     setFooterActive(buttonActiveType.PASSIVE);
-    console.log(users);
   }, []);
 
   useEffect(() => {
@@ -128,6 +137,49 @@ export const AddChannel = () => {
     }
   }, [users, setFooterActive]); // users가 변경될 때마다 실행
 
+  const createChannelAPI = async () => {
+    try {
+      const channelData: createChannelReqEntity = {
+        name: channelName,
+        host_id: 'jhi2359',
+        guests: users.map(user => ({
+          name: user.name,
+          start_location: {
+            title: user.start_location.title,
+            lat: user.start_location.lat,
+            lng: user.start_location.lng,
+          },
+          end_location: {
+            title: user.end_location.title,
+            lat: user.end_location.lat,
+            lng: user.end_location.lng,
+          },
+          path: user.path.map(p => ({
+            lat: p.lat,
+            lng: p.lng,
+          })),
+          marker_style: user.marker_style,
+        })),
+      };
+
+      // createChannel 호출
+      const response = await createChannel(channelData);
+      console.log('채널 생성 성공:', response);
+    } catch (error) {
+      console.error('채널 생성 실패:', error);
+    }
+  };
+  const goToMainPage = () => {
+    navigate('/');
+    resetFooterContext();
+  };
+  useEffect(() => {
+    setFooterOnClick(() => {
+      createChannelAPI();
+      goToMainPage();
+    });
+  }, [footerOption.active, channelName]); // channelName이 변경될 때마다 실행
+
   return (
     <main className="flex h-full w-full flex-col items-center px-8 py-16">
       <Outlet />
diff --git a/frontend/src/pages/DrawRoute.tsx b/frontend/src/pages/DrawRoute.tsx
index 502036b6..a997e394 100644
--- a/frontend/src/pages/DrawRoute.tsx
+++ b/frontend/src/pages/DrawRoute.tsx
@@ -75,7 +75,6 @@ export const DrawRoute = () => {
   }, []);
 
   useEffect(() => {
-    console.log(currentUser);
     if (currentUser) {
       setFooterOnClick(() => {
         if (currentUser) {
diff --git a/frontend/src/pages/HostView.tsx b/frontend/src/pages/HostView.tsx
index ffe2e09d..b91175b7 100644
--- a/frontend/src/pages/HostView.tsx
+++ b/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>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx
index b0c787e0..073bd1da 100644
--- a/frontend/src/pages/Main.tsx
+++ b/frontend/src/pages/Main.tsx
@@ -1,50 +1,49 @@
 import { Fragment, useContext, useEffect, useState } from 'react';
-import { MdFormatListBulleted } from 'react-icons/md';
+import { MdFormatListBulleted, MdLogout } from 'react-icons/md';
 import { FooterContext } from '@/component/layout/footer/LayoutFooterProvider';
 import { useNavigate } from 'react-router-dom';
 import { buttonActiveType } from '@/component/layout/enumTypes';
+import { loadLocalData, saveLocalData, removeLocalData } from '@/utils/common/manageLocalData.ts';
+import { AuthModal } from '@/component/authmodal/AuthModal';
+import { getUserChannels } from '@/api/channel.api.ts';
 import { BottomSheet } from '@/component/bottomsheet/BottomSheet.tsx';
 import { Content } from '@/component/content/Content.tsx';
-import { loadLocalData, saveLocalData } from '@/utils/common/manageLocalData.ts';
 import { AppConfig } from '@/lib/constants/commonConstants.ts';
 import { v4 as uuidv4 } from 'uuid';
 import { getUserLocation } from '@/hooks/getUserLocation.ts';
 import { MapCanvasForView } from '@/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx';
-
-const contentData = [
-  {
-    id: '1',
-    title: '아들네 집으로',
-    time: '0시간 34분',
-    person: 2,
-    link: '/channel/123/guest/456',
-  },
-  {
-    id: '2',
-    title: '손자네 집으로',
-    time: '2시간 32분',
-    person: 0,
-    link: '/channel/123/guest/456',
-  },
-  {
-    id: '3',
-    title: '마을회관으로',
-    time: '0시간 12분',
-    person: 1,
-    link: '/channel/123/guest/456',
-  },
-];
+import { LoadingSpinner } from '@/component/common/loadingSpinner/LoadingSpinner.tsx';
 
 export const Main = () => {
   const { setFooterTitle, setFooterTransparency, setFooterOnClick, setFooterActive } =
     useContext(FooterContext);
   const { lat, lng, error } = getUserLocation();
   const [otherLocations, setOtherLocations] = useState<any[]>([]);
+  const MIN_HEIGHT = 0.35;
+  const MAX_HEIGHT = 0.9;
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
+  const [showLoginModal, setShowLoginModal] = useState<boolean>(false);
+  const [channels, setChannels] = useState<any[]>([]);
+
+  useEffect(() => {
+    const token = loadLocalData(AppConfig.KEYS.LOGIN_TOKEN);
+    setIsLoggedIn(!!token);
+
+    if (token) {
+      const userId = loadLocalData(AppConfig.KEYS.LOGIN_USER);
+      if (userId) {
+        getUserChannels(userId)
+          .then(response => {
+            if (response?.data?.channels) setChannels(response.data.channels);
+          })
+          .catch(err => {
+            console.error('채널 찾기 실패 : ', err);
+          });
+      }
+    }
+  }, []);
   const navigate = useNavigate();
-  const MIN_HEIGHT = 0.5;
-  const MAX_HEIGHT = 0.8;
 
-  // eslint-disable-next-line consistent-return
   useEffect(() => {
     if (lat && lng) {
       if (!loadLocalData(AppConfig.KEYS.BROWSER_TOKEN)) {
@@ -73,6 +72,7 @@ export const Main = () => {
       };
       return () => ws.close();
     }
+    return undefined;
   }, [lat, lng]);
   const goToAddChannel = () => {
     navigate('/add-channel');
@@ -83,12 +83,35 @@ export const Main = () => {
     setFooterTransparency(false);
     setFooterActive(buttonActiveType.ACTIVE);
   }, []);
+
+  const handleLoginRequest = () => {
+    setShowLoginModal(true);
+  };
+
+  const handleCloseLoginModal = () => {
+    setShowLoginModal(false);
+    setIsLoggedIn(true);
+  };
+
+  const handleLogout = () => {
+    removeLocalData(AppConfig.KEYS.LOGIN_TOKEN);
+    removeLocalData(AppConfig.KEYS.LOGIN_USER);
+    setIsLoggedIn(!isLoggedIn);
+  };
+
+  const isUserLoggedIn = loadLocalData(AppConfig.KEYS.LOGIN_TOKEN) !== null;
+
   return (
     <div className="flex flex-col overflow-hidden">
       <header className="absolute left-0 right-0 top-0 z-10 flex p-4">
         <button type="button" className="text-gray-700">
           <MdFormatListBulleted size={24} />
         </button>
+        {isUserLoggedIn && (
+          <button type="button" className="ml-auto text-gray-700" onClick={handleLogout}>
+            <MdLogout size={24} />
+          </button>
+        )}
       </header>
 
       <main className="absolute h-full w-screen flex-grow overflow-hidden">
@@ -103,25 +126,47 @@ export const Main = () => {
               otherLocations={otherLocations}
             />
           ) : (
-            <section className="flex h-full items-center justify-center">
-              Loading map data...
-            </section>
+            <LoadingSpinner />
           )
         ) : (
-          <section className="flex h-full items-center justify-center">
-            {error ? `Error: ${error}` : 'Loading'}
+          <section className="flex h-full flex-col items-center justify-center gap-2 text-xl text-gray-700">
+            <LoadingSpinner />
+            {error ? `Error: ${error}` : 'Loading map data...'}
           </section>
         )}
       </main>
 
-      <BottomSheet minHeight={MIN_HEIGHT} maxHeight={MAX_HEIGHT}>
-        {contentData.map(item => (
-          <Fragment key={item.id}>
-            <Content title={item.title} time={item.time} person={item.person} link={item.link} />
-            <hr className="my-2" />
-          </Fragment>
-        ))}
-      </BottomSheet>
+      {isUserLoggedIn ? (
+        <BottomSheet minHeight={MIN_HEIGHT} maxHeight={MAX_HEIGHT} backgroundColor="#FFFFFF">
+          {channels.map(item => (
+            <Fragment key={item.id}>
+              <Content
+                title={item.name}
+                link={item.id}
+                person={item.guest_count}
+                time={item.generated_at}
+              />
+              <hr className="my-2" />
+            </Fragment>
+          ))}
+        </BottomSheet>
+      ) : (
+        <BottomSheet minHeight={MIN_HEIGHT} maxHeight={MAX_HEIGHT} backgroundColor="#F1F1F1F2">
+          <div
+            className="absolute left-1/2 top-[30%] flex -translate-x-1/2 transform cursor-pointer flex-col text-center"
+            onClick={handleLoginRequest}
+          >
+            <div className="rounded-lg p-6">
+              <p className="text-grayscale-175 mb-5 text-lg font-normal">로그인을 진행하여</p>
+              <p className="text-grayscale-175 mb-5 text-lg font-normal">더 많은 기능을</p>
+              <p className="text-grayscale-175 text-lg font-normal">사용해보세요</p>
+            </div>
+          </div>
+        </BottomSheet>
+      )}
+
+      {/* 로그인 모달 */}
+      <AuthModal isOpen={showLoginModal} onClose={handleCloseLoginModal} type="login" />
     </div>
   );
 };
diff --git a/frontend/src/types/channel.types.ts b/frontend/src/types/channel.types.ts
index c96961e0..98ecafb8 100644
--- a/frontend/src/types/channel.types.ts
+++ b/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[];
 }
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 325b5e83..74c5f62d 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -14,9 +14,12 @@ module.exports = {
           75: '#E2E8F0',
           100: '#EDF2F7',
           150: '#AAB6C7',
+          175: '#7A7A7A',
+          180: '#7676801F',
           200: '#6D6D6D',
           400: '#555555',
           800: '#3E3E3E',
+          850: '#3C3C4399',
           900: '#1C1C1C',
         },
         blueGray: {