Merge pull request #190 from Step3-kakao-tech-campus/feat/#171

feat: 맵 로더 생성
Step3-kakao-tech-campus · Nov 10, 2023 · 8075893 · 8075893
2 parents 1b850c5 + 10ff508
commit 8075893
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 45 deletions.
diff --git a/src/pages/map/components/Map.tsx b/src/pages/map/components/Map.tsx
@@ -7,7 +7,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable no-new */
-import { useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import MapList from './MapList';
 import useMap from '../useMap';
 
@@ -19,8 +19,9 @@ declare global {
 
 const Map = () => {
   const mapRef = useRef<HTMLDivElement>(null);
+  const [loading, setLoading] = useState(true);
   const { map, displayMarkerByInfo, searchedPlace, mutate, mutateData } =
-    useMap(mapRef);
+    useMap(mapRef, setLoading);
   useEffect(() => {
     mutate(searchedPlace);
   }, [searchedPlace]);
@@ -41,8 +42,11 @@ const Map = () => {
 
   return (
     <div className="Map flex flex-col md:flex-row items-center justify-center gap-8">
+      {loading && (
+        <div className="loader bg-black absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" />
+      )}
       <div ref={mapRef} className={`w-96 h-96`} />
-      <MapList searchedPlace={searchedPlace} map={map} />
+      <MapList searchedPlace={searchedPlace} map={map} loading={loading} />
     </div>
   );
 };

diff --git a/src/pages/map/components/MapList.tsx b/src/pages/map/components/MapList.tsx
@@ -6,10 +6,12 @@ import { SearchedPlace } from '../mapType';
 const MapList = ({
   searchedPlace,
   map,
+  loading,
 }: {
   searchedPlace: SearchedPlace[];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   map: any;
+  loading: boolean;
 }) => {
   const { kakao } = window;
   const navigate = useNavigate();
@@ -30,48 +32,51 @@ const MapList = ({
   });
 
   return (
-    <div className="w-96">
-      {searchedPlace.map((place) => (
-        <div
-          key={place.id}
-          onMouseEnter={() => {
-            const moveLatLon = new kakao.maps.LatLng(
-              parseFloat(place.y),
-              parseFloat(place.x),
-            );
-            map.setCenter(moveLatLon);
-          }}
-          onClick={() => {
-            if (place.isRegistered) {
-              navigate(`/shelter/${place.shelterId}/1`);
-            } else {
-              setUnRegisteredClick(true);
-              setTimeout(() => {
-                setUnRegisteredClick(false);
-              }, 1000);
-            }
-          }}
-          className={`${
-            !place.isRegistered && unRegisteredClick
-              ? 'bg-red-200 '
-              : 'bg-white hover:bg-gray-100 '
-          } cursor-pointer border rounded-md p-4 mb-2 transition duration-300 ease-in-out`}
-        >
-          {place.isRegistered && (
-            <div className="mx-auto w-1/2 text-brand-color">
-              {`애니모리 등록 보호소`}
-            </div>
-          )}
-          <div>{place.place_name}</div>
-          <div className="text-sm">{place.road_address_name}</div>
-        </div>
-      ))}
-      {unRegisteredClick && (
-        <div className="text-red-600 text-sm">
-          등록되지 않은 보호소는 클릭할 수 없습니다.
-        </div>
-      )}
-    </div>
+    <>
+      {loading && <div className="loader" />}
+      <div className="w-96">
+        {searchedPlace.map((place) => (
+          <div
+            key={place.id}
+            onMouseEnter={() => {
+              const moveLatLon = new kakao.maps.LatLng(
+                parseFloat(place.y),
+                parseFloat(place.x),
+              );
+              map.setCenter(moveLatLon);
+            }}
+            onClick={() => {
+              if (place.isRegistered) {
+                navigate(`/shelter/${place.shelterId}/1`);
+              } else {
+                setUnRegisteredClick(true);
+                setTimeout(() => {
+                  setUnRegisteredClick(false);
+                }, 1000);
+              }
+            }}
+            className={`${
+              !place.isRegistered && unRegisteredClick
+                ? 'bg-red-200 '
+                : 'bg-white hover:bg-gray-100 '
+            } cursor-pointer border rounded-md p-4 mb-2 transition duration-300 ease-in-out`}
+          >
+            {place.isRegistered && (
+              <div className="mx-auto w-1/2 text-brand-color">
+                {`애니모리 등록 보호소`}
+              </div>
+            )}
+            <div>{place.place_name}</div>
+            <div className="text-sm">{place.road_address_name}</div>
+          </div>
+        ))}
+        {unRegisteredClick && (
+          <div className="text-red-600 text-sm">
+            등록되지 않은 보호소는 클릭할 수 없습니다.
+          </div>
+        )}
+      </div>
+    </>
   );
 };
 

diff --git a/src/pages/map/useMap.ts b/src/pages/map/useMap.ts
@@ -6,6 +6,7 @@ import { SearchedPlace } from './mapType';
 
 function useMap<T>(
   containerRef: RefObject<T extends HTMLElement ? T : HTMLElement>,
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>,
 ) {
   const { kakao } = window;
   const [map, setMap] = useState<any>();
@@ -29,6 +30,7 @@ function useMap<T>(
       }).then((res) => res.json()),
     {
       onSuccess: (data) => {
+        setLoading(false);
         if (data.success === false) {
           throw new Error(data.error.message);
         }