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...}>
-
+
)}