From fedc8014f7842596a0eb75f6001061aa3c4c743f Mon Sep 17 00:00:00 2001
From: syddl0 <137189866+shroqkf@users.noreply.github.com>
Date: Tue, 13 May 2025 00:15:26 +0900
Subject: [PATCH 1/5] =?UTF-8?q?Fix:=20=EA=B2=80=EC=83=89=20=EA=B2=B0?=
 =?UTF-8?q?=EA=B3=BC=20=EC=A7=80=EB=8F=84=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/search/SearchPage.jsx           |   2 +-
 src/pages/search/components/MapViewer.jsx |  36 ++++
 src/pages/search/hooks/useMapViewer.js    | 218 ++++++++++++++++++++++
 3 files changed, 255 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/search/components/MapViewer.jsx
 create mode 100644 src/pages/search/hooks/useMapViewer.js

diff --git a/src/pages/search/SearchPage.jsx b/src/pages/search/SearchPage.jsx
index 5cbb388..98a4983 100644
--- a/src/pages/search/SearchPage.jsx
+++ b/src/pages/search/SearchPage.jsx
@@ -3,7 +3,6 @@ import SearchBar from "./components/SearchBar";
 import RecentSearchList from "./components/RecentSearchList";
 import PlaceList from "./components/SearchPlaceList";
 import PlaceBottomSheet from "@pages/map/components/PlaceBottomSheet";
-import MapViewer from "../map/components/MapViewer";
 import { getDistanceFromLatLon } from "../map/utils/getDistanceFromLatLon";
 import { formatDistance } from "../map/utils/formatDistance";
 import { getCompanyPreview } from "@apis/company/getCompanyPreview";
@@ -11,6 +10,7 @@ import { useCompanyData } from "./hooks/useCompanyData";
 import { useUserCoords } from "./hooks/useUserCoords";
 import useAuthStore from "@/store/authStore";
 import HaveToLoginModal from "@components/common/HaveToLoginModal";
+import MapViewer from "./components/MapViewer";
 
 const LOCAL_STORAGE_KEY = "recentSearches";
 
diff --git a/src/pages/search/components/MapViewer.jsx b/src/pages/search/components/MapViewer.jsx
new file mode 100644
index 0000000..5a04e70
--- /dev/null
+++ b/src/pages/search/components/MapViewer.jsx
@@ -0,0 +1,36 @@
+import { useRef } from "react";
+import useMapViewer from "../hooks/useMapViewer";
+
+const MapViewer = ({
+  places,
+  onMarkerClick,
+  userCoords,
+  moveToCurrentLocation,
+  onMoveComplete,
+  resetMap,
+  center,
+  markerPosition,
+  zoom = 11,
+  selectedPlace,
+  showOnlyLiked,
+}) => {
+  const mapRef = useRef(null);
+
+  useMapViewer({
+    mapRef,
+    places,
+    onMarkerClick,
+    userCoords,
+    moveToCurrentLocation,
+    onMoveComplete,
+    resetMap,
+    center,
+    markerPosition,
+    zoom,
+    selectedPlace,
+  });
+
+  return <div ref={mapRef} className="h-screen" />;
+};
+
+export default MapViewer;
diff --git a/src/pages/search/hooks/useMapViewer.js b/src/pages/search/hooks/useMapViewer.js
new file mode 100644
index 0000000..248166f
--- /dev/null
+++ b/src/pages/search/hooks/useMapViewer.js
@@ -0,0 +1,218 @@
+import { useEffect, useRef, useCallback, useState } from "react";
+import { loadNaverMapScript } from "@pages/map/utils/loadMapScript";
+import {
+  createMarkerIcon,
+  createUserMarkerIcon,
+} from "@pages/map/utils/mapHelpers";
+
+const useMapViewer = ({
+  mapRef,
+  places,
+  onMarkerClick,
+  userCoords,
+  moveToCurrentLocation,
+  onMoveComplete,
+  resetMap,
+  center,
+  markerPosition,
+  zoom = 11,
+  selectedPlace,
+  showOnlyLiked,
+}) => {
+  const mapInstance = useRef(null);
+  const userMarkerRef = useRef(null);
+  const markersRef = useRef({});
+  const hasAnimatedRef = useRef(false);
+  const [isMapInitialized, setIsMapInitialized] = useState(false);
+
+  const handleMarkerClick = useCallback(
+    (place) => {
+      Object.values(markersRef.current).forEach((marker) => {
+        marker.setIcon(createMarkerIcon(false, false));
+      });
+
+      const clickedMarker = markersRef.current[place.id];
+      if (clickedMarker) {
+        clickedMarker.setIcon(
+          createMarkerIcon(true, showOnlyLiked ? place.liked : false),
+        );
+      }
+
+      onMarkerClick?.(place);
+    },
+    [onMarkerClick, showOnlyLiked],
+  );
+
+  useEffect(() => {
+    if (isMapInitialized || (!userCoords && !center)) return;
+
+    loadNaverMapScript().then(() => {
+      const mapCenter = center
+        ? new window.naver.maps.LatLng(center.lat, center.lng)
+        : new window.naver.maps.LatLng(37.5665, 126.978);
+
+      mapInstance.current = new window.naver.maps.Map(mapRef.current, {
+        center: mapCenter,
+        zoom,
+      });
+
+      setIsMapInitialized(true);
+
+      places.forEach((place) => {
+        if (!place.coords?.lat || !place.coords?.lng) return;
+
+        const isHighlighted =
+          place.isSearchResult ||
+          (selectedPlace && selectedPlace.id === place.id);
+
+        const marker = new window.naver.maps.Marker({
+          position: new window.naver.maps.LatLng(
+            place.coords.lat,
+            place.coords.lng,
+          ),
+          map: mapInstance.current,
+          icon: createMarkerIcon(isHighlighted, place.liked),
+        });
+
+        markersRef.current[place.id] = marker;
+
+        window.naver.maps.Event.addListener(marker, "click", () =>
+          handleMarkerClick(place),
+        );
+      });
+
+      if (markerPosition) {
+        new window.naver.maps.Marker({
+          position: new window.naver.maps.LatLng(
+            markerPosition.lat,
+            markerPosition.lng,
+          ),
+          map: mapInstance.current,
+          icon: createMarkerIcon(true),
+        });
+      }
+    });
+  }, [
+    userCoords,
+    places,
+    center,
+    zoom,
+    selectedPlace,
+    markerPosition,
+    handleMarkerClick,
+    isMapInitialized,
+    mapRef,
+    showOnlyLiked,
+  ]);
+
+  useEffect(() => {
+    if (
+      userCoords &&
+      mapInstance.current &&
+      !hasAnimatedRef.current &&
+      isMapInitialized
+    ) {
+      hasAnimatedRef.current = true;
+
+      const target = new window.naver.maps.LatLng(
+        userCoords.lat,
+        userCoords.lng,
+      );
+      mapInstance.current.panTo(target);
+
+      const zoomTimeout = setTimeout(() => {
+        mapInstance.current.setZoom(17, true);
+
+        if (userMarkerRef.current) {
+          userMarkerRef.current.setMap(null);
+        }
+
+        userMarkerRef.current = new window.naver.maps.Marker({
+          position: target,
+          map: mapInstance.current,
+          icon: createUserMarkerIcon(),
+        });
+      }, 1800);
+
+      return () => clearTimeout(zoomTimeout);
+    }
+  }, [userCoords, isMapInitialized]);
+
+  useEffect(() => {
+    if (moveToCurrentLocation && userCoords && mapInstance.current) {
+      const newCenter = new window.naver.maps.LatLng(
+        userCoords.lat,
+        userCoords.lng,
+      );
+      mapInstance.current.setCenter(newCenter);
+      mapInstance.current.setZoom(17);
+
+      if (userMarkerRef.current) userMarkerRef.current.setMap(null);
+
+      userMarkerRef.current = new window.naver.maps.Marker({
+        position: newCenter,
+        map: mapInstance.current,
+        icon: createUserMarkerIcon(),
+      });
+
+      onMoveComplete?.();
+    }
+  }, [moveToCurrentLocation, userCoords, onMoveComplete]);
+
+  useEffect(() => {
+    if (resetMap && mapInstance.current) {
+      mapInstance.current.setCenter(
+        new window.naver.maps.LatLng(37.5665, 126.978),
+      );
+      mapInstance.current.setZoom(11.5);
+
+      if (userMarkerRef.current) {
+        userMarkerRef.current.setMap(null);
+        userMarkerRef.current = null;
+      }
+    }
+  }, [resetMap]);
+
+  useEffect(() => {
+    if (!mapInstance.current || !isMapInitialized) return;
+
+    const currentMarkerIds = new Set(Object.keys(markersRef.current));
+    const newPlaceIds = new Set(places.map((p) => String(p.id)));
+
+    currentMarkerIds.forEach((id) => {
+      if (!newPlaceIds.has(id)) {
+        markersRef.current[id].setMap(null);
+        delete markersRef.current[id];
+      }
+    });
+
+    places.forEach((place) => {
+      const isHighlighted =
+        place.isSearchResult ||
+        (selectedPlace && selectedPlace.id === place.id);
+
+      const marker = markersRef.current[place.id];
+
+      if (!marker) {
+        const newMarker = new window.naver.maps.Marker({
+          position: new window.naver.maps.LatLng(
+            place.coords.lat,
+            place.coords.lng,
+          ),
+          map: mapInstance.current,
+          icon: createMarkerIcon(isHighlighted, place.liked),
+        });
+
+        markersRef.current[place.id] = newMarker;
+
+        window.naver.maps.Event.addListener(newMarker, "click", () =>
+          handleMarkerClick(place),
+        );
+      } else {
+        marker.setIcon(createMarkerIcon(isHighlighted, place.liked));
+      }
+    });
+  }, [places, selectedPlace, isMapInitialized, handleMarkerClick]);
+};
+
+export default useMapViewer;

From 157f3d1c8de3f1e3f9054345d75786c78afa9dc7 Mon Sep 17 00:00:00 2001
From: syddl0 <137189866+shroqkf@users.noreply.github.com>
Date: Tue, 13 May 2025 00:46:14 +0900
Subject: [PATCH 2/5] =?UTF-8?q?Fix:=20=EC=B0=9C=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/map/components/PlaceContent.jsx | 20 ++++++--
 src/pages/map/hooks/useToggleLike.js      | 57 +++++++++++++++++------
 2 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/src/pages/map/components/PlaceContent.jsx b/src/pages/map/components/PlaceContent.jsx
index 6b5cb69..7c033d2 100644
--- a/src/pages/map/components/PlaceContent.jsx
+++ b/src/pages/map/components/PlaceContent.jsx
@@ -24,6 +24,7 @@ import { useState } from "react";
 const PlaceContent = ({ place, onToggleLike, showMapLink = true }) => {
   const userCoords = useUserCoords();
   const [showToast, setShowToast] = useState(false);
+  const [isLiking, setIsLiking] = useState(false);
 
   const handleRouteClick = (e) => {
     e.preventDefault();
@@ -76,6 +77,20 @@ const PlaceContent = ({ place, onToggleLike, showMapLink = true }) => {
     }
   };
 
+  const handleLikeClick = async (e) => {
+    e.stopPropagation();
+    if (isLiking) return;
+
+    setIsLiking(true);
+    try {
+      await onToggleLike?.(place.id);
+    } catch (err) {
+      console.error("좋아요 처리 실패:", err);
+    } finally {
+      setIsLiking(false);
+    }
+  };
+
   const fireIcons = {
     10: IcFire10,
     20: IcFire20,
@@ -157,10 +172,7 @@ const PlaceContent = ({ place, onToggleLike, showMapLink = true }) => {
           </a>
         )}
         <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onToggleLike?.(place.id);
-          }}
+          onClick={handleLikeClick}
           className="w-14 h-14 flex items-center justify-center rounded-md bg-gray-2"
         >
           <img
diff --git a/src/pages/map/hooks/useToggleLike.js b/src/pages/map/hooks/useToggleLike.js
index 31581b1..79afefa 100644
--- a/src/pages/map/hooks/useToggleLike.js
+++ b/src/pages/map/hooks/useToggleLike.js
@@ -1,7 +1,11 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import useAuthStore from "@/store/authStore";
-import { likeCompany, unlikeCompany } from "@apis/company/getLikedCompanies";
+import {
+  likeCompany,
+  unlikeCompany,
+  getLikedCompanies,
+} from "@apis/company/getLikedCompanies";
 
 export const useToggleLike = ({
   placesWithDistance,
@@ -13,53 +17,76 @@ export const useToggleLike = ({
   onRequireLogin,
 }) => {
   const [loading, setLoading] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
   const navigate = useNavigate();
 
   const toggleLike = async (targetId) => {
     const isAuthenticated = await useAuthStore.getState().checkAuth();
 
     if (!isAuthenticated) {
-      if (onRequireLogin) {
-        onRequireLogin();
-      } else {
-        navigate("/auth");
-      }
+      onRequireLogin ? onRequireLogin() : navigate("/auth");
       return;
     }
 
     const currentPlace = placesWithDistance.find((p) => p.id === targetId);
-    if (!currentPlace) return;
+    if (!currentPlace || isProcessing) return;
+
+    setIsProcessing(true);
+    setLoading(true);
 
     try {
-      setLoading(true);
+      // 서버 liked 상태 확인 (불일치 방지용)
+      const likedList = await getLikedCompanies();
+      const isActuallyLiked = likedList.some(
+        (c) => String(c.companyId) === String(targetId),
+      );
 
-      if (currentPlace.liked) {
+      // 로컬 상태와 서버 상태 불일치 시 보정
+      if (currentPlace.liked !== isActuallyLiked) {
+        const corrected = placesWithDistance.map((p) =>
+          p.id === targetId ? { ...p, liked: isActuallyLiked } : p,
+        );
+        setPlacesWithDistance(corrected);
+        if (selectedPlace?.id === targetId) {
+          setSelectedPlace({
+            ...selectedPlace,
+            liked: isActuallyLiked,
+          });
+        }
+      }
+
+      // 서버 상태 기준으로 실제 토글 실행
+      if (isActuallyLiked) {
         await unlikeCompany(targetId);
       } else {
         await likeCompany(targetId);
       }
 
+      // 최종 로컬 상태 반영
       const updated = placesWithDistance.map((p) =>
-        p.id === targetId ? { ...p, liked: !p.liked } : p,
+        p.id === targetId ? { ...p, liked: !isActuallyLiked } : p,
       );
       setPlacesWithDistance(updated);
 
       if (selectedPlace?.id === targetId) {
         setSelectedPlace({
           ...selectedPlace,
-          liked: !selectedPlace.liked,
+          liked: !isActuallyLiked,
           distance: currentPlace.distance,
           formattedDistance: currentPlace.formattedDistance,
         });
       }
 
-      setFilteredPlaces((prev) => {
-        if (!prev) return [];
-        return showOnlyLiked ? updated.filter((p) => p.liked) : updated;
-      });
+      if (setFilteredPlaces) {
+        setFilteredPlaces((prev) => {
+          if (!prev) return [];
+          return showOnlyLiked ? updated.filter((p) => p.liked) : updated;
+        });
+      }
     } catch (err) {
       console.error("찜 토글 실패:", err);
     } finally {
+      setIsProcessing(false);
       setLoading(false);
     }
   };

From 8d9eaaf53712997cfa00fcfa55d7e49b6d32217f Mon Sep 17 00:00:00 2001
From: syddl0 <137189866+shroqkf@users.noreply.github.com>
Date: Tue, 13 May 2025 23:56:20 +0900
Subject: [PATCH 3/5] =?UTF-8?q?Feat:=20=EA=B2=80=EC=83=89=20=EA=B2=B0?=
 =?UTF-8?q?=EA=B3=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=98=84=EC=9C=84?=
 =?UTF-8?q?=EC=B9=98=20=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/map/components/PlaceBottomSheet.jsx | 18 ++++--
 src/pages/search/SearchPage.jsx               | 57 ++++++++++++++-----
 src/pages/search/components/MapViewer.jsx     |  2 +
 src/pages/search/hooks/useMapViewer.js        | 14 +++--
 4 files changed, 67 insertions(+), 24 deletions(-)

diff --git a/src/pages/map/components/PlaceBottomSheet.jsx b/src/pages/map/components/PlaceBottomSheet.jsx
index 95d6491..7755005 100644
--- a/src/pages/map/components/PlaceBottomSheet.jsx
+++ b/src/pages/map/components/PlaceBottomSheet.jsx
@@ -7,7 +7,13 @@ import ReviewList from "@/pages/map/components/review/ReviewList";
 import useUIStore from "@/store/uiStore";
 import { usePaymentStore } from "@/store/paymentStore";
 
-const PlaceBottomSheet = ({ place, onClose, onToggleLike, onExpandChange }) => {
+const PlaceBottomSheet = ({
+  place,
+  onClose,
+  onToggleLike,
+  onExpandChange,
+  onHeightChange,
+}) => {
   const [shouldNavigateToReview, setShouldNavigateToReview] = useState(false);
 
   const setCompanyId = usePaymentStore((s) => s.setCompanyId);
@@ -59,7 +65,8 @@ const PlaceBottomSheet = ({ place, onClose, onToggleLike, onExpandChange }) => {
   useEffect(() => {
     controls.start({ height: MIN_HEIGHT });
     setIsExpanded(false);
-  }, [controls]);
+    onHeightChange?.(MIN_HEIGHT);
+  }, [controls, onHeightChange]);
 
   const handleTouchStart = (e) => {
     if (!isMobile) return;
@@ -87,13 +94,16 @@ const PlaceBottomSheet = ({ place, onClose, onToggleLike, onExpandChange }) => {
     if (delta < -50) {
       controls.start({ height: MAX_HEIGHT.current });
       setIsExpanded(true);
+      onHeightChange?.(MAX_HEIGHT.current); 
     } else if (delta > 100) {
       controls.start({ height: 0 }).then(() => {
+        onHeightChange?.(0); 
         onClose?.();
       });
     } else {
       controls.start({ height: MIN_HEIGHT });
       setIsExpanded(false);
+      onHeightChange?.(MIN_HEIGHT); 
     }
   };
 
@@ -170,8 +180,8 @@ const PlaceBottomSheet = ({ place, onClose, onToggleLike, onExpandChange }) => {
                 turnOnCamera={turnOnCamera}
                 onCloseCamera={() => setTurnOnCamera(false)}
                 onCaptureSuccess={(data) => {
-                  setCompanyInfo(data); // 즉시 로컬 상태에 저장
-                  setShowConfirm(true); // 그다음 Confirm 렌더링
+                  setCompanyInfo(data); 
+                  setShowConfirm(true); 
                 }}
               />
             )}
diff --git a/src/pages/search/SearchPage.jsx b/src/pages/search/SearchPage.jsx
index 98a4983..602c060 100644
--- a/src/pages/search/SearchPage.jsx
+++ b/src/pages/search/SearchPage.jsx
@@ -11,6 +11,7 @@ import { useUserCoords } from "./hooks/useUserCoords";
 import useAuthStore from "@/store/authStore";
 import HaveToLoginModal from "@components/common/HaveToLoginModal";
 import MapViewer from "./components/MapViewer";
+import { useToggleLike } from "../map/hooks/useToggleLike";
 
 const LOCAL_STORAGE_KEY = "recentSearches";
 
@@ -19,10 +20,13 @@ const SearchPage = () => {
   const [recentSearches, setRecentSearches] = useState([]);
   const [isSearched, setIsSearched] = useState(false);
   const [selectedPlace, setSelectedPlace] = useState(null);
+  const [moveToCurrentLocation, setMoveToCurrentLocation] = useState(false);
+
   const [isBottomSheetExpanded, setIsBottomSheetExpanded] = useState(false);
   const [isBottomSheetVisible, setIsBottomSheetVisible] = useState(false);
   const [step, setStep] = useState(1);
   const [showLoginModal, setShowLoginModal] = useState(false);
+  const [bottomSheetHeight, setBottomSheetHeight] = useState(220);
 
   const { companies: allPlaces, loading: isCompanyLoading } = useCompanyData();
   const userCoords = useUserCoords();
@@ -114,15 +118,17 @@ const SearchPage = () => {
   };
 
   const handleSelectPlace = async (place) => {
-    window.history.pushState({}, "");
     try {
       const preview = await getCompanyPreview(place.id);
-      const enriched = { ...place, ...preview };
-      setKeyword(enriched.name);
+      const enriched = {
+        ...place,
+        ...preview,
+        liked: preview.isSaved ?? false,
+      };
       setSelectedPlace(enriched);
       setIsBottomSheetVisible(true);
       setIsBottomSheetExpanded(false);
-      setStep(5);
+      setStep?.(5); // SearchPage인 경우
     } catch (err) {
       console.error("기업 상세 정보 불러오기 실패:", err);
     }
@@ -135,16 +141,15 @@ const SearchPage = () => {
     }
   };
 
-  const handleToggleLike = (id) => {
-    if (!isLoggedIn) {
-      setShowLoginModal(true);
-      return;
-    }
-
-    setSelectedPlace((prev) =>
-      prev?.id === id ? { ...prev, liked: !prev.liked } : prev
-    );
-  };
+  const { toggleLike: handleToggleLike } = useToggleLike({
+    placesWithDistance: selectedPlace ? [selectedPlace] : [],
+    setPlacesWithDistance: () => {},
+    setFilteredPlaces: () => {},
+    showOnlyLiked: false,
+    selectedPlace,
+    setSelectedPlace,
+    onRequireLogin: () => setShowLoginModal(true),
+  });
 
   return (
     <div className="relative min-h-screen bg-white">
@@ -218,14 +223,38 @@ const SearchPage = () => {
             zoom={17}
             selectedPlace={selectedPlace}
             onMarkerClick={() => setIsBottomSheetVisible(true)}
+            moveToCurrentLocation={moveToCurrentLocation}
+            onMoveComplete={() => setMoveToCurrentLocation(false)}
+            userCoords={userCoords}
+            disableAutoUserPan={true}
           />
 
+          {bottomSheetHeight <= 220 && (
+            <div
+              className={`absolute ${
+                bottomSheetHeight === 0 ? "bottom-28 sm:bottom-30" : "bottom-80"
+              } left-1/2 -translate-x-1/2 w-full max-w-[760px] px-4 z-[10003] flex justify-end transition-all duration-300`}
+            >
+              <button
+                onClick={() => setMoveToCurrentLocation(true)}
+                className="w-10 h-10 p-2 bg-white rounded-full shadow flex items-center justify-center"
+              >
+                <img
+                  src="/svgs/map/Ic_Current_Location.svg"
+                  alt="사용자 현재 위치 버튼"
+                  className="w-6 h-6"
+                />
+              </button>
+            </div>
+          )}
+
           {selectedPlace && isBottomSheetVisible && (
             <PlaceBottomSheet
               place={selectedPlace}
               onClose={() => setIsBottomSheetVisible(false)}
               onExpandChange={setIsBottomSheetExpanded}
               onToggleLike={handleToggleLike}
+              onHeightChange={setBottomSheetHeight}
             />
           )}
         </div>
diff --git a/src/pages/search/components/MapViewer.jsx b/src/pages/search/components/MapViewer.jsx
index 5a04e70..535ca61 100644
--- a/src/pages/search/components/MapViewer.jsx
+++ b/src/pages/search/components/MapViewer.jsx
@@ -13,6 +13,7 @@ const MapViewer = ({
   zoom = 11,
   selectedPlace,
   showOnlyLiked,
+  disableAutoUserPan = false,
 }) => {
   const mapRef = useRef(null);
 
@@ -28,6 +29,7 @@ const MapViewer = ({
     markerPosition,
     zoom,
     selectedPlace,
+    disableAutoUserPan,
   });
 
   return <div ref={mapRef} className="h-screen" />;
diff --git a/src/pages/search/hooks/useMapViewer.js b/src/pages/search/hooks/useMapViewer.js
index 248166f..484e5b3 100644
--- a/src/pages/search/hooks/useMapViewer.js
+++ b/src/pages/search/hooks/useMapViewer.js
@@ -18,6 +18,7 @@ const useMapViewer = ({
   zoom = 11,
   selectedPlace,
   showOnlyLiked,
+  disableAutoUserPan,
 }) => {
   const mapInstance = useRef(null);
   const userMarkerRef = useRef(null);
@@ -76,9 +77,10 @@ const useMapViewer = ({
 
         markersRef.current[place.id] = marker;
 
-        window.naver.maps.Event.addListener(marker, "click", () =>
-          handleMarkerClick(place),
-        );
+        window.naver.maps.Event.addListener(marker, "click", () => {
+          handleMarkerClick(place);
+          console.log("marker");
+        });
       });
 
       if (markerPosition) {
@@ -110,7 +112,8 @@ const useMapViewer = ({
       userCoords &&
       mapInstance.current &&
       !hasAnimatedRef.current &&
-      isMapInitialized
+      isMapInitialized &&
+      !disableAutoUserPan
     ) {
       hasAnimatedRef.current = true;
 
@@ -122,7 +125,6 @@ const useMapViewer = ({
 
       const zoomTimeout = setTimeout(() => {
         mapInstance.current.setZoom(17, true);
-
         if (userMarkerRef.current) {
           userMarkerRef.current.setMap(null);
         }
@@ -136,7 +138,7 @@ const useMapViewer = ({
 
       return () => clearTimeout(zoomTimeout);
     }
-  }, [userCoords, isMapInitialized]);
+  }, [userCoords, isMapInitialized, disableAutoUserPan]);
 
   useEffect(() => {
     if (moveToCurrentLocation && userCoords && mapInstance.current) {

From ecd9a98a66b4f7b0d3d2b58e6cacb83f4c4d74e2 Mon Sep 17 00:00:00 2001
From: syddl0 <137189866+shroqkf@users.noreply.github.com>
Date: Wed, 14 May 2025 00:40:51 +0900
Subject: [PATCH 4/5] =?UTF-8?q?Fix:=20=ED=98=84=EC=9C=84=EC=B9=98=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=8D=B0=EC=8A=A4=ED=81=AC=ED=83=91=20?=
 =?UTF-8?q?=EB=86=92=EC=9D=B4=20=EC=A1=B0=EC=A0=88=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/map/components/PlaceBottomSheet.jsx | 10 ++++----
 src/pages/search/SearchPage.jsx               | 23 +++++++++++++++----
 src/pages/search/hooks/useMapViewer.js        |  8 ++++++-
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/pages/map/components/PlaceBottomSheet.jsx b/src/pages/map/components/PlaceBottomSheet.jsx
index 7755005..aa7e5da 100644
--- a/src/pages/map/components/PlaceBottomSheet.jsx
+++ b/src/pages/map/components/PlaceBottomSheet.jsx
@@ -94,16 +94,15 @@ const PlaceBottomSheet = ({
     if (delta < -50) {
       controls.start({ height: MAX_HEIGHT.current });
       setIsExpanded(true);
-      onHeightChange?.(MAX_HEIGHT.current); 
     } else if (delta > 100) {
       controls.start({ height: 0 }).then(() => {
-        onHeightChange?.(0); 
+        onHeightChange?.(0);
         onClose?.();
       });
     } else {
       controls.start({ height: MIN_HEIGHT });
       setIsExpanded(false);
-      onHeightChange?.(MIN_HEIGHT); 
+      onHeightChange?.(MIN_HEIGHT);
     }
   };
 
@@ -111,6 +110,7 @@ const PlaceBottomSheet = ({
     if (!isMobile && !isExpanded) {
       controls.start({ height: MAX_HEIGHT.current });
       setIsExpanded(true);
+      onHeightChange?.(MAX_HEIGHT.current);
     }
   };
 
@@ -180,8 +180,8 @@ const PlaceBottomSheet = ({
                 turnOnCamera={turnOnCamera}
                 onCloseCamera={() => setTurnOnCamera(false)}
                 onCaptureSuccess={(data) => {
-                  setCompanyInfo(data); 
-                  setShowConfirm(true); 
+                  setCompanyInfo(data);
+                  setShowConfirm(true);
                 }}
               />
             )}
diff --git a/src/pages/search/SearchPage.jsx b/src/pages/search/SearchPage.jsx
index 602c060..c414e81 100644
--- a/src/pages/search/SearchPage.jsx
+++ b/src/pages/search/SearchPage.jsx
@@ -27,6 +27,16 @@ const SearchPage = () => {
   const [step, setStep] = useState(1);
   const [showLoginModal, setShowLoginModal] = useState(false);
   const [bottomSheetHeight, setBottomSheetHeight] = useState(220);
+  const [isDesktop, setIsDesktop] = useState(false);
+
+  useEffect(() => {
+    const updateSize = () => {
+      setIsDesktop(window.innerWidth >= 1024);
+    };
+    updateSize();
+    window.addEventListener("resize", updateSize);
+    return () => window.removeEventListener("resize", updateSize);
+  }, []);
 
   const { companies: allPlaces, loading: isCompanyLoading } = useCompanyData();
   const userCoords = useUserCoords();
@@ -229,11 +239,16 @@ const SearchPage = () => {
             disableAutoUserPan={true}
           />
 
-          {bottomSheetHeight <= 220 && (
+          {!isBottomSheetExpanded && (
             <div
-              className={`absolute ${
-                bottomSheetHeight === 0 ? "bottom-28 sm:bottom-30" : "bottom-80"
-              } left-1/2 -translate-x-1/2 w-full max-w-[760px] px-4 z-[10003] flex justify-end transition-all duration-300`}
+              className="absolute left-1/2 -translate-x-1/2 w-full max-w-[760px] px-4 z-[10003] flex justify-end transition-all duration-300"
+              style={{
+                bottom: !isBottomSheetVisible
+                  ? isDesktop
+                    ? "8rem"
+                    : "6rem"
+                  : `calc(${bottomSheetHeight}px + 6rem)`,
+              }}
             >
               <button
                 onClick={() => setMoveToCurrentLocation(true)}
diff --git a/src/pages/search/hooks/useMapViewer.js b/src/pages/search/hooks/useMapViewer.js
index 484e5b3..773c8bc 100644
--- a/src/pages/search/hooks/useMapViewer.js
+++ b/src/pages/search/hooks/useMapViewer.js
@@ -214,7 +214,13 @@ const useMapViewer = ({
         marker.setIcon(createMarkerIcon(isHighlighted, place.liked));
       }
     });
-  }, [places, selectedPlace, isMapInitialized, handleMarkerClick]);
+  }, [
+    places,
+    selectedPlace,
+    isMapInitialized,
+    handleMarkerClick,
+    showOnlyLiked,
+  ]);
 };
 
 export default useMapViewer;

From a69dd2651a0a7f5db2846fd7a2b629e96aba0e87 Mon Sep 17 00:00:00 2001
From: syddl0 <137189866+shroqkf@users.noreply.github.com>
Date: Wed, 14 May 2025 01:09:08 +0900
Subject: [PATCH 5/5] =?UTF-8?q?Design:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/join/components/LocationStep.jsx    | 13 ++++++------
 src/pages/join/components/NameStep.jsx        | 20 +++++++++----------
 src/pages/join/components/OwnerStep.jsx       | 13 ++++++------
 .../join/components/ProfileImageStep.jsx      | 12 +++++------
 4 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/src/pages/join/components/LocationStep.jsx b/src/pages/join/components/LocationStep.jsx
index 102a8a7..0a7022b 100644
--- a/src/pages/join/components/LocationStep.jsx
+++ b/src/pages/join/components/LocationStep.jsx
@@ -36,13 +36,12 @@ const LocationStep = ({ onNext, onBack }) => {
   const showNotSeoulMessage = checked;
 
   return (
-    <div className="flex flex-col justify-start items-start h-screen mt-20 px-6 bg-white relative overflow-auto">
-      <button
-        onClick={onBack}
-        className="absolute top-6 left-4 sm:top-8 sm:left-6 z-10"
-      >
-        <img src={BackIcon} alt="뒤로가기 버튼" className="w-6 h-6" />
-      </button>
+    <div className="flex flex-col justify-start items-start h-screen pt-40 px-6 bg-white relative overflow-auto">
+      <div className="fixed top-20 left-1/2 -translate-x-1/2 w-full max-w-[760px] px-4 sm:px-6 z-50">
+        <button onClick={onBack} aria-label="뒤로가기" className="w-8 h-8">
+          <img src={BackIcon} alt="뒤로가기 버튼" className="w-8 h-8" />
+        </button>
+      </div>
 
       <h1 className="text-h1 font-semibold mb-2">어느 동네에 사세요?</h1>
       <p className="text-b5 text-gray-500 mb-8">
diff --git a/src/pages/join/components/NameStep.jsx b/src/pages/join/components/NameStep.jsx
index ab0e1b6..43e675b 100644
--- a/src/pages/join/components/NameStep.jsx
+++ b/src/pages/join/components/NameStep.jsx
@@ -21,16 +21,16 @@ const NameStep = ({ onNext, onBack }) => {
       onSubmit={handleSubmit}
       className="flex flex-col justify-start mt-48 bg-white h-screen overflow-auto relative"
     >
-      <button
-        onClick={onBack}
-        className="absolute top-6 left-4 sm:top-8 sm:left-6 z-10"
-        aria-label="뒤로가기"
-      >
-        <img src={BackIcon} alt="뒤로가기 버튼" className="w-6 h-6" />
-      </button>
+      <div className="fixed top-20 left-1/2 -translate-x-1/2 w-full max-w-[760px] px-4 sm:px-6 z-50">
+        <button onClick={onBack} aria-label="뒤로가기" className="w-8 h-8">
+          <img src={BackIcon} alt="뒤로가기 버튼" className="w-8 h-8" />
+        </button>
+      </div>
 
       <section className="px-8">
-        <h1 className="text-h1 font-semibold text-gray-12">이름을 입력해주세요.</h1>
+        <h1 className="text-h1 font-semibold text-gray-12">
+          이름을 입력해주세요.
+        </h1>
         <p className="text-b5 text-gray-9 mt-2">투명한 리뷰에 사용됩니다.</p>
 
         <div className="mt-8">
@@ -79,9 +79,7 @@ const NameStep = ({ onNext, onBack }) => {
           type="submit"
           disabled={!name.trim()}
           className={`w-full py-6 text-center text-b1 font-semibold ${
-            name.trim()
-              ? "bg-primary-8 text-white"
-              : "bg-gray-4 text-white"
+            name.trim() ? "bg-primary-8 text-white" : "bg-gray-4 text-white"
           }`}
         >
           확인
diff --git a/src/pages/join/components/OwnerStep.jsx b/src/pages/join/components/OwnerStep.jsx
index b11413a..7d76c7f 100644
--- a/src/pages/join/components/OwnerStep.jsx
+++ b/src/pages/join/components/OwnerStep.jsx
@@ -17,13 +17,12 @@ const OwnerStep = ({ onNext, onBack }) => {
   };
 
   return (
-    <div className="flex flex-col justify-start h-screen bg-white px-6 mt-20">
-      <button
-        onClick={onBack}
-        className="absolute top-6 left-4 sm:top-8 sm:left-6 z-10"
-      >
-        <img src={BackIcon} alt="뒤로가기 버튼" className="w-6 h-6" />
-      </button>
+    <div className="flex flex-col justify-start h-screen bg-white px-6 pt-40">
+      <div className="fixed top-20 left-1/2 -translate-x-1/2 w-full max-w-[760px] px-4 sm:px-6 z-50">
+        <button onClick={onBack} aria-label="뒤로가기" className="w-8 h-8">
+          <img src={BackIcon} alt="뒤로가기 버튼" className="w-8 h-8" />
+        </button>
+      </div>
 
       <h1 className="text-h1 font-semibold mb-10">
         사회적기업의 사장님이신가요?
diff --git a/src/pages/join/components/ProfileImageStep.jsx b/src/pages/join/components/ProfileImageStep.jsx
index 92ad3d4..0873fb1 100644
--- a/src/pages/join/components/ProfileImageStep.jsx
+++ b/src/pages/join/components/ProfileImageStep.jsx
@@ -25,13 +25,11 @@ const ProfileImageStep = ({ onNext, onBack }) => {
 
   return (
     <div className="flex flex-col h-screen px-6 bg-white overflow-hidden relative">
-      <button
-        onClick={onBack}
-        className="absolute top-6 left-4 sm:top-8 sm:left-6 z-10"
-        aria-label="뒤로가기"
-      >
-        <img src={BackIcon} alt="뒤로가기" className="w-6 h-6 sm:w-7 sm:h-7" />
-      </button>
+      <div className="fixed top-20 left-1/2 -translate-x-1/2 w-full max-w-[760px] px-4 sm:px-6 z-50">
+        <button onClick={onBack} aria-label="뒤로가기" className="w-8 h-8">
+          <img src={BackIcon} alt="뒤로가기 버튼" className="w-8 h-8" />
+        </button>
+      </div>
 
       <h1 className="pt-24 sm:pt-32 text-h1 text-gray-12 sm:text-4xl font-semibold text-center">
         프로필사진을 설정해주세요.