<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>떠나자, 부산</title>
<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="css/sb-admin-2.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
<div class="sidebar-brand-icon">
<i class="fa fa-suitcase" aria-hidden="true"></i>
</div>
<div class="sidebar-brand-text mx-3">떠나자, 부산</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
<a class="nav-link" href="index.html">
<i class="fas fa-map-marked"></i>
<span>Main</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
Menu
</div>
<!-- Nav Item - Pages Collapse Menu -->
<!-- 메뉴내용 -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Pages</span>
</a>
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">검색</h6>
<a class="collapse-item" href="course2.html">추천 코스</a>
<a class="collapse-item" href="culture.html">문화</a>
<div class="collapse-divider"></div>
<h6 class="collapse-header">선택 및 검색</h6>
<a class="collapse-item" href="experience.html">해양/체험</a>
<a class="collapse-item" href="place.html">관광지</a>
<a class="collapse-item" href="place3.html">도보 여행길</a>
<a class="collapse-item" href="festival.html">축제</a>
<a class="collapse-item" href="place2.html">공연장</a>
</div>
</div>
</li>
<!-- Nav Item - Tables -->
<li class="nav-item">
<a class="nav-link" href="tables.html">
<i class="fas fa-calendar-alt"></i>
<span>Tables</span></a>
</li>
<!-- Divider -->
<!-- 나누는 선-->
<hr class="sidebar-divider d-none d-md-block">
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
</nav>
<!-- End of Topbar -->
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">관광지</h1>
</div>
<div class="card mb-4 py-3 border-left-primary">
<div class="card-body">
코스를 짜기 위한 관광지를 참고해보세요! <br> 이미지를 클릭하여 정보를 확인하세요!
</div>
</div>
<a href="place_search.html" class="btn btn-success btn-icon-split">
<span class="icon text-white-50">
<i class="fas fa-check"></i>
</span>
<span class="text">검색창</span>
</a>
<!-- Content Row -->
<!-- <div class="row"> -->
<article class="article">
<ul class="contents"></ul>
<div class="buttons"></div>
</article>
<!-- </div> -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>
<!-- Page level plugins -->
<script src="vendor/chart.js/Chart.min.js"></script>
<!-- Page level custom scripts -->
<script src="js/demo/chart-area-demo.js"></script>
<script src="js/demo/chart-pie-demo.js"></script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey="></script>
<script src="js/place.js"></script>
</body>
</html>
const contents = document.querySelector(".contents");
const buttons = document.querySelector(".buttons");
const url = "https://apis.data.go.kr/6260000/AttractionService/getAttractionKr?serviceKey=Lqi9%2BhQ05m%2FBgW3AfuDg046JQYPIHg427xeUNqLtTl9ML6xhouhlJnomEVxN%2Bj%2Bt2R%2BsNxKIOTFq%2FRhqj6TovQ%3D%3D&numOfRows=114&pageNo=1&resultType=json";
fetch(url)
.then(res => res.json())
.then(resJson => {
var courses = resJson.getAttractionKr.item
const numOfContent = courses.length;
const maxContent = 5;
const maxButton = 5;
const maxPage = Math.ceil(numOfContent / maxContent);
let page = 1;
const makeContent = (id) => {
const content = document.createElement("li");
content.classList.add("content");
content.innerHTML = `
<a href="#collapseCard${id-1}" class="d-block card-header py-3 collapsed" data-toggle="collapse"
role="button" aria-expanded="false" aria-controls="collapseCard${id-1}">
<div style="display:inline-block; margin: 10px;">
<img src=${courses[id-1]["MAIN_IMG_THUMB"]} width=100 height=100>
</div>
<div style="display:inline-block;">
<h4 class="m-0 font-weight-bold text-primary">${courses[id-1]["MAIN_TITLE"]}</h4>
</div>
</a>
<div class="collapse" id="collapseCard${id-1}">
<div class="card-bodyz">
<h5 class="m-0 font-weight-bold text-primary" style="margin: 5px;">${courses[id-1]["TITLE"]}</h5>
<h7 class="m-0 font-weight-bold text-primary">${courses[id-1]["SUBTITLE"]}</div>
<div style="display:inline-block; margin: 5px;">
<img src=${courses[id-1]["MAIN_IMG_THUMB"]} width=200 height=200>
</div>
<hr>
<div style="display:inline-block;text-align: center;">
<p style="font-weight: bold; color:darkblue;font-size: 40;">주소</p>
${courses[id-1]["ADDR1"]}<br><br>
<div id="map" style="width:450px;height:350px;"></div>
<p style="font-weight: bold; color:darkblue;font-size: 40;">교통 정보</p>
${courses[id-1]["TRFC_INFO"]}<br><br>
<p style="font-weight: bold; color:darkblue;font-size: 40;">가격 정보</p>
${courses[id-1]["USAGE_AMOUNT"]}<br><br>
<p style="font-weight: bold; color:darkblue;font-size: 40;">시간 정보</p>
${courses[id-1]["USAGE_DAY"]}
${courses[id-1]["USAGE_DAY_WEEK_AND_TIME"]}
</div>
<hr>
<div style="display:inline-block;">
<p style="font-weight: bold; color:darkblue;font-size: 40;">상세 내용</p>
${courses[id-1]["ITEMCNTNTS"]}
<hr>
<p style="font-weight: bold; color:darkblue;font-size: 40;">사이트 정보</p>
<a href=${courses[id-1]["HOMEPAGE_URL"]} target="_blank">${courses[id-1]["HOMEPAGE_URL"]}<a><br><br>
<p style="font-weight: bold; color:darkblue;font-size: 40;">전화 번호</p>
${courses[id-1]["CNTCT_TEL"]}
</div>
<hr>
</div>
</div>
`;
return content;
};
const makemap = (id) => {
const numOfContent = courses.length;
const maxContent = 5;
const maxButton = 5;
const maxPage = Math.ceil(numOfContent / maxContent);
let page = 1;
var mapContainer = document.getElementById("map"); // 지도를 표시할 div
var mapOption = {
center: new kakao.maps.LatLng(courses[id - 1]["LAT"], courses[id - 1]["LNG"]), // 지도의 중심좌표
level: 3, // 지도의 확대 레벨
mapTypeId: kakao.maps.MapTypeId.ROADMAP
};
var map = new kakao.maps.Map(mapContainer, mapOption);
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(courses[id - 1]["LAT"], courses[id - 1]["LNG"]), // 마커의 좌표
map: map // 마커를 표시할 지도 객체
});
}
const makeButton = (id) => {
const button1 = document.createElement("button");
button1.classList.add("button");
button1.dataset.num = id;
button1.innerText = id;
button1.addEventListener("click", (e) => {
Array.prototype.forEach.call(buttons.children, (button1) => {
if (button1.dataset.num) button1.classList.remove("active");
});
e.target.classList.add("active");
renderContent(parseInt(e.target.dataset.num));
});
return button1;
};
// Prev, Next Button
const goPrevPage = () => {
page -= maxButton;
render(page);
};
const goNextPage = () => {
page += maxButton;
render(page);
};
const prev = document.createElement("button");
prev.classList.add("button", "prev");
prev.innerHTML = '<ion-icon name="chevron-back-outline"></ion-icon>';
prev.addEventListener("click", goPrevPage);
const next = document.createElement("butto1");
next.classList.add("button1", "next");
next.innerHTML = '<ion-icon name="chevron-forward-outline"></ion-icon>';
next.addEventListener("click", goNextPage);
const renderContent = (page) => {
while (contents.hasChildNodes()) {
contents.removeChild(contents.lastChild);
}
for (let id = (page - 1) * maxContent + 1; id <= page * maxContent && id <= numOfContent; id++) {
contents.appendChild(makeContent(id));
makemap(id);
}
};
const renderButton = (page) => {
while (buttons.hasChildNodes()) {
buttons.removeChild(buttons.lastChild);
}
for (let id = page; id < page + maxButton && id <= maxPage; id++) {
buttons.appendChild(makeButton(id));
}
buttons.children[0].classList.add("active");
buttons.prepend(prev);
buttons.append(next);
if (page - maxButton < 1) buttons.removeChild(prev);
if (page + maxButton > maxPage) buttons.removeChild(next);
};
const render = (page) => {
renderContent(page);
renderButton(page);
};
render(page);
});
코드입니다. CORS 때문에 크롬 확장 프로그램을 사용하고 있어서 깨지는 건가요?
처음 리스트만 떠서 질문드립니다.
또한 오류가 뜨는 텍스트?는
- Because a cookie’s
SameSiteattribute was not set or is invalid, it defaults toSameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery.
Resolve this issue by updating the attributes of the cookie:
- Specify
SameSite=NoneandSecureif the cookie should be sent in cross-site requests. This enables third-party use. - Specify
SameSite=StrictorSameSite=Laxif the cookie should not be sent in cross-site requests.
-
AFFECTED RESOURCES
-
3 cookies
입니다.