Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE][Fix] #430 : 지도가 주기적으로 재렌더링되는 문제 해결, 기본 줌 레벨 값 변경 #431

Merged
merged 3 commits into from
Dec 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +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 { DEFAULT_ZOOM, MIN_ZOOM } from '@/lib/constants/mapConstants.ts';

export const MapCanvasForView = forwardRef<naver.maps.Map | null, IMapCanvasViewProps>(
({ lat, lng, alpha, otherLocations, guests, width, height }: IMapCanvasViewProps, ref) => {
Expand All @@ -21,8 +22,8 @@ export const MapCanvasForView = forwardRef<naver.maps.Map | null, IMapCanvasView

const mapInstance = new naver.maps.Map(mapRef.current, {
center: new naver.maps.LatLng(lat, lng),
zoom: 10,
minZoom: 7,
zoom: DEFAULT_ZOOM,
minZoom: MIN_ZOOM,
maxBounds: new naver.maps.LatLngBounds(
new naver.maps.LatLng(33.0, 124.5),
new naver.maps.LatLng(38.9, 131.9),
Expand All @@ -36,7 +37,7 @@ export const MapCanvasForView = forwardRef<naver.maps.Map | null, IMapCanvasView
return () => {
mapInstance.destroy();
};
}, [lat, lng]);
}, []);

const latLngToCanvasPoint = (latLng: IPoint): ICanvasPoint | null => {
if (!map || !projection || !canvasRef.current) return null;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { ZoomSlider } from '@/component/zoomslider/ZoomSlider';
import { useRedrawCanvas } from '@/hooks/useRedraw';
import { zoomMapView } from '@/utils/map/mapUtils';
import { ICluster, useCluster } from '@/hooks/useCluster';
import { MIN_ZOOM } from '@/lib/constants/mapConstants.ts';

export const MapCanvasForDraw = ({
width,
Expand Down Expand Up @@ -69,7 +70,7 @@ export const MapCanvasForDraw = ({
const mapInstance = new naver.maps.Map(mapRef.current, {
center: new naver.maps.LatLng(initialCenter.lat, initialCenter.lng),
zoom: initialZoom,
minZoom: 7,
minZoom: MIN_ZOOM,
maxBounds: new naver.maps.LatLngBounds(
new naver.maps.LatLng(33.0, 124.5),
new naver.maps.LatLng(38.9, 131.9),
Expand All @@ -80,18 +81,6 @@ export const MapCanvasForDraw = ({
setMap(mapInstance);
setProjection(mapInstance.getProjection());

// TODO: 필요 없을 것으로 예상, 혹시나해서 남겨둔 것이니 필요 없다 판단되면 제거 필요
// naver.maps.Event.addListener(mapInstance, 'zoom_changed', () => {
// setProjection(mapInstance.getProjection());
// updateCanvasSize();
// redrawCanvas();
// });
//
// naver.maps.Event.addListener(mapInstance, 'center_changed', () => {
// setProjection(mapInstance.getProjection());
// redrawCanvas();
// });

return () => {
mapInstance.destroy();
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useEffect, useState } from 'react';
import { MapCanvasForDraw } from '@/component/canvasWithMap/canvasWithMapforDraw/MapCanvasForDraw.tsx';
import { DEFAULT_CENTER } from '@/lib/constants/mapConstants.ts';
import { DEFAULT_CENTER, DEFAULT_ZOOM } from '@/lib/constants/mapConstants.ts';
import { ICanvasScreenProps } from '@/lib/types/canvasInterface.ts';

export const MapProviderForDraw = ({ width, height }: ICanvasScreenProps) => {
Expand Down Expand Up @@ -48,7 +48,7 @@ export const MapProviderForDraw = ({ width, height }: ICanvasScreenProps) => {
width={windowSize.width}
height={windowSize.height}
initialCenter={DEFAULT_CENTER}
initialZoom={7}
initialZoom={DEFAULT_ZOOM}
/>
);
};
5 changes: 3 additions & 2 deletions frontend/src/component/zoomslider/ZoomSlider.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
import { MdOutlineAdd, MdRemove } from 'react-icons/md';
import './ZoomSlider.css';
import { DEFAULT_ZOOM } from '@/lib/constants/mapConstants.ts';

interface IZoomSliderProps {
/** Naver 지도 객체 */
Expand Down Expand Up @@ -66,7 +67,7 @@ const ZoomSliderInput = ({ zoomLevel, onSliderChange }: IZoomSliderInputProps) =
};

export const ZoomSlider = ({ map, redrawCanvas }: IZoomSliderProps) => {
const [zoomLevel, setZoomLevel] = useState(map?.getZoom() ?? 10);
const [zoomLevel, setZoomLevel] = useState(map?.getZoom() ?? DEFAULT_ZOOM);

useEffect(() => {
if (!map) return undefined;
Expand All @@ -87,7 +88,7 @@ export const ZoomSlider = ({ map, redrawCanvas }: IZoomSliderProps) => {
};

const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const newZoom = parseInt(event.target.value, 10);
const newZoom = parseInt(event.target.value, DEFAULT_ZOOM);
if (map) {
map.setZoom(newZoom);
setZoomLevel(newZoom);
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/lib/constants/mapConstants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,5 @@ export const DEFAULT_CENTER = {

export const MIN_ZOOM = 7; // 대한민국 전체가 보이는 최소 줌 레벨
export const MAX_ZOOM = 19; // 네이버 지도 최대 줌 레벨

export const DEFAULT_ZOOM = 18;
Loading