React Kakao map 적용

resolve #95

구현 내용

KakaoMap.js 에 만 몰아져있던 렌더링 로직을 컴포넌트화 시킴

NormalMarker.js
SmallMarker.js
InfoWindowCard.js

필요한 파일

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.17.0-alpha.5/antd.min.css" integrity="sha512-
TlajG0k9/9/K6jh85DE2TmxyUvJPdMA9lcikWtoPDKMEs96bTFz80lyRPHD3v4eo+jrF4u1VLxERGsDN5XBmzw=="
 crossorigin="anonymous" referrerpolicy="no-referrer" />

antdesign 과 완벽하게 호환되기 위해 다음 cdn load 부분 추가

마커 누를떄 나오는 창 개선

기존 카카오 infowindow 의 css style 을 바꿀수 없는 문제로 인해 <CustomOverlayMap/> 사용함

<CustomOverlayMap/> 를 쓰기 위해서 index.html 의 <style> 태그안 다음의 내용이 들어가야함

      .wrap {position: absolute;left: 0;bottom: 40px;width: 288px;height: 132px;margin-left: -144px;text-align: left;overflow: hidden;font-size: 12px;font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;line-height: 1.5;}
      .wrap * {padding: 0;margin: 0;}
      .wrap .info {width: 286px;height: 120px;border-radius: 5px;border-bottom: 2px solid #ccc;border-right: 1px solid #ccc;overflow: hidden;background: #fff;}
      .wrap .info:nth-child(1) {border: 0;box-shadow: 0px 1px 2px #888;}
      .info .title {padding: 5px 0 0 10px;height: 30px;background: #eee;border-bottom: 1px solid #ddd;font-size: 18px;font-weight: bold;}
      .info .close {position: absolute;top: 10px;right: 10px;color: #888;width: 17px;height: 17px;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png');}
      .info .close:hover {cursor: pointer;}
      .info .body {position: relative;overflow: hidden;}
      .info .desc {position: relative;margin: 13px 0 0 90px;height: 75px;}
      .desc .ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
      .desc .jibun {font-size: 11px;color: #888;margin-top: -2px;}
      .info .img {position: absolute;top: 6px;left: 5px;width: 73px;height: 71px;border: 1px solid #ddd;color: #888;overflow: hidden;}
      .info:after {content: '';position: absolute;margin-left: -12px;left: 50%;bottom: 0;width: 22px;height: 12px;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}
      .info .link {color: #5085BB;}

이후 사용할때는 원하는 값들을

<div className="wrap">
              <div className="info">
                <여기/>
              </div>
      </div>

<여기/> 에 넣어주면 됨

resolve #102

사이드바 이슈 해결

전체 창 크기를 제한둠으로써 스크롤될때 왼쪽 하단 가게 리스트들이 벗어져 나가는것을 해결
<Pagination/> 태그의 사이즈를 작게 두어서 overflow 가 안되게 끔 해결

resolve #103

배경 색깔 #a6cfe2 사용
Form 태그 구,동을 상단으로 올림
<List.item> 안에 내용을 임시로 채움

KIMJINOH97 / Hotplace-map

React Kakao map sdk 패치 + UI 버그 수정 #104