-
Notifications
You must be signed in to change notification settings - Fork 0
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
d9c453b
commit ae6bc47
Showing
4 changed files
with
183 additions
and
13 deletions.
There are no files selected for viewing
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,94 @@ | ||
| import React, { useEffect } from 'react' | ||
| import styled from 'styled-components' | ||
| import sido from '../data/sido.json' | ||
|
|
||
| declare global { | ||
| interface Window { | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| kakao: any | ||
| } | ||
| } | ||
|
|
||
| const MapWrapper = styled.div` | ||
| width: 100%; | ||
| height: 100%; | ||
| ` | ||
|
|
||
| function Map({ mapPosition }: { mapPosition: number[] }) { | ||
| useEffect(() => { | ||
| const container = document.getElementById('map') | ||
| const options = { | ||
| center: new window.kakao.maps.LatLng(...mapPosition), | ||
| level: 12, | ||
| } | ||
|
|
||
| const map = new window.kakao.maps.Map(container, options) // 지도 생성 | ||
|
|
||
| // const content = | ||
| // '<div class="overlaybox">' + | ||
| // ' <img src="https://image.tmdb.org/t/p/w200/7IiTTgloJzvGI1TAYymCfbfl3vT.jpg">' + | ||
| // ' </img>' + | ||
| // '</div>' | ||
|
|
||
| // const position = new window.kakao.maps.LatLng(...mapPosition) // 지도 초기 렌더링 위치 | ||
|
|
||
| // const customOverlay = new window.kakao.maps.CustomOverlay({ | ||
| // position, | ||
| // content, | ||
| // xAnchor: 0.3, | ||
| // yAnchor: 0.91, | ||
| // }) | ||
|
|
||
| // customOverlay.setMap(map) | ||
|
|
||
| // sido.features.forEach((el) => { | ||
| // // 다각형을 구성하는 좌표 배열입니다. 이 좌표들을 이어서 다각형을 표시합니다 | ||
| // el.geometry.coordinates.forEach((el2) => { | ||
| // const polygonPath = el2.map((el3) => { | ||
| // return new window.kakao.maps.LatLng(...el3) | ||
| // }) | ||
| // // eslint-disable-next-line no-console | ||
| // console.log(polygonPath, el.properties.SIG_KOR_NM) | ||
|
|
||
| // // 지도에 표시할 다각형을 생성합니다 | ||
| // const polygon = new window.kakao.maps.Polygon({ | ||
| // path: polygonPath, // 그려질 다각형의 좌표 배열입니다 | ||
| // strokeWeight: 3, // 선의 두께입니다 | ||
| // strokeColor: '#ff0000', // 선의 색깔입니다 | ||
| // strokeOpacity: 0.8, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다 | ||
| // strokeStyle: 'longdash', // 선의 스타일입니다 | ||
| // fillColor: '#A2FF99', // 채우기 색깔입니다 | ||
| // fillOpacity: 0.7, // 채우기 불투명도 입니다 | ||
| // }) | ||
|
|
||
| // // 지도에 다각형을 표시합니다 | ||
| // polygon.setMap(map) | ||
| // }) | ||
| // }) | ||
|
|
||
| const addPolygons = () => { | ||
| sido.features.forEach((el) => { | ||
| el.geometry.coordinates.forEach((el2) => { | ||
| const polygonPath = el2.map((el3) => { | ||
| return new window.kakao.maps.LatLng(el3[1], el3[0]) | ||
| }) | ||
| const polygon = new window.kakao.maps.Polygon({ | ||
| path: polygonPath, | ||
| strokeWeight: 1.5, | ||
| strokeColor: 'red', | ||
| strokeOpacity: 0.8, | ||
| strokeStyle: 'longdash', | ||
| fillColor: '#00000080', | ||
| fillOpacity: 0.7, | ||
| }) | ||
| polygon.setMap(map) | ||
| }) | ||
| }) | ||
| } | ||
|
|
||
| addPolygons() | ||
| }, []) | ||
|
|
||
| return <MapWrapper id="map" /> | ||
| } | ||
| 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import React, { useState } from 'react' | ||
| import styled from 'styled-components' | ||
| import { ReactComponent as Good } from '../assets/good.svg' | ||
| import { ReactComponent as Bad } from '../assets/bad.svg' | ||
| import { ReactComponent as Favorite } from '../assets/favorite.svg' | ||
| import Map from './Map' | ||
| import { TrendingWrapper } from './Trending' | ||
|
|
||
| const StatModalWrapper = styled(TrendingWrapper)` | ||
| display: flex; | ||
| flex-direction: column; | ||
| position: fixed; | ||
| top: 50%; | ||
| right: 50%; | ||
| transform: translate(50%, -50%); | ||
| background-color: black; | ||
| width: 95vw; | ||
| height: 95vh; | ||
| padding: 2.4vw 3vw; | ||
| z-index: 3; | ||
| ` | ||
|
|
||
| declare global { | ||
| interface Window { | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| kakao: any | ||
| } | ||
| } | ||
|
|
||
| const MapSection = styled.div` | ||
| width: 100%; | ||
| flex: 1; | ||
| .overlaybox { | ||
| background-color: black; | ||
| } | ||
| ` | ||
|
|
||
| function StatModal({ handleClose }: { handleClose: () => void }) { | ||
| const [mapPosition] = useState([37.5172, 127.0473]) | ||
|
|
||
| return ( | ||
| <StatModalWrapper> | ||
| <div> | ||
| <Good fill="#019e74" /> | ||
| <Bad fill="rgb(229, 9, 20)" /> | ||
| <Favorite fill="#FFD700" /> | ||
| <button type="button" onClick={handleClose}> | ||
| X | ||
| </button> | ||
| </div> | ||
| <MapSection> | ||
| <Map mapPosition={mapPosition} /> | ||
| </MapSection> | ||
| </StatModalWrapper> | ||
| ) | ||
| } | ||
| export default StatModal |
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