6주차 4차 배포

frontend/src/api/channel.api.ts

@@ -7,6 +7,7 @@ import {
   getChannelResEntity,
   getUserChannelsResEntity,
   getGuestResEntity,
+  deleteChannelResEntity,
 } from '@/api/dto/channel.dto.ts';
 import { getApiClient } from '@/api/client.api.ts';
 
@@ -136,3 +137,28 @@ export const getGuestInfo = (
   };
   return new Promise(promiseFn);
 };
+
+export const deleteChannel = (channelId: string): Promise<ResponseDto<deleteChannelResEntity>> => {
+  const promiseFn = (
+    fnResolve: (value: ResponseDto<deleteChannelResEntity>) => void,
+    fnReject: (reason?: any) => void,
+  ) => {
+    const apiClient = getApiClient();
+    apiClient
+      .delete(`/channel/${channelId}`)
+      .then(res => {
+        if (res.status !== 200) {
+          console.error(res);
+          fnReject(`msg.${res}`);
+        } else {
+          fnResolve(new ResponseDto<deleteChannelResEntity>(res.data));
+        }
+      })
+      .catch(err => {
+        console.log(channelId);
+        console.error(err);
+        fnReject('msg.RESULT_FAILED');
+      });
+  };
+  return new Promise(promiseFn);
+};

frontend/src/api/dto/channel.dto.ts

@@ -113,3 +113,7 @@ export class getGuestResEntity {
 
   guest: guestEntity | undefined;
 }
+
+export class deleteChannelResEntity {
+  id: string | undefined;
+}

frontend/src/component/authmodal/AuthModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Modal } from '@/component/common/modal/Modal';
 import { doLogin, doRegister } from '@/api/auth.api.ts';
 import { saveLocalData } from '@/utils/common/manageLocalData.ts';
@@ -91,6 +91,10 @@ export const AuthModal = (props: IAuthModalProps) => {
       });
   };
 
+  useEffect(() => {
+    if (!props.isOpen) switchToLogin();
+  }, [props.isOpen]);
+
   return (
     <Modal isOpen={props.isOpen}>
       {modalType === 'login' ? (

frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx

@@ -3,13 +3,16 @@ import { ICanvasPoint, IMapCanvasViewProps, IPoint } from '@/lib/types/canvasInt
 import { useCanvasInteraction } from '@/hooks/useCanvasInteraction';
 import { useRedrawCanvas } from '@/hooks/useRedraw';
 import { ZoomSlider } from '@/component/zoomslider/ZoomSlider';
+import { ICluster, useCluster } from '@/hooks/useCluster';
 
 export const MapCanvasForView = forwardRef<naver.maps.Map | null, IMapCanvasViewProps>(
   ({ lat, lng, alpha, otherLocations, guests, width, height }: IMapCanvasViewProps, ref) => {
     const mapRef = useRef<HTMLDivElement>(null);
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const [projection, setProjection] = useState<naver.maps.MapSystemProjection | null>(null);
     const [map, setMap] = useState<naver.maps.Map | null>(null);
+    const { createClusters } = useCluster();
+    const [clusters, setClusters] = useState<ICluster[] | null>(null);
 
     useImperativeHandle(ref, () => map as naver.maps.Map);
 
@@ -66,6 +69,7 @@ export const MapCanvasForView = forwardRef<naver.maps.Map | null, IMapCanvasView
       lat,
       lng,
       alpha,
+      clusters,
     });
 
     const {
@@ -95,9 +99,33 @@ export const MapCanvasForView = forwardRef<naver.maps.Map | null, IMapCanvasView
       updateCanvasSize();
     }, [map]);
 
+    // guests나 map이 변경될 때마다 클러스터를 다시 생성하고 상태를 업데이트
+    useEffect(() => {
+      const updateClusters = () => {
+        if (map && guests && guests.length > 0) {
+          const createdClusters = guests
+            .map(guest =>
+              createClusters([guest.startPoint, guest.endPoint], guest.markerStyle, map),
+            )
+            .flat();
+
+          setClusters(createdClusters);
+        }
+      };
+
+      // 컴포넌트가 처음 마운트될 때 즉시 실행
+      updateClusters();
+
+      const intervalId = setInterval(() => {
+        updateClusters();
+      }, 100);
+
+      return () => clearInterval(intervalId); // 컴포넌트 언마운트 시 인터벌 클리어
+    }, [guests, map]);
+
     useEffect(() => {
       redrawCanvas();
-    }, [guests, otherLocations, lat, lng, alpha, mapRef, handleWheel]);
+    }, [guests, otherLocations, lat, lng, alpha, clusters, handleWheel]);
 
     return (
       <div

frontend/src/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx

@@ -13,6 +13,7 @@ import { useCanvasInteraction } from '@/hooks/useCanvasInteraction';
 import { ZoomSlider } from '@/component/zoomslider/ZoomSlider';
 import { useRedrawCanvas } from '@/hooks/useRedraw';
 import { zoomMapView } from '@/utils/map/mapUtils';
+import { ICluster, useCluster } from '@/hooks/useCluster';
 
 export const MapCanvasForDraw = ({
   width,
@@ -34,6 +35,9 @@ export const MapCanvasForDraw = ({
 
   const { setCurrentUser } = useContext(CurrentUserContext);
 
+  const { createClusters } = useCluster();
+  const [clusters, setClusters] = useState<ICluster[]>([]);
+
   useEffect(() => {
     const updateUser = () => {
       setCurrentUser(prevUser => {
@@ -138,6 +142,7 @@ export const MapCanvasForDraw = ({
     startMarker,
     endMarker,
     pathPoints,
+    clusters,
   });
 
   const handleCanvasClick = (e: React.MouseEvent<HTMLCanvasElement>) => {
@@ -238,11 +243,11 @@ export const MapCanvasForDraw = ({
   }, [map]);
 
   useEffect(() => {
-    if (startMarker && endMarker) {
-      const markers = [];
-
-      if (startMarker) markers.push(startMarker);
-      if (endMarker) markers.push(endMarker);
+    if (startMarker && endMarker && map) {
+      const markers = [
+        { lat: startMarker.lat, lng: startMarker.lng },
+        { lat: endMarker.lat, lng: endMarker.lng },
+      ];
 
       zoomMapView(map, markers);
     } else {
@@ -257,9 +262,24 @@ export const MapCanvasForDraw = ({
     }
   }, [startMarker, endMarker]);
 
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (startMarker && endMarker && map) {
+        const markers = [
+          { lat: startMarker.lat, lng: startMarker.lng },
+          { lat: endMarker.lat, lng: endMarker.lng },
+        ];
+
+        const createdClusters = createClusters(markers, { color: '#333C4A' }, map);
+        setClusters(createdClusters);
+      }
+    }, 100);
+
+    return () => clearInterval(intervalId); // 컴포넌트 언마운트 시 인터벌 클리어
+  }, [startMarker, endMarker, map]);
   useEffect(() => {
     redrawCanvas();
-  }, [startMarker, endMarker, pathPoints, map, undoStack, redoStack]);
+  }, [startMarker, endMarker, clusters, pathPoints, map, undoStack, redoStack]);
 
   return (
     <div

frontend/src/component/common/alert/Alert.tsx

@@ -8,41 +8,38 @@ interface IAlertProps {
 }
 
 export const AlertUI = ({ message, duration = 3000, autoClose = true, onClose }: IAlertProps) => {
-  const [progress, setProgress] = useState(100);
+  const [animateProgress, setAnimateProgress] = useState(false);
 
   useEffect(() => {
     if (!autoClose) return;
 
-    const start = performance.now();
+    const timeout = setTimeout(() => {
+      setAnimateProgress(true);
+    }, 50);
 
-    const updateProgress = (current: number) => {
-      const elapsed = current - start;
-      const newProgress = Math.max(0, 100 - (elapsed / duration) * 100);
+    const timer = setTimeout(() => {
+      onClose?.();
+    }, duration);
 
-      setProgress(newProgress);
-
-      if (elapsed < duration) {
-        requestAnimationFrame(updateProgress);
-      } else {
-        onClose?.();
-      }
+    return () => {
+      clearTimeout(timeout);
+      clearTimeout(timer);
     };
-
-    const animationFrame = requestAnimationFrame(updateProgress);
-
-    return () => cancelAnimationFrame(animationFrame);
   }, [duration, autoClose, onClose]);
 
   return (
     <>
-      <div className="fixed inset-0 z-[5000] flex items-center justify-center bg-black bg-opacity-20" />
+      <div className="pointer-events-none fixed inset-0 z-[5000] flex items-center justify-center bg-black bg-opacity-20" />
       <div className="bg-blueGray-800 absolute left-1/2 top-1/2 z-[6000] mx-auto flex w-[22rem] max-w-md -translate-x-1/2 flex-col items-center justify-center rounded-md p-6 text-white shadow-lg">
         <div className="whitespace-pre text-center text-sm font-medium">{message}</div>
         {autoClose ? (
-          <div className="bg-blueGray-800 mt-4 h-1 w-full">
+          <div className="bg-blueGray-800 mt-4 h-1 w-full overflow-hidden">
             <div
-              className="h-1 rounded-full bg-white transition-all ease-linear"
-              style={{ width: `${progress}%` }}
+              className="linear transition-all` h-1 rounded-full bg-white"
+              style={{
+                width: animateProgress ? '0%' : '100%',
+                transitionDuration: `${duration}ms`,
+              }}
             />
           </div>
         ) : (

frontend/src/component/common/modal/ModalFooter.tsx

@@ -13,7 +13,7 @@ export const ModalFooter = (props: IModalFooterProps) => (
   <div className="flex w-full flex-row-reverse items-center justify-start gap-5 rounded-lg bg-white py-4 shadow-sm">
     <button
       type="button"
-      className="bg-blueGray-800 hover:bg-blueGray-600 h-[40px] rounded-lg px-4 py-2 text-sm font-semibold text-white"
+      className="bg-blueGray-800 h-[40px] rounded-lg px-4 py-2 text-sm font-semibold text-white"
       onClick={props.onClick}
     >
       {props.text}

frontend/src/component/common/types.ts

@@ -1,6 +1,7 @@
 import { FaPaintBrush } from 'react-icons/fa';
-import { HiLocationMarker, HiOutlineDotsHorizontal, HiOutlineLocationMarker } from 'react-icons/hi';
+import { HiLocationMarker, HiOutlineDotsHorizontal } from 'react-icons/hi';
 import { SlLayers } from 'react-icons/sl';
+import { RiFlag2Fill } from 'react-icons/ri';
 import { ButtonState } from './enums';
 
 /**
@@ -11,7 +12,7 @@ export const IconType = {
   CLOSE: SlLayers, // 닫기 버튼 아이콘
   OPEN: HiOutlineDotsHorizontal, // 열기 버튼 아이콘
   START_MARKER: HiLocationMarker, // 출발지 설정 아이콘
-  DESTINATION_MARKER: HiOutlineLocationMarker, // 도착지 설정 아이콘
+  DESTINATION_MARKER: RiFlag2Fill, // 도착지 설정 아이콘
   LINE_DRAWING: FaPaintBrush, // 경로 그리기 아이콘
 };
 /**
@@ -29,14 +30,14 @@ export const ToolCategory = [
     description: '경로 그리기', // 툴 설명
     icon: IconType.LINE_DRAWING, // 툴 아이콘
   },
-  {
-    type: ButtonState.START_MARKER, // 출발지 설정 툴
-    description: '출발지 설정', // 툴 설명
-    icon: IconType.START_MARKER, // 툴 아이콘
-  },
   {
     type: ButtonState.DESTINATION_MARKER, // 도착지 설정 툴
     description: '도착지 설정', // 툴 설명
     icon: IconType.DESTINATION_MARKER, // 툴 아이콘
   },
+  {
+    type: ButtonState.START_MARKER, // 출발지 설정 툴
+    description: '출발지 설정', // 툴 설명
+    icon: IconType.START_MARKER, // 툴 아이콘
+  },
 ];

frontend/src/component/confirm/Confirm.tsx

@@ -0,0 +1,45 @@
+interface IConfirmProps {
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  type: 'confirm' | 'alert';
+  confirmText?: string;
+  cancelText?: string;
+}
+
+export const Confirm = (props: IConfirmProps) => {
+  return (
+    <div className="fixed inset-0 z-[5000] flex items-center justify-center bg-black bg-opacity-70">
+      <div className="absolute left-1/2 top-1/2 z-[6000] mx-auto flex w-[22rem] max-w-md -translate-x-1/2 flex-col items-center justify-center gap-6 rounded-md bg-gray-50 p-6 text-white shadow-lg">
+        <div className="text-blueGray-800 whitespace-pre py-2 text-center text-lg font-medium">
+          {props.message}
+        </div>
+        {props.type === 'alert' ? (
+          <div className="flex w-full items-center justify-between gap-4">
+            <button
+              className="bg-blueGray-800 w-full cursor-pointer rounded-md border-none px-2.5 py-2.5 text-sm font-medium text-white"
+              onClick={props.onConfirm}
+            >
+              {props.confirmText || '확인'}
+            </button>
+          </div>
+        ) : (
+          <div className="flex w-full items-center justify-between gap-4">
+            <button
+              className="bg-blueGray-800 w-full cursor-pointer rounded-md border-none px-2.5 py-2.5 text-sm font-medium text-white"
+              onClick={props.onConfirm}
+            >
+              {props.confirmText || '확인'}
+            </button>
+            <button
+              className="w-full cursor-pointer rounded-md border-none bg-gray-400 px-2.5 py-2.5 text-sm font-medium text-white"
+              onClick={props.onCancel}
+            >
+              {props.cancelText || '취소'}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};