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) => (