김재웅 / TFT

Go to a project
Toggle navigation Toggle navigation pinning
서준혁
29e793ee 1 parent a5482ec9

design interface

Inline Side-by-side
Showing 11 changed files with 358 additions and 66 deletions
<script>
import Menu from './Menu.svelte'
import Backtotop from './Backtotop.svelte'
import Backtotop from './Side/Backtotop.svelte'
import Map from './Map.svelte'
import Article from './Articles.svelte'
import Festalist from './Side/Festalist.svelte';
import Areaset from './Side/Areaset.svelte';
</script>
<style>
......@@ -15,6 +17,10 @@
:global(body) {
padding: 0;
margin: 0;
align-items: center;
align-content: center;
text-align: center;
justify-content: center;
}
:global(html) {
......@@ -25,6 +31,8 @@
<div>
<Menu/>
<Festalist/>
<Areaset/>
<Map/>
<Backtotop/>
<Article/>
......
......@@ -8,63 +8,83 @@
}
#map {
margin-top: 50px;
box-sizing: border-box;
display: flex;
height: 90vh;
width: 80vw;
height: 80vh;
width: 60vw;
background-color:#edeff2;
border-radius: 10px;
border: 1px solid black;
box-shadow: 0 10px 20px rgb(0 0 0 / 15%);
}
</style>
<script>
import jQuery from 'jquery';
import Info from './Side/Info.svelte';
var url = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList?ServiceKey=2lFkvQJYgzOOhwUKiUt8aZVNpd1PpBOf%2FfMNW17cl25DE0GUEDddeR9iGnuSUpggjUoIUgamfhcvnKQ3eH1dAw%3D%3D&contentTypeId=15&areaCode=&sigunguCode=&cat1=&cat2=&cat3=&listYN=Y&MobileOS=ETC&MobileApp=TourAPI3.0_Guide&arrange=A&numOfRows=12&pageNo=1&_type=json";
var {kakao} = window;
var url = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList?ServiceKey=2lFkvQJYgzOOhwUKiUt8aZVNpd1PpBOf%2FfMNW17cl25DE0GUEDddeR9iGnuSUpggjUoIUgamfhcvnKQ3eH1dAw%3D%3D&contentTypeId=15&areaCode=&sigunguCode=&cat1=&cat2=&cat3=&listYN=Y&MobileOS=ETC&MobileApp=TourAPI3.0_Guide&arrange=A&numOfRows=12&pageNo=1&_type=json";
jQuery.getJSON(url,function(data){
console.log(data);
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(36.46682, 127.37865), // 지도의 중심좌표
level: 12, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
var markers= [];
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
for(var i = 0; i<data.response.body.items.item.length;i++){
let ShowInfo = false;
let Festa = {};
var markers= [];
var map;
function createMap() {
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(36.46682, 127.37865), // 지도의 중심좌표
level: 12, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
markers= [];
map = new kakao.maps.Map(mapContainer, mapOption); // 카카오 지도
// 임시로 관광공사에서 JSON 직접 불러와서 하는 중
jQuery.getJSON(url, (json) => {drawMarkers( json.response.body.items.item )});
}
function drawMarkers (data) {
let len = data.length >= 9 ? 9 : data.length;
for(var i = 0; i < len; i++){
// 지도에 마커를 생성하고 표시한다
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(data.response.body.items.item[i].mapy, data.response.body.items.item[i].mapx), // 마커의 좌표
let marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(data[i].mapy, data[i].mapx), // 마커의 좌표
map: map // 마커를 표시할 지도 객체
});
markers.push(marker);
// 마커 위에 표시할 인포윈도우를 생성한다
// 마커 클릭 시 이벤트
let showInfo = function(festa) {
return function() {
Festa = festa;
ShowInfo = true;
console.log(Festa);
}
};
kakao.maps.event.addListener(markers[i], 'click', showInfo(data[i]));
};
// 마커 위에 표시할 인포윈도우를 생성한다
for(var i = 0; i<9;i++) { // 왜 9까지 밖에 안되누 ㅠㅠ
var infowindow = new kakao.maps.InfoWindow({
content : '<div style="padding:5px;">'+data.response.body.items.item[i].title+'</div>' // 인포윈도우에 표시할 내용
let infowindow = new kakao.maps.InfoWindow({
content : '<div style="padding:5px;">' + data[i].title + '</div>' // 인포윈도우에 표시할 내용
});
infowindow.open(map, markers[i]);
}
// 마우스 휠과 모바일 터치를 이용한 지도 확대, 축소를 막는다
map.setZoomable(false);
// 지도에 확대 축소 컨트롤을 생성한다
var zoomControl = new kakao.maps.ZoomControl();
// 지도의 우측에 확대 축소 컨트롤을 추가한다
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
});
}
</script>
<svelte:window on:load={createMap}></svelte:window>
<Info bind:sidebar_show={ShowInfo} bind:festa={Festa}/>
<div id="map_bg">
<div id="map"></div>
</div>
......
......@@ -12,45 +12,47 @@
<style>
nav {
background-color: #4527a0;
background-color: #edeff2;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
height: 70px;
/* width: 50vw; */
top: 0;
}
.inner {
max-width: 500px;
max-width: 600px;
padding-left: 10px;
padding-right: 10px;
margin: auto;
box-sizing: border-box;
box-sizing: content-box;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.logo {
display: flex;
position: absolute;
color: white;
align-items: center;
color: black;
width: 50px;
left: 40px;
top: 25px
margin-right: 350px;
}
.navbar-list {
display: flex;
padding: 0;
width: 100%;
justify-content: space-between;
width: 400px;
justify-content: space-around;
margin: 0;
margin-left: 200px;
}
</style>
<nav>
<div class="logo">Logo</div>
<nav id="nav">
<div class="inner">
<ul class='navbar-list'>
<div class="logo">Logo</div>
<ul class='navbar-list'>
{#each navItems as item}
<Menuitems {item}/>
{/each}
......
......@@ -2,6 +2,7 @@
li {
list-style-type: none;
position: relative;
margin-left: 50px;
}
li:before {
......@@ -14,7 +15,7 @@
}
a {
color: #e5e6e5;
color: #000000;
text-decoration: none;
display: inline-flex;
height: 45px;
......
<script>
import { fly } from 'svelte/transition'
import SideBar from './SideBar.svelte';
let show = true;
let sidebar_show = false;
function showBar() {
sidebar_show = !sidebar_show;
}
function hide() {
if (window.scrollY < 400) {
show = true
} else {
show = false
}
}
</script>
<style>
.sidebtn {
border-radius: 5px;
border: 0px;
width: 70px;
height: 70px;
position: fixed;
left: -20px;
top: 18.5%;
padding-right: 10px;
text-align: right;
background-color: #b71c1c;
color: #ffffff;
}
.sidebtn:focus {
background-color: #ef5350;
}
.sidebtn:hover {
background-color: #d32f2f;
}
</style>
<svelte:window on:scroll={hide}></svelte:window>
{#if (show)}
<button class="sidebtn"
transition:fly="{{ x : -50, duration : 400}}"
on:click={showBar}>
지역<br>선택
</button>
<SideBar bind:show={sidebar_show}>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
</SideBar>
{/if}
\ No newline at end of file
<script>
import { fly } from 'svelte/transition'
import { onMount, onDestroy } from 'svelte';
let show = false;
function scrollUp() {
document.body.scrollIntoView({behavior: "smooth"})
}
onMount(() => {
window.onscroll = () => {
if (window.scrollY > 60) {
show = true
} else {
show = false
}
function hide() {
if (window.scrollY > 60) {
show = true
} else {
show = false
}
});
onDestroy(() => {
window.onscroll = () => {}
});
}
</script>
<style>
......@@ -34,6 +27,8 @@
</style>
<svelte:window on:scroll={hide}></svelte:window>
{#if (show)}
<button id="backtotop"
transition:fly="{{ y : 200, duration:400}}"
......
<script>
import { fly } from 'svelte/transition'
import SideBar from './SideBar.svelte';
let show = true;
let sidebar_show = false;
function showBar() {
sidebar_show = !sidebar_show;
}
function hide() {
if (window.scrollY < 400) {
show = true
} else {
show = false
}
}
</script>
<style>
.sidebtn {
border-radius: 5px;
border: 0px;
width: 70px;
height: 70px;
position: fixed;
left: -20px;
top: 10%;
padding-right: 10px;
text-align: right;
background-color: #e65100;
color: #ffffff;
}
.sidebtn:focus {
background-color: #f57c00;
}
.sidebtn:hover {
background-color: #ef6c00;
}
</style>
<svelte:window on:scroll={hide}></svelte:window>
{#if (show)}
<button class="sidebtn"
transition:fly="{{ x : -50, duration : 400}}"
on:click={showBar}>
행사<br>목록
</button>
<SideBar bind:show={sidebar_show}>행사목록!</SideBar>
{/if}
\ No newline at end of file
<script>
import SideBar from "./SideBar.svelte"
export let festa;
export let sidebar_show = false;
let side = "right";
function showBar() {
sidebar_show = !sidebar_show;
}
</script>
<SideBar bind:show={sidebar_show} {side}>
{festa.title}
</SideBar>
<script>
import { fly } from 'svelte/transition';
export let show = true;
export let side = "left";
</script>
<style>
.nav {
overflow-y: auto;
}
.left {
position: fixed;
top: 0;
left: 0;
height: 100%;
/* padding: 2rem 1rem 0.6rem; */
border-right: 1px solid #aaa;
background: #fff;
overflow-y: auto;
width: 330px;
z-index: 900;
}
.right {
position: fixed;
top: 0;
right: 0;
height: 100%;
padding: 2rem 1rem 0.6rem;
border-left: 1px solid #aaa;
background: #fff;
overflow-y: auto;
width: 330px;
z-index: 900;
}
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 700;
}
</style>
{#if show}
<div class="background" on:click={() => {show = false;}}></div>
<nav class={"nav " + side} transition:fly={{x: (side == "left" ? -400 : 400), opacity: 1, duration: 800}}>
<slot>
</slot>
</nav>
{/if}
\ No newline at end of file
export let district = {
"name": "korea-administrative-district",
"version": "20160125",
"url": "https://github.com/cosmosfarm/korea-administrative-district",
"data":[
{"서울특별시":[
"종로구", "중구", "용산구", "성동구", "광진구", "동대문구", "중랑구", "성북구", "강북구", "도봉구", "노원구", "은평구", "서대문구", "마포구", "양천구", "강서구", "구로구", "금천구", "영등포구", "동작구", "관악구", "서초구", "강남구", "송파구", "강동구"
]},
{"부산광역시":[
"중구", "서구", "동구", "영도구", "부산진구", "동래구", "남구", "북구", "강서구", "해운대구", "사하구", "금정구", "연제구", "수영구", "사상구", "기장군"
]},
{"인천광역시":[
"중구", "동구", "남구", "연수구", "남동구", "부평구", "계양구", "서구", "강화군", "옹진군"
]},
{"대구광역시":[
"중구", "동구", "서구", "남구", "북구", "수성구", "달서구", "달성군"
]},
{"광주광역시":[
"동구", "서구", "남구", "북구", "광산구"
]},
{"대전광역시":[
"동구", "중구", "서구", "유성구", "대덕구"
]},
{"울산광역시":[
"중구", "남구", "동구", "북구", "울주군"
]},
{"세종특별자치시":[
]},
{"경기도":[
"가평군", "고양시", "과천시", "광명시", "광주시", "구리시", "군포시", "김포시", "남양주시", "동두천시", "부천시", "성남시", "수원시", "시흥시", "안산시", "안성시", "안양시", "양주시", "양평군", "여주시", "연천군", "오산시", "용인시", "의왕시", "의정부시", "이천시", "파주시", "평택시", "포천시", "하남시", "화성시"
]},
{"강원도":[
"원주시", "춘천시", "강릉시", "동해시", "속초시", "삼척시", "홍천군", "태백시", "철원군", "횡성군", "평창군", "영월군", "정선군", "인제군", "고성군", "양양군", "화천군", "양구군"
]},
{"충청북도":[
"청주시", "충주시", "제천시", "보은군", "옥천군", "영동군", "증평군", "진천군", "괴산군", "음성군", "단양군"
]},
{"충청남도":[
"천안시", "공주시", "보령시", "아산시", "서산시", "논산시", "계룡시", "당진시", "금산군", "부여군", "서천군", "청양군", "홍성군", "예산군", "태안군"
]},
{"경상북도":[
"포항시", "경주시", "김천시", "안동시", "구미시", "영주시", "영천시", "상주시", "문경시", "경산시", "군위군", "의성군", "청송군", "영양군", "영덕군", "청도군", "고령군", "성주군", "칠곡군", "예천군", "봉화군", "울진군", "울릉군"
]},
{"경상남도":[
"창원시", "김해시", "진주시", "양산시", "거제시", "통영시", "사천시", "밀양시", "함안군", "거창군", "창녕군", "고성군", "하동군", "합천군", "남해군", "함양군", "산청군", "의령군"
]},
{"전라북도":[
"전주시", "익산시", "군산시", "정읍시", "완주군", "김제시", "남원시", "고창군", "부안군", "임실군", "순창군", "진안군", "장수군", "무주군"
]},
{"전라남도":[
"여수시", "순천시", "목포시", "광양시", "나주시", "무안군", "해남군", "고흥군", "화순군", "영암군", "영광군", "완도군", "담양군", "장성군", "보성군", "신안군", "장흥군", "강진군", "함평군", "진도군", "곡성군", "구례군"
]},
{"제주특별자치도":[
"제주시", "서귀포시"
]}
]
}
\ No newline at end of file
......@@ -21,8 +21,9 @@
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
var markers= [];
var markers= [];
// 지도를 생성한다
console.log(data.response.body.items.item.length);
var map = new kakao.maps.Map(mapContainer, mapOption);
for(var i = 0; i<data.response.body.items.item.length;i++){
// 지도에 마커를 생성하고 표시한다
......@@ -33,12 +34,13 @@
markers.push(marker);
// 마커 위에 표시할 인포윈도우를 생성한다
};
for(var i = 0; i<9;i++){ // 왜 9까지 밖에 안되누 ㅠㅠ
var infowindow = new kakao.maps.InfoWindow({
content : '<div style="padding:5px;">'+data.response.body.items.item[i].title+'</div>' // 인포윈도우에 표시할 내용
});
infowindow.open(map, markers[i]);
};
for(var i = 0; i<data.response.body.items.item.length;i++){ // 왜 9까지 밖에 안되누 ㅠㅠ
var infowindow = new kakao.maps.InfoWindow({
content : '<div style="padding:5px;">'+data.response.body.items.item[i].title+'</div>' // 인포윈도우에 표시할 내용
});
infowindow.open(map, markers[i]);
}
})
......