upd

client/src/components/modals/UnitModal.tsx

@@ -7,7 +7,7 @@ import BookingIcon from "../icons/BookingIcon";
 import HeartIcon from "../icons/HeartIcon";
 import VirtualTourIcon from "../icons/VirtualTourIcon";
 import unitTypes from "../../data/unitTypes.json";
-import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { useEffect } from "react";
 import useFavoritesStore from "../../store/useFavoritesStore";
 import HeartFilledIcon from "../icons/HeartFilledIcon";
@@ -22,7 +22,6 @@ function UnitModal({ unit, type }: Props) {
   const { setModal } = useModal();
   const navigate = useNavigate();
   const { favoriteUnits, setFavoriteUnits } = useFavoritesStore();
-  const [searchParams, setSearchParams] = useSearchParams();
   const location = useLocation();
 
   function getViewImage(): string {
@@ -192,16 +191,14 @@ function UnitModal({ unit, type }: Props) {
     }
   }
 
-  useEffect(() => {
-    searchParams.set("unitNo", unit.unitNo);
-    setSearchParams(searchParams);
+  function handleClickTour() {
+    navigate(`/virtual-tour/${type}?unitNo=${unit.unitNo}`);
+  }
 
+  useEffect(() => {
     document.body.classList.add("overflow-y-hidden");
 
     return () => {
-      searchParams.delete("unitNo");
-      setSearchParams(searchParams);
-
       document.body.classList.remove("overflow-y-hidden");
     };
   }, []);
@@ -356,9 +353,7 @@ function UnitModal({ unit, type }: Props) {
                     icon={<VirtualTourIcon />}
                     text="3D tour"
                     className="justify-center text-sm w-full"
-                    onClick={() =>
-                      navigate(`/virtual-tour/${type}?unitNo=${unit.unitNo}`)
-                    }
+                    onClick={handleClickTour}
                   />
                 )}
                 <Button

client/src/components/modals/UnitModalForSearchPage.tsx

@@ -192,16 +192,20 @@ function UnitModalForSearchPage({ unit, type }: Props) {
     }
   }
 
-  useEffect(() => {
-    searchParams.set("unitNo", unit.unitNo);
-    setSearchParams(searchParams);
+  function handleClickTour() {
+    navigate(`/virtual-tour/${type}?unitNo=${unit.unitNo}`);
+  }
 
+  function handleClickBack() {
+    searchParams.delete("unitNo");
+    setSearchParams(searchParams);
+    setModal(null);
+  }
+
+  useEffect(() => {
     document.body.classList.add("overflow-y-hidden");
 
     return () => {
-      searchParams.delete("unitNo");
-      setSearchParams(searchParams);
-
       document.body.classList.remove("overflow-y-hidden");
     };
   }, []);
@@ -219,7 +223,7 @@ function UnitModalForSearchPage({ unit, type }: Props) {
                   <Button
                     buttonType="cta"
                     icon={<ArrowLeftIcon />}
-                    onClick={() => setModal(null)}
+                    onClick={handleClickBack}
                   />
                   <p className="text-2xl font-[#0D1922] font-semibold">
                     {
@@ -356,9 +360,7 @@ function UnitModalForSearchPage({ unit, type }: Props) {
                     icon={<VirtualTourIcon />}
                     text="3D tour"
                     className="justify-center text-sm w-full"
-                    onClick={() =>
-                      navigate(`/virtual-tour/${type}?unitNo=${unit.unitNo}`)
-                    }
+                    onClick={handleClickTour}
                   />
                 )}
                 <Button