[FE][Feat] #241 : createChannelAPI 연동

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