diff --git a/project/node_modules/.cache/default-development/0.pack b/project/node_modules/.cache/default-development/0.pack
index 2f0016e1..a62c4e27 100644
Binary files a/project/node_modules/.cache/default-development/0.pack and b/project/node_modules/.cache/default-development/0.pack differ
diff --git a/project/node_modules/.cache/default-development/index.pack b/project/node_modules/.cache/default-development/index.pack
index 0811596c..8a1ae5b4 100644
Binary files a/project/node_modules/.cache/default-development/index.pack and b/project/node_modules/.cache/default-development/index.pack differ
diff --git a/project/src/Main.tsx b/project/src/Main.tsx
index 10b03802..fe93d10b 100644
--- a/project/src/Main.tsx
+++ b/project/src/Main.tsx
@@ -1,7 +1,7 @@
import styled from 'styled-components';
import Login from './components/Login';
import KakaoMap from './components/KakaoMap';
-
+import Map from './pages/Map';
import Post from "./pages/Post";
import PlaceDetail from './pages/PlaceDetail';
import Modal from './components/Modal';
@@ -28,7 +28,7 @@ function Main() {
return (
<>
-
+
);
diff --git a/project/src/components/KakaoMap.tsx b/project/src/components/KakaoMap.tsx
index e5df36ed..a6047fbc 100644
--- a/project/src/components/KakaoMap.tsx
+++ b/project/src/components/KakaoMap.tsx
@@ -17,7 +17,7 @@ let info =
`
-const KakaoMap = () =>{
+const KakaoMap = ({width, height, dataList}:{width:string, height:string, dataList:string[]}) =>{
useEffect(()=>{
const container = document.getElementById('map');// 지도를 담을 dom영역
@@ -42,7 +42,7 @@ const KakaoMap = () =>{
// 주소 - 좌표 변환
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new window.kakao.maps.services.Geocoder();
- listData.forEach(function(addr,index){
+ dataList.forEach(function(addr,index){
geocoder.addressSearch(addr, function(result:any, status:any) {
// 정상적으로 검색이 완료됐으면
if (status === window.kakao.maps.services.Status.OK) {
@@ -55,7 +55,7 @@ const KakaoMap = () =>{
// 인포 윈도우 설정
var infowindow = new window.kakao.maps.InfoWindow({
- content: '' + listData[index] + '
',
+ content: '' + dataList[index] + '
',
disableAutoPan: true
});
infowindow.open(map, marker);
diff --git a/project/src/dummyData.json b/project/src/dummyData.json
index f0488169..f993d9f7 100644
--- a/project/src/dummyData.json
+++ b/project/src/dummyData.json
@@ -236,5 +236,32 @@
"recommend": "212",
"memberId": "1"
}
+ ],
+ "region":[
+ { "id": "0", "post": "강남구"},
+ { "id": "1", "post": "강동구"},
+ { "id": "2", "post": "강북구"},
+ { "id": "3", "post": "강서구"},
+ { "id": "4", "post": "관악구"},
+ { "id": "5", "post": "광진구"},
+ { "id": "6", "post": "구로구"},
+ { "id": "7", "post": "금천구"},
+ { "id": "8", "post": "노원구"},
+ { "id": "9", "post": "도봉구"},
+ { "id": "10", "post": "동대문구"},
+ { "id": "11", "post": "동작구"},
+ { "id": "12", "post": "마포구"},
+ { "id": "13", "post": "서대문구"},
+ { "id": "14", "post": "서초구"},
+ { "id": "15", "post": "성동구"},
+ { "id": "16", "post": "성북구"},
+ { "id": "17", "post": "송파구"},
+ { "id": "18", "post": "양천구"},
+ { "id": "19", "post": "영등포구"},
+ { "id": "20", "post": "용산구"},
+ { "id": "21", "post": "은평구"},
+ { "id": "22", "post": "종로구"},
+ { "id": "23", "post": "중구"},
+ { "id": "24", "post": "중랑구"}
]
}
diff --git a/project/src/pages/Map.tsx b/project/src/pages/Map.tsx
new file mode 100644
index 00000000..be2fe34f
--- /dev/null
+++ b/project/src/pages/Map.tsx
@@ -0,0 +1,200 @@
+import styled from "styled-components";
+import KakaoMap from "../components/KakaoMap";
+import dummy from "../dummyData.json";
+import { useState, useEffect } from "react";
+import { RiArrowDropDownLine} from 'react-icons/ri';
+import { FaMapMarkerAlt } from 'react-icons/fa';
+
+// 전체 영역을 감싸는 컴포넌트 입니다.
+const Container = styled.div`
+ display: flex;
+`
+
+// 좌측 명소 리스트를 보여주는 컴포넌트 입니다.
+const PlaceList = styled.div`
+ width: 25%;
+ height: 90vh;
+ padding: 10px 0;
+`
+
+const DropDown = styled.article`
+position: absolute;
+margin-left: 20px;
+ >button{
+ cursor: pointer;
+ background-color: white;
+ width: 295px;
+ height: 40px;
+ margin-left: 5px;
+ line-height: 40px;
+ display: flex;
+ border: 1px solid var(--black-600);
+ border-radius: var(--br-s);
+ >div:nth-child(1){
+ width: 150px;
+ height: 40px;
+ text-align: center;
+ font-weight: bold;
+ line-height: 40px;
+ margin-left: 65px;
+ }
+ >div:nth-child(2){
+ margin-top: 4px;
+ margin-left:40px;
+ }
+ }
+`
+
+const SelectList = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 295px;
+ height: 200px;
+ margin-left: 5px;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ color:var(--black-750);
+ position: relative;
+ top:0;
+ border-collapse: collapse;
+
+ >button{
+ cursor: pointer;
+ font-weight: bold;
+ background-color: white;
+ width: 280px;
+ height: 40px;
+ padding: 10px 0;
+ border: 0.5px solid var(--black-500);
+ :hover{
+ color: var(--purple-400);
+ }
+ }
+`
+
+const PlaceComponent = styled.div`
+ margin-top: 50px;
+ width: 292px;
+ height: 84vh;
+ margin-left: 26px;
+ background-color: white;
+`
+const Place = styled.div`
+ background-color: skyblue;
+ width: 294px;
+ height: 140px;
+ margin-left: -1px;
+ border-radius: var(--br-s);
+ cursor: pointer;
+ border:1px solid var(--black-600);
+
+ background: linear-gradient(
+ to right,
+ rgba(20, 20, 20, 0.8) 10%,
+ rgba(20, 20, 20, .7) 25%,
+ 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);
+ background-size: cover;
+
+ >div{
+ padding:85px 0 0 20px;
+ font-weight: bold;
+ font-size: 20px;
+ color:white;
+ }
+ >p{
+ padding:3px 0 0 20px;
+ font-weight: bold;
+ font-size: 12px;
+ color:white;
+ }
+`
+
+const Map = () => {
+
+ // 주소 더미 데이터
+ var listData = [
+ '종로구 사직로 161',
+ '종로구 세종대로 198',
+ '종로구 세종대로 209',
+ '종로구 세종대로 175'
+ ];
+
+ // 드롭다운 메뉴를 보여줄지 말지 설정하는 변수
+ const [dropdownView, setDropdownView] = useState(false)
+ //현재 눌린 버튼의 값 설정
+ const [regionFilter,setRegionFilter] = useState('강동구')
+
+ useEffect(()=>{
+
+ },[regionFilter])
+
+ let Post = [
+ { id: "1", Post: "강남구" },
+ { id: "2", Post: "강동구" },
+ { id: "3", Post: "강북구" },
+ { id: "4", Post: "강서구" },
+ { id: "5", Post: "관악구" },
+ { id: "6", Post: "광진구" },
+ { id: "7", Post: "구로구" },
+ { id: "8", Post: "금천구" },
+ { id: "9", Post: "노원구" },
+ { id: "10", Post: "도봉구" },
+ { id: "11", Post: "동대문구" },
+ { id: "12", Post: "동작구" },
+ { id: "13", Post: "마포구" },
+ { id: "14", Post: "서대문구" },
+ { id: "15", Post: "서초구" },
+ { id: "16", Post: "성동구" },
+ { id: "17", Post: "성북구" },
+ { id: "18", Post: "성송파구" },
+ { id: "19", Post: "양천구" },
+ { id: "20", Post: "영등포구" },
+ { id: "21", Post: "용산구" },
+ { id: "22", Post: "은평구" },
+ { id: "23", Post: "종로구" },
+ { id: "24", Post: "중구" },
+ { id: "25", Post: "중량구" },
+ ];
+
+
+ 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(
+ <>
+
+
+
+
+ { dropdownView ?
+
+ {
+ Post.map((el:any, index:number)=>{
+ return(
+
+ )
+ })
+ }
+
+ : null }
+
+
+ {alert('테스트')}}>
+ 종로
+ 서울 종로구 세종로
+
+
+
+
+
+
+ )
+}
+
+export default Map;
\ No newline at end of file
diff --git a/project/src/pages/PlaceDetail.tsx b/project/src/pages/PlaceDetail.tsx
index 0d62af73..848e6034 100644
--- a/project/src/pages/PlaceDetail.tsx
+++ b/project/src/pages/PlaceDetail.tsx
@@ -196,6 +196,15 @@ const PlaceDetail = ():JSX.Element => {
const [shareOpen, setShareOpen] = useState(false);
const [fixBar, setFixBar] = useState(0);
+
+ // 주소 더미 데이터
+ var listData = [
+ '종로구 사직로 161',
+ '종로구 세종대로 198',
+ '종로구 세종대로 209',
+ '종로구 세종대로 175'
+ ];
+
function onScroll() {
if(window.scrollY <= 700){
setTimeout(function() {
@@ -258,7 +267,7 @@ const PlaceDetail = ():JSX.Element => {
종로구 사직로 161
-
+