From f48c3c7a2bf0d0051f93e61d8c0ed837bc318e49 Mon Sep 17 00:00:00 2001 From: limjeein Date: Fri, 21 Jul 2023 01:38:03 +0900 Subject: [PATCH] =?UTF-8?q?:zap:Modify=20:=20map=20=EC=84=B1=EB=8A=A5=20?= =?UTF-8?q?=EC=B5=9C=EC=A0=81=ED=99=94=20#155?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 5 +- src/components/mapInfo/PreschoolList.jsx | 8 +- src/components/mapInfo/PreschoolList.style.js | 100 +++++++++--------- src/components/mapInfo/PreschoolMap.jsx | 61 +++++++---- src/components/modal/MapModal/MapModal.jsx | 2 +- src/pages/map/Map.jsx | 15 ++- 6 files changed, 105 insertions(+), 86 deletions(-) diff --git a/public/index.html b/public/index.html index 1a0186e..8eb5b0a 100644 --- a/public/index.html +++ b/public/index.html @@ -8,10 +8,7 @@ href="%PUBLIC_URL%/favicon.ico.svg " /> - + BebeMarket diff --git a/src/components/mapInfo/PreschoolList.jsx b/src/components/mapInfo/PreschoolList.jsx index b18ba58..bd449be 100644 --- 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 index 8c53945..8628289 100644 --- 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 index daf3579..d5b97d5 100644 --- 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 index afdba47..7a84f6a 100644 --- 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 index a6d6262..147503e 100644 --- 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() { {preschoolList && ( - <> + Loading...}> - + )}