diff --git a/frontend/src/api/channel.api.ts b/frontend/src/api/channel.api.ts index 2e63effc..6c7d961f 100644 --- a/frontend/src/api/channel.api.ts +++ b/frontend/src/api/channel.api.ts @@ -155,7 +155,6 @@ export const deleteChannel = (channelId: string): Promise { - console.log(channelId); console.error(err); fnReject('msg.RESULT_FAILED'); }); diff --git a/frontend/src/component/bottomsheet/BottomSheet.tsx b/frontend/src/component/bottomsheet/BottomSheet.tsx index 358273d8..31d25c09 100644 --- a/frontend/src/component/bottomsheet/BottomSheet.tsx +++ b/frontend/src/component/bottomsheet/BottomSheet.tsx @@ -1,7 +1,11 @@ import React, { useState, useRef } from 'react'; -import { MdClear } from 'react-icons/md'; +import classNames from 'classnames'; +import { SetCurrentLocationButton } from '../setCurrentLocationButton/SetCurrentLocationButton'; interface IBottomSheetProps { + map: naver.maps.Map | null; + lat: number | null; + lng: number | null; minHeight: number; maxHeight: number; backgroundColor: string; @@ -9,6 +13,9 @@ interface IBottomSheetProps { } export const BottomSheet = ({ + map, + lat, + lng, minHeight, maxHeight, backgroundColor, @@ -52,10 +59,6 @@ export const BottomSheet = ({ window.addEventListener('mouseup', handleMouseUp); }; - const handleClose = () => { - setSheetHeight(minHeight); - }; - const [, setScrollPosition] = useState(0); const [touchStartY, setTouchStartY] = useState(null); @@ -83,42 +86,52 @@ export const BottomSheet = ({ }; return ( -
e.stopPropagation()} - onTouchMove={e => e.stopPropagation()} - onTouchEnd={e => e.stopPropagation()} - > + <>
-
+
- -
- -
-
e.stopPropagation()} + onTouchMove={e => e.stopPropagation()} + onTouchEnd={e => e.stopPropagation()} > - {children} +
+
+
+
+ +
+ {children} +
+
-
+ ); }; diff --git a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx index ae22b97f..882d58a7 100644 --- a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx +++ b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx @@ -4,17 +4,20 @@ import { useCanvasInteraction } from '@/hooks/useCanvasInteraction'; import { useRedrawCanvas } from '@/hooks/useRedraw'; import { ZoomSlider } from '@/component/zoomslider/ZoomSlider'; import { ICluster, useCluster } from '@/hooks/useCluster'; +import { SetCurrentLocationButton } from '@/component/setCurrentLocationButton/SetCurrentLocationButton'; export const MapCanvasForView = forwardRef( - ({ lat, lng, alpha, otherLocations, guests, width, height }: IMapCanvasViewProps, ref) => { + ( + { lat, lng, alpha, otherLocations, guests, width, height, isMain }: IMapCanvasViewProps, + ref, + ) => { const mapRef = useRef(null); const canvasRef = useRef(null); const [projection, setProjection] = useState(null); const [map, setMap] = useState(null); const { createClusters } = useCluster(); const [clusters, setClusters] = useState(null); - - useImperativeHandle(ref, () => map as naver.maps.Map); + const [center, setCenter] = useState(); useEffect(() => { if (!mapRef.current) return; @@ -38,6 +41,8 @@ export const MapCanvasForView = forwardRef map as naver.maps.Map); + const latLngToCanvasPoint = (latLng: IPoint): ICanvasPoint | null => { if (!map || !projection || !canvasRef.current) return null; const coord = projection.fromCoordToOffset(new naver.maps.LatLng(latLng.lat, latLng.lng)); @@ -113,11 +118,20 @@ export const MapCanvasForView = forwardRef { + if (map) { + const currentCenter = map.getCenter(); + const point = { lat: currentCenter.x, lng: currentCenter.y }; + setCenter(point); + } + }; + // 컴포넌트가 처음 마운트될 때 즉시 실행 updateClusters(); const intervalId = setInterval(() => { updateClusters(); + handleCenterChanged(); }, 100); return () => clearInterval(intervalId); // 컴포넌트 언마운트 시 인터벌 클리어 @@ -125,7 +139,7 @@ export const MapCanvasForView = forwardRef { redrawCanvas(); - }, [guests, otherLocations, lat, lng, alpha, clusters, handleWheel]); + }, [guests, otherLocations, lat, lng, alpha, clusters, handleWheel, center]); return (
+ {!isMain && }
); }, diff --git a/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx b/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx new file mode 100644 index 00000000..cadd6f7f --- /dev/null +++ b/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx @@ -0,0 +1,31 @@ +import classNames from 'classnames'; +import { MdMyLocation } from 'react-icons/md'; + +interface ISetCurruntLocationButton { + map: naver.maps.Map | null; + lat: number | null; + lng: number | null; + isMain?: boolean; +} + +export const SetCurrentLocationButton = (props: ISetCurruntLocationButton) => { + const handleCurrentLocationButton = () => { + if (props.lat && props.lng) { + props.map?.setCenter(new window.naver.maps.LatLng(props.lat, props.lng)); + props.map?.setZoom(14); + } + }; + + return ( + + ); +}; diff --git a/frontend/src/lib/types/canvasInterface.ts b/frontend/src/lib/types/canvasInterface.ts index f71be6d8..3c07d278 100644 --- a/frontend/src/lib/types/canvasInterface.ts +++ b/frontend/src/lib/types/canvasInterface.ts @@ -53,4 +53,5 @@ export interface IMapCanvasViewProps { guests?: IGuestDataInMapProps[] | null; width: string; height: string; + isMain: boolean; } diff --git a/frontend/src/pages/AddChannel.tsx b/frontend/src/pages/AddChannel.tsx index 131a1140..5b61b65f 100644 --- a/frontend/src/pages/AddChannel.tsx +++ b/frontend/src/pages/AddChannel.tsx @@ -188,8 +188,7 @@ export const AddChannel = () => { marker_style: user.marker_style, })), }; - const response = await createChannel(channelData); - console.log('채널 생성 성공:', response); + await createChannel(channelData); } catch (error) { console.error('채널 생성 실패:', error); } diff --git a/frontend/src/pages/DrawRoute.tsx b/frontend/src/pages/DrawRoute.tsx index dd79c0ad..81361ee4 100644 --- a/frontend/src/pages/DrawRoute.tsx +++ b/frontend/src/pages/DrawRoute.tsx @@ -10,8 +10,13 @@ import { getAddressFromCoordinates } from '@/utils/map/getAddress'; export const DrawRoute = () => { const { users, setUsers } = useContext(UserContext); - const { setFooterTitle, setFooterActive, setFooterOnClick, resetFooterContext } = - useContext(FooterContext); + const { + setFooterTitle, + setFooterActive, + setFooterOnClick, + setFooterTransparency, + resetFooterContext, + } = useContext(FooterContext); const { currentUser, setCurrentUser } = useContext(CurrentUserContext); const params = useParams>(); const navigate = useNavigate(); @@ -51,6 +56,7 @@ export const DrawRoute = () => { useEffect(() => { setFooterTitle('사용자 경로 추가 완료'); + setFooterTransparency(false); setFooterActive(buttonActiveType.PASSIVE); const user = getUser(); if (user) { diff --git a/frontend/src/pages/GuestView.tsx b/frontend/src/pages/GuestView.tsx index de77ebc6..3a568bd8 100644 --- a/frontend/src/pages/GuestView.tsx +++ b/frontend/src/pages/GuestView.tsx @@ -127,6 +127,7 @@ export const GuestView = () => { width="100%" height="100%" guests={[guestInfo]} + isMain={false} /> ) : ( diff --git a/frontend/src/pages/HostView.tsx b/frontend/src/pages/HostView.tsx index 8382b292..c209f816 100644 --- a/frontend/src/pages/HostView.tsx +++ b/frontend/src/pages/HostView.tsx @@ -231,6 +231,7 @@ export const HostView = () => { guests={mapProps} otherLocations={filteredOtherLocations} ref={mapRef} + isMain={false} /> ) : ( diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx index 2594bfca..9e1e8544 100644 --- a/frontend/src/pages/Main.tsx +++ b/frontend/src/pages/Main.tsx @@ -25,6 +25,7 @@ export const Main = () => { setFooterActive, resetFooterContext, } = useContext(FooterContext); + const mapRef = useRef(null); const { lat, lng, alpha, error } = getUserLocation(); const [otherLocations, setOtherLocations] = useState([]); const MIN_HEIGHT = 0.15; @@ -212,7 +213,9 @@ export const Main = () => { lat={lat} lng={lng} alpha={alpha} + ref={mapRef} otherLocations={otherLocations} + isMain /> ) : ( @@ -226,7 +229,14 @@ export const Main = () => { {isUserLoggedIn ? ( - + {channels.map(item => ( {
) : ( - +

로그인을 진행하여