Merge pull request #156 from FRONTENDSCHOOL5/feature/map

⚡Modify : map 성능 최적화 #155
FRONTENDSCHOOL5 · Jul 20, 2023 · aa6c514 · aa6c514
2 parents 0e61e03 + f48c3c7
commit aa6c514
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 86 deletions.
diff --git a/public/index.html b/public/index.html
@@ -8,10 +8,7 @@
       href="%PUBLIC_URL%/favicon.ico.svg
       "
     />
-    <script
-      type="text/javascript"
-      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_MAP_KEY%"
-    ></script>
+
     <title>BebeMarket</title>
   </head>
 

diff --git a/src/components/mapInfo/PreschoolList.jsx b/src/components/mapInfo/PreschoolList.jsx
@@ -9,11 +9,7 @@ import {
   mapSearchValueState,
 } from '../../atoms/Atoms';
 
-export default function PreschoolList({
-  list,
-  onLocationChange,
-  handleSearchChange,
-}) {
+function PreschoolList({ list, onLocationChange, handleSearchChange }) {
   const [currentPage, setCurrentPage] = useState(0);
   const perPage = 10;
 
@@ -112,3 +108,5 @@ export default function PreschoolList({
     </>
   );
 }
+
+export default React.memo(PreschoolList);
diff --git a/src/components/mapInfo/PreschoolList.style.js b/src/components/mapInfo/PreschoolList.style.js
@@ -2,55 +2,6 @@ import styled from 'styled-components';
 import ReactPaginate from 'react-paginate';
 import basicImage from '../../assets/images/basic-profile-img.svg';
 
-export const ListContent = styled.li`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 30px;
-  border-bottom: 1px solid #ddd;
-  background: #fff;
-`;
-
-export const ContentWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-export const ContentTitle = styled.h2`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: 700;
-  font-size: 17px;
-  color: var(--main-color);
-`;
-
-export const ContentInfo = styled.p`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 15px;
-  color: var(--sub-text-color);
-`;
-export const ContentNumber = styled.p`
-  font-size: 15px;
-  color: var(--sub-text-color);
-`;
-
-export const ContentNumberBold = styled.span`
-  padding-right: 7px;
-`;
-
-export const Location = styled.img`
-  width: 32px;
-  object-fit: cover;
-  cursor: pointer;
-  margin-left: 50px;
-`;
-
 export const ListContainer = styled.article`
   width: 30%;
   height: 100%;
@@ -105,6 +56,55 @@ export const SearchSubmitIcon = styled.img`
   height: 20px;
 `;
 
+export const ListContent = styled.li`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 30px;
+  border-bottom: 1px solid #ddd;
+  background: #fff;
+`;
+
+export const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export const ContentTitle = styled.h2`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 700;
+  font-size: 17px;
+  color: var(--main-color);
+`;
+
+export const ContentInfo = styled.p`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 15px;
+  color: var(--sub-text-color);
+`;
+export const ContentNumber = styled.p`
+  font-size: 15px;
+  color: var(--sub-text-color);
+`;
+
+export const ContentNumberBold = styled.span`
+  padding-right: 7px;
+`;
+
+export const Location = styled.img`
+  width: 32px;
+  object-fit: cover;
+  cursor: pointer;
+  margin-left: 50px;
+`;
+
 export const StyledReactPaginate = styled(ReactPaginate)`
   display: flex;
   justify-content: center;
@@ -126,7 +126,6 @@ export const StyledReactPaginate = styled(ReactPaginate)`
     margin: 0 5px;
     cursor: pointer;
     border-radius: 5px;
-    padding: 5px 8px;
   }
 
   a {
@@ -135,6 +134,7 @@ export const StyledReactPaginate = styled(ReactPaginate)`
     align-items: center;
     width: 100%;
     height: 100%;
+    padding: 5px 8px;
   }
 
   .active {

diff --git a/src/components/mapInfo/PreschoolMap.jsx b/src/components/mapInfo/PreschoolMap.jsx
@@ -27,27 +27,46 @@ function PreschoolMap({
     setOpenModal(false);
   };
 
-  useEffect(() => {
-    const script = document.createElement('script');
-    script.src =
-      '//dapi.kakao.com/v2/maps/sdk.js?appkey=17703254ea82341d185ec5149d6948f4&libraries=services';
-    script.async = true;
-    document.head.appendChild(script);
-
-    script.onload = () => {
-      const { kakao } = window;
-      const container = document.getElementById('map');
-      const options = {
-        center: new kakao.maps.LatLng(37.566824, 126.978652),
-        level: 8,
-      };
-      const map = new kakao.maps.Map(container, options);
-
-      const zoomControl = new kakao.maps.ZoomControl();
-      map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
+  const loadScript = (url) => {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = url;
+      script.async = true;
+      script.onload = resolve;
+      script.onerror = reject;
+      document.head.appendChild(script);
+    });
+  };
 
-      setMap(map);
-    };
+  useEffect(() => {
+    loadScript(
+      `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.REACT_APP_KAKAO_MAP_KEY}&autoload=false&libraries=services`,
+    )
+      .then(() => {
+        const scriptCheckInterval = setInterval(() => {
+          if (window.kakao) {
+            clearInterval(scriptCheckInterval);
+
+            window.kakao.maps.load(() => {
+              const { kakao } = window;
+              const container = document.getElementById('map');
+              const options = {
+                center: new kakao.maps.LatLng(37.566824, 126.978652),
+                level: 8,
+              };
+              const map = new kakao.maps.Map(container, options);
+
+              const zoomControl = new kakao.maps.ZoomControl();
+              map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
+
+              setMap(map);
+            });
+          }
+        });
+      })
+      .catch((err) => {
+        console.error('Failed to load Kakao Maps SDK:', err);
+      });
   }, []);
 
   useEffect(() => {
@@ -183,4 +202,4 @@ function PreschoolMap({
   );
 }
 
-export default PreschoolMap;
+export default React.memo(PreschoolMap);
diff --git a/src/components/modal/MapModal/MapModal.jsx b/src/components/modal/MapModal/MapModal.jsx
@@ -70,4 +70,4 @@ const Modal = ({ closeModal, selectedItem }) => {
   );
 };
 
-export default Modal;
+export default React.memo(Modal);
diff --git a/src/pages/map/Map.jsx b/src/pages/map/Map.jsx
@@ -1,8 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, lazy, Suspense } from 'react';
 import TopFollowNav from '../../components/common/topNav/TopFollowNav';
 import TabMenu from '../../components/common/tab/TabMenu';
-import PreschoolMap from '../../components/mapInfo/PreschoolMap';
-import PreschoolList from '../../components/mapInfo/PreschoolList';
+const PreschoolMap = lazy(() =>
+  import('../../components/mapInfo/PreschoolMap'),
+);
+const PreschoolList = lazy(() =>
+  import('../../components/mapInfo/PreschoolList'),
+);
+
 import * as S from './Map.style';
 import { useRecoilState } from 'recoil';
 import { preschoolListState, mapSearchValueState } from '../../atoms/Atoms';
@@ -62,7 +67,7 @@ function Map() {
       <TopFollowNav />
       <S.Map>
         {preschoolList && (
-          <>
+          <Suspense fallback={<div>Loading...</div>}>
             <PreschoolMap
               list={preschoolList}
               mapList={mapList}
@@ -80,7 +85,7 @@ function Map() {
               handleSearchChange={handleSearchChange}
               searchValue={searchValue}
             />
-          </>
+          </Suspense>
         )}
       </S.Map>
       <TabMenu />
-Original file line number
+Diff line change
@@ Expand Up / @@ -70,4 +70,4 @@ const Modal = ({ closeModal, selectedItem }) => { @@
       );
     };
-    export default Modal;
+    export default React.memo(Modal);