diff --git a/frontend/public/index.html b/frontend/public/index.html
index 31df5dcf..59394dc2 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -6,6 +6,13 @@
+
+
+
+
+
+
+
to your route, 투룻
diff --git a/frontend/src/components/common/GoogleMapLoadScript/GoogleMapLoadScript.constants.ts b/frontend/src/components/common/GoogleMapLoadScript/GoogleMapLoadScript.constants.ts
new file mode 100644
index 00000000..9bdc7615
--- /dev/null
+++ b/frontend/src/components/common/GoogleMapLoadScript/GoogleMapLoadScript.constants.ts
@@ -0,0 +1,3 @@
+import { Libraries } from "@react-google-maps/api";
+
+export const LIBRARIES: Libraries = ["maps", "places", "marker"];
diff --git a/frontend/src/components/common/GoogleMapLoadScript/GoogleMapLoadScript.tsx b/frontend/src/components/common/GoogleMapLoadScript/GoogleMapLoadScript.tsx
index f52d3bb0..4ac78dbf 100644
--- a/frontend/src/components/common/GoogleMapLoadScript/GoogleMapLoadScript.tsx
+++ b/frontend/src/components/common/GoogleMapLoadScript/GoogleMapLoadScript.tsx
@@ -1,24 +1,18 @@
-import { Libraries, LoadScript } from "@react-google-maps/api";
+import { useJsApiLoader } from "@react-google-maps/api";
-interface GoogleMapLoadScriptProps {
- libraries: Libraries;
- loadingElement?: React.ReactNode;
+import { LIBRARIES } from "@components/common/GoogleMapLoadScript/GoogleMapLoadScript.constants";
+
+interface GoogleMapLoadScriptProps extends React.PropsWithChildren {
+ loadingElement: React.ReactNode;
}
-const GoogleMapLoadScript = ({
- children,
- libraries,
- loadingElement,
-}: React.PropsWithChildren) => {
- return (
-
- {children}
-
- );
+const GoogleMapLoadScript = ({ children, loadingElement }: GoogleMapLoadScriptProps) => {
+ const { isLoaded } = useJsApiLoader({
+ googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAP_API_KEY ?? "",
+ libraries: LIBRARIES,
+ });
+
+ return isLoaded ? <>{children}> : loadingElement;
};
export default GoogleMapLoadScript;
diff --git a/frontend/src/components/pages/travelPlanDetail/TravelPlansTabContent/TravelPlansTabContent.tsx b/frontend/src/components/pages/travelPlanDetail/TravelPlansTabContent/TravelPlansTabContent.tsx
index b78e6ae9..43a900a8 100644
--- a/frontend/src/components/pages/travelPlanDetail/TravelPlansTabContent/TravelPlansTabContent.tsx
+++ b/frontend/src/components/pages/travelPlanDetail/TravelPlansTabContent/TravelPlansTabContent.tsx
@@ -17,10 +17,7 @@ const TravelPlansTabContent = ({ places }: { places: TravelPlanPlace[] }) => {
return (
-
}
- libraries={["places", "maps"]}
- >
+
}>
diff --git a/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx b/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx
index d59d80b4..9647dab4 100644
--- a/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx
+++ b/frontend/src/components/pages/travelPlanEdit/TravelPlanEditPage.tsx
@@ -192,7 +192,6 @@ const TravelPlanEditPage = () => {
}
- libraries={["places", "maps"]}
>
{travelPlanDays.map((travelDay, dayIndex) => (
diff --git a/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx b/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx
index 5dd9722e..05b6bb2d 100644
--- a/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx
+++ b/frontend/src/components/pages/travelPlanRegister/TravelPlanRegisterPage.tsx
@@ -171,7 +171,6 @@ const TravelPlanRegisterPage = () => {
}
- libraries={["places", "maps"]}
>
{travelPlanDays.map((travelDay, dayIndex) => (
diff --git a/frontend/src/components/pages/travelogueDetail/TravelogueTabContent/TravelogueTabContent.tsx b/frontend/src/components/pages/travelogueDetail/TravelogueTabContent/TravelogueTabContent.tsx
index 87e38d7b..59f52eab 100644
--- a/frontend/src/components/pages/travelogueDetail/TravelogueTabContent/TravelogueTabContent.tsx
+++ b/frontend/src/components/pages/travelogueDetail/TravelogueTabContent/TravelogueTabContent.tsx
@@ -15,10 +15,7 @@ const TravelogueTabContent = ({ places }: { places: TraveloguePlace[] }) => {
return (
- }
- libraries={["maps"]}
- >
+ }>
({
lat: Number(place.position.lat),
diff --git a/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx b/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx
index 40c83796..07d430d6 100644
--- a/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx
+++ b/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx
@@ -219,7 +219,6 @@ const TravelogueEditPage = () => {
}
- libraries={["places", "maps"]}
>
{travelogueDays.map((travelogueDay, dayIndex) => (
diff --git a/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx b/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx
index 1b9dc924..c73691cf 100644
--- a/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx
+++ b/frontend/src/components/pages/travelogueRegister/TravelogueRegisterPage.tsx
@@ -209,7 +209,6 @@ const TravelogueRegisterPage = () => {
}
- libraries={["places", "maps"]}
>
{travelogueDays.map((travelogueDay, dayIndex) => (