이유제 / 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 ...@@ -68,20 +68,23 @@ npm install -g npm
68 npm start 68 npm start
69 ``` 69 ```
70 70
71 -## 사용 방법 (구체화 중) 71 +## 사용 방법
72 -1. IE 8 이상의 웹 브라우저로 localhost:8000에 접속합니다. 72 +1. 본 페이지에서 다운받아 실행하는 경우, IE 8 이상의 웹 브라우저로 localhost:23023에 접속합니다.
73 ![메인-화면](images/mainpage.jpg)<br> 73 ![메인-화면](images/mainpage.jpg)<br>
74 74
75 -2. 나의 근처 공연/ 검색하기 / 로그인 버튼 중 하나를 선택합니다.<br> 75 +2. 나의 근처 공연/ 로그인 버튼 중 하나를 선택합니다.<br>
76 -기능 1. 나의 근처 공연<br> 76 -기능 1. 나의 근처 공연<br>
77 본인의 위치를 받아올 수 있도록 위치 수집 권한을 허락해주세요.<br> 77 본인의 위치를 받아올 수 있도록 위치 수집 권한을 허락해주세요.<br>
78 - 지도 중심에 본인의 위치가 나오고 주변의 공연 장소에 마크가 달립니다.(보완 중)<br> 78 + 권한 허용 후 새로고침하면 지도 중심에 본인의 위치가 표시되고 주변의 공연 장소에 마크가 달립니다.<br>
79 + 주변 공연 장소는 지도 아래에 표로 자동 생성됩니다. 이 곳에서 정보를 확인하시고 전송하기 기능을 사용할 수 있습니다.<br>
80 + 전송하기 기능은 카카오톡으로 접근되며, 접근을 위해서는 추가적인 권한 허용이 요구될 수 있습니다.
79 81
80 -기능 2. 검색하기<br> 82 -기능 2. 검색하기<br>
81 - 원하는 필터를 체크한 후, 검색하면 해당 조건을 충족하는 공연들이 나옵니다.(개발 중)<br> 83 + 원하는 필터를 체크한 후, 검색하면 해당 조건을 충족하는 공연들이 나옵니다.<br>
84 + 검색창에 입력 시 별도의 검색창으로 이동됩니다. 검색 기준은 제목, 위치, 장소를 통합 반영하여 검색합니다.<br>
82 85
83 -기능 3. 로그인<br> 86 -기능 3. 로그인<br>
84 - 카카오톡 계정 로그인을 통해 더 많은 기능을 사용하세요!<br> 87 + 카카오톡 계정 로그인을 통해 더 많은 기능을 사용해보세요!<br>
85 로그인을 하면 보러 가고 싶은 공연의 정보를 카카오톡 친구와 공유할 수 있습니다.<br> 88 로그인을 하면 보러 가고 싶은 공연의 정보를 카카오톡 친구와 공유할 수 있습니다.<br>
86 89
87 ## 라이센스 90 ## 라이센스
......
1 const express = require('express'); 1 const express = require('express');
2 const path = require('path'); 2 const path = require('path');
3 const app = express(); 3 const app = express();
4 -var bodyparser = require('body-parser');
5 var url = require('url'); 4 var url = require('url');
6 require('dotenv').config(); 5 require('dotenv').config();
7 6
...@@ -9,7 +8,7 @@ require('dotenv').config(); ...@@ -9,7 +8,7 @@ require('dotenv').config();
9 var mainRouter = require('./routes') //호출시 index.js 실행 (main.js : title 할당하고 main.html 열어줌) 8 var mainRouter = require('./routes') //호출시 index.js 실행 (main.js : title 할당하고 main.html 열어줌)
10 9
11 //디폴트 포트 값 : 8000 10 //디폴트 포트 값 : 8000
12 -app.set('port', process.env.PORT || 8000); 11 +app.set('port', process.env.PORT || 23023);
13 12
14 //ejs (html포맷) 파일을 웹사이트에 view로 띄워주기 위한 view engine 설정. 13 //ejs (html포맷) 파일을 웹사이트에 view로 띄워주기 위한 view engine 설정.
15 app.set('views', path.join(__dirname, 'views')); 14 app.set('views', path.join(__dirname, 'views'));
......
1 -const searchBox = document.querySelector(".search-box");
2 -const searchBtn = document.querySelector(".search-icon");
3 -const cancelBtn = document.querySelector(".cancel-icon");
4 -const searchInput = document.querySelector("input");
5 -const searchData = document.querySelector(".search-data");
6 -searchBtn.onclick = () => {
7 - searchBox.classList.add("active");
8 - searchBtn.classList.add("active");
9 - searchInput.classList.add("active");
10 - cancelBtn.classList.add("active");
11 - searchInput.focus();
12 - if (searchInput.value != "") {
13 - var values = searchInput.value;
14 - searchData.classList.remove("active");
15 - searchData.innerHTML = "You just typed " + "<span style='font-weight: 500;'>" + values + "</span>";
16 - } else {
17 - searchData.textContent = "";
18 - }
19 -}
20 -cancelBtn.onclick = () => {
21 - searchBox.classList.remove("active");
22 - searchBtn.classList.remove("active");
23 - searchInput.classList.remove("active");
24 - cancelBtn.classList.remove("active");
25 - searchData.classList.toggle("active");
26 - searchInput.value = "";
27 -}
...\ No newline at end of file ...\ No newline at end of file
1 -window.FontAwesomeKitConfig = {
2 - "asyncLoading": {
3 - "enabled": true
4 - },
5 - "autoA11y": {
6 - "enabled": true
7 - },
8 - "baseUrl": "https://ka-f.fontawesome.com",
9 - "detectConflictsUntil": null,
10 - "iconUploads": {},
11 - "license": "free",
12 - "method": "css",
13 - "minify": {
14 - "enabled": true
15 - },
16 - "token": "a076d05399",
17 - "v4FontFaceShim": {
18 - "enabled": false
19 - },
20 - "v4shim": {
21 - "enabled": false
22 - },
23 - "version": "5.15.1"
24 -};
25 -! function (t) {
26 - "function" == typeof define && define.amd ? define(t) : t()
27 -}((function () {
28 - "use strict";
29 -
30 - function t(e) {
31 - return (t = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (t) {
32 - return typeof t
33 - } : function (t) {
34 - return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t
35 - })(e)
36 - }
37 -
38 - function e(t, e, n) {
39 - return e in t ? Object.defineProperty(t, e, {
40 - value: n,
41 - enumerable: !0,
42 - configurable: !0,
43 - writable: !0
44 - }) : t[e] = n, t
45 - }
46 -
47 - function n(t, e) {
48 - var n = Object.keys(t);
49 - if (Object.getOwnPropertySymbols) {
50 - var o = Object.getOwnPropertySymbols(t);
51 - e && (o = o.filter((function (e) {
52 - return Object.getOwnPropertyDescriptor(t, e).enumerable
53 - }))), n.push.apply(n, o)
54 - }
55 - return n
56 - }
57 -
58 - function o(t) {
59 - for (var o = 1; o < arguments.length; o++) {
60 - var r = null != arguments[o] ? arguments[o] : {};
61 - o % 2 ? n(Object(r), !0).forEach((function (n) {
62 - e(t, n, r[n])
63 - })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : n(Object(r)).forEach((function (e) {
64 - Object.defineProperty(t, e, Object.getOwnPropertyDescriptor(r, e))
65 - }))
66 - }
67 - return t
68 - }
69 -
70 - function r(t, e) {
71 - return function (t) {
72 - if (Array.isArray(t)) return t
73 - }(t) || function (t, e) {
74 - if (!(Symbol.iterator in Object(t) || "[object Arguments]" === Object.prototype.toString.call(t))) return;
75 - var n = [],
76 - o = !0,
77 - r = !1,
78 - i = void 0;
79 - try {
80 - for (var c, a = t[Symbol.iterator](); !(o = (c = a.next()).done) && (n.push(c.value), !e || n.length !== e); o = !0);
81 - } catch (t) {
82 - r = !0, i = t
83 - } finally {
84 - try {
85 - o || null == a.return || a.return()
86 - } finally {
87 - if (r) throw i
88 - }
89 - }
90 - return n
91 - }(t, e) || function () {
92 - throw new TypeError("Invalid attempt to destructure non-iterable instance")
93 - }()
94 - }
95 -
96 - function i(t, e) {
97 - var n = e && e.addOn || "",
98 - o = e && e.baseFilename || t.license + n,
99 - r = e && e.minify ? ".min" : "",
100 - i = e && e.fileSuffix || t.method,
101 - c = e && e.subdir || t.method;
102 - return t.baseUrl + "/releases/" + ("latest" === t.version ? "latest" : "v".concat(t.version)) + "/" + c + "/" + o + r + "." + i
103 - }
104 -
105 - function c(t, e) {
106 - var n = e || ["fa"],
107 - o = "." + Array.prototype.join.call(n, ",."),
108 - r = t.querySelectorAll(o);
109 - Array.prototype.forEach.call(r, (function (e) {
110 - var n = e.getAttribute("title");
111 - e.setAttribute("aria-hidden", "true");
112 - var o = !e.nextElementSibling || !e.nextElementSibling.classList.contains("sr-only");
113 - if (n && o) {
114 - var r = t.createElement("span");
115 - r.innerHTML = n, r.classList.add("sr-only"), e.parentNode.insertBefore(r, e.nextSibling)
116 - }
117 - }))
118 - }
119 - var a, u = function () { },
120 - f = "undefined" != typeof global && void 0 !== global.process && "function" == typeof global.process.emit,
121 - s = "undefined" == typeof setImmediate ? setTimeout : setImmediate,
122 - d = [];
123 -
124 - function l() {
125 - for (var t = 0; t < d.length; t++) d[t][0](d[t][1]);
126 - d = [], a = !1
127 - }
128 -
129 - function h(t, e) {
130 - d.push([t, e]), a || (a = !0, s(l, 0))
131 - }
132 -
133 - function m(t) {
134 - var e = t.owner,
135 - n = e._state,
136 - o = e._data,
137 - r = t[n],
138 - i = t.then;
139 - if ("function" == typeof r) {
140 - n = "fulfilled";
141 - try {
142 - o = r(o)
143 - } catch (t) {
144 - b(i, t)
145 - }
146 - }
147 - p(i, o) || ("fulfilled" === n && v(i, o), "rejected" === n && b(i, o))
148 - }
149 -
150 - function p(e, n) {
151 - var o;
152 - try {
153 - if (e === n) throw new TypeError("A promises callback cannot return that same promise.");
154 - if (n && ("function" == typeof n || "object" === t(n))) {
155 - var r = n.then;
156 - if ("function" == typeof r) return r.call(n, (function (t) {
157 - o || (o = !0, n === t ? y(e, t) : v(e, t))
158 - }), (function (t) {
159 - o || (o = !0, b(e, t))
160 - })), !0
161 - }
162 - } catch (t) {
163 - return o || b(e, t), !0
164 - }
165 - return !1
166 - }
167 -
168 - function v(t, e) {
169 - t !== e && p(t, e) || y(t, e)
170 - }
171 -
172 - function y(t, e) {
173 - "pending" === t._state && (t._state = "settled", t._data = e, h(w, t))
174 - }
175 -
176 - function b(t, e) {
177 - "pending" === t._state && (t._state = "settled", t._data = e, h(A, t))
178 - }
179 -
180 - function g(t) {
181 - t._then = t._then.forEach(m)
182 - }
183 -
184 - function w(t) {
185 - t._state = "fulfilled", g(t)
186 - }
187 -
188 - function A(t) {
189 - t._state = "rejected", g(t), !t._handled && f && global.process.emit("unhandledRejection", t._data, t)
190 - }
191 -
192 - function O(t) {
193 - global.process.emit("rejectionHandled", t)
194 - }
195 -
196 - function j(t) {
197 - if ("function" != typeof t) throw new TypeError("Promise resolver " + t + " is not a function");
198 - 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.");
199 - this._then = [],
200 - function (t, e) {
201 - function n(t) {
202 - b(e, t)
203 - }
204 - try {
205 - t((function (t) {
206 - v(e, t)
207 - }), n)
208 - } catch (t) {
209 - n(t)
210 - }
211 - }(t, this)
212 - }
213 - j.prototype = {
214 - constructor: j,
215 - _state: "pending",
216 - _then: null,
217 - _data: void 0,
218 - _handled: !1,
219 - then: function (t, e) {
220 - var n = {
221 - owner: this,
222 - then: new this.constructor(u),
223 - fulfilled: t,
224 - rejected: e
225 - };
226 - 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
227 - },
228 - catch: function (t) {
229 - return this.then(null, t)
230 - }
231 - }, j.all = function (t) {
232 - if (!Array.isArray(t)) throw new TypeError("You must pass an array to Promise.all().");
233 - return new j((function (e, n) {
234 - var o = [],
235 - r = 0;
236 -
237 - function i(t) {
238 - return r++,
239 - function (n) {
240 - o[t] = n, --r || e(o)
241 - }
242 - }
243 - for (var c, a = 0; a < t.length; a++)(c = t[a]) && "function" == typeof c.then ? c.then(i(a), n) : o[a] = c;
244 - r || e(o)
245 - }))
246 - }, j.race = function (t) {
247 - if (!Array.isArray(t)) throw new TypeError("You must pass an array to Promise.race().");
248 - return new j((function (e, n) {
249 - for (var o, r = 0; r < t.length; r++)(o = t[r]) && "function" == typeof o.then ? o.then(e, n) : e(o)
250 - }))
251 - }, j.resolve = function (e) {
252 - return e && "object" === t(e) && e.constructor === j ? e : new j((function (t) {
253 - t(e)
254 - }))
255 - }, j.reject = function (t) {
256 - return new j((function (e, n) {
257 - n(t)
258 - }))
259 - };
260 - var S = "function" == typeof Promise ? Promise : j;
261 -
262 - function E(t, n) {
263 - var o = n.fetch,
264 - r = n.XMLHttpRequest,
265 - i = n.token;
266 - return new S((function (n, c) {
267 - if ("function" == typeof o) o(t, {
268 - mode: "cors",
269 - cache: "default",
270 - headers: new Headers(e({}, "fa-kit-token", i))
271 - }).then((function (t) {
272 - if (t.ok) return t.text();
273 - throw new Error("")
274 - })).then((function (t) {
275 - n(t)
276 - })).catch(c);
277 - else if ("function" == typeof r) {
278 - var a = new r;
279 - a.addEventListener("loadend", (function () {
280 - this.responseText ? n(this.responseText) : c(new Error(""))
281 - }));
282 - ["abort", "error", "timeout"].map((function (t) {
283 - a.addEventListener(t, (function () {
284 - c(new Error(""))
285 - }))
286 - })), a.open("GET", t), a.setRequestHeader("fa-kit-token", i), a.send()
287 - } else {
288 - c(new Error(""))
289 - }
290 - }))
291 - }
292 -
293 - function _(t, e) {
294 - var n = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : function () { },
295 - r = e.document || r,
296 - a = c.bind(c, r, ["fa", "fab", "fas", "far", "fal", "fad", "fak"]);
297 - t.autoA11y.enabled && n(a);
298 - var u = [{
299 - id: "fa-main",
300 - addOn: void 0
301 - }];
302 - t.v4shim.enabled && u.push({
303 - id: "fa-v4-shims",
304 - addOn: "-v4-shims"
305 - }), t.v4FontFaceShim.enabled && u.push({
306 - id: "fa-v4-font-face",
307 - addOn: "-v4-font-face"
308 - });
309 - var f = u.map((function (n) {
310 - return new S((function (r, c) {
311 - E(i(t, {
312 - addOn: n.addOn,
313 - minify: t.minify.enabled
314 - }), e).then((function (i) {
315 - r(P(i, o({}, e, {
316 - baseUrl: t.baseUrl,
317 - version: t.version,
318 - id: n.id
319 - })))
320 - })).catch(c)
321 - }))
322 - }));
323 - return S.all(f)
324 - }
325 -
326 - function P(t, e) {
327 - var n = document.createElement("style"),
328 - o = document.createTextNode(function (t, e, n) {
329 - var o = t;
330 - return [
331 - [/(url\("?)\.\.\/\.\.\/\.\./g, function (t, n) {
332 - return "".concat(n).concat(e)
333 - }],
334 - [/(url\("?)\.\.\/webfonts/g, function (t, o) {
335 - return "".concat(o).concat(e, "/releases/v").concat(n, "/webfonts")
336 - }],
337 - [/(url\("?)https:\/\/kit-free([^.])*\.fontawesome\.com/g, function (t, n) {
338 - return "".concat(n).concat(e)
339 - }]
340 - ].forEach((function (t) {
341 - var e = r(t, 2),
342 - n = e[0],
343 - i = e[1];
344 - o = o.replace(n, i)
345 - })), o
346 - }(t, e.baseUrl, e.version));
347 - 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
348 - }
349 -
350 - function F(t, e) {
351 - 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);
352 - var n = [];
353 - return t.v4shim.enabled && n.push(new S((function (n, r) {
354 - E(i(t, {
355 - addOn: "-v4-shims",
356 - minify: t.minify.enabled
357 - }), e).then((function (t) {
358 - n(T(t, o({}, e, {
359 - id: "fa-v4-shims"
360 - })))
361 - })).catch(r)
362 - }))), n.push(new S((function (n, r) {
363 - E(i(t, {
364 - minify: t.minify.enabled
365 - }), e).then((function (t) {
366 - var r = T(t, o({}, e, {
367 - id: "fa-main"
368 - }));
369 - n(function (t, e) {
370 - var n = e && void 0 !== e.autoFetchSvg ? e.autoFetchSvg : void 0,
371 - o = e && void 0 !== e.autoA11y ? e.autoA11y : void 0;
372 - void 0 !== o && t.setAttribute("data-auto-a11y", o ? "true" : "false");
373 - 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));
374 - return t
375 - }(r, e))
376 - })).catch(r)
377 - }))), S.all(n)
378 - }
379 -
380 - function T(t, e) {
381 - var n = document.createElement("SCRIPT"),
382 - o = document.createTextNode(t);
383 - 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
384 - }
385 -
386 - function C(t) {
387 - var e, n = [],
388 - o = document,
389 - r = o.documentElement.doScroll,
390 - i = (r ? /^loaded|^c/ : /^loaded|^i|^c/).test(o.readyState);
391 - i || o.addEventListener("DOMContentLoaded", e = function () {
392 - for (o.removeEventListener("DOMContentLoaded", e), i = 1; e = n.shift();) e()
393 - }), i ? setTimeout(t, 0) : n.push(t)
394 - }
395 -
396 - function L(t) {
397 - "undefined" != typeof MutationObserver && new MutationObserver(t).observe(document, {
398 - childList: !0,
399 - subtree: !0
400 - })
401 - }
402 - try {
403 - if (window.FontAwesomeKitConfig) {
404 - var k = window.FontAwesomeKitConfig,
405 - x = {
406 - detectingConflicts: k.detectConflictsUntil && new Date <= new Date(k.detectConflictsUntil),
407 - detectionIgnoreAttr: "data-fa-detection-ignore",
408 - fetch: window.fetch,
409 - token: k.token,
410 - XMLHttpRequest: window.XMLHttpRequest,
411 - document: document
412 - },
413 - I = document.currentScript,
414 - U = I ? I.parentElement : document.head;
415 - (function () {
416 - var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
417 - e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {};
418 - return "js" === t.method ? F(t, e) : "css" === t.method ? _(t, e, (function (t) {
419 - C(t), L(t)
420 - })) : void 0
421 - })(k, x).then((function (t) {
422 - t.map((function (t) {
423 - U.insertBefore(t, I ? I.nextSibling : null)
424 - })), x.detectingConflicts && I && C((function () {
425 - I.setAttributeNode(document.createAttribute(x.detectionIgnoreAttr));
426 - var t = function (t, e) {
427 - var n = document.createElement("script");
428 - return e && e.detectionIgnoreAttr && n.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)), n.src = i(t, {
429 - baseFilename: "conflict-detection",
430 - fileSuffix: "js",
431 - subdir: "js",
432 - minify: t.minify.enabled
433 - }), n
434 - }(k, x);
435 - document.body.appendChild(t)
436 - }))
437 - })).catch((function (t) {
438 - console.error("".concat("Font Awesome Kit:", " ").concat(t))
439 - }))
440 - }
441 - } catch (t) {
442 - console.error("".concat("Font Awesome Kit:", " ").concat(t))
443 - }
444 -}));
...\ No newline at end of file ...\ No newline at end of file
1 -@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
2 -*{
3 - margin: 0;
4 - padding: 0;
5 - box-sizing: border-box;
6 - font-family: 'Poppins', sans-serif;
7 -}
8 -html,body{
9 - display: grid;
10 - height: 100%;
11 - place-items: center;
12 - background: #000000;
13 -}
14 -.search-box{
15 - position: relative;
16 - height: 60px;
17 - width: 60px;
18 - border-radius: 50%;
19 - transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
20 -}
21 -/* //박스 길이 조절 */
22 -.search-box.active{
23 - width: 700px;
24 -}
25 -.search-box input{
26 - width: 100%;
27 - height: 100%;
28 - border: none;
29 - border-radius: 50px;
30 - background: #fff;
31 - outline: none;
32 - padding: 0 60px 0 20px;
33 - font-size: 18px;
34 - opacity: 0;
35 - transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
36 -}
37 -/* 불투명도 */
38 -.search-box input.active{
39 - opacity: 1;
40 -}
41 -.search-box input::placeholder{
42 - color: #a6a6a6;
43 -}
44 -.search-box .search-icon{
45 - position: absolute;
46 - /* 버튼위치 */
47 - right: -380px;
48 - top: 50%;
49 - transform: translateY(-50%);
50 - height: 60px;
51 - width: 60px;
52 - background: #fff;
53 - border-radius: 50%;
54 - text-align: center;
55 - line-height: 60px;
56 - font-size: 22px;
57 - color: #CB25FF;
58 - cursor: pointer;
59 - z-index: 1;
60 - /* transition: all 0.5s cubic-bezier(0.6, -0.28, 0.74, 0.05); */
61 - /* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
62 - transition-timing-function: linear;
63 -}
64 -.search-box .search-icon.active{
65 - right: 5px;
66 - height: 50px;
67 - line-height: 50px;
68 - width: 50px;
69 - font-size: 20px;
70 - background: #CB25FF;
71 - color: #fff;
72 - transform: translateY(-50%) rotate(360deg);
73 -}
74 -.search-box .cancel-icon{
75 - position: absolute;
76 - right: -380px;
77 - top: 50%;
78 - transform: translateY(-50%);
79 - font-size: 25px;
80 - color: #fff;
81 - cursor: pointer;
82 - /* transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); */
83 - /* transition: cubic-bezier(0.39, 0.575, 0.565, 1); */
84 - transition-timing-function: linear;
85 -}
86 -.search-box .cancel-icon.active{
87 - right: -40px;
88 -}
89 -.search-box .search-data{
90 - text-align: center;
91 - padding-top: 7px;
92 - color: #fff;
93 - font-size: 18px;
94 - word-wrap: break-word;
95 -}
96 -.search-box .search-data.active{
97 - display: none;
98 -}
1 -<!DOCTYPE html>
2 -<html lang="en" dir="ltr">
3 -
4 -<head>
5 - <meta charset="utf-8">
6 - <title>검색창 애니메이션</title>
7 -</head>
8 -
9 -<body>
10 - <div class="searchBtn">
11 - <link rel="stylesheet" href="btnstyle.css">
12 - <script src="btnsource.js"></script>
13 - <div class="search-box">
14 - <input type="text" placeholder="검색어를 입력하세요 (ex. AAAI 2020)..">
15 - <!-- encoded function for activating search-bar in lisensed resouce -->
16 - <div class="search-icon">
17 - <i class="fas fa-search"></i>
18 - </div>
19 - <div class="cancel-icon">
20 - <i class="fas fa-times"></i>
21 - </div>
22 - <div class="search-data"></div>
23 - </div>
24 - <script src="btnClickEvent.js"></script>
25 - </div>
26 -</body>
27 -
28 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -<div class="searchBtn">
2 - <link rel="stylesheet" href="btnstyle.css">
3 - <script src="btnsource.js"></script>
4 - <div class="search-box">
5 - <input type="text" placeholder="검색어를 입력하세요 (ex. AAAI 2020)..">
6 - <!-- encoded function for activating search-bar in lisensed resouce -->
7 - <div class="search-icon">
8 - <i class="fas fa-search"></i>
9 - </div>
10 - <div class="cancel-icon">
11 - <i class="fas fa-times"></i>
12 - </div>
13 - <div class="search-data"></div>
14 - </div>
15 - <script src="btnClickEvent.js"></script>
16 -</div>
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
1 -var http = require('http');
2 -var fs = require('fs');
3 -var app = http.createServer(function (request, response) {
4 - var url = request.url;
5 - if (url == '/') {
6 - url = '/send.html';
7 - }
8 - if (url == '/loginmainpage') {
9 - url = '/loginmainpage.html';
10 - }
11 - response.writeHead(200);
12 - response.end(fs.readFileSync(__dirname + url));
13 -});
14 -
15 -
16 -app.listen(8080);
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <meta charset="utf-8"/>
5 - <title>login page title</title>
6 - <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
7 -
8 - </head>
9 -<body>
10 - <a id="kakao-login-btn"></a>
11 - <a href="http://developers.kakao.com/logout"></a>
12 - <script>
13 - Kakao.init('0678e32dab56db1c52ac63ab4ccb7663');
14 -
15 - console.log(Kakao.isInitialized());
16 -
17 - Kakao.Auth.createLoginButton({
18 - container: '#kakao-login-btn',
19 - success: function(authObj){
20 - console.log(JSON.stringify(authObj));
21 - alert(JSON.stringify(authObj));//authObj -> 토큰임.
22 - redirectUrl
23 - },
24 - fail: function(err){
25 - alert(JSON.stringify(err));
26 - }
27 - })
28 - console.log('hi');
29 - Kakao.Link.createDefaultButton({
30 - container: ".kakao-link",
31 - objectType: "feed",
32 - content:{
33 - title: "안녕하세요",
34 - description: "반갑습니다.",
35 - link:{
36 - webUrl: "https://www.naver.com/",
37 - mobileWebUrl: "https://www.naver.com/"
38 - },
39 - },
40 - })
41 - function kakaoLogout(){
42 - Kakao.Auth.logout(function(response){
43 - alert(response+'logout');
44 - Kakao.API.request({
45 - url: '/v1/user/unlink',
46 - success: function(response) {
47 - console.log(response);
48 - },
49 - fail: function(error) {
50 - console.log(error);
51 - console.log("error");
52 - },
53 - })
54 - })
55 - }
56 -</script>
57 -<script>
58 - console.log('hi');
59 - Kakao.Link.createDefaultButton({
60 - container: ".kakao-link",
61 - objectType: "feed",
62 - content:{
63 - title: "안녕하세요",
64 - description: "반갑습니다.",
65 - link:{
66 - webUrl: "https://www.naver.com/",
67 - mobileWebUrl: "https://www.naver.com/"
68 - },
69 - },
70 - })
71 -</script>
72 -
73 -<a onclick="kakaoLogout();">카카오 로그아웃</a>
74 -</body>
75 -</html>
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <title>login main page title</title>
5 - </head>
6 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <meta charset="utf-8"/>
5 - <title>send page title</title>
6 - <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
7 - <script src="send.js"></script>
8 - </head>
9 - <body>
10 - <a onclick="sendLink()">보내기</a>
11 - </body>
12 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -function sendLink(){
2 - Kakao.init('0678e32dab56db1c52ac63ab4ccb7663')
3 - Kakao.Link.sendDefault({
4 - objectType: 'feed',
5 - content:{
6 - title: "관심있는 공연 정보",
7 - description: '주소-> http://naver.com',
8 - imageUrl:'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
9 - link:{
10 - mobileWebUrl: 'http://naver.com',
11 - webUrl: 'http://naver.com',
12 - },
13 - },
14 - buttons: [
15 - {
16 - title: '웹으로 보기',
17 - link: {
18 - mobileWebUrl: 'http://naver.com',
19 - webUrl: 'http://naver.com',
20 - },
21 - },
22 - {
23 - title: '웹으로 보기',
24 - link: {
25 - mobileWebUrl: 'http://naver.com',
26 - webUrl: 'http://naver.com',
27 - },
28 - },
29 - ],
30 - })
31 -};
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE html>
2 -<html lang="en">
3 -
4 -<head>
5 - <meta charset="UTF-8">
6 - <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 - <title>Document</title>
8 -</head>
9 -
10 -<body>
11 - <div>
12 - <!-- 로그인 세션 -->
13 - login successed.
14 - </div>
15 -</body>
16 -
17 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE html>
2 -<html lang="en">
3 -
4 -<head>
5 - <meta charset="UTF-8">
6 - <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 - <title>My Gallery</title>
8 -</head>
9 -
10 -<body>
11 - <strong> Culture Gallery</strong>
12 -
13 - <h1>
14 - 수정 기록 | 수정 날짜 : 2020-12-02
15 - </h1>
16 - <div>
17 - <h2>
18 - 웹사이트 node에 연결 -> 디자인 구상 필요
19 - api database 구축 -> 카테고리별로 가공해서 받아오기
20 - </h2>
21 - </div>
22 - <div>
23 - 로그인 버튼 연결
24 - <input type="button" value="Login" onclick="location.href='login'">
25 - </div>
26 - <script type="text/javascript">
27 - function movepage() {
28 - location.href = "/login";
29 - }
30 - </script>
31 - <div>
32 - ================= 수정필요 : 간단한 계획서 =================
33 - <br>
34 - 주제 : 공연전시정보 공공API를 이용한 전시회 웹 플랫폼 ( Culture Gallery (가제))
35 - <br>
36 - 구현하고자 하는 기능은 아래와 같습니다.
37 - <br>
38 - 전국 대, 소규모 전시회의 관람 정보를 알려줌.
39 - 전시회 위치를 카카오맵 api로 받아 올 계획
40 - <br>
41 - > 관심 장르 / 관심 장소에서 진행되는 전시회 구독 기능
42 - <br>
43 - >>> 주기적인 e-mail or 카카오톡 등으로 client에게 알려줌
44 - <br>
45 - >지방에서 진행되는 소규모 전시회나 공연에도 관심을 가질 수 있도록,
46 - <br>
47 - 주최측에서 게시 신청을 할 수 있는 페이지를 마련.
48 - <br>
49 - >>> 가성비 전시회 등을 찾아가서 구경하는 문화 형성 등..
50 - <br>
51 - > 관심 가질만한 공연 정보를 추천해주는 기능
52 - <br>
53 - >>> 과거의 관람 데이터 기반 , 위치 기반
54 - <br>
55 - ===================================================
56 - </div>
57 -</body>
58 -
59 -</html>
...\ No newline at end of file ...\ No newline at end of file
1 -function sendLink(){
2 - Kakao.init('0678e32dab56db1c52ac63ab4ccb7663')
3 - Kakao.Link.sendDefault({
4 - objectType: 'feed',
5 - content:{
6 - title: "관심있는 공연 정보",
7 - description: '주소-> http://naver.com',
8 - imageUrl:'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
9 - link:{
10 - mobileWebUrl: 'http://naver.com',
11 - webUrl: 'http://naver.com',
12 - },
13 - },
14 - buttons: [
15 - {
16 - title: '웹으로 보기',
17 - link: {
18 - mobileWebUrl: 'http://naver.com',
19 - webUrl: 'http://naver.com',
20 - },
21 - },
22 - {
23 - title: '웹으로 보기',
24 - link: {
25 - mobileWebUrl: 'http://naver.com',
26 - webUrl: 'http://naver.com',
27 - },
28 - },
29 - ],
30 - })
31 -};
...\ No newline at end of file ...\ No newline at end of file
1 -@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
2 -*{
3 - margin: 0;
4 - padding: 0;
5 - box-sizing: border-box;
6 - font-family: 'Poppins', sans-serif;
7 -}
8 -html,body{
9 - display: grid;
10 - height: 100%;
11 - place-items: center;
12 - background: #664AFF;
13 -}
14 -::selection{
15 - color: #fff;
16 - background: #664AFF;
17 -}
18 -.search-box{
19 - position: relative;
20 - height: 60px;
21 - width: 60px;
22 - border-radius: 50%;
23 - box-shadow: 5px 5px 30px rgba(0,0,0,.2);
24 - transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
25 -}
26 -.search-box.active{
27 - width: 350px;
28 -}
29 -.search-box input{
30 - width: 100%;
31 - height: 100%;
32 - border: none;
33 - border-radius: 50px;
34 - background: #fff;
35 - outline: none;
36 - padding: 0 60px 0 20px;
37 - font-size: 18px;
38 - opacity: 0;
39 - transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
40 -}
41 -.search-box input.active{
42 - opacity: 1;
43 -}
44 -.search-box input::placeholder{
45 - color: #a6a6a6;
46 -}
47 -.search-box .search-icon{
48 - position: absolute;
49 - right: 0px;
50 - top: 50%;
51 - transform: translateY(-50%);
52 - height: 60px;
53 - width: 60px;
54 - background: #fff;
55 - border-radius: 50%;
56 - text-align: center;
57 - line-height: 60px;
58 - font-size: 22px;
59 - color: #664AFF;
60 - cursor: pointer;
61 - z-index: 1;
62 - transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
63 -}
64 -.search-box .search-icon.active{
65 - right: 5px;
66 - height: 50px;
67 - line-height: 50px;
68 - width: 50px;
69 - font-size: 20px;
70 - background: #664AFF;
71 - color: #fff;
72 - transform: translateY(-50%) rotate(360deg);
73 -}
74 -.search-box .cancel-icon{
75 - position: absolute;
76 - right: 20px;
77 - top: 50%;
78 - transform: translateY(-50%);
79 - font-size: 25px;
80 - color: #fff;
81 - cursor: pointer;
82 - transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
83 -}
84 -.search-box .cancel-icon.active{
85 - right: -40px;
86 - transform: translateY(-50%) rotate(360deg);
87 -}
88 -.search-box .search-data{
89 - text-align: center;
90 - padding-top: 7px;
91 - color: #fff;
92 - font-size: 18px;
93 - word-wrap: break-word;
94 -}
95 -.search-box .search-data.active{
96 - display: none;
97 -}
...@@ -6,7 +6,7 @@ var ejs = require('ejs'); ...@@ -6,7 +6,7 @@ var ejs = require('ejs');
6 6
7 7
8 var mapPage = fs.readFileSync('routes/mapPage.ejs', 'utf8'); 8 var mapPage = fs.readFileSync('routes/mapPage.ejs', 'utf8');
9 -var findPage = fs.readFileSync('routes/findPage.ejs','utf-8'); 9 +var findPage = fs.readFileSync('routes/findPage.ejs', 'utf-8');
10 var dataNum = 0; 10 var dataNum = 0;
11 11
12 router.get('/mappage', (req, res) => { 12 router.get('/mappage', (req, res) => {
...@@ -24,7 +24,7 @@ router.get('/mappage', (req, res) => { ...@@ -24,7 +24,7 @@ router.get('/mappage', (req, res) => {
24 } else { 24 } else {
25 var show_list = []; 25 var show_list = [];
26 for (var i = 0; i < dataNum; i++) { 26 for (var i = 0; i < dataNum; i++) {
27 - show_list.push([results[i].id, results[i].oper_name, results[i].latitude, results[i].longitude,results[i].start_day,results[i].where]); 27 + show_list.push([results[i].id, results[i].oper_name, results[i].latitude, results[i].longitude, results[i].start_day, results[i].where]);
28 var page = ejs.render(mapPage, { 28 var page = ejs.render(mapPage, {
29 title: "show data", 29 title: "show data",
30 data: show_list, 30 data: show_list,
...@@ -53,7 +53,7 @@ router.get('/findpage', (req, res) => { ...@@ -53,7 +53,7 @@ router.get('/findpage', (req, res) => {
53 } else { 53 } else {
54 var show_list = []; 54 var show_list = [];
55 for (var i = 0; i < dataNum; i++) { 55 for (var i = 0; i < dataNum; i++) {
56 - show_list.push([results[i].id, results[i].oper_name, results[i].latitude, results[i].longitude,results[i].start_day,results[i].where]); 56 + show_list.push([results[i].id, results[i].oper_name, results[i].latitude, results[i].longitude, results[i].start_day, results[i].where]);
57 var page = ejs.render(findPage, { 57 var page = ejs.render(findPage, {
58 title: "show data", 58 title: "show data",
59 data: show_list, 59 data: show_list,
...@@ -79,10 +79,6 @@ router.get('/login', function (req, res, next) { ...@@ -79,10 +79,6 @@ router.get('/login', function (req, res, next) {
79 res.render('login.html', { title: 'Login' }); 79 res.render('login.html', { title: 'Login' });
80 console.log('로그인 페이지 접속 성공'); 80 console.log('로그인 페이지 접속 성공');
81 }); 81 });
82 -// router.get('/search', function (req, res, next) {
83 -// res.render('search.html', { title: '검색 결과' });
84 -// console.log('검색 결과 페이지 접속 성공');
85 -// })
86 router.get('/send', function (req, res, next) { 82 router.get('/send', function (req, res, next) {
87 res.render('send.html', { title: 'Send message' }); 83 res.render('send.html', { title: 'Send message' });
88 console.log('카카오톡 공유 메시지 접속 성공'); 84 console.log('카카오톡 공유 메시지 접속 성공');
......