feat: 지도페이지 지도 롱프레스시 모각코 생성 위치를 나타내는 마커가 화면 중앙으로 오도록 지도 이동

- 바텀시트와 검색 필터를 제외한 지도 부분의 중앙으로 마커 이동

src/app/(home)/_components/MGCCreateBottomSheet.tsx

@@ -1,4 +1,9 @@
+import { useContext, useEffect } from 'react';
+import { MapContext } from '@/app/_components/Map/MapProvider';
 import { Drawer, DrawerContent } from '@/components/ui/drawer';
+import useChangeMapCenter from '@/hooks/useChangeMapCenter';
+import useKakaoMapService from '@/libs/kakaoMapWrapper';
+import useCreatedPositionInfo from '@/store/useCreatedPositionInfo';
 import MGCCreateSheetContent from './MGCCreateSheetContent';
 
 export interface MGCCreateBottomSheetProps {
@@ -7,6 +12,28 @@ export interface MGCCreateBottomSheetProps {
 }
 
 const MGCCreateBottomSheet = ({ open, setOpen }: MGCCreateBottomSheetProps) => {
+  const { changeCenter } = useChangeMapCenter();
+  const map = useContext(MapContext);
+  const mapService = useKakaoMapService();
+  const { createdPositionInfo } = useCreatedPositionInfo();
+
+  useEffect(() => {
+    if (open && map) {
+      const { latitude, longitude } = createdPositionInfo;
+      const mapProjection = map.getProjection();
+      const SEARCH_BAR_FILTER_HIGHT = 113;
+
+      const createMarkerLatlng = mapService.createLatLng(latitude, longitude);
+      const coordinateToPoint = mapProjection.containerPointFromCoords(createMarkerLatlng);
+      const centerPoint = mapService.createPoint(
+        coordinateToPoint.x,
+        coordinateToPoint.y + SEARCH_BAR_FILTER_HIGHT,
+      );
+      const centerCoordinates = mapProjection.coordsFromContainerPoint(centerPoint);
+
+      changeCenter(centerCoordinates.getLat(), centerCoordinates.getLng(), 'smooth');
+    }
+  }, [changeCenter, createdPositionInfo, map, mapService, open]);
   return (
     <Drawer
       open={open}