Nextjs13 + kakao map api
ReactKakaoMapSDK를 사용하여 간편하게 kakaomap을 가져올 수 있다.
https://react-kakao-maps-sdk.jaeseokim.dev/docs/intro
import Script from "next/script";
const KAKAO_SDK_URL = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_API_KEY}&autoload=false`;
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<Script src={KAKAO_SDK_URL} strategy="beforeInteractive" />
{children}
</body>
</html>
);
}종일 지도가 잠깐 나왔다가 안되서 어디가 문제였나 했더니 KAKAO_SDK_URL을 제대로 지정하지 않아서 api 요청이 잘못 됐던 거였다ㅠ
Tailwind
group-hover
상위에서 group으로 묶어주고 group-hover같은걸로 바뀔 요소를 만들어주면 해당 그룹이 hover 상태일 때 같이 css가 동적으로 바뀐다!
<div
key={idx}
className="group flex-col items-center gap-[5px] inline-flex p-[20px]"
>
<div className="text-center text-zinc-500 text-lg group-hover:cursor-pointer hover:text-neutral-700">
{item}
</div>
<div className="w-[66px] h-[3px] bg-white group-hover:bg-sky-800"></div>
</div>
https://github.com/Hediar?tab=repositories