From a01897f50f71002bec6495c95ad2a76428135ef0 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Sun, 9 Nov 2025 09:30:55 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20Map=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20SSR=20=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95=20(50?=
 =?UTF-8?q?0=20=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Map.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/components/Map.tsx b/src/components/Map.tsx
index 7b9a2c2..36501c7 100644
--- a/src/components/Map.tsx
+++ b/src/components/Map.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
 import { Icon } from 'leaflet'
 import { Attraction } from '../types'
@@ -18,6 +19,13 @@ const attractionIcon = new Icon({
 })
 
 const Map = ({ attractions }: MapProps) => {
+  const [isMounted, setIsMounted] = useState(false)
+  
+  // 클라이언트 사이드에서만 렌더링 (SSR 에러 방지)
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
   // 구마모토 중심 좌표
   const kumamotoCenter: [number, number] = [32.8031, 130.7079]
   
@@ -25,6 +33,18 @@ const Map = ({ attractions }: MapProps) => {
   const tilesUrl = import.meta.env.VITE_MAP_TILES_URL || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
   const isCustomTiles = !!import.meta.env.VITE_MAP_TILES_URL
 
+  // 서버 사이드에서는 로딩 화면 표시
+  if (!isMounted) {
+    return (
+      <div className="bg-white rounded-lg shadow-md p-6">
+        <h2 className="text-2xl font-bold text-gray-800 mb-6">🗺️ 구마모토 지도</h2>
+        <div className="w-full h-96 rounded-lg overflow-hidden border border-gray-200 flex items-center justify-center bg-gray-100">
+          <p className="text-gray-500">지도를 불러오는 중...</p>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="bg-white rounded-lg shadow-md p-6">
       <h2 className="text-2xl font-bold text-gray-800 mb-6">🗺️ 구마모토 지도</h2>