[FE][Feat] #241 : createChannel API 연동 성공

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

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">

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"
             >

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>

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 />

frontend/src/pages/DrawRoute.tsx

@@ -75,7 +75,6 @@ export const DrawRoute = () => {
   }, []);
 
   useEffect(() => {
-    console.log(currentUser);
     if (currentUser) {
       setFooterOnClick(() => {
         if (currentUser) {