From 15cf916366759db6431f814dc66a0d424d9118f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= Date: Thu, 5 Dec 2024 14:20:19 +0900 Subject: [PATCH 1/5] =?UTF-8?q?[FE][Feat]=20=ED=98=84=EC=9E=AC=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EB=B0=8F=20add-channel=20footer=20?= =?UTF-8?q?=EC=82=AC=EB=9D=BC=EC=A7=80=EC=A7=80=20=EC=95=8A=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/api/channel.api.ts | 1 - .../src/component/bottomsheet/BottomSheet.tsx | 11 +++++++ .../canvasWithMapForView/MapCanvasForView.tsx | 18 +++++++++-- .../SetCurrentLocationButton.tsx | 31 +++++++++++++++++++ frontend/src/pages/AddChannel.tsx | 3 +- frontend/src/pages/DrawRoute.tsx | 10 ++++-- frontend/src/pages/Main.tsx | 21 +++++++++++-- 7 files changed, 84 insertions(+), 11 deletions(-) create mode 100644 frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx 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 209fea97..39c09f39 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 { SetCurruntLocationButton } 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, @@ -64,6 +71,10 @@ export const BottomSheet = ({ height: `${sheetHeight * 100}vh`, }} > +
+ +
+
( ({ lat, lng, alpha, otherLocations, guests, width, height }: IMapCanvasViewProps, ref) => { @@ -13,8 +14,7 @@ export const MapCanvasForView = forwardRef(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 +38,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 +115,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 +136,7 @@ export const MapCanvasForView = forwardRef { redrawCanvas(); - }, [guests, otherLocations, lat, lng, alpha, clusters, handleWheel]); + }, [guests, otherLocations, lat, lng, alpha, clusters, handleWheel, center]); return (
+
); }, diff --git a/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx b/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx new file mode 100644 index 00000000..c1d73d3b --- /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 SetCurruntLocationButton = (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/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 ab16dd54..3b868799 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/Main.tsx b/frontend/src/pages/Main.tsx index 1e599d7c..a25eec66 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; @@ -53,7 +54,6 @@ export const Main = () => { try { await deleteChannel(deleteTargetRef.current); setModalState('alert'); - console.log(modalState); } catch (err) { console.error('Failed to delete channel info:', err); } @@ -200,6 +200,7 @@ export const Main = () => { lat={lat} lng={lng} alpha={alpha} + ref={mapRef} otherLocations={otherLocations} /> ) : ( @@ -214,7 +215,14 @@ export const Main = () => { {isUserLoggedIn ? ( - + {channels.map(item => ( {
) : ( - +

로그인을 진행하여

From 56cc1da469aaa01531cbb1a7955e6cae3029fa8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= Date: Thu, 5 Dec 2024 14:40:53 +0900 Subject: [PATCH 2/5] =?UTF-8?q?[FE][Feat]=20=EC=9E=98=EB=AA=BB=20=EB=A8=B8?= =?UTF-8?q?=EC=A7=80=ED=95=9C=20=EB=B6=80=EB=B6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx | 2 +- frontend/vite.config.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx index 7ffe7c77..2b84e102 100644 --- a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx +++ b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx @@ -40,7 +40,7 @@ export const MapCanvasForView = forwardRef { mapInstance.destroy(); }; - }, [lat, lng]); + }, []); useImperativeHandle(ref, () => map as naver.maps.Map); diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 62acd33c..345dbd45 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -5,7 +5,7 @@ import tsconfigPaths from 'vite-tsconfig-paths'; // 추가된 부분 // https://vite.dev/config/ export default defineConfig({ plugins: [react(), tsconfigPaths()], // tsconfigPaths 플러그인 추가 - // server: { - // hmr: false, // HMR 완전히 비활성화 - // }, + server: { + hmr: false, // HMR 완전히 비활성화 + }, }); From 093d5f19ea10325d8e7288614f11fd958b093f2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= Date: Thu, 5 Dec 2024 14:42:01 +0900 Subject: [PATCH 3/5] =?UTF-8?q?[FE][Feat]=20build=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/GuestView.tsx | 1 + 1 file changed, 1 insertion(+) 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} /> ) : ( From 7b6b674e3fb87e64c0ce3ad8ee53b1afa2e6cc54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= Date: Thu, 5 Dec 2024 16:00:38 +0900 Subject: [PATCH 4/5] =?UTF-8?q?[FE][Feat]=20#429=20:=20=ED=98=84=EC=9E=AC?= =?UTF-8?q?=20=EC=9C=84=EC=B9=98=20=EB=B2=84=ED=8A=BC=20=EB=B0=94=ED=85=80?= =?UTF-8?q?=20=EC=8B=9C=ED=8A=B8=EC=97=90=20=EB=A7=9E=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/component/bottomsheet/BottomSheet.tsx | 63 +++++++++++-------- .../canvasWithMapForView/MapCanvasForView.tsx | 4 +- .../SetCurrentLocationButton.tsx | 6 +- 3 files changed, 41 insertions(+), 32 deletions(-) diff --git a/frontend/src/component/bottomsheet/BottomSheet.tsx b/frontend/src/component/bottomsheet/BottomSheet.tsx index 7abcb937..eda28f3d 100644 --- a/frontend/src/component/bottomsheet/BottomSheet.tsx +++ b/frontend/src/component/bottomsheet/BottomSheet.tsx @@ -1,6 +1,7 @@ import React, { useState, useRef } from 'react'; import { MdClear } from 'react-icons/md'; -import { SetCurruntLocationButton } from '../setCurrentLocationButton/SetCurrentLocationButton'; +import classNames from 'classnames'; +import { SetCurrentLocationButton } from '../setCurrentLocationButton/SetCurrentLocationButton'; interface IBottomSheetProps { map: naver.maps.Map | null; @@ -62,38 +63,46 @@ export const BottomSheet = ({ const handleClose = () => { setSheetHeight(minHeight); }; - + console.log(sheetHeight); return ( -
-
- -
- + <>
-
+
-
- -
+
+
-
{children}
-
+
+ +
+ +
{children}
+
+ ); }; diff --git a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx index 2b84e102..a794b0c1 100644 --- a/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx +++ b/frontend/src/component/canvasWithMap/canvasWithMapForView/MapCanvasForView.tsx @@ -4,7 +4,7 @@ import { useCanvasInteraction } from '@/hooks/useCanvasInteraction'; import { useRedrawCanvas } from '@/hooks/useRedraw'; import { ZoomSlider } from '@/component/zoomslider/ZoomSlider'; import { ICluster, useCluster } from '@/hooks/useCluster'; -import { SetCurruntLocationButton } from '@/component/setCurrentLocationButton/SetCurrentLocationButton'; +import { SetCurrentLocationButton } from '@/component/setCurrentLocationButton/SetCurrentLocationButton'; import { DEFAULT_ZOOM, MIN_ZOOM } from '@/lib/constants/mapConstants.ts'; export const MapCanvasForView = forwardRef( @@ -171,7 +171,7 @@ export const MapCanvasForView = forwardRef
- {!isMain && } + {!isMain && }
); }, diff --git a/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx b/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx index 8054fcb9..d1c808db 100644 --- a/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx +++ b/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx @@ -8,7 +8,7 @@ interface ISetCurruntLocationButton { isMain?: boolean; } -export const SetCurruntLocationButton = (props: ISetCurruntLocationButton) => { +export const SetCurrentLocationButton = (props: ISetCurruntLocationButton) => { const handleCurrentLocationButton = () => { if (props.lat && props.lng) { props.map?.setCenter(new window.naver.maps.LatLng(props.lat, props.lng)); @@ -21,8 +21,8 @@ export const SetCurruntLocationButton = (props: ISetCurruntLocationButton) => { type="button" onClick={() => handleCurrentLocationButton()} className={classNames( - 'bg-blueGray-800 shadow-floatButton absolute z-[5000] flex h-12 w-12 items-center justify-center rounded-full text-white', - props.isMain ? 'bottom-2 left-2' : 'bottom-5 left-5', + 'bg-blueGray-800 shadow-floatButton z-[5000] flex h-12 w-12 items-center justify-center rounded-full text-white', + props.isMain ? 'relative bottom-0 left-2' : 'absolute bottom-5 left-5', )} > From 363c68019003703f61cb4b6258ec3f9867cd3289 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=EC=9C=A8?= Date: Thu, 5 Dec 2024 16:08:08 +0900 Subject: [PATCH 5/5] =?UTF-8?q?[FE][Feat]=20#429=20:=20=ED=98=84=EC=9E=AC?= =?UTF-8?q?=20=EC=9C=84=EC=B9=98=20=EB=B2=84=ED=8A=BC=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=ED=81=AC=EA=B8=B0=20=EC=A6=9D=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../setCurrentLocationButton/SetCurrentLocationButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx b/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx index d1c808db..cadd6f7f 100644 --- a/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx +++ b/frontend/src/component/setCurrentLocationButton/SetCurrentLocationButton.tsx @@ -25,7 +25,7 @@ export const SetCurrentLocationButton = (props: ISetCurruntLocationButton) => { props.isMain ? 'relative bottom-0 left-2' : 'absolute bottom-5 left-5', )} > - + ); };