Merge branch 'frontend' into feature/fe/#280-guestView-updated

boostcampwm-2024 · Nov 26, 2024 · 7cc6400 · 7cc6400
2 parents 463464d + 6fda46b
commit 7cc6400
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 14 deletions.
diff --git 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/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;
@@ -17,7 +25,7 @@ export class guestEntity {
 
   end_location: locationEntity | undefined;
 
-  path: locationEntity[] | undefined;
+  path: pathLocationEntity[] | undefined;
 
   marker_style: guestMarkerStyleEntity | undefined;
 }

diff --git a/frontend/src/component/common/loadingSpinner/LoadingSpinner.tsx 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/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
@@ -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
@@ -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
@@ -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
@@ -75,7 +75,6 @@ export const DrawRoute = () => {
   }, []);
 
   useEffect(() => {
-    console.log(currentUser);
     if (currentUser) {
       setFooterOnClick(() => {
         if (currentUser) {

diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx
@@ -12,6 +12,7 @@ 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';
+import { LoadingSpinner } from '@/component/common/loadingSpinner/LoadingSpinner.tsx';
 
 export const Main = () => {
   const { setFooterTitle, setFooterTransparency, setFooterOnClick, setFooterActive } =
@@ -125,13 +126,12 @@ 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>