이유제 / CultureGallery

Go to a project
Toggle navigation Toggle navigation pinning
송효섭
9311b8f4 1 parent 045c0289

발표 전 최종 확인

Inline Side-by-side
Showing 19 changed files with 13 additions and 972 deletions
......@@ -68,20 +68,23 @@ npm install -g npm
npm start
```
## 사용 방법 (구체화 중)
1. IE 8 이상의 웹 브라우저로 localhost:8000에 접속합니다.
## 사용 방법
1. 본 페이지에서 다운받아 실행하는 경우, IE 8 이상의 웹 브라우저로 localhost:23023에 접속합니다.
![메인-화면](images/mainpage.jpg)<br>
2. 나의 근처 공연/ 검색하기 / 로그인 버튼 중 하나를 선택합니다.<br>
2. 나의 근처 공연/ 로그인 버튼 중 하나를 선택합니다.<br>
-기능 1. 나의 근처 공연<br>
본인의 위치를 받아올 수 있도록 위치 수집 권한을 허락해주세요.<br>
지도 중심에 본인의 위치가 나오고 주변의 공연 장소에 마크가 달립니다.(보완 중)<br>
권한 허용 후 새로고침하면 지도 중심에 본인의 위치가 표시되고 주변의 공연 장소에 마크가 달립니다.<br>
주변 공연 장소는 지도 아래에 표로 자동 생성됩니다. 이 곳에서 정보를 확인하시고 전송하기 기능을 사용할 수 있습니다.<br>
전송하기 기능은 카카오톡으로 접근되며, 접근을 위해서는 추가적인 권한 허용이 요구될 수 있습니다.
-기능 2. 검색하기<br>
원하는 필터를 체크한 후, 검색하면 해당 조건을 충족하는 공연들이 나옵니다.(개발 중)<br>
원하는 필터를 체크한 후, 검색하면 해당 조건을 충족하는 공연들이 나옵니다.<br>
검색창에 입력 시 별도의 검색창으로 이동됩니다. 검색 기준은 제목, 위치, 장소를 통합 반영하여 검색합니다.<br>
-기능 3. 로그인<br>
카카오톡 계정 로그인을 통해 더 많은 기능을 사용하세요!<br>
카카오톡 계정 로그인을 통해 더 많은 기능을 사용해보세요!<br>
로그인을 하면 보러 가고 싶은 공연의 정보를 카카오톡 친구와 공유할 수 있습니다.<br>
## 라이센스
......
const express = require('express');
const path = require('path');
const app = express();
var bodyparser = require('body-parser');
var url = require('url');
require('dotenv').config();
......@@ -9,7 +8,7 @@ require('dotenv').config();
var mainRouter = require('./routes') //호출시 index.js 실행 (main.js : title 할당하고 main.html 열어줌)
//디폴트 포트 값 : 8000
app.set('port', process.env.PORT || 8000);
app.set('port', process.env.PORT || 23023);
//ejs (html포맷) 파일을 웹사이트에 view로 띄워주기 위한 view engine 설정.
app.set('views', path.join(__dirname, 'views'));
......
const searchBox = document.querySelector(".search-box");
const searchBtn = document.querySelector(".search-icon");
const cancelBtn = document.querySelector(".cancel-icon");
const searchInput = document.querySelector("input");
const searchData = document.querySelector(".search-data");
searchBtn.onclick = () => {
searchBox.classList.add("active");
searchBtn.classList.add("active");
searchInput.classList.add("active");
cancelBtn.classList.add("active");
searchInput.focus();
if (searchInput.value != "") {
var values = searchInput.value;
searchData.classList.remove("active");
searchData.innerHTML = "You just typed " + "<span style='font-weight: 500;'>" + values + "</span>";
} else {
searchData.textContent = "";
}
}
cancelBtn.onclick = () => {
searchBox.classList.remove("active");
searchBtn.classList.remove("active");
searchInput.classList.remove("active");
cancelBtn.classList.remove("active");
searchData.classList.toggle("active");
searchInput.value = "";
}
\ No newline at end of file
window.FontAwesomeKitConfig = {
"asyncLoading": {
"enabled": true
},
"autoA11y": {
"enabled": true
},
"baseUrl": "https://ka-f.fontawesome.com",
"detectConflictsUntil": null,
"iconUploads": {},
"license": "free",
"method": "css",
"minify": {
"enabled": true
},
"token": "a076d05399",
"v4FontFaceShim": {
"enabled": false
},
"v4shim": {
"enabled": false
},
"version": "5.15.1"
};
! function (t) {
"function" == typeof define && define.amd ? define(t) : t()
}((function () {
"use strict";
function t(e) {
return (t = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (t) {
return typeof t
} : function (t) {
return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t
})(e)
}
function e(t, e, n) {
return e in t ? Object.defineProperty(t, e, {
value: n,
enumerable: !0,
configurable: !0,
writable: !0
}) : t[e] = n, t
}
function n(t, e) {
var n = Object.keys(t);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(t);
e && (o = o.filter((function (e) {
return Object.getOwnPropertyDescriptor(t, e).enumerable
}))), n.push.apply(n, o)
}
return n
}
function o(t) {
for (var o = 1; o < arguments.length; o++) {
var r = null != arguments[o] ? arguments[o] : {};
o % 2 ? n(Object(r), !0).forEach((function (n) {
e(t, n, r[n])
})) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : n(Object(r)).forEach((function (e) {
Object.defineProperty(t, e, Object.getOwnPropertyDescriptor(r, e))
}))
}
return t
}
function r(t, e) {
return function (t) {
if (Array.isArray(t)) return t
}(t) || function (t, e) {
if (!(Symbol.iterator in Object(t) || "[object Arguments]" === Object.prototype.toString.call(t))) return;
var n = [],
o = !0,
r = !1,
i = void 0;
try {
for (var c, a = t[Symbol.iterator](); !(o = (c = a.next()).done) && (n.push(c.value), !e || n.length !== e); o = !0);
} catch (t) {
r = !0, i = t
} finally {
try {
o || null == a.return || a.return()
} finally {
if (r) throw i
}
}
return n
}(t, e) || function () {
throw new TypeError("Invalid attempt to destructure non-iterable instance")
}()
}
function i(t, e) {
var n = e && e.addOn || "",
o = e && e.baseFilename || t.license + n,
r = e && e.minify ? ".min" : "",
i = e && e.fileSuffix || t.method,
c = e && e.subdir || t.method;
return t.baseUrl + "/releases/" + ("latest" === t.version ? "latest" : "v".concat(t.version)) + "/" + c + "/" + o + r + "." + i
}
function c(t, e) {
var n = e || ["fa"],
o = "." + Array.prototype.join.call(n, ",."),
r = t.querySelectorAll(o);
Array.prototype.forEach.call(r, (function (e) {
var n = e.getAttribute("title");
e.setAttribute("aria-hidden", "true");
var o = !e.nextElementSibling || !e.nextElementSibling.classList.contains("sr-only");
if (n && o) {
var r = t.createElement("span");
r.innerHTML = n, r.classList.add("sr-only"), e.parentNode.insertBefore(r, e.nextSibling)
}
}))
}
var a, u = function () { },
f = "undefined" != typeof global && void 0 !== global.process && "function" == typeof global.process.emit,
s = "undefined" == typeof setImmediate ? setTimeout : setImmediate,
d = [];
function l() {
for (var t = 0; t < d.length; t++) d[t][0](d[t][1]);
d = [], a = !1
}
function h(t, e) {
d.push([t, e]), a || (a = !0, s(l, 0))
}
function m(t) {
var e = t.owner,
n = e._state,
o = e._data,
r = t[n],
i = t.then;
if ("function" == typeof r) {
n = "fulfilled";
try {
o = r(o)
} catch (t) {
b(i, t)
}
}
p(i, o) || ("fulfilled" === n && v(i, o), "rejected" === n && b(i, o))
}
function p(e, n) {
var o;
try {
if (e === n) throw new TypeError("A promises callback cannot return that same promise.");
if (n && ("function" == typeof n || "object" === t(n))) {
var r = n.then;
if ("function" == typeof r) return r.call(n, (function (t) {
o || (o = !0, n === t ? y(e, t) : v(e, t))
}), (function (t) {
o || (o = !0, b(e, t))
})), !0
}
} catch (t) {
return o || b(e, t), !0
}
return !1
}
function v(t, e) {
t !== e && p(t, e) || y(t, e)
}
function y(t, e) {
"pending" === t._state && (t._state = "settled", t._data = e, h(w, t))
}
function b(t, e) {
"pending" === t._state && (t._state = "settled", t._data = e, h(A, t))
}
function g(t) {
t._then = t._then.forEach(m)
}
function w(t) {
t._state = "fulfilled", g(t)
}
function A(t) {
t._state = "rejected", g(t), !t._handled && f && global.process.emit("unhandledRejection", t._data, t)
}
function O(t) {
global.process.emit("rejectionHandled", t)
}
function j(t) {
if ("function" != typeof t) throw new TypeError("Promise resolver " + t + " is not a function");
if (this instanceof j == !1) throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.");
this._then = [],
function (t, e) {
function n(t) {
b(e, t)
}
try {
t((function (t) {
v(e, t)
}), n)
} catch (t) {
n(t)
}
}(t, this)
}
j.prototype = {
constructor: j,
_state: "pending",
_then: null,
_data: void 0,
_handled: !1,
then: function (t, e) {
var n = {
owner: this,
then: new this.constructor(u),
fulfilled: t,
rejected: e
};
return !e && !t || this._handled || (this._handled = !0, "rejected" === this._state && f && h(O, this)), "fulfilled" === this._state || "rejected" === this._state ? h(m, n) : this._then.push(n), n.then
},
catch: function (t) {
return this.then(null, t)
}
}, j.all = function (t) {
if (!Array.isArray(t)) throw new TypeError("You must pass an array to Promise.all().");
return new j((function (e, n) {
var o = [],
r = 0;
function i(t) {
return r++,
function (n) {
o[t] = n, --r || e(o)
}
}
for (var c, a = 0; a < t.length; a++)(c = t[a]) && "function" == typeof c.then ? c.then(i(a), n) : o[a] = c;
r || e(o)
}))
}, j.race = function (t) {
if (!Array.isArray(t)) throw new TypeError("You must pass an array to Promise.race().");
return new j((function (e, n) {
for (var o, r = 0; r < t.length; r++)(o = t[r]) && "function" == typeof o.then ? o.then(e, n) : e(o)
}))
}, j.resolve = function (e) {
return e && "object" === t(e) && e.constructor === j ? e : new j((function (t) {
t(e)
}))
}, j.reject = function (t) {
return new j((function (e, n) {
n(t)
}))
};
var S = "function" == typeof Promise ? Promise : j;
function E(t, n) {
var o = n.fetch,
r = n.XMLHttpRequest,
i = n.token;
return new S((function (n, c) {
if ("function" == typeof o) o(t, {
mode: "cors",
cache: "default",
headers: new Headers(e({}, "fa-kit-token", i))
}).then((function (t) {
if (t.ok) return t.text();
throw new Error("")
})).then((function (t) {
n(t)
})).catch(c);
else if ("function" == typeof r) {
var a = new r;
a.addEventListener("loadend", (function () {
this.responseText ? n(this.responseText) : c(new Error(""))
}));
["abort", "error", "timeout"].map((function (t) {
a.addEventListener(t, (function () {
c(new Error(""))
}))
})), a.open("GET", t), a.setRequestHeader("fa-kit-token", i), a.send()
} else {
c(new Error(""))
}
}))
}
function _(t, e) {
var n = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : function () { },
r = e.document || r,
a = c.bind(c, r, ["fa", "fab", "fas", "far", "fal", "fad", "fak"]);
t.autoA11y.enabled && n(a);
var u = [{
id: "fa-main",
addOn: void 0
}];
t.v4shim.enabled && u.push({
id: "fa-v4-shims",
addOn: "-v4-shims"
}), t.v4FontFaceShim.enabled && u.push({
id: "fa-v4-font-face",
addOn: "-v4-font-face"
});
var f = u.map((function (n) {
return new S((function (r, c) {
E(i(t, {
addOn: n.addOn,
minify: t.minify.enabled
}), e).then((function (i) {
r(P(i, o({}, e, {
baseUrl: t.baseUrl,
version: t.version,
id: n.id
})))
})).catch(c)
}))
}));
return S.all(f)
}
function P(t, e) {
var n = document.createElement("style"),
o = document.createTextNode(function (t, e, n) {
var o = t;
return [
[/(url\("?)\.\.\/\.\.\/\.\./g, function (t, n) {
return "".concat(n).concat(e)
}],
[/(url\("?)\.\.\/webfonts/g, function (t, o) {
return "".concat(o).concat(e, "/releases/v").concat(n, "/webfonts")
}],
[/(url\("?)https:\/\/kit-free([^.])*\.fontawesome\.com/g, function (t, n) {
return "".concat(n).concat(e)
}]
].forEach((function (t) {
var e = r(t, 2),
n = e[0],
i = e[1];
o = o.replace(n, i)
})), o
}(t, e.baseUrl, e.version));
return n.appendChild(o), n.media = "all", e.id && n.setAttribute("id", e.id), e && e.detectingConflicts && e.detectionIgnoreAttr && n.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)), n
}
function F(t, e) {
e.autoA11y = t.autoA11y.enabled, "pro" === t.license && (e.autoFetchSvg = !0, e.fetchSvgFrom = t.baseUrl + "/releases/" + ("latest" === t.version ? "latest" : "v".concat(t.version)) + "/svgs", e.fetchUploadedSvgFrom = t.uploadsUrl);
var n = [];
return t.v4shim.enabled && n.push(new S((function (n, r) {
E(i(t, {
addOn: "-v4-shims",
minify: t.minify.enabled
}), e).then((function (t) {
n(T(t, o({}, e, {
id: "fa-v4-shims"
})))
})).catch(r)
}))), n.push(new S((function (n, r) {
E(i(t, {
minify: t.minify.enabled
}), e).then((function (t) {
var r = T(t, o({}, e, {
id: "fa-main"
}));
n(function (t, e) {
var n = e && void 0 !== e.autoFetchSvg ? e.autoFetchSvg : void 0,
o = e && void 0 !== e.autoA11y ? e.autoA11y : void 0;
void 0 !== o && t.setAttribute("data-auto-a11y", o ? "true" : "false");
n && (t.setAttributeNode(document.createAttribute("data-auto-fetch-svg")), t.setAttribute("data-fetch-svg-from", e.fetchSvgFrom), t.setAttribute("data-fetch-uploaded-svg-from", e.fetchUploadedSvgFrom));
return t
}(r, e))
})).catch(r)
}))), S.all(n)
}
function T(t, e) {
var n = document.createElement("SCRIPT"),
o = document.createTextNode(t);
return n.appendChild(o), n.referrerPolicy = "strict-origin", e.id && n.setAttribute("id", e.id), e && e.detectingConflicts && e.detectionIgnoreAttr && n.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)), n
}
function C(t) {
var e, n = [],
o = document,
r = o.documentElement.doScroll,
i = (r ? /^loaded|^c/ : /^loaded|^i|^c/).test(o.readyState);
i || o.addEventListener("DOMContentLoaded", e = function () {
for (o.removeEventListener("DOMContentLoaded", e), i = 1; e = n.shift();) e()
}), i ? setTimeout(t, 0) : n.push(t)
}
function L(t) {
"undefined" != typeof MutationObserver && new MutationObserver(t).observe(document, {
childList: !0,
subtree: !0
})
}
try {
if (window.FontAwesomeKitConfig) {
var k = window.FontAwesomeKitConfig,
x = {
detectingConflicts: k.detectConflictsUntil && new Date <= new Date(k.detectConflictsUntil),
detectionIgnoreAttr: "data-fa-detection-ignore",
fetch: window.fetch,
token: k.token,
XMLHttpRequest: window.XMLHttpRequest,
document: document
},
I = document.currentScript,
U = I ? I.parentElement : document.head;
(function () {
var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};
return "js" === t.method ? F(t, e) : "css" === t.method ? _(t, e, (function (t) {
C(t), L(t)
})) : void 0
})(k, x).then((function (t) {
t.map((function (t) {
U.insertBefore(t, I ? I.nextSibling : null)
})), x.detectingConflicts && I && C((function () {
I.setAttributeNode(document.createAttribute(x.detectionIgnoreAttr));
var t = function (t, e) {
var n = document.createElement("script");
return e && e.detectionIgnoreAttr && n.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)), n.src = i(t, {
baseFilename: "conflict-detection",
fileSuffix: "js",
subdir: "js",
minify: t.minify.enabled
}), n
}(k, x);
document.body.appendChild(t)
}))
})).catch((function (t) {
console.error("".concat("Font Awesome Kit:", " ").concat(t))
}))
}
} catch (t) {
console.error("".concat("Font Awesome Kit:", " ").concat(t))
}
}));
\ No newline at end of file
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #000000;
}
.search-box{
position: relative;
height: 60px;
width: 60px;
border-radius: 50%;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* //박스 길이 조절 */
.search-box.active{
width: 700px;
}
.search-box input{
width: 100%;
height: 100%;
border: none;
border-radius: 50px;
background: #fff;
outline: none;
padding: 0 60px 0 20px;
font-size: 18px;
opacity: 0;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* 불투명도 */
.search-box input.active{
opacity: 1;
}
.search-box input::placeholder{
color: #a6a6a6;
}
.search-box .search-icon{
position: absolute;
/* 버튼위치 */
right: -380px;
top: 50%;
transform: translateY(-50%);
height: 60px;
width: 60px;
background: #fff;
border-radius: 50%;
text-align: center;
line-height: 60px;
font-size: 22px;
color: #CB25FF;
cursor: pointer;
z-index: 1;
/* transition: all 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05); */
/* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
transition-timing-function: linear;
}
.search-box .search-icon.active{
right: 5px;
height: 50px;
line-height: 50px;
width: 50px;
font-size: 20px;
background: #CB25FF;
color: #fff;
transform: translateY(-50%) rotate(360deg);
}
.search-box .cancel-icon{
position: absolute;
right: -380px;
top: 50%;
transform: translateY(-50%);
font-size: 25px;
color: #fff;
cursor: pointer;
/* transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); */
/* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
transition-timing-function: linear;
}
.search-box .cancel-icon.active{
right: -40px;
}
.search-box .search-data{
text-align: center;
padding-top: 7px;
color: #fff;
font-size: 18px;
word-wrap: break-word;
}
.search-box .search-data.active{
display: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>검색창 애니메이션</title>
</head>
<body>
<div class="searchBtn">
<link rel="stylesheet" href="btnstyle.css">
<script src="btnsource.js"></script>
<div class="search-box">
<input type="text" placeholder="검색어를 입력하세요 (ex. AAAI 2020)..">
<!-- encoded function for activating search-bar in lisensed resouce -->
<div class="search-icon">
<i class="fas fa-search"></i>
</div>
<div class="cancel-icon">
<i class="fas fa-times"></i>
</div>
<div class="search-data"></div>
</div>
<script src="btnClickEvent.js"></script>
</div>
</body>
</html>
\ No newline at end of file
<div class="searchBtn">
<link rel="stylesheet" href="btnstyle.css">
<script src="btnsource.js"></script>
<div class="search-box">
<input type="text" placeholder="검색어를 입력하세요 (ex. AAAI 2020)..">
<!-- encoded function for activating search-bar in lisensed resouce -->
<div class="search-icon">
<i class="fas fa-search"></i>
</div>
<div class="cancel-icon">
<i class="fas fa-times"></i>
</div>
<div class="search-data"></div>
</div>
<script src="btnClickEvent.js"></script>
</div>
\ No newline at end of file
This diff could not be displayed because it is too large.
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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<!-- 로그인 세션 -->
login successed.
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Gallery</title>
</head>
<body>
<strong> Culture Gallery</strong>
<h1>
수정 기록 | 수정 날짜 : 2020-12-02
</h1>
<div>
<h2>
웹사이트 node에 연결 -> 디자인 구상 필요
api database 구축 -> 카테고리별로 가공해서 받아오기
</h2>
</div>
<div>
로그인 버튼 연결
<input type="button" value="Login" onclick="location.href='login'">
</div>
<script type="text/javascript">
function movepage() {
location.href = "/login";
}
</script>
<div>
================= 수정필요 : 간단한 계획서 =================
<br>
주제 : 공연전시정보 공공API를 이용한 전시회 웹 플랫폼 ( Culture Gallery (가제))
<br>
구현하고자 하는 기능은 아래와 같습니다.
<br>
전국 대, 소규모 전시회의 관람 정보를 알려줌.
전시회 위치를 카카오맵 api로 받아 올 계획
<br>
> 관심 장르 / 관심 장소에서 진행되는 전시회 구독 기능
<br>
>>> 주기적인 e-mail or 카카오톡 등으로 client에게 알려줌
<br>
>지방에서 진행되는 소규모 전시회나 공연에도 관심을 가질 수 있도록,
<br>
주최측에서 게시 신청을 할 수 있는 페이지를 마련.
<br>
>>> 가성비 전시회 등을 찾아가서 구경하는 문화 형성 등..
<br>
> 관심 가질만한 공연 정보를 추천해주는 기능
<br>
>>> 과거의 관람 데이터 기반 , 위치 기반
<br>
===================================================
</div>
</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
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #664AFF;
}
::selection{
color: #fff;
background: #664AFF;
}
.search-box{
position: relative;
height: 60px;
width: 60px;
border-radius: 50%;
box-shadow: 5px 5px 30px rgba(0,0,0,.2);
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box.active{
width: 350px;
}
.search-box input{
width: 100%;
height: 100%;
border: none;
border-radius: 50px;
background: #fff;
outline: none;
padding: 0 60px 0 20px;
font-size: 18px;
opacity: 0;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box input.active{
opacity: 1;
}
.search-box input::placeholder{
color: #a6a6a6;
}
.search-box .search-icon{
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
height: 60px;
width: 60px;
background: #fff;
border-radius: 50%;
text-align: center;
line-height: 60px;
font-size: 22px;
color: #664AFF;
cursor: pointer;
z-index: 1;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box .search-icon.active{
right: 5px;
height: 50px;
line-height: 50px;
width: 50px;
font-size: 20px;
background: #664AFF;
color: #fff;
transform: translateY(-50%) rotate(360deg);
}
.search-box .cancel-icon{
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 25px;
color: #fff;
cursor: pointer;
transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box .cancel-icon.active{
right: -40px;
transform: translateY(-50%) rotate(360deg);
}
.search-box .search-data{
text-align: center;
padding-top: 7px;
color: #fff;
font-size: 18px;
word-wrap: break-word;
}
.search-box .search-data.active{
display: none;
}
......@@ -6,7 +6,7 @@ var ejs = require('ejs');
var mapPage = fs.readFileSync('routes/mapPage.ejs', 'utf8');
var findPage = fs.readFileSync('routes/findPage.ejs','utf-8');
var findPage = fs.readFileSync('routes/findPage.ejs', 'utf-8');
var dataNum = 0;
router.get('/mappage', (req, res) => {
......@@ -24,7 +24,7 @@ router.get('/mappage', (req, res) => {
} else {
var show_list = [];
for (var i = 0; i < dataNum; i++) {
show_list.push([results[i].id, results[i].oper_name, results[i].latitude, results[i].longitude,results[i].start_day,results[i].where]);
show_list.push([results[i].id, results[i].oper_name, results[i].latitude, results[i].longitude, results[i].start_day, results[i].where]);
var page = ejs.render(mapPage, {
title: "show data",
data: show_list,
......@@ -53,7 +53,7 @@ router.get('/findpage', (req, res) => {
} else {
var show_list = [];
for (var i = 0; i < dataNum; i++) {
show_list.push([results[i].id, results[i].oper_name, results[i].latitude, results[i].longitude,results[i].start_day,results[i].where]);
show_list.push([results[i].id, results[i].oper_name, results[i].latitude, results[i].longitude, results[i].start_day, results[i].where]);
var page = ejs.render(findPage, {
title: "show data",
data: show_list,
......@@ -79,10 +79,6 @@ router.get('/login', function (req, res, next) {
res.render('login.html', { title: 'Login' });
console.log('로그인 페이지 접속 성공');
});
// router.get('/search', function (req, res, next) {
// res.render('search.html', { title: '검색 결과' });
// console.log('검색 결과 페이지 접속 성공');
// })
router.get('/send', function (req, res, next) {
res.render('send.html', { title: 'Send message' });
console.log('카카오톡 공유 메시지 접속 성공');
......