이유제 / CultureGallery

Go to a project
Toggle navigation Toggle navigation pinning
송효섭
65aa55cf 1 parent fce0e2c2

merge kakaotest 오류수정, 전체 구조 개선

Inline Side-by-side
Showing 39 changed files with 1384 additions and 102 deletions
# Culture Gallery
## ✔ 목차
- [✔ 목차](#-목차)
- [소개](#-소개)
- [개발 환경](#개발-환경)
- [사용한 API](#사용한-api)
- [설치 방법](#-설치-방법)
- [요구 사항](#요구-사항)
- [설치](#설치)
- [사용 방법](#-사용-방법)
- [기여하기](#️-기여하기)
- [라이센스](#-라이센스)
- [연락처](#-연락처)
## 소개
![메인-화면](images/mainpage.jpg)
한국에서 진행하는 공연 중 본인에게 맞는 공연을 찾을 수 있는 서버입니다.<br>
본인 현재 위치 기반으로 주변에서 진행 하고있는 /진행 될 공연의 정보를 카카오 맵으로 제공합니다.<br>
기간/위치/비용 등의 필터를 통해 본인이 원하는 공연을 검색할 수 있습니다.<br>
카카오 계정 로그인을 통해 보러 가고 싶은 공연을 카카오톡 친구와 공유할 수 있는 기능을 제공합니다.
### 개발 환경
* [node.js - 14.15.1 LTS](https://nodejs.org/ko/)
* [Express - 4.17.1](https://expressjs.com/ko/)
* [HTML5]
* [CSS3]
### 사용한 API
* [Kakaomap Maps API](https://apis.map.kakao.com/)
* [Document](https://apis.map.kakao.com/web/documentation/)
* [Kakao Login API](https://developers.kakao.com/docs/latest/ko/kakaologin/common/)
* [Document](https://developers.kakao.com/docs/latest/ko/kakaologin/common)
## 설치 방법
서버 설치 방법을 소개합니다. 이 방법은 Local에서만 동작합니다.
### 요구 사항
* node.js
이 [링크](https://nodejs.org/ko/)에서 설치할 수 있습니다.
* npm
node.js와 함께 설치됩니다.
혹은 가장 최신 버전으로 업데이트합니다.
```sh
npm install -g npm
```
### 설치
1. [리포지토리](http://khuhub.khu.ac.kr/2019102210/CultureGallery) 클론
원하는 디렉토리에서 아래의 명령어를 입력해 이 리포지토리를 가져옵니다.
```
git clone http://khuhub.khu.ac.kr/2019102210/CultureGallery.git
```
2. npm 패키지 설치
서버 실행에 필요한 패키지를 설치합니다.
```
npm install
```
3. 포트 변경
본 웹서비스는 local 환경에서 8000 번 포트를 할당받아 실행됩니다.
8000번 포트에서 실행되고 있는 다른 프로그램 혹은 웹서비스와 동시에 실행될 수 없습니다.
4. 서버 구동
터미널에서 본 프로젝트의 디렉토리로 이동한 후 npm start를 실행합니다.
```
npm start
```
## 사용 방법 (구체화 중)
1. IE 8 이상의 웹 브라우저로 localhost:8000에 접속합니다.
![메인-화면](images/mainpage.jpg)<br>
2. 나의 근처 공연/ 검색하기 / 로그인 버튼 중 하나를 선택합니다.<br>
-기능 1. 나의 근처 공연<br>
본인의 위치를 받아올 수 있도록 위치 수집 권한을 허락해주세요.<br>
지도 중심에 본인의 위치가 나오고 주변의 공연 장소에 마크가 달립니다.(보완 중)<br>
-기능 2. 검색하기<br>
원하는 필터를 체크한 후, 검색하면 해당 조건을 충족하는 공연들이 나옵니다.(개발 중)<br>
-기능 3. 로그인<br>
카카오톡 계정 로그인을 통해 더 많은 기능을 사용하세요!<br>
로그인을 하면 보러 가고 싶은 공연의 정보를 카카오톡 친구와 공유할 수 있습니다.<br>
## 라이센스
MIT 라이센스를 따릅니다. 자세한 내용은 `License` 파일을 확인해주세요.
## 연락처
이유제: dbwp031@khu.ac.kr<br>
송효섭: crad_on25@khu.ac.kr<br>
\ No newline at end of file
const express = require('express');
const fs = require('fs');
const path = require('path');
const logger = require('morgan');
const app = express();
app.use(logger('combined'));
//화면 별 router 연결, 라우터 호출해서 페이지를 불러오는데 사용함.
var mainRouter = require('./routes/main') //호출시 main.js 실행 (main.js : title 할당하고 main.html 열어줌)
var loginRouter = require('./routes/login')
//디폴트 포트 값 : 8000
app.set('port', process.env.PORT || 8000);
//get하는 방법 : sendfile(파일 디렉토리 ) : 개선 필요 -> html 페이지 이동 및 data 전달 방법 찾기
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, './public/html/main.html'))
});
app.get('/plan', (req, res) => {
res.send('Server is working');
res.sendFile(path.join(__dirname, './public/html/main.html'));
//console.log(app.get('port'), '번 포트 대기 중');
});
app.get('/login', (req, res) => {
// console.log('로그인 페이지 오픈 시도됨.');
fs.readFile('./public/html/login.html', function (err, data) {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(data);
})
})
//ejs (html포맷) 파일을 웹사이트에 view로 띄워주기 위한 view engine 설정.
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
//각각의 요청에서 router 호출해서 page를 전환함.
app.use('/', mainRouter);
app.use('/login', loginRouter);
//css, image 등 정적 파일을 public에서 불러옴 -> html과 연결함
app.use(express.static(path.join(__dirname, 'public')));
// app.get('/', (req, res) => {
// //res.send('Server is working');
// // res.sendFile(path.join(__dirname, '/html/main.html'));
// res.sendFile(__dirname + "/html/main.html");
// console.log(app.get('port'), '번 포트 대기 중');
// });
// app.get('/login', (req, res) => {
// console.log('로그인 페이지 오픈 시도됨.');
// res.sendFile(__dirname + "/html/login.html");
// // fs.readFile('./html/login.html', function (err, data) {
// // res.writeHead(200, { 'Content-Type': 'text/html' });
// // res.end(data);
// // })
// })
app.get('/logout', function (req, res) {
res.send("Logout success");
......
<html>
<head>
<title>로그인 페이지</title>
<link rel="stylesheet" href="login_style.css" type="text/css">
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
</head>
<body>
<header>
<div class="nav-bar">
<img src="camera.png" alt="" class="logo">
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Testimonimal</a></li>
<li><a href="">Career</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="welcome">
<h1>로그인</h1>
<a id="kakao-login-btn"></a>
</div>
</header>
</body>
<script>
Kakao.init('0678e32dab56db1c52ac63ab4ccb7663');
console.log(Kakao.isInitialized());
Kakao.Auth.createLoginButton({
container: '#kakao-login-btn',
success: function (authObj) {
console.log(JSON.stringify(authObj));
alert(JSON.stringify(authObj));//authObj -> 토큰임.
},
fail: function (err) {
alert(JSON.stringify(err));
}
})
</script>
</html>
\ No newline at end of file
*
{
margin: 0;
padding: 0;
}
.nav-bar
{
background: #000;
height: 80px;
}
.logo{
background-color: #fff;
margin: 10px 50px;
height: 60px;
}
.menu{
float: right;
list-style: none;
margin:20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border: 1px solid #fff;
}
.menu li a:hover{
background: #fff;
transition: .4s;
color: #000;
}
.welcome{
position:relative;
text-align:center;
font-family: sans-serif;
color:#000;
top: 300px;
}
.welcome h1{
font-size: 42px;
margin: 25px;
}
<html>
<head>
<title>Webpage Design In HTML and CSS</title>
<link rel="stylesheet" href="main_style.css" type="text/css">
</head>
<body>
<header>
<div class="nav-bar">
<img src="camera.png" alt="" class="logo">
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Testimonimal</a></li>
<li><a href="">Career</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="welcome">
<h1>어떤 공연을 찾으시나요?</h1>
<a href="#" class="btn btn1">나의 근처 공연</a>
<a href="#" class="btn btn2">검색하기</a>
<a href="login.html" class="btn btn3">로그인</a>
</div>
</header>
</body>
</html>
\ No newline at end of file
*
{
margin: 0;
padding: 0;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back1.jpg);
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: 5s;
animation-name: animate;
animation-direction: alternate-reverse;
animation-duration: 30s;
animation-fill-mode:forwards;
animation-iteration-count: infinite;
animation-play-state: running;
animation-timing-function:ease-in-out;
}
@keyframes animate{
0%{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back1.jpg);
}
33%{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back2.jpg);
}
66%{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back3.jpg);
}
}
.nav-bar
{
background: rgb(0,0,0,0.5);
height: 80px;
}
.logo{
background-color: #fff;
margin: 10px 50px;
height: 60px;
}
.menu{
float: right;
list-style: none;
margin:20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border: 1px solid #fff;
}
.menu li a:hover{
background: #fff;
transition: .4s;
color: #000;
}
.welcome{
position:relative;
text-align:center;
font-family: sans-serif;
color:#fff;
top: 300px;
}
.welcome h1{
font-size: 42px;
margin: 25px;
}
.btn{
font-size:18px;
letter-spacing: 2px;
margin:5px;
padding:7px 10px;
text-decoration: none;
border: 1px solid #fff;
}
.btn{
color:#fff;
}
.btn:hover{
background: #fff;
color: #000;
transition: .4s;
}
\ No newline at end of file
var http = require('http');
var fs = require('fs');
var app = http.createServer(function(request,response){
var url=request.url;
if(url == '/'){
url = '/send.html';
}
if(url == '/loginmainpage'){
url='/loginmainpage.html';
}
response.writeHead(200);
response.end(fs.readFileSync(__dirname+url));
});
app.listen(8080);
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>login page title</title>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
</head>
<body>
<a id="kakao-login-btn"></a>
<a href="http://developers.kakao.com/logout"></a>
<script>
Kakao.init('0678e32dab56db1c52ac63ab4ccb7663');
console.log(Kakao.isInitialized());
Kakao.Auth.createLoginButton({
container: '#kakao-login-btn',
success: function(authObj){
console.log(JSON.stringify(authObj));
alert(JSON.stringify(authObj));//authObj -> 토큰임.
redirectUrl
},
fail: function(err){
alert(JSON.stringify(err));
}
})
console.log('hi');
Kakao.Link.createDefaultButton({
container: ".kakao-link",
objectType: "feed",
content:{
title: "안녕하세요",
description: "반갑습니다.",
link:{
webUrl: "https://www.naver.com/",
mobileWebUrl: "https://www.naver.com/"
},
},
})
function kakaoLogout(){
Kakao.Auth.logout(function(response){
alert(response+'logout');
Kakao.API.request({
url: '/v1/user/unlink',
success: function(response) {
console.log(response);
},
fail: function(error) {
console.log(error);
console.log("error");
},
})
})
}
</script>
<script>
console.log('hi');
Kakao.Link.createDefaultButton({
container: ".kakao-link",
objectType: "feed",
content:{
title: "안녕하세요",
description: "반갑습니다.",
link:{
webUrl: "https://www.naver.com/",
mobileWebUrl: "https://www.naver.com/"
},
},
})
</script>
<a onclick="kakaoLogout();">카카오 로그아웃</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>login main page title</title>
</head>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>send page title</title>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script src="send.js"></script>
</head>
<body>
<a onclick="sendLink()">보내기</a>
</body>
</html>
\ No newline at end of file
function sendLink(){
Kakao.init('0678e32dab56db1c52ac63ab4ccb7663')
Kakao.Link.sendDefault({
objectType: 'feed',
content:{
title: "관심있는 공연 정보",
description: '주소-> http://naver.com',
imageUrl:'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
link:{
mobileWebUrl: 'http://naver.com',
webUrl: 'http://naver.com',
},
},
buttons: [
{
title: '웹으로 보기',
link: {
mobileWebUrl: 'http://naver.com',
webUrl: 'http://naver.com',
},
},
{
title: '웹으로 보기',
link: {
mobileWebUrl: 'http://naver.com',
webUrl: 'http://naver.com',
},
},
],
})
};
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>geolocation으로 마커 표시하기</title>
</head>
<body>
<p style="margin-top:-12px">
<b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
</p>
<div id="map" style="width:500px;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 10 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
console.log(lat);
console.log(lon);
var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
// 마커와 인포윈도우를 표시합니다
displayMarker(locPosition, message);
});
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
message = 'geolocation을 사용할수 없어요..'
displayMarker(locPosition, message);
}
var positions = [
{
title: '카카오',
latlng: new kakao.maps.LatLng(37.2427865, 127.106767)
}
];
displayShows(positions);
function displayShows(positions){
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
for (var i = 0; i < positions.length; i ++) {
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : markerImage // 마커 이미지
});
}
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map,
position: locPosition
});
var iwContent = message, // 인포윈도우에 표시할 내용
iwRemoveable = true;
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
});
// 인포윈도우를 마커위에 표시합니다
infowindow.open(map, marker);
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
}
</script>
</body>
</html>
\ No newline at end of file
var http = require('http');
var fs = require('fs');
var app = http.createServer(function(request,response){
var url=request.url;
if(url == '/'){
url = '/mapPage.html';
}
response.writeHead(200);
response.end(fs.readFileSync(__dirname+url));
});
app.listen(8080);
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> map Page title </title>
</head>
<body>
<div id="map" style="width:500px;height:350px"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
<script src="./mypos.js"></script>
<script src="./show_pos.js"></script>
</body>
</html>
\ No newline at end of file
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 5 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message = '<div style="padding:5px;">나의 위치!</div>'; // 인포윈도우에 표시될 내용입니다
// 마커와 인포윈도우를 표시합니다
displayMarker(locPosition, message);
});
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
message = 'geolocation을 사용할수 없어요..'
displayMarker(locPosition, message);
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map,
position: locPosition
});
var iwContent = message, // 인포윈도우에 표시할 내용
iwRemoveable = true;
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
});
// 인포윈도우를 마커위에 표시합니다
infowindow.open(map, marker);
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
}
\ No newline at end of file
var positions = [
{
title: '카카오',
latlng: new kakao.maps.LatLng(37.2427865, 127.106767)
}
];
displayShows(positions);
function displayShows(positions){
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
for (var i = 0; i < positions.length; i ++) {
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : markerImage // 마커 이미지
});
}
}
\ No newline at end of file
......@@ -9,8 +9,8 @@
"version": "1.0.0",
"license": "MIT",
"dependencies": {
"express": "^4.17.1",
"morgan": "^1.10.0"
"ejs": "^3.1.5",
"express": "^4.17.1"
}
},
"node_modules/accepts": {
......@@ -25,21 +25,31 @@
"node": ">= 0.6"
}
},
"node_modules/ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"dependencies": {
"color-convert": "^1.9.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/array-flatten": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
"integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
},
"node_modules/basic-auth": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
"integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
"dependencies": {
"safe-buffer": "5.1.2"
},
"engines": {
"node": ">= 0.8"
}
"node_modules/async": {
"version": "0.9.2",
"resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
"integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0="
},
"node_modules/balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
},
"node_modules/body-parser": {
"version": "1.19.0",
......@@ -61,6 +71,15 @@
"node": ">= 0.8"
}
},
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
"dependencies": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
}
},
"node_modules/bytes": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
......@@ -69,6 +88,37 @@
"node": ">= 0.8"
}
},
"node_modules/chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dependencies": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dependencies": {
"color-name": "1.1.3"
}
},
"node_modules/color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
},
"node_modules/concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
},
"node_modules/content-disposition": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
......@@ -127,6 +177,20 @@
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
},
"node_modules/ejs": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.5.tgz",
"integrity": "sha512-dldq3ZfFtgVTJMLjOe+/3sROTzALlL9E34V4/sDtUd/KlBSS0s6U1/+WPE1B4sj9CXHJpL1M6rhNJnc9Wbal9w==",
"dependencies": {
"jake": "^10.6.1"
},
"bin": {
"ejs": "bin/cli.js"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/encodeurl": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
......@@ -140,6 +204,14 @@
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
},
"node_modules/escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
"engines": {
"node": ">=0.8.0"
}
},
"node_modules/etag": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
......@@ -188,6 +260,14 @@
"node": ">= 0.10.0"
}
},
"node_modules/filelist": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.1.tgz",
"integrity": "sha512-8zSK6Nu0DQIC08mUC46sWGXi+q3GGpKydAG36k+JDba6VRpkevvOWUW5a/PhShij4+vHT9M+ghgG7eM+a9JDUQ==",
"dependencies": {
"minimatch": "^3.0.4"
}
},
"node_modules/finalhandler": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
......@@ -221,6 +301,14 @@
"node": ">= 0.6"
}
},
"node_modules/has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
"engines": {
"node": ">=4"
}
},
"node_modules/http-errors": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
......@@ -260,6 +348,23 @@
"node": ">= 0.10"
}
},
"node_modules/jake": {
"version": "10.8.2",
"resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz",
"integrity": "sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==",
"dependencies": {
"async": "0.9.x",
"chalk": "^2.4.2",
"filelist": "^1.0.1",
"minimatch": "^3.0.4"
},
"bin": {
"jake": "bin/cli.js"
},
"engines": {
"node": "*"
}
},
"node_modules/media-typer": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
......@@ -311,27 +416,15 @@
"node": ">= 0.6"
}
},
"node_modules/morgan": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",
"integrity": "sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==",
"node_modules/minimatch": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"dependencies": {
"basic-auth": "~2.0.1",
"debug": "2.6.9",
"depd": "~2.0.0",
"on-finished": "~2.3.0",
"on-headers": "~1.0.2"
"brace-expansion": "^1.1.7"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/morgan/node_modules/depd": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
"engines": {
"node": ">= 0.8"
"node": "*"
}
},
"node_modules/ms": {
......@@ -358,14 +451,6 @@
"node": ">= 0.8"
}
},
"node_modules/on-headers": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
"integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
"engines": {
"node": ">= 0.8"
}
},
"node_modules/parseurl": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
......@@ -486,6 +571,17 @@
"node": ">= 0.6"
}
},
"node_modules/supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dependencies": {
"has-flag": "^3.0.0"
},
"engines": {
"node": ">=4"
}
},
"node_modules/toidentifier": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
......@@ -541,18 +637,28 @@
"negotiator": "0.6.2"
}
},
"ansi-styles": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
"requires": {
"color-convert": "^1.9.0"
}
},
"array-flatten": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
"integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
},
"basic-auth": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
"integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
"requires": {
"safe-buffer": "5.1.2"
}
"async": {
"version": "0.9.2",
"resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz",
"integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0="
},
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
},
"body-parser": {
"version": "1.19.0",
......@@ -571,11 +677,48 @@
"type-is": "~1.6.17"
}
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
}
},
"bytes": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
"integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
},
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
}
},
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"requires": {
"color-name": "1.1.3"
}
},
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
},
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
},
"content-disposition": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
......@@ -622,6 +765,14 @@
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
},
"ejs": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.5.tgz",
"integrity": "sha512-dldq3ZfFtgVTJMLjOe+/3sROTzALlL9E34V4/sDtUd/KlBSS0s6U1/+WPE1B4sj9CXHJpL1M6rhNJnc9Wbal9w==",
"requires": {
"jake": "^10.6.1"
}
},
"encodeurl": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
......@@ -632,6 +783,11 @@
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
},
"escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
},
"etag": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
......@@ -674,6 +830,14 @@
"vary": "~1.1.2"
}
},
"filelist": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.1.tgz",
"integrity": "sha512-8zSK6Nu0DQIC08mUC46sWGXi+q3GGpKydAG36k+JDba6VRpkevvOWUW5a/PhShij4+vHT9M+ghgG7eM+a9JDUQ==",
"requires": {
"minimatch": "^3.0.4"
}
},
"finalhandler": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
......@@ -698,6 +862,11 @@
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
"integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
},
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
},
"http-errors": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
......@@ -728,6 +897,17 @@
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
},
"jake": {
"version": "10.8.2",
"resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz",
"integrity": "sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==",
"requires": {
"async": "0.9.x",
"chalk": "^2.4.2",
"filelist": "^1.0.1",
"minimatch": "^3.0.4"
}
},
"media-typer": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
......@@ -761,23 +941,12 @@
"mime-db": "1.44.0"
}
},
"morgan": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",
"integrity": "sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==",
"minimatch": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"requires": {
"basic-auth": "~2.0.1",
"debug": "2.6.9",
"depd": "~2.0.0",
"on-finished": "~2.3.0",
"on-headers": "~1.0.2"
},
"dependencies": {
"depd": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
}
"brace-expansion": "^1.1.7"
}
},
"ms": {
......@@ -798,11 +967,6 @@
"ee-first": "1.1.1"
}
},
"on-headers": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
"integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA=="
},
"parseurl": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
......@@ -901,6 +1065,14 @@
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
"integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"requires": {
"has-flag": "^3.0.0"
}
},
"toidentifier": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
......
......@@ -14,7 +14,7 @@
"author": "Hyoseob Song",
"license": "MIT",
"dependencies": {
"express": "^4.17.1",
"morgan": "^1.10.0"
"ejs": "^3.1.5",
"express": "^4.17.1"
}
}
......
<!DOCTYPE html>
<html lang="ko">
<html lang="en">
<head>
<meta charset="UTF-8">
......
<!DOCTYPE html>
<html lang="ko">
<html lang="en">
<head>
<meta charset="UTF-8">
......@@ -11,20 +11,12 @@
<strong> Culture Gallery</strong>
<h1>
수정 기록 | 수정 날짜 : 2020-12-03
수정 기록 | 수정 날짜 : 2020-12-02
</h1>
<div>
<h2>
12/03
nodejs 서버로 javascript 파일 및 webpage 이동 방법 구현하기
router, content, public 으로 프로젝트 전체 구조 재분할
main page design 구현 -> info, login 등으로 link 필요
카카오 API 응용 -> 위치 정보 및 공연 컨텐츠 받아서 지도에 마킹, 카카오톡으로 보내기
12/02
웹사이트 node에 연결 -> 디자인 구상 필요
api database 구축 -> 카테고리별로 가공해서 받아오기
</h2>
</div>
<div>
......
*
{
margin: 0;
padding: 0;
}
.nav-bar
{
background: #000;
height: 80px;
}
.logo{
background-color: #fff;
margin: 10px 50px;
height: 60px;
}
.menu{
float: right;
list-style: none;
margin:20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border: 1px solid #fff;
}
.menu li a:hover{
background: #fff;
transition: .4s;
color: #000;
}
.welcome{
position:relative;
text-align:center;
font-family: sans-serif;
color:#000;
top: 300px;
}
.welcome h1{
font-size: 42px;
margin: 25px;
}
*
{
margin: 0;
padding: 0;
}
header
{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg);
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: 5s;
animation-name: animate;
animation-direction: alternate-reverse;
animation-duration: 30s;
animation-fill-mode:forwards;
animation-iteration-count: infinite;
animation-play-state: running;
animation-timing-function:ease-in-out;
}
@keyframes animate{
0%{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg);
}
33%{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back2.jpg);
}
66%{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back3.jpg);
}
}
.nav-bar
{
background: rgb(0,0,0,0.5);
height: 80px;
}
.logo{
background-color: #fff;
margin: 10px 50px;
height: 60px;
}
.menu{
float: right;
list-style: none;
margin:20px;
}
.menu li{
display: inline-block;
margin: 10px 5px;
}
.menu li a{
text-decoration: none;
color: #fff;
padding: 5px 10px;
font-family: sans-serif;
letter-spacing: 2px;
border: 1px solid #fff;
}
.menu li a:hover{
background: #fff;
transition: .4s;
color: #000;
}
.welcome{
position:relative;
text-align:center;
font-family: sans-serif;
color:#fff;
top: 300px;
}
.welcome h1{
font-size: 42px;
margin: 25px;
}
.btn{
font-size:18px;
letter-spacing: 2px;
margin:5px;
padding:7px 10px;
text-decoration: none;
border: 1px solid #fff;
}
.btn{
color:#fff;
}
.btn:hover{
background: #fff;
color: #000;
transition: .4s;
}
\ No newline at end of file
......@@ -2,8 +2,11 @@ var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
router.get('/', function (req, res, next) {
res.render('/public/html/main', { title: 'My Gallery' });
});
router.get('/login', function (req, res, next) {
res.render('index', { title: 'Express' });
})
module.exports = router;
......
var express = require('express');
var router = express.Router();
var fs = require('fs');
//로그인 페이지에서 실행됨 : title 할당하고 login.html 띄워줌.
router.get('/login', function (req, res, next) {
res.render('login.html', { title: 'Login2' });
var url = request.url;
if (url == '/') {
url = 'send.html';
}
if (url == '/loginmainpage') {
url = 'loginmainpage.html';
}
response.writeHead(200);
response.end(fs.readFileSync(__dirname + url));
console.log('로그인 페이지 접속 성공');
});
module.exports = router;
var express = require('express');
var router = express.Router();
//루트 페이지 (메인페이지)에서 실행됨 : title 할당하고 main.html 띄워줌.
router.get('/', function (req, res, next) {
res.render('main.html', { title: 'Culture Gallery' });
console.log('main 접속 성공');
});
/* GET home page. */
router.get('/login', function (req, res, next) {
res.render('login.html', { title: 'Login1' });
console.log('로그인 페이지 접속 성공');
});
module.exports = router;
\ No newline at end of file
function sendLink(){
Kakao.init('0678e32dab56db1c52ac63ab4ccb7663')
Kakao.Link.sendDefault({
objectType: 'feed',
content:{
title: "관심있는 공연 정보",
description: '주소-> http://naver.com',
imageUrl:'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
link:{
mobileWebUrl: 'http://naver.com',
webUrl: 'http://naver.com',
},
},
buttons: [
{
title: '웹으로 보기',
link: {
mobileWebUrl: 'http://naver.com',
webUrl: 'http://naver.com',
},
},
{
title: '웹으로 보기',
link: {
mobileWebUrl: 'http://naver.com',
webUrl: 'http://naver.com',
},
},
],
})
};
\ No newline at end of file
<html>
<head>
<title>로그인 페이지</title>
<link rel="stylesheet" href='/stylesheets/login_style.css' type="text/css">
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
</head>
<body>
<header>
<div class="nav-bar">
<img src="../images/camera.png" alt="" class="logo">
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Testimonimal</a></li>
<li><a href="">Career</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="welcome">
<h1>로그인</h1>
<a id="kakao-login-btn"></a>
</div>
</header>
</body>
<script>
Kakao.init('0678e32dab56db1c52ac63ab4ccb7663');
console.log(Kakao.isInitialized());
Kakao.Auth.createLoginButton({
container: '#kakao-login-btn',
success: function (authObj) {
console.log(JSON.stringify(authObj));
alert(JSON.stringify(authObj));//authObj -> 토큰임.
},
fail: function (err) {
alert(JSON.stringify(err));
}
})
</script>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>login page title</title>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
</head>
<body>
<a id="kakao-login-btn"></a>
<a href="http://developers.kakao.com/logout"></a>
<script>
Kakao.init('0678e32dab56db1c52ac63ab4ccb7663');
console.log(Kakao.isInitialized());
Kakao.Auth.createLoginButton({
container: '#kakao-login-btn',
success: function(authObj){
console.log(JSON.stringify(authObj));
alert(JSON.stringify(authObj));//authObj -> 토큰임.
redirectUrl
},
fail: function(err){
alert(JSON.stringify(err));
}
})
console.log('hi');
Kakao.Link.createDefaultButton({
container: ".kakao-link",
objectType: "feed",
content:{
title: "안녕하세요",
description: "반갑습니다.",
link:{
webUrl: "https://www.naver.com/",
mobileWebUrl: "https://www.naver.com/"
},
},
})
function kakaoLogout(){
Kakao.Auth.logout(function(response){
alert(response+'logout');
Kakao.API.request({
url: '/v1/user/unlink',
success: function(response) {
console.log(response);
},
fail: function(error) {
console.log(error);
console.log("error");
},
})
})
}
</script>
<script>
console.log('hi');
Kakao.Link.createDefaultButton({
container: ".kakao-link",
objectType: "feed",
content:{
title: "안녕하세요",
description: "반갑습니다.",
link:{
webUrl: "https://www.naver.com/",
mobileWebUrl: "https://www.naver.com/"
},
},
})
</script>
<a onclick="kakaoLogout();">카카오 로그아웃</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>login main page title</title>
</head>
</html>
\ No newline at end of file
<html>
<head>
<title>Webpage Design In HTML and CSS</title>
<link rel="stylesheet" href='/stylesheets/main_style.css' type="text/css">
</head>
<body>
<header>
<div class="nav-bar">
<img src="../images/camera.png" alt="" class="logo">
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">Services</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Testimonimal</a></li>
<li><a href="">Career</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="welcome">
<h1>어떤 공연을 찾으시나요?</h1>
<a href="#" class="btn btn1">나의 근처 공연</a>
<a href="#" class="btn btn2">검색하기</a>
<a href="login" class="btn btn3">로그인</a>
</div>
</header>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>send page title</title>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script src="send.js"></script>
</head>
<body>
<a onclick="sendLink()">보내기</a>
</body>
</html>
\ No newline at end of file