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

boostcampwm-2024 · Nov 26, 2024 · 93fecd6 · 93fecd6
2 parents 48cc495 + 20f96e6
commit 93fecd6
Show file tree

Hide file tree

Showing 16 changed files with 554 additions and 113 deletions.
diff --git a/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx b/frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { ButtonState } from '@/component/common/enums.ts';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { ButtonState } from '@/component/common/enums';
 import classNames from 'classnames';
 import { MdArrowCircleLeft, MdArrowCircleRight } from 'react-icons/md';
 import { FloatingButton } from '@/component/common/floatingbutton/FloatingButton.tsx';
@@ -9,6 +9,9 @@ import { ICanvasPoint, IMapCanvasProps, IPoint } from '@/lib/types/canvasInterfa
 import { useUndoRedo } from '@/hooks/useUndoRedo.ts';
 import startmarker from '@/assets/startmarker.png';
 import endmarker from '@/assets/endmarker.png';
+import { CurrentUserContext } from '@/context/CurrentUserContext';
+import { ToolDescription } from '@/component/tooldescription/ToolDescription';
+import { SearchBox } from '@/component/searchbox/SearchBox';
 
 export const MapCanvasForDraw = ({
   width,
@@ -37,6 +40,8 @@ export const MapCanvasForDraw = ({
   const { isMenuOpen, toolType, toggleMenu, handleMenuClick } = useFloatingButton();
   const { pathPoints, addPoint, undo, redo, undoStack, redoStack } = useUndoRedo([]);
 
+  const { setCurrentUser } = useContext(CurrentUserContext);
+
   const startImageRef = useRef<HTMLImageElement | null>(null);
   const endImageRef = useRef<HTMLImageElement | null>(null);
 
@@ -48,6 +53,31 @@ export const MapCanvasForDraw = ({
     endImageRef.current.src = endmarker;
   }, []);
 
+  useEffect(() => {
+    const updateUser = () => {
+      setCurrentUser(prevUser => {
+        return {
+          ...prevUser,
+          start_location: {
+            ...prevUser.start_location, // 기존 start_location 유지
+            title: prevUser.start_location.title ?? '',
+            lat: startMarker?.lat ?? prevUser.start_location.lat,
+            lng: startMarker?.lng ?? prevUser.start_location.lng,
+          },
+          end_location: {
+            ...prevUser.end_location, // 기존 end_location 유지
+            title: prevUser.end_location.title ?? '',
+            lat: endMarker?.lat ?? prevUser.end_location.lat,
+            lng: endMarker?.lng ?? prevUser.end_location.lng,
+          },
+          path: pathPoints, // 경로 포인트들
+        };
+      });
+    };
+
+    updateUser(); // 상태 업데이트 함수 호출
+  }, [startMarker, endMarker, pathPoints]); // 필요한 의존성만 포함
+
   useEffect(() => {
     if (!mapRef.current) return;
 
@@ -187,9 +217,27 @@ export const MapCanvasForDraw = ({
     if (!clickedPoint) return;
     switch (toolType) {
       case ButtonState.START_MARKER:
+        setCurrentUser(prevUser => ({
+          ...prevUser,
+          start_location: {
+            ...prevUser.start_location,
+            title: '', // title을 빈 문자열로 초기화 -> 검색창에 보이게 하려고
+            lat: clickedPoint.lat,
+            lng: clickedPoint.lng,
+          },
+        }));
         setStartMarker(clickedPoint);
         break;
       case ButtonState.DESTINATION_MARKER:
+        setCurrentUser(prevUser => ({
+          ...prevUser,
+          end_location: {
+            ...prevUser.end_location,
+            title: '', // title을 빈 문자열로 초기화 -> 검색창에 보이게 하려고
+            lat: clickedPoint.lat,
+            lng: clickedPoint.lng,
+          },
+        }));
         setEndMarker(clickedPoint);
         break;
       case ButtonState.LINE_DRAWING:
@@ -355,6 +403,33 @@ export const MapCanvasForDraw = ({
     }
   };
 
+  const handleCreateMarker = (point: IPoint) => {
+    if (toolType === ButtonState.START_MARKER) {
+      setStartMarker(point);
+      setCurrentUser(prevUser => ({
+        ...prevUser,
+        start_location: {
+          ...prevUser.start_location,
+          title: '',
+        },
+      }));
+    } else {
+      setEndMarker(point);
+      setCurrentUser(prevUser => ({
+        ...prevUser,
+        end_location: {
+          ...prevUser.end_location,
+          title: '',
+        },
+      }));
+    }
+  };
+
+  const handleDeleteMarker = () => {
+    if (toolType === ButtonState.START_MARKER) setStartMarker(null);
+    else setEndMarker(null);
+  };
+
   useEffect(() => {
     if (isDragging) {
       if (canvasRef.current) {
@@ -386,6 +461,16 @@ export const MapCanvasForDraw = ({
       onTouchMove={handleTouchMove}
       onTouchEnd={handleTouchEnd}
     >
+      {(toolType === ButtonState.START_MARKER || toolType === ButtonState.DESTINATION_MARKER) && (
+        <div className="relative">
+          <SearchBox
+            setMarker={handleCreateMarker}
+            deleteMarker={handleDeleteMarker}
+            startMarker={startMarker}
+            endMarker={endMarker}
+          />
+        </div>
+      )}
       <div ref={mapRef} style={{ width: '100%', height: '100%' }} />
       {toolType === ButtonState.LINE_DRAWING ? (
         <div className="z-1000 absolute left-1/2 top-[10px] flex -translate-x-1/2 transform gap-2">
@@ -431,6 +516,9 @@ export const MapCanvasForDraw = ({
           handleMenuClick={handleMenuClick}
         />
       </div>
+      <div className="relative flex">
+        <ToolDescription />
+      </div>
 
       {/* TODO: 줌인 줌아웃 버튼으로도 접근 가능하도록 추가 */}
       {/* <div className="absolute left-10 top-10 z-10 flex gap-2"> */}

diff --git a/frontend/src/component/common/InputBox.tsx b/frontend/src/component/common/InputBox.tsx
@@ -6,6 +6,7 @@ export interface IInputBoxProps {
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  value?: string;
   className?: string;
 }
 
@@ -15,6 +16,7 @@ export const InputBox = ({
   onChange,
   onFocus,
   onBlur,
+  value = '',
   className = '',
 }: IInputBoxProps) => (
   <input
@@ -23,6 +25,7 @@ export const InputBox = ({
     onChange={onChange}
     onFocus={onFocus}
     onBlur={onBlur}
-    className={`border-grayscale-75 placeholder:text-grayscale-50 focus:border-grayscale-400 text-grayscale-400 flex h-11 w-full rounded border px-3 text-xs focus:border-2 focus:outline-none ${className}`}
+    value={value}
+    className={`border-grayscale-75 placeholder:text-grayscale-50 focus:border-grayscale-400 text-grayscale-400 font-nomal flex h-11 w-full rounded border px-3 text-xs focus:border-2 focus:outline-none ${className}`}
   />
 );
diff --git a/frontend/src/component/header/Header.tsx b/frontend/src/component/header/Header.tsx
@@ -24,7 +24,7 @@ export const Header = (props: IHeaderProps) => {
   return (
     <header
       className={classNames(
-        'absolute flex w-full flex-col gap-2.5 bg-transparent p-4',
+        'absolute flex w-full flex-col gap-2.5 bg-transparent px-4 pb-2 pt-4',
         props.className,
       )}
     >

diff --git a/frontend/src/component/routebutton/RouteResultButton.tsx b/frontend/src/component/routebutton/RouteResultButton.tsx
@@ -1,7 +1,5 @@
 import { IUser } from '@/context/UserContext';
-import { getAddressFromCoordinates } from '@/utils/map/getAddress';
 import classNames from 'classnames';
-import { useEffect, useState } from 'react';
 import { GoArrowRight } from 'react-icons/go';
 import { IoClose } from 'react-icons/io5';
 import { useNavigate } from 'react-router-dom';
@@ -13,25 +11,6 @@ interface IRouteResultButtonProps {
 
 export const RouteResultButton = (props: IRouteResultButtonProps) => {
   const navigate = useNavigate();
-  const [start, setStart] = useState<string>('');
-  const [end, setEnd] = useState<string>('');
-  useEffect(() => {
-    // Fetch the addresses asynchronously when component mounts
-    const fetchAddresses = async () => {
-      const startAddress = await getAddressFromCoordinates(
-        props.user.start_location.lat,
-        props.user.start_location.lng,
-      );
-      const endAddress = await getAddressFromCoordinates(
-        props.user.end_location.lat,
-        props.user.end_location.lng,
-      );
-      setStart(startAddress); // Set start address
-      setEnd(endAddress); // Set end address
-    };
-
-    fetchAddresses();
-  }, [props.user.start_location, props.user.end_location]);
 
   const goToUserDrawRoute = (user: string) => {
     navigate(`/add-channel/${user}/draw`);
@@ -40,7 +19,7 @@ export const RouteResultButton = (props: IRouteResultButtonProps) => {
   return (
     <div className="flex flex-row items-center justify-center space-x-2" key={props.user.id}>
       <div className="shadow-userName border-grayscale-400 flex h-11 w-16 items-center justify-center rounded-lg border text-xs">
-        {props.user.name}
+        <p className="font-nomal">{props.user.name}</p>
       </div>
       <button onClick={() => goToUserDrawRoute(props.user.name)}>
         <div
@@ -49,12 +28,12 @@ export const RouteResultButton = (props: IRouteResultButtonProps) => {
             props.user.id > 1 ? '' : 'mr-8',
           )}
         >
-          <div className="flex h-full w-28 items-center rounded border-2 px-2 text-xs font-normal">
-            {start}
+          <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}
           </div>
-          <GoArrowRight className="mx-2 h-6 w-6" />
-          <div className="flex h-full w-28 items-center rounded border-2 px-2 text-xs font-normal">
-            {end}
+          <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">
+            {props.user.end_location.title}
           </div>
         </div>
       </button>

diff --git a/frontend/src/component/routebutton/RouteSettingButton.tsx b/frontend/src/component/routebutton/RouteSettingButton.tsx
@@ -18,7 +18,7 @@ export const RouteSettingButton = (props: IRouteSettingButtonProps) => {
   return (
     <div className="flex flex-row items-center justify-center space-x-2" key={props.user.id}>
       <div className="shadow-userName border-grayscale-400 flex h-11 w-16 items-center justify-center rounded-lg border text-xs">
-        {props.user.name}
+        <p className="font-nomal">{props.user.name}</p>
       </div>
       <button onClick={() => goToUserDrawRoute(props.user.name)}>
         <div