Merge branch 'develop' of https://github.com/Step3-kakao-tech-campus/…

…Team16_FE into feat/#149
Step3-kakao-tech-campus · Nov 8, 2023 · 5a99f8f · 5a99f8f
2 parents ddf4988 + 7cfdb28
commit 5a99f8f
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 40 deletions.
diff --git a/public/index.html b/public/index.html
@@ -9,10 +9,6 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <script
-      type="text/javascript"
-      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_KEY%&libraries=services,clusterer,drawing"
-    ></script>
     <link rel="stylesheet" type="text/css" href="/plugin/slick/slick.css"/>
     <link rel="stylesheet" type="text/css" href="/plugin/slick/slick-theme.css"/>
 
@@ -25,4 +21,4 @@
     <div id="root"></div>
     <div id="modal-root"></div>
   </body>
-</html>
+</html>
diff --git a/src/pages/map/Map.tsx b/src/pages/map/Map.tsx
@@ -7,19 +7,22 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable no-new */
-import React, { useEffect, useRef } from 'react';
-import MapList, { SearchedPlace } from './MapList';
+import { useState, useEffect, useRef } from 'react';
+import MapList from './MapList';
+import MapSkeleton from './MapSkeleton';
 import useMap from './useMap';
 
 declare global {
   interface Window {
     kakao: any;
   }
 }
-const Map: React.FC = () => {
+
+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]);
@@ -40,8 +43,9 @@ const Map: React.FC = () => {
 
   return (
     <div className="Map flex flex-col md:flex-row items-center justify-center gap-8">
-      <div ref={mapRef} className="w-96 h-96" />
-      <MapList searchedPlace={searchedPlace} map={map} />
+      <div ref={mapRef} className={`w-96 h-96 ${loading ? 'hidden' : ''}`} />
+      {loading && <MapSkeleton listSize={4} />}
+      <MapList searchedPlace={searchedPlace} map={map} loading={loading} />
     </div>
   );
 };

diff --git a/src/pages/map/MapList.tsx b/src/pages/map/MapList.tsx
@@ -22,9 +22,12 @@ export interface SearchedPlace {
 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();
@@ -44,7 +47,9 @@ const MapList = ({
     return 0;
   });
 
-  const infowindow = new kakao.maps.InfoWindow({ zIndex: 1 });
+  if (loading) {
+    return <></>;
+  }
 
   return (
     <div className="w-96">

diff --git a/src/pages/map/MapSkeleton.tsx b/src/pages/map/MapSkeleton.tsx
@@ -0,0 +1,17 @@
+const MapSkeleton = ({ listSize }: { listSize: number }) => {
+  return (
+    <>
+      <div className="w-96 h-96 bg-gray-100" />
+      <div className="w-96">
+        {Array.from({ length: listSize }).map((_, index) => (
+          <div
+            className="bg-gray-100 h-20 border rounded-md p-4 mb-2"
+            key={index}
+          />
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default MapSkeleton;
diff --git a/src/pages/map/displayMarker.ts b/src/pages/map/displayMarker.ts
@@ -1,7 +1,9 @@
-const displayMarker = async (map: any, addressInfo: any) => {
+import { SearchedPlace } from './MapList';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const displayMarker = async (map: any, addressInfo: SearchedPlace) => {
   const { kakao } = window;
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const { isRegistered, x: lng, y: lat, place_name } = addressInfo;
+  const { isRegistered, x: lng, y: lat, place_name: placeName } = addressInfo;
 
   const DEFAULT_SHELTER_SRC = '/assets/images/racoon.png';
   const ANYMORY_SHELTER_SRC = '/assets/images/dog.png';
@@ -25,7 +27,7 @@ const displayMarker = async (map: any, addressInfo: any) => {
   const infowindow = new kakao.maps.InfoWindow({ zIndex: 1 });
   kakao.maps.event.addListener(marker, 'click', () => {
     infowindow.setContent(
-      `<div style="padding:5px;font-size:12px;">${place_name}</div>`,
+      `<div style="padding:5px;font-size:12px;">${placeName}</div>`,
     );
     infowindow.open(map, marker);
     setTimeout(() => {

diff --git a/src/pages/map/useMap.ts b/src/pages/map/useMap.ts
@@ -2,16 +2,18 @@
 import { useEffect, useState, RefObject, useRef } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import displayMarker from './displayMarker';
+import { SearchedPlace } from './MapList';
 
 function useMap<T>(
   containerRef: RefObject<T extends HTMLElement ? T : HTMLElement>,
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>,
 ) {
   const { kakao } = window;
   const [map, setMap] = useState<any>();
   const [searchedPlace, setSearchedPlace] = useState<any>([]);
   const boundRef = useRef<any>();
 
-  const displayMarkerByInfo = async (addressInfo: any) => {
+  const displayMarkerByInfo = async (addressInfo: SearchedPlace) => {
     if (!map) return;
     map.setBounds(boundRef.current);
     await displayMarker(map, addressInfo);
@@ -36,33 +38,44 @@ function useMap<T>(
   );
 
   useEffect(() => {
-    (() => {
-      if (!containerRef.current) return;
-      setMap(
-        new window.kakao.maps.Map(containerRef.current, {
-          center: new window.kakao.maps.LatLng(35.1759293, 126.9149701),
-          level: 3,
-        }),
-      );
-      function placesSearchCB(data: any[], status: any) {
-        if (status === kakao.maps.services.Status.OK) {
-          const bounds = new kakao.maps.LatLngBounds();
+    const mapScript = document.createElement('script');
+    mapScript.async = true;
+    mapScript.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.REACT_APP_KAKAO_KEY}&libraries=services&autoload=false`;
+    document.head.appendChild(mapScript);
 
-          for (let i = 0; i < data.length; i += 1) {
-            bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
+    const onLoadKakaoMap = () => {
+      if (!containerRef.current || !kakao) return;
+      window.kakao.maps.load(() => {
+        setMap(
+          new window.kakao.maps.Map(containerRef.current, {
+            center: new window.kakao.maps.LatLng(35.1759293, 126.9149701),
+            level: 3,
+          }),
+        );
+
+        function placesSearchCB(data: any[], status: any) {
+          if (status === kakao.maps.services.Status.OK) {
+            const bounds = new kakao.maps.LatLngBounds();
+
+            for (let i = 0; i < data.length; i += 1) {
+              bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
+            }
+            boundRef.current = bounds;
           }
-          boundRef.current = bounds;
+          setSearchedPlace(data);
         }
-        setSearchedPlace(data);
-      }
-      const ps = new kakao.maps.services.Places(); // 키워드로 장소를 검색합니다
-      ps.keywordSearch('보호소', placesSearchCB, {
-        location: new kakao.maps.LatLng(35.1759293, 126.9149701),
-        radius: 20000,
-        sort: kakao.maps.services.SortBy.DISTANCE,
+        const ps = new kakao.maps.services.Places(); // 키워드로 장소를 검색합니다
+        ps.keywordSearch('보호소', placesSearchCB, {
+          location: new kakao.maps.LatLng(35.1759293, 126.9149701),
+          radius: 20000,
+          sort: kakao.maps.services.SortBy.DISTANCE,
+        });
       });
-    })();
-  }, [containerRef]);
+      setLoading(false);
+    };
+    mapScript.addEventListener('load', onLoadKakaoMap);
+    onLoadKakaoMap();
+  }, [containerRef, kakao]);
 
   return { map, displayMarkerByInfo, searchedPlace, mutate, mutateData };
 }