-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e0eedeb
commit d89131d
Showing
7 changed files
with
242 additions
and
6 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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( | ||
| <> | ||
| <Container> | ||
| <PlaceList> | ||
| <DropDown> | ||
| <button | ||
| onClick={()=>{setDropdownView(!dropdownView)}}> | ||
| <div>{regionFilter}</div> | ||
| <div><RiArrowDropDownLine size="30" color= "#6255F8"></RiArrowDropDownLine></div> | ||
| </button> | ||
| { dropdownView ? | ||
| <SelectList> | ||
| { | ||
| Post.map((el:any, index:number)=>{ | ||
| return( | ||
| <button key={index} onClick={()=>{setRegionFilter(el.Post);setDropdownView(false)}}>{el.Post}</button> | ||
| ) | ||
| }) | ||
| } | ||
| </SelectList> | ||
| : null } | ||
| </DropDown> | ||
| <PlaceComponent> | ||
| <Place onClick={()=>{alert('테스트')}}> | ||
| <div>종로</div> | ||
| <p><FaMapMarkerAlt size="10"></FaMapMarkerAlt> 서울 종로구 세종로</p> | ||
| </Place> | ||
| </PlaceComponent> | ||
| </PlaceList> | ||
| <KakaoMap width="50%" height="90vh" dataList={listData}></KakaoMap> | ||
| </Container> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default Map; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters