카카오맵 (타입 정의와 기능) [ 공모전]

---

🗺️  기능 요약

• 주차장 정보가 담겨 있음
• 주소를 기반으로 카카오 지도 좌표(위경도) 를 얻어서 마커로 표시
• 마커 클릭 시 모달이 아래에서 위로 올라와서 주차장 상세 정보 표시
• 카카오 맵 타입정의 !

---

🔧 2. 핵심 구성요소 설명

✅ Coords 타입 정의

interface Coords {
  lat: number;
  lng: number;
  label: string; // 주차장 이름
  address: string; // 주소
  info: { ... } // 상세 정보 (운영시간, 요금 등)
}

마커에 필요한 위경도(lat, lng) + 표시할 텍스트(label) + 추가 정보(info)를 묶은 구조야.

---

✅ Kakao Maps 타입 정의 (타입스크립트 정교화)

interface KakaoMaps {
    maps: {
      services: {
        Geocoder: new () => {
          addressSearch: (
            address: string,
            callback: (result: any[], status: string) => void
          ) => void;
        };
        Status: {
          OK: string;
        };
      };
    };
  }
  
  declare global {
    interface Window {
      kakao: KakaoMaps;
    }
  }

window.kakao에 붙는 실제 구조를 타입으로 선언해서 자동완성 & 타입 추론 가능하게 한 것!
👉 any 대신 실제 구조를 명시함으로써 안정성 증가.

---

✅ 지도 표시를 위한 상태들

const [coordsList, setCoordsList] = useState<Coords[]>([]);
const [isLoaded, setIsLoaded] = useState(false);
const [selected, setSelected] = useState<Coords | null>(null);

• coordsList: 마커에 필요한 좌표 정보 리스트
• isLoaded: 카카오맵 스크립트 로딩 체크
• selected: 클릭된 마커의 정보 (모달로 표시)

---

✅ 지도 API 로딩 체크

useEffect(() => {
  if (window.kakao && window.kakao.maps) {
    setIsLoaded(true);
  } else {
    const interval = setInterval(() => {
      ...
    }, 300);
    return () => clearInterval(interval);
  }
}, []);

 

Kakao Maps SDK는 script로 동적으로 로드되므로, window.kakao 객체가 준비될 때까지 기다려야 함
https://ojspp41.tistory.com/110[동적로딩]

---

✅ 주소 → 위경도 변환 (Geocoding)

const geocoder = new window.kakao.maps.services.Geocoder();
geocoder.addressSearch(item.address, (result, status) => {
  if (status === window.kakao.maps.services.Status.OK) {
    ...
    setCoordsList([...])
  }
});

Kakao Maps SDK의 지오코더를 이용해 주소 → 위경도 변환하고, 이를 지도에 마커로 표시함.

---

✅ 지도와 마커 표시

<Map center={coordsList[0]} ... >
  {coordsList.map(... => (
    <MapMarker position={{ lat, lng }} onClick={...}>
      <div>주차장 이름</div>
    </MapMarker>
  ))}
</Map>

여러 마커를 렌더링하고, 클릭 시 해당 마커의 정보를 selected 상태로 저장함

---

✅ 모달 구성 (선택된 마커 상세 정보)

{selected && (
  <div style={{ position: "fixed", bottom: 0, ... }}>
    <h2>{selected.label}</h2>
    <p>주소, 요금, 운영 시간 등</p>
  </div>
)}

하단 고정 모달, 선택된 마커 정보 표시
애니메이션도 @keyframes slideUp으로 자연스럽게 등장

---

🎯 결과

📍 Kakao 지도 사용법	react-kakao-maps-sdk로 지도/마커 표시
📦 주소 → 좌표 변환	Geocoder API 사용
🧠 타입 안전	declare global + custom KakaoMaps interface
🎯 상태관리	useState + useEffect로 좌표 및 모달 관리
💄 UI	마커 라벨 및 모달 구성, CSS 애니메이션
🧪 타입스크립트 실전 적용	객체 인터페이스와 strict 타입 구성