From 0e0d50c27099c25f6fa1dded705c52b9faf217b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= <dy9623@naver.com>
Date: Tue, 26 Nov 2024 16:06:51 +0900
Subject: [PATCH 1/3] =?UTF-8?q?[FE][Fix]=20#257=20:=20=EC=BD=98=EC=86=94?=
 =?UTF-8?q?=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/component/searchbox/SearchBox.tsx             | 3 +--
 frontend/src/component/tooldescription/ToolDescription.tsx | 2 +-
 frontend/src/pages/AddChannel.tsx                          | 1 -
 frontend/src/pages/DrawRoute.tsx                           | 1 -
 4 files changed, 2 insertions(+), 5 deletions(-)

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/pages/AddChannel.tsx b/frontend/src/pages/AddChannel.tsx
index 22072bad..14e53fdc 100644
--- a/frontend/src/pages/AddChannel.tsx
+++ b/frontend/src/pages/AddChannel.tsx
@@ -114,7 +114,6 @@ export const AddChannel = () => {
     setFooterTitle('제작 완료');
     setFooterTransparency(false);
     setFooterActive(buttonActiveType.PASSIVE);
-    console.log(users);
   }, []);
 
   useEffect(() => {
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) {

From 19c7c43f0c770b393c12576c98e25e67a718f152 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= <dy9623@naver.com>
Date: Tue, 26 Nov 2024 17:03:17 +0900
Subject: [PATCH 2/3] =?UTF-8?q?[FE][Feat]=20#241=20:=20createChannelAPI=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/dto/channel.dto.ts           | 10 ++++-
 .../routebutton/RouteResultButton.tsx         |  2 +-
 frontend/src/pages/AddChannel.tsx             | 44 ++++++++++++++++++-
 3 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/frontend/src/api/dto/channel.dto.ts b/frontend/src/api/dto/channel.dto.ts
index 58150eeb..4cd1031b 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;
@@ -15,7 +23,7 @@ export class guestEntity {
 
   end_location: locationEntity | undefined;
 
-  path: locationEntity[] | undefined;
+  path: pathLocationEntity[] | undefined;
 
   marker_style: guestMarkerStyleEntity | undefined;
 }
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/pages/AddChannel.tsx b/frontend/src/pages/AddChannel.tsx
index 14e53fdc..c27b8c6e 100644
--- a/frontend/src/pages/AddChannel.tsx
+++ b/frontend/src/pages/AddChannel.tsx
@@ -6,6 +6,8 @@ import { Outlet } 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,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);
+  const { setFooterTitle, setFooterTransparency, setFooterActive, footerOption, setFooterOnClick } =
+    useContext(FooterContext);
 
   /**
    * 사용자 추가 함수
@@ -127,6 +130,45 @@ 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);
+    }
+  };
+
+  useEffect(() => {
+    setFooterOnClick(() => {
+      createChannelAPI();
+    });
+  }, [footerOption.active, channelName]); // channelName이 변경될 때마다 실행
+
   return (
     <main className="flex h-full w-full flex-col items-center px-8 py-16">
       <Outlet />

From a31703d161f69f8c5e3b9c97483ea05af9e64f7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= <dy9623@naver.com>
Date: Tue, 26 Nov 2024 17:15:19 +0900
Subject: [PATCH 3/3] =?UTF-8?q?[FE][Feat]=20#241=20:=20API=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C=20=EC=8B=9C=20=EB=A9=94=EC=9D=B8=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/AddChannel.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/AddChannel.tsx b/frontend/src/pages/AddChannel.tsx
index c27b8c6e..1eb5111f 100644
--- a/frontend/src/pages/AddChannel.tsx
+++ b/frontend/src/pages/AddChannel.tsx
@@ -2,7 +2,7 @@ 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';
@@ -37,8 +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, footerOption, setFooterOnClick } =
-    useContext(FooterContext);
+  const {
+    setFooterTitle,
+    setFooterTransparency,
+    setFooterActive,
+    footerOption,
+    setFooterOnClick,
+    resetFooterContext,
+  } = useContext(FooterContext);
+  const navigate = useNavigate();
 
   /**
    * 사용자 추가 함수
@@ -162,10 +169,14 @@ export const AddChannel = () => {
       console.error('채널 생성 실패:', error);
     }
   };
-
+  const goToMainPage = () => {
+    navigate('/');
+    resetFooterContext();
+  };
   useEffect(() => {
     setFooterOnClick(() => {
       createChannelAPI();
+      goToMainPage();
     });
   }, [footerOption.active, channelName]); // channelName이 변경될 때마다 실행