[FE][Feat] #280 : GuestView 수정

frontend/src/pages/AddChannel.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect } from 'react';
+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';
@@ -33,8 +33,8 @@ 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);
 
   /**
@@ -58,8 +58,8 @@ export const AddChannel = () => {
     const newUser: IUser = {
       id: users.length + 1,
       name: `사용자${users.length + 1}`,
-      start_location: { lat: 0, lng: 0 }, // 초기값으로 빈 좌표
-      end_location: { lat: 0, lng: 0 }, // 초기값으로 빈 좌표
+      start_location: { title: '', lat: 0, lng: 0 }, // 초기값으로 빈 좌표
+      end_location: { title: '', lat: 0, lng: 0 }, // 초기값으로 빈 좌표
       path: [], // 초기값으로 빈 배열
       marker_style: { color: '' }, // 초기값으로 빈 문자열
     };
@@ -104,13 +104,17 @@ export const AddChannel = () => {
         name: `사용자${index + 1}`,
       }));
     setUsers(updatedUsers);
-    localStorage.setItem('users', JSON.stringify(updatedUsers));
+  };
+
+  const handleChangeChannelName = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChannelName(event.target.value);
   };
 
   useEffect(() => {
     setFooterTitle('제작 완료');
     setFooterTransparency(false);
     setFooterActive(buttonActiveType.PASSIVE);
+    console.log(users);
   }, []);
 
   useEffect(() => {
@@ -127,7 +131,11 @@ export const AddChannel = () => {
   return (
     <main className="flex h-full w-full flex-col items-center px-8 py-16">
       <Outlet />
-      <InputBox placeholder="경로 이름을 입력해주세요. ex) 아들 집 가는 길" />
+      <InputBox
+        placeholder="경로 이름을 입력해주세요. ex) 아들 집 가는 길"
+        onChange={handleChangeChannelName}
+        value={channelName}
+      />
       <Divider />
       <section className="w-full space-y-4">
         {users.map(user => (
@@ -148,7 +156,7 @@ export const AddChannel = () => {
         <section className="flex w-full justify-end">
           <button
             onClick={addUser}
-            className="bg-grayscale-25 border-gray-75 h-8 w-64 rounded border p-2 text-xs"
+            className="bg-grayscale-25 border-gray-75 font-nomal mr-8 h-8 w-64 rounded border p-2 text-xs"
           >
             사용자 추가
           </button>

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 { UserMarker } from '@/component/userMarker/UserMarker.tsx';
 
 export const GuestView = () => {
   const [guestInfo, setGuestInfo] = useState<IGuest>({
@@ -23,8 +23,8 @@ export const GuestView = () => {
   const transformTypeGuestEntityToIGuest = (props: guestEntity): IGuest => {
     return {
       id: props.id ?? '',
-      // name: props.name ?? '',
-      name: '현재 내 위치',
+      name: props.name ?? '',
+      // name: '현재 내 위치',
       startPoint: {
         lat: props.start_location?.lat ?? 0,
         lng: props.start_location?.lng ?? 0,
@@ -73,7 +73,7 @@ export const GuestView = () => {
 
   return (
     <article className="absolute h-full w-screen flex-grow overflow-hidden">
-      <UserMarker userData={[guestInfo]} />
+      {/* <UserMarker userData={[guestInfo]} /> */}
       {component}
     </article>
   );