feat: Map 페이지 2차 완성 #47

codestates-seb · Jan 17, 2023 · c1af169 · c1af169
1 parent d89131d
commit c1af169
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 44 deletions.
diff --git a/project/node_modules/.cache/default-development/0.pack b/project/node_modules/.cache/default-development/0.pack
diff --git a/project/node_modules/.cache/default-development/index.pack b/project/node_modules/.cache/default-development/index.pack
diff --git a/project/src/components/KakaoMap.tsx b/project/src/components/KakaoMap.tsx
@@ -2,6 +2,7 @@ import { useEffect } from "react";
 //import Geocode from 'react-geocode';
 import styled from "styled-components";
 
+
 declare global {
   interface Window {
     kakao: any;
@@ -10,14 +11,24 @@ declare global {
 
 // 안내창 커스텀입니다. 
 let info = 
-`<div style="padding:10px;width:190px;height:100px;background-color:white">
-  <h3 style="color:red">광화문</h3>
-  <hr>
-  <h3 style="font-size:13px;color:blue" >이렇게 설명도 쓸 수 있습니다.</h3>
+`<div style="width:190px;height:90px;background-color:white;padding:5px 5px;border:1px solid grey;border-radius:5px">
+  <h3 style="color:#6255F8; width:100%;height:30px;background-color:#faf7df;line-height:30px">광화문</h3>
+  
+  <h3 style="font-size:13px;color:#393939;font-weight:400;padding:6px 0" > 주소 : 종로구 사직로 161</h3>
+  <a href="www.naver.com" style="font-size:13px;text-decoration-line:none;margin-left:140px">더보기</a>
 </div>`
 
+  // 주소 더미 데이터
+  var listData = [
+    '종로구 사직로 161', 
+    '종로구 세종대로 198',
+    '종로구 세종대로 209', 
+    '종로구 세종대로 175'
+];
+
 
 const KakaoMap = ({width, height, dataList}:{width:string, height:string, dataList:string[]}) =>{
+
 
   useEffect(()=>{
     const container = document.getElementById('map');// 지도를 담을 dom영역
@@ -31,13 +42,6 @@ const KakaoMap = ({width, height, dataList}:{width:string, height:string, dataLi
     // 기본 주소 객체 생성 
     const map = new window.kakao.maps.Map(container,options);
 
-    // 주소 더미 데이터
-    var listData = [
-      '종로구 사직로 161', 
-      '종로구 세종대로 198',
-      '종로구 세종대로 209', 
-      '종로구 세종대로 175'
-  ];
 
     // 주소 - 좌표 변환
     // 주소-좌표 변환 객체를 생성합니다
@@ -55,8 +59,8 @@ const KakaoMap = ({width, height, dataList}:{width:string, height:string, dataLi
 
             // 인포 윈도우 설정
             var infowindow = new window.kakao.maps.InfoWindow({
-              content: '<div style="width:120px;text-align:center;font-size:12px":color:#3300C6>' + dataList[index] + '</div>',
-              disableAutoPan: true
+              content: info,
+              disableAutoPan: false
             });
           infowindow.open(map, marker);
             // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
@@ -77,27 +81,16 @@ const KakaoMap = ({width, height, dataList}:{width:string, height:string, dataLi
 
     // Marker
     // marker로 원하는 위도, 경도의 값을 나타냅니다. 
-    var marker = new window.kakao.maps.Marker({
-      map:map,
-      position:options.center
-    })
-
-    // var infoWindow = new window.kakao.maps.InfoWindow({
-    //   content: info,
-    //   removable:true
+    // var marker = new window.kakao.maps.Marker({
+    //   map:map,
+    //   position:options.center
     // })
-    // infoWindow.open(map,marker)
-
-    // window.kakao.maps.event.addListener(marker, "click", () => {
-    //   // 마커 위에 인포윈도우를 표시
-    //   infoWindow.open(map, marker);
-    // });
 
   },[])
 
   return(
     <>
-    <div id="map" style={{width:"840px",height:"500px"}}></div>
+    <div id="map" style={{width:width,height:height}}></div>
     </>
   )
 }

diff --git a/project/src/pages/Map.tsx b/project/src/pages/Map.tsx
@@ -8,6 +8,7 @@ import { FaMapMarkerAlt } from 'react-icons/fa';
 // 전체 영역을 감싸는 컴포넌트 입니다. 
 const Container = styled.div`
   display: flex;
+  clear:left;
 `
 
 // 좌측 명소 리스트를 보여주는 컴포넌트 입니다. 
@@ -23,9 +24,10 @@ margin-left: 20px;
   >button{
     cursor: pointer;
     background-color: white;
-    width: 295px;
+    width: 310px;
     height: 40px;
     margin-left: 5px;
+    padding-left: 10px;
     line-height: 40px;
     display: flex;
     border: 1px solid var(--black-600);
@@ -58,32 +60,48 @@ const SelectList = styled.div`
   top:0;
   border-collapse: collapse;
 
+::-webkit-scrollbar {
+  display: none;
+}
+
+
   >button{
     cursor: pointer;
-    font-weight: bold;
-    background-color: white;
-    width: 280px;
+    font-weight: 500;
+    background-color: #ffffffe5;
+    width: 300px;
     height: 40px;
     padding: 10px 0;
     border: 0.5px solid var(--black-500);
     :hover{
       color: var(--purple-400);
+      background-color: white;
+      font-weight: bold;
     }
   }
 `
 
 const PlaceComponent = styled.div`
   margin-top: 50px;
-  width: 292px;
-  height: 84vh;
+  width: 310px;
+  height: 82vh;
   margin-left: 26px;
   background-color: white;
+  overflow-y:scroll;
+  overflow-x: hidden;
+  -ms-overflow-style: none;
+
+  //뺄지말지 나중에 결정 
+  /* ::-webkit-scrollbar {
+  display: none;
+} */
 `
-const Place = styled.div`
+const Place = styled.div<{imgUrl:string}>`
     background-color: skyblue;
     width: 294px;
     height: 140px;
     margin-left: -1px;
+    margin-bottom: 5px;
     border-radius: var(--br-s);
     cursor: pointer;
     border:1px solid var(--black-600);
@@ -95,7 +113,7 @@ const Place = styled.div`
             rgba(20, 20, 20, 0.5) 50%,
             rgba(20, 20, 20, 0.35) 75%,
             rgba(20, 20, 20, 0.25) 100%
-      ), url(https://a.cdn-hotels.com/gdcs/production60/d1151/364e7147-c289-4151-9f1e-070061df4f54.jpg?impolicy=fcrop&w=1600&h=1066&q=medium);
+      ), url(${props => props.imgUrl});
     background-size: cover;
 
     >div{
@@ -105,7 +123,7 @@ const Place = styled.div`
       color:white;
     }
     >p{
-      padding:3px 0 0 20px;
+      padding:5px 0 0 20px;
       font-weight: bold;
       font-size: 12px;
       color:white;
@@ -122,6 +140,20 @@ const Map = () => {
       '종로구 세종대로 175'
   ];
 
+  // 이미지 더미데이터
+  var imgUrl = [
+    "https://a.cdn-hotels.com/gdcs/production123/d477/f88c6cdb-3e47-45f5-bfd7-d3775d1f3bcc.jpg?impolicy=fcrop&w=1600&h=1066&q=medium",
+    "https://a.cdn-hotels.com/gdcs/production43/d333/469e9780-6653-4879-a396-cea7714fc209.jpg?impolicy=fcrop&w=1600&h=1066&q=medium",
+    "https://a.cdn-hotels.com/gdcs/production90/d1936/e6925d65-cc4b-4605-8bd4-debb712fe764.jpg?impolicy=fcrop&w=1600&h=1066&q=medium",
+    "https://a.cdn-hotels.com/gdcs/production34/d1467/24a50358-70c4-4f8e-8b0e-a87a4c3c9d6a.jpg?impolicy=fcrop&w=1600&h=1066&q=medium",
+    "https://a.cdn-hotels.com/gdcs/production83/d933/8daa96c3-245c-40be-a43a-e1d9c079dbf8.jpg?impolicy=fcrop&w=1600&h=1066&q=medium",
+    "https://a.cdn-hotels.com/gdcs/production34/d1158/023da96d-32b2-4e9a-9f89-027267e196f2.jpg?impolicy=fcrop&w=1600&h=1066&q=medium",
+    "https://a.cdn-hotels.com/gdcs/production182/d600/7e691c6c-5109-4a45-b280-48e435ccb002.jpg?impolicy=fcrop&w=1600&h=1066&q=medium",
+    "https://a.cdn-hotels.com/gdcs/production92/d450/f9bebdad-1657-4f84-9441-97646651b5d5.jpg?impolicy=fcrop&w=1600&h=1066&q=medium",
+    "https://a.cdn-hotels.com/gdcs/production52/d667/87129ebe-2cc7-42c6-bf31-32fbb06574eb.jpg?impolicy=fcrop&w=1600&h=1066&q=medium",
+    "https://a.cdn-hotels.com/gdcs/production172/d698/73d6b117-c0d8-45d0-85c8-5fef62ad919b.jpg?impolicy=fcrop&w=1600&h=1066&q=medium"
+  ]
+
   // 드롭다운 메뉴를 보여줄지 말지 설정하는 변수
   const [dropdownView, setDropdownView] = useState(false)
   //현재 눌린 버튼의 값 설정
@@ -160,8 +192,6 @@ const Map = () => {
   ];
 
 
-  const url:string = "https://a.cdn-hotels.com/gdcs/production60/d1151/364e7147-c289-4151-9f1e-070061df4f54.jpg?impolicy=fcrop&w=1600&h=1066&q=medium"
-
   return(
     <>
     <Container>
@@ -185,13 +215,18 @@ const Map = () => {
         : null } 
       </DropDown>
       <PlaceComponent>
-        <Place onClick={()=>{alert('테스트')}}>
-          <div>종로</div>
-          <p><FaMapMarkerAlt size="10"></FaMapMarkerAlt> 서울 종로구 세종로</p>
-        </Place>
+        {imgUrl.map((el, index)=>{
+          return(
+            <Place onClick={()=>{alert('테스트')}} imgUrl={el} key={index}>
+            <div>종로</div>
+            <p><FaMapMarkerAlt size="10"></FaMapMarkerAlt> 서울 종로구 세종로</p>
+          </Place>
+          )
+        })
+}
       </PlaceComponent>
     </PlaceList>
-    <KakaoMap width="50%" height="90vh" dataList={listData}></KakaoMap>
+    <KakaoMap width="100%" height="90vh" dataList={listData}></KakaoMap>
     </Container>
     </>
   )