Feat/#69 지도 페이지 UX 개선 및 버그 수정

apps/admin/src/app/requests/[id]/_components/Location/Location.tsx

@@ -17,7 +17,12 @@ export const Location = ({ location }: Props) => {
     <Column className={'gap-1.5'}>
       <Text>위치</Text>
       <Container className={'h-[150px] overflow-hidden rounded-xl'}>
-        <NaverMap ref={setMap} defaultCenter={setLocation}>
+        <NaverMap
+          defaultZoom={18}
+          minZoom={15}
+          ref={setMap}
+          defaultCenter={setLocation}
+        >
           <Marker position={setLocation} icon={'logo'} />
         </NaverMap>
       </Container>

apps/web/app/_store/prevMapCenter.ts

@@ -0,0 +1,12 @@
+import { create } from 'zustand'
+import { Coord } from '@/map/_utils/toLatLng'
+
+type LastMapCenter = {
+  lastMapCenter: Coord | null
+  setLastMapCenter: (mapCenter: Coord) => void
+}
+
+export const useLastMapCenterStore = create<LastMapCenter>((set) => ({
+  lastMapCenter: null,
+  setLastMapCenter: (mapCenter: Coord) => set({ lastMapCenter: mapCenter }),
+}))

apps/web/app/map/MapComponent.tsx

@@ -6,6 +6,7 @@ import { Container, NaverMap } from 'react-naver-maps'
 
 import { CAMPUS_LOCATION } from '@/_constants/campus'
 import { useCampusStore } from '@/_store/campus'
+import { useLastMapCenterStore } from '@/_store/prevMapCenter'
 import { usePlaceQueries } from '@/_apis/queries/place'
 import type { MapBounds } from '@/_apis/schemas/place'
 
@@ -27,9 +28,11 @@ const MapComponent = () => {
   const [showUpdateButton, setShowUpdateButton] = useState(false)
 
   const { campus } = useCampusStore()
+  const { lastMapCenter, setLastMapCenter } = useLastMapCenterStore()
   const { userLocation } = useWatchLocation()
   const { data = [] } = useQuery(usePlaceQueries.byMap(currentBounds))
 
+  const defaultCenter = toLatLng(lastMapCenter || CAMPUS_LOCATION[campus])
   const previewPlace = previewPlaceId
     ? data.find((place) => place.placeId === previewPlaceId)!
     : null
@@ -77,6 +80,14 @@ const MapComponent = () => {
   }
 
   useEffect(refreshMapBounds, [refreshMapBounds])
+  useEffect(() => {
+    return () => {
+      if (!map) return
+      const { x: longitude, y: latitude } = map.getCenter()
+
+      setLastMapCenter({ longitude, latitude })
+    }
+  }, [map, setLastMapCenter])
 
   return (
     <>
@@ -96,8 +107,10 @@ const MapComponent = () => {
         onMouseUp={onCenterChanged}
       >
         <NaverMap
+          defaultZoom={15}
+          minZoom={12}
           ref={setMap}
-          defaultCenter={toLatLng(CAMPUS_LOCATION[campus])}
+          defaultCenter={defaultCenter}
           onZoomChanged={onCenterChanged}
         >
           {userLocation && <UserMarker position={userLocation} />}

apps/web/app/map/_components/PreviewPlace/PreviewPlace.tsx

@@ -35,7 +35,7 @@ export const PreviewPlace = ({ place }: { place: PlaceByMap }) => {
             {address}
           </Text>
           <Flex className='mt-1 gap-2'>
-            {photos.map((photo) => (
+            {photos.slice(0, 5).map((photo) => (
               <Flex
                 key={photo.photoId || photo.displayOrder}
                 className={

apps/web/app/places/[id]/_components/Location/Location.tsx

@@ -12,7 +12,12 @@ export const Location = ({ location }: { location: Coord }) => {
     <Column className={'gap-1.5'}>
       <SubTitle icon={'pin'} title={'위치'} />
       <Container className={'h-[150px] overflow-hidden rounded-xl'}>
-        <NaverMap ref={setMap} defaultCenter={toLatLng(location)}>
+        <NaverMap
+          defaultZoom={18}
+          minZoom={15}
+          ref={setMap}
+          defaultCenter={toLatLng(location)}
+        >
           <PlaceMarker position={location} icon={'logo'} />
         </NaverMap>
       </Container>