next js 13.5버전 사용 중입니다.
페이지 라우팅 사용하고 있고, /경로에서도 네트워크 창에 sdk.js~~의 status가 canceled가 납니다.
layout.tsx
import type { ReactNode } from "react";
import { cookies } from "next/headers";
import Script from "next/script";
import Header from "@/components/common/header/Header";
import Navigation from "@/components/common/navigation/Navigation";
import Provider from "@/components/common/provider/Provider";
import type { Metadata } from "next";
import "./globals.css";
export const metadata: Metadata = {
title: "Bagel Monster",
description: "Generated by create next app",
};
const KAKAO_MAP_URL = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY}.&libraries=services,clusterer&autoload=false`;
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="ko">
<body className="max-w-[560px] mx-auto flexcol items-center relative">
<Provider cookieValue={cookies().getAll()}>
<Header />
<main className="w-full mt-[3vh] mb-20">{children}</main>
<Navigation />
</Provider>
<Script src={KAKAO_MAP_URL} strategy="beforeInteractive" />
</body>
</html>
);
}
플랫폼에 http://localhost:3000 으로 잘 등록했고
appkey는 JavaScript 키로 .env.local 파일에 똑같이 생성했습니다
추가로 카카오맵을 사용하는 컴포넌트 코드도 보냅니다
"use client";
import React, { useEffect, useState } from "react";
import { Map, MapMarker } from "react-kakao-maps-sdk";
interface KakaoMapProps {
address: string;
}
export interface PositionCoordinates {
lng: number;
lat: number;
}
export default function KakaoMap({ address }: KakaoMapProps) {
const [isError, setIsError] = useState(false);
const [position, setPosition] = useState<PositionCoordinates>({
lng: 0,
lat: 0,
});
useEffect(() => {
let isMounted = true;
const getCoordinates = () => {
window.kakao.maps.load(() => {
const geocoder = new kakao.maps.services.Geocoder();
geocoder.addressSearch(address, (data, status) => {
if (isMounted) {
if (status === kakao.maps.services.Status.OK) {
setIsError(false);
setPosition({ lng: +data[0].x, lat: +data[0].y });
} else {
setIsError(true);
}
}
});
});
};
getCoordinates();
return () => {
isMounted = false;
};
}, [address]);
return (
<Map center={position} className="w-full h-[320px] rounded-lg" level={4}>
<MapMarker position={position}></MapMarker>
</Map>
);
}
KakaoMap 컴포넌트가 랜더링 되면
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading ‘maps’)
이 오류가 납니다
아래 코드는 KakaoMap 컴포넌트를 호출하는
app > layout.tsx, receipt폴더
receipt 폴더 > page.tsx 파일의 내용입니다
import React from "react";
import KakaoMap from "@/components/common/KakaoMap";
import OrderTotalPrice from "@/components/receipt/OrderTotalPrice";
import ReceiptButtons from "@/components/receipt/ReceiptButtons";
import ReceiptTextBox from "@/components/receipt/ReceiptTextBox";
import { changeFormat } from "@/utils/changeFormat";
const mockOrder = {
orderNum: 1235656132,
orderTime: "2023-11-06 09:51:21",
storeName: "코끼리 베이글 서초점",
storeTel: "02)749-7778",
storeAddress: "서울 용산구 서빙고로91길 10",
productList: ["올리브 치즈 베이글", "베이글", "베이글2"],
price: 16000,
discount: 4000,
};
export default function Receipt() {
return (
<div className="w-full tracking-tight leading-tight px-[12px]">
<h2 className="mt-[68px] text-[32px] tracking-tight leading-tight font-regular text-black">
<span className=" font-bold">주문</span>이 <br />
<span className=" font-bold">완료</span>되었습니다 :)
</h2>
<div className="flexcol gap-[14px] mt-[40px] py-[24px] border-y-[1px] border-[#C5C5C5]">
<ReceiptTextBox title="주문 시간" content={mockOrder.orderTime} />
<ReceiptTextBox title="주문 번호" content={mockOrder.orderNum} />
<ReceiptTextBox title="주문 상품명" content={changeFormat.outer(mockOrder.productList)} />
</div>
<div className="flexcol gap-[14px] py-[24px] border-b-[1px] border-[#C5C5C5]">
<ReceiptTextBox title="가게명" content={mockOrder.storeName} />
<ReceiptTextBox title="전화번호" content={mockOrder.storeTel} />
<ReceiptTextBox title="주소" content={mockOrder.storeAddress} />
<KakaoMap address={mockOrder.storeAddress} />
</div>
<div className="flexcol gap-[24px] mt-[62px]">
<OrderTotalPrice totalPrice={mockOrder.price - mockOrder.discount} />
<ReceiptButtons />
</div>
</div>
);
}