이유제 / CultureGallery

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

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

Expand all
Inline Side-by-side
Showing 39 changed files with 1146 additions and 36 deletions
1 +# Culture Gallery
2 +
3 +## ✔ 목차
4 +- [✔ 목차](#-목차)
5 +- [소개](#-소개)
6 + - [개발 환경](#개발-환경)
7 + - [사용한 API](#사용한-api)
8 +- [설치 방법](#-설치-방법)
9 + - [요구 사항](#요구-사항)
10 + - [설치](#설치)
11 +- [사용 방법](#-사용-방법)
12 +- [기여하기](#️-기여하기)
13 +- [라이센스](#-라이센스)
14 +- [연락처](#-연락처)
15 +
16 +## 소개
17 +![메인-화면](images/mainpage.jpg)
18 +
19 +한국에서 진행하는 공연 중 본인에게 맞는 공연을 찾을 수 있는 서버입니다.<br>
20 +본인 현재 위치 기반으로 주변에서 진행 하고있는 /진행 될 공연의 정보를 카카오 맵으로 제공합니다.<br>
21 +기간/위치/비용 등의 필터를 통해 본인이 원하는 공연을 검색할 수 있습니다.<br>
22 +카카오 계정 로그인을 통해 보러 가고 싶은 공연을 카카오톡 친구와 공유할 수 있는 기능을 제공합니다.
23 +
24 +### 개발 환경
25 +* [node.js - 14.15.1 LTS](https://nodejs.org/ko/)
26 +* [Express - 4.17.1](https://expressjs.com/ko/)
27 +* [HTML5]
28 +* [CSS3]
29 +
30 +### 사용한 API
31 +* [Kakaomap Maps API](https://apis.map.kakao.com/)
32 + * [Document](https://apis.map.kakao.com/web/documentation/)
33 +* [Kakao Login API](https://developers.kakao.com/docs/latest/ko/kakaologin/common/)
34 + * [Document](https://developers.kakao.com/docs/latest/ko/kakaologin/common)
35 +
36 +
37 +## 설치 방법
38 +서버 설치 방법을 소개합니다. 이 방법은 Local에서만 동작합니다.
39 +### 요구 사항
40 +* node.js
41 +
42 +이 [링크](https://nodejs.org/ko/)에서 설치할 수 있습니다.
43 +* npm
44 +
45 +node.js와 함께 설치됩니다.
46 +혹은 가장 최신 버전으로 업데이트합니다.
47 +```sh
48 +npm install -g npm
49 +```
50 +### 설치
51 +1. [리포지토리](http://khuhub.khu.ac.kr/2019102210/CultureGallery) 클론
52 + 원하는 디렉토리에서 아래의 명령어를 입력해 이 리포지토리를 가져옵니다.
53 + ```
54 + git clone http://khuhub.khu.ac.kr/2019102210/CultureGallery.git
55 + ```
56 +2. npm 패키지 설치
57 + 서버 실행에 필요한 패키지를 설치합니다.
58 + ```
59 + npm install
60 + ```
61 +3. 포트 변경
62 + 본 웹서비스는 local 환경에서 8000 번 포트를 할당받아 실행됩니다.
63 + 8000번 포트에서 실행되고 있는 다른 프로그램 혹은 웹서비스와 동시에 실행될 수 없습니다.
64 +
65 +4. 서버 구동
66 + 터미널에서 본 프로젝트의 디렉토리로 이동한 후 npm start를 실행합니다.
67 + ```
68 + npm start
69 + ```
70 +
71 +## 사용 방법 (구체화 중)
72 +1. IE 8 이상의 웹 브라우저로 localhost:8000에 접속합니다.
73 +![메인-화면](images/mainpage.jpg)<br>
74 +
75 +2. 나의 근처 공연/ 검색하기 / 로그인 버튼 중 하나를 선택합니다.<br>
76 +-기능 1. 나의 근처 공연<br>
77 + 본인의 위치를 받아올 수 있도록 위치 수집 권한을 허락해주세요.<br>
78 + 지도 중심에 본인의 위치가 나오고 주변의 공연 장소에 마크가 달립니다.(보완 중)<br>
79 +
80 +-기능 2. 검색하기<br>
81 + 원하는 필터를 체크한 후, 검색하면 해당 조건을 충족하는 공연들이 나옵니다.(개발 중)<br>
82 +
83 +-기능 3. 로그인<br>
84 + 카카오톡 계정 로그인을 통해 더 많은 기능을 사용하세요!<br>
85 + 로그인을 하면 보러 가고 싶은 공연의 정보를 카카오톡 친구와 공유할 수 있습니다.<br>
86 +
87 +## 라이센스
88 +MIT 라이센스를 따릅니다. 자세한 내용은 `License` 파일을 확인해주세요.
89 +
90 +## 연락처
91 +이유제: dbwp031@khu.ac.kr<br>
92 +송효섭: crad_on25@khu.ac.kr<br>
...\ No newline at end of file ...\ No newline at end of file
1 const express = require('express'); 1 const express = require('express');
2 -const fs = require('fs');
3 const path = require('path'); 2 const path = require('path');
4 -const logger = require('morgan');
5 const app = express(); 3 const app = express();
6 4
7 - 5 +//화면 별 router 연결, 라우터 호출해서 페이지를 불러오는데 사용함.
8 -app.use(logger('combined')); 6 +var mainRouter = require('./routes/main') //호출시 main.js 실행 (main.js : title 할당하고 main.html 열어줌)
9 - 7 +var loginRouter = require('./routes/login')
10 //디폴트 포트 값 : 8000 8 //디폴트 포트 값 : 8000
11 app.set('port', process.env.PORT || 8000); 9 app.set('port', process.env.PORT || 8000);
12 10
13 -//get하는 방법 : sendfile(파일 디렉토리 ) : 개선 필요 -> html 페이지 이동 및 data 전달 방법 찾기 11 +//ejs (html포맷) 파일을 웹사이트에 view로 띄워주기 위한 view engine 설정.
14 -app.get('/', (req, res) => { 12 +app.set('views', path.join(__dirname, 'views'));
15 - res.sendFile(path.join(__dirname, './public/html/main.html')) 13 +app.set('view engine', 'ejs');
16 -}); 14 +app.engine('html', require('ejs').renderFile);
17 -app.get('/plan', (req, res) => { 15 +
18 - res.send('Server is working'); 16 +//각각의 요청에서 router 호출해서 page를 전환함.
19 - res.sendFile(path.join(__dirname, './public/html/main.html')); 17 +app.use('/', mainRouter);
20 - //console.log(app.get('port'), '번 포트 대기 중'); 18 +app.use('/login', loginRouter);
21 -}); 19 +
22 -app.get('/login', (req, res) => { 20 +
23 - // console.log('로그인 페이지 오픈 시도됨.'); 21 +//css, image 등 정적 파일을 public에서 불러옴 -> html과 연결함
24 - fs.readFile('./public/html/login.html', function (err, data) { 22 +app.use(express.static(path.join(__dirname, 'public')));
25 - res.writeHead(200, { 'Content-Type': 'text/html' }); 23 +
26 - res.end(data); 24 +
27 - }) 25 +// app.get('/', (req, res) => {
28 -}) 26 +// //res.send('Server is working');
27 +// // res.sendFile(path.join(__dirname, '/html/main.html'));
28 +// res.sendFile(__dirname + "/html/main.html");
29 +// console.log(app.get('port'), '번 포트 대기 중');
30 +// });
31 +
32 +// app.get('/login', (req, res) => {
33 +// console.log('로그인 페이지 오픈 시도됨.');
34 +// res.sendFile(__dirname + "/html/login.html");
35 +// // fs.readFile('./html/login.html', function (err, data) {
36 +// // res.writeHead(200, { 'Content-Type': 'text/html' });
37 +// // res.end(data);
38 +// // })
39 +// })
29 40
30 app.get('/logout', function (req, res) { 41 app.get('/logout', function (req, res) {
31 res.send("Logout success"); 42 res.send("Logout success");
......
1 +<html>
2 +
3 +<head>
4 + <title>로그인 페이지</title>
5 + <link rel="stylesheet" href="login_style.css" type="text/css">
6 + <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
7 +
8 +</head>
9 +
10 +<body>
11 + <header>
12 + <div class="nav-bar">
13 + <img src="camera.png" alt="" class="logo">
14 +
15 + <ul class="menu">
16 + <li><a href="">Home</a></li>
17 + <li><a href="">Services</a></li>
18 + <li><a href="">Portfolio</a></li>
19 + <li><a href="">Testimonimal</a></li>
20 + <li><a href="">Career</a></li>
21 + <li><a href="">Contact</a></li>
22 + </ul>
23 +
24 + </div>
25 + <div class="welcome">
26 +
27 + <h1>로그인</h1>
28 + <a id="kakao-login-btn"></a>
29 +
30 + </div>
31 +
32 + </header>
33 +</body>
34 +<script>
35 + Kakao.init('0678e32dab56db1c52ac63ab4ccb7663');
36 +
37 + console.log(Kakao.isInitialized());
38 +
39 + Kakao.Auth.createLoginButton({
40 + container: '#kakao-login-btn',
41 + success: function (authObj) {
42 + console.log(JSON.stringify(authObj));
43 + alert(JSON.stringify(authObj));//authObj -> 토큰임.
44 + },
45 + fail: function (err) {
46 + alert(JSON.stringify(err));
47 + }
48 + })
49 +</script>
50 +
51 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +*
2 +{
3 + margin: 0;
4 + padding: 0;
5 +}
6 +
7 +
8 +.nav-bar
9 +{
10 + background: #000;
11 + height: 80px;
12 +}
13 +
14 +.logo{
15 + background-color: #fff;
16 + margin: 10px 50px;
17 + height: 60px;
18 +}
19 +
20 +.menu{
21 + float: right;
22 + list-style: none;
23 + margin:20px;
24 +}
25 +
26 +.menu li{
27 + display: inline-block;
28 + margin: 10px 5px;
29 +}
30 +
31 +.menu li a{
32 + text-decoration: none;
33 + color: #fff;
34 + padding: 5px 10px;
35 + font-family: sans-serif;
36 + letter-spacing: 2px;
37 + border: 1px solid #fff;
38 +}
39 +
40 +.menu li a:hover{
41 + background: #fff;
42 + transition: .4s;
43 + color: #000;
44 +}
45 +
46 +.welcome{
47 + position:relative;
48 + text-align:center;
49 + font-family: sans-serif;
50 + color:#000;
51 + top: 300px;
52 +}
53 +
54 +.welcome h1{
55 + font-size: 42px;
56 + margin: 25px;
57 +}
58 +
1 +<html>
2 +
3 +<head>
4 + <title>Webpage Design In HTML and CSS</title>
5 + <link rel="stylesheet" href="main_style.css" type="text/css">
6 +</head>
7 +
8 +<body>
9 + <header>
10 + <div class="nav-bar">
11 + <img src="camera.png" alt="" class="logo">
12 +
13 + <ul class="menu">
14 + <li><a href="">Home</a></li>
15 + <li><a href="">Services</a></li>
16 + <li><a href="">Portfolio</a></li>
17 + <li><a href="">Testimonimal</a></li>
18 + <li><a href="">Career</a></li>
19 + <li><a href="">Contact</a></li>
20 + </ul>
21 +
22 + </div>
23 + <div class="welcome">
24 +
25 + <h1>어떤 공연을 찾으시나요?</h1>
26 + <a href="#" class="btn btn1">나의 근처 공연</a>
27 + <a href="#" class="btn btn2">검색하기</a>
28 + <a href="login.html" class="btn btn3">로그인</a>
29 + </div>
30 +
31 + </header>
32 +</body>
33 +
34 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +*
2 +{
3 + margin: 0;
4 + padding: 0;
5 +}
6 +
7 +header
8 +{
9 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back1.jpg);
10 + height: 100vh;
11 + background-size: cover;
12 + background-position: center;
13 + background-repeat: no-repeat;
14 + transition: 5s;
15 +
16 + animation-name: animate;
17 + animation-direction: alternate-reverse;
18 + animation-duration: 30s;
19 + animation-fill-mode:forwards;
20 + animation-iteration-count: infinite;
21 + animation-play-state: running;
22 + animation-timing-function:ease-in-out;
23 +}
24 +@keyframes animate{
25 + 0%{
26 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back1.jpg);
27 + }
28 + 33%{
29 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back2.jpg);
30 +
31 + }
32 + 66%{
33 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(back3.jpg);
34 +
35 + }
36 +}
37 +.nav-bar
38 +{
39 + background: rgb(0,0,0,0.5);
40 + height: 80px;
41 +}
42 +
43 +.logo{
44 + background-color: #fff;
45 + margin: 10px 50px;
46 + height: 60px;
47 +}
48 +
49 +.menu{
50 + float: right;
51 + list-style: none;
52 + margin:20px;
53 +}
54 +
55 +.menu li{
56 + display: inline-block;
57 + margin: 10px 5px;
58 +}
59 +
60 +.menu li a{
61 + text-decoration: none;
62 + color: #fff;
63 + padding: 5px 10px;
64 + font-family: sans-serif;
65 + letter-spacing: 2px;
66 + border: 1px solid #fff;
67 +}
68 +
69 +.menu li a:hover{
70 + background: #fff;
71 + transition: .4s;
72 + color: #000;
73 +}
74 +
75 +.welcome{
76 + position:relative;
77 + text-align:center;
78 + font-family: sans-serif;
79 + color:#fff;
80 + top: 300px;
81 +}
82 +
83 +.welcome h1{
84 + font-size: 42px;
85 + margin: 25px;
86 +}
87 +
88 +.btn{
89 + font-size:18px;
90 + letter-spacing: 2px;
91 + margin:5px;
92 + padding:7px 10px;
93 + text-decoration: none;
94 + border: 1px solid #fff;
95 +}
96 +
97 +.btn{
98 + color:#fff;
99 +
100 +}
101 +.btn:hover{
102 + background: #fff;
103 + color: #000;
104 + transition: .4s;
105 +}
...\ No newline at end of file ...\ No newline at end of file
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 +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>
3 +<head>
4 + <meta charset="utf-8">
5 + <title>geolocation으로 마커 표시하기</title>
6 +
7 +</head>
8 +<body>
9 +<p style="margin-top:-12px">
10 + <b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
11 +</p>
12 +<div id="map" style="width:500px;height:350px;"></div>
13 +
14 +<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
15 +<script>
16 +var mapContainer = document.getElementById('map'), // 지도를 표시할 div
17 + mapOption = {
18 + center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
19 + level: 10 // 지도의 확대 레벨
20 + };
21 +
22 +var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
23 +
24 +// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
25 +if (navigator.geolocation) {
26 +
27 + // GeoLocation을 이용해서 접속 위치를 얻어옵니다
28 + navigator.geolocation.getCurrentPosition(function(position) {
29 +
30 + var lat = position.coords.latitude, // 위도
31 + lon = position.coords.longitude; // 경도
32 + console.log(lat);
33 + console.log(lon);
34 + var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
35 + message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
36 +
37 + // 마커와 인포윈도우를 표시합니다
38 + displayMarker(locPosition, message);
39 +
40 + });
41 +
42 +} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
43 +
44 + var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
45 + message = 'geolocation을 사용할수 없어요..'
46 +
47 + displayMarker(locPosition, message);
48 +}
49 +
50 +
51 +var positions = [
52 + {
53 + title: '카카오',
54 + latlng: new kakao.maps.LatLng(37.2427865, 127.106767)
55 + }
56 +];
57 +
58 +
59 +displayShows(positions);
60 +function displayShows(positions){
61 + var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
62 +
63 +for (var i = 0; i < positions.length; i ++) {
64 +
65 + // 마커 이미지의 이미지 크기 입니다
66 + var imageSize = new kakao.maps.Size(24, 35);
67 +
68 + // 마커 이미지를 생성합니다
69 + var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
70 +
71 + // 마커를 생성합니다
72 + var marker = new kakao.maps.Marker({
73 + map: map, // 마커를 표시할 지도
74 + position: positions[i].latlng, // 마커를 표시할 위치
75 + title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
76 + image : markerImage // 마커 이미지
77 + });
78 + }
79 +}
80 +// 지도에 마커와 인포윈도우를 표시하는 함수입니다
81 +function displayMarker(locPosition, message) {
82 +
83 + // 마커를 생성합니다
84 + var marker = new kakao.maps.Marker({
85 + map: map,
86 + position: locPosition
87 + });
88 +
89 + var iwContent = message, // 인포윈도우에 표시할 내용
90 + iwRemoveable = true;
91 +
92 + // 인포윈도우를 생성합니다
93 + var infowindow = new kakao.maps.InfoWindow({
94 + content : iwContent,
95 + removable : iwRemoveable
96 + });
97 +
98 + // 인포윈도우를 마커위에 표시합니다
99 + infowindow.open(map, marker);
100 +
101 + // 지도 중심좌표를 접속위치로 변경합니다
102 + map.setCenter(locPosition);
103 +}
104 +</script>
105 +</body>
106 +</html>
...\ No newline at end of file ...\ No newline at end of file
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 = '/mapPage.html';
7 + }
8 + response.writeHead(200);
9 + response.end(fs.readFileSync(__dirname+url));
10 +});
11 +
12 +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> map Page title </title>
6 + </head>
7 +<body>
8 + <div id="map" style="width:500px;height:350px"></div>
9 + <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=a3386042ab2e0550ea06d265855b452c">//kakao map api 주소 받아옴</script>
10 +
11 + <script src="./mypos.js"></script>
12 + <script src="./show_pos.js"></script>
13 +</body>
14 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +var mapContainer = document.getElementById('map'), // 지도를 표시할 div
2 +
3 +// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
4 +mapOption = {
5 + center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
6 + level: 5 // 지도의 확대 레벨
7 + };
8 +
9 +var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
10 +
11 +// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
12 +if (navigator.geolocation) {
13 +
14 + // GeoLocation을 이용해서 접속 위치를 얻어옵니다
15 + navigator.geolocation.getCurrentPosition(function(position) {
16 +
17 + var lat = position.coords.latitude, // 위도
18 + lon = position.coords.longitude; // 경도
19 +
20 + var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
21 + message = '<div style="padding:5px;">나의 위치!</div>'; // 인포윈도우에 표시될 내용입니다
22 +
23 + // 마커와 인포윈도우를 표시합니다
24 + displayMarker(locPosition, message);
25 +
26 + });
27 +
28 +} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
29 +
30 + var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
31 + message = 'geolocation을 사용할수 없어요..'
32 +
33 + displayMarker(locPosition, message);
34 +}
35 +
36 +// 지도에 마커와 인포윈도우를 표시하는 함수입니다
37 +function displayMarker(locPosition, message) {
38 +
39 + // 마커를 생성합니다
40 + var marker = new kakao.maps.Marker({
41 + map: map,
42 + position: locPosition
43 + });
44 +
45 + var iwContent = message, // 인포윈도우에 표시할 내용
46 + iwRemoveable = true;
47 +
48 + // 인포윈도우를 생성합니다
49 + var infowindow = new kakao.maps.InfoWindow({
50 + content : iwContent,
51 + removable : iwRemoveable
52 + });
53 +
54 + // 인포윈도우를 마커위에 표시합니다
55 + infowindow.open(map, marker);
56 +
57 + // 지도 중심좌표를 접속위치로 변경합니다
58 + map.setCenter(locPosition);
59 +}
...\ No newline at end of file ...\ No newline at end of file
1 +var positions = [
2 + {
3 + title: '카카오',
4 + latlng: new kakao.maps.LatLng(37.2427865, 127.106767)
5 + }
6 +];
7 +
8 +displayShows(positions);
9 +
10 +function displayShows(positions){
11 + var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
12 +
13 +for (var i = 0; i < positions.length; i ++) {
14 +
15 + // 마커 이미지의 이미지 크기 입니다
16 + var imageSize = new kakao.maps.Size(24, 35);
17 +
18 + // 마커 이미지를 생성합니다
19 + var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
20 +
21 + // 마커를 생성합니다
22 + var marker = new kakao.maps.Marker({
23 + map: map, // 마커를 표시할 지도
24 + position: positions[i].latlng, // 마커를 표시할 위치
25 + title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
26 + image : markerImage // 마커 이미지
27 + });
28 + }
29 +}
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
14 "author": "Hyoseob Song", 14 "author": "Hyoseob Song",
15 "license": "MIT", 15 "license": "MIT",
16 "dependencies": { 16 "dependencies": {
17 - "express": "^4.17.1", 17 + "ejs": "^3.1.5",
18 - "morgan": "^1.10.0" 18 + "express": "^4.17.1"
19 } 19 }
20 } 20 }
......
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 -<html lang="ko"> 2 +<html lang="en">
3 3
4 <head> 4 <head>
5 <meta charset="UTF-8"> 5 <meta charset="UTF-8">
......
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 -<html lang="ko"> 2 +<html lang="en">
3 3
4 <head> 4 <head>
5 <meta charset="UTF-8"> 5 <meta charset="UTF-8">
...@@ -11,20 +11,12 @@ ...@@ -11,20 +11,12 @@
11 <strong> Culture Gallery</strong> 11 <strong> Culture Gallery</strong>
12 12
13 <h1> 13 <h1>
14 - 수정 기록 | 수정 날짜 : 2020-12-03 14 + 수정 기록 | 수정 날짜 : 2020-12-02
15 </h1> 15 </h1>
16 <div> 16 <div>
17 <h2> 17 <h2>
18 - 12/03
19 - nodejs 서버로 javascript 파일 및 webpage 이동 방법 구현하기
20 - router, content, public 으로 프로젝트 전체 구조 재분할
21 - main page design 구현 -> info, login 등으로 link 필요
22 - 카카오 API 응용 -> 위치 정보 및 공연 컨텐츠 받아서 지도에 마킹, 카카오톡으로 보내기
23 - 12/02
24 웹사이트 node에 연결 -> 디자인 구상 필요 18 웹사이트 node에 연결 -> 디자인 구상 필요
25 api database 구축 -> 카테고리별로 가공해서 받아오기 19 api database 구축 -> 카테고리별로 가공해서 받아오기
26 -
27 -
28 </h2> 20 </h2>
29 </div> 21 </div>
30 <div> 22 <div>
......
1 +*
2 +{
3 + margin: 0;
4 + padding: 0;
5 +}
6 +
7 +
8 +.nav-bar
9 +{
10 + background: #000;
11 + height: 80px;
12 +}
13 +
14 +.logo{
15 + background-color: #fff;
16 + margin: 10px 50px;
17 + height: 60px;
18 +}
19 +
20 +.menu{
21 + float: right;
22 + list-style: none;
23 + margin:20px;
24 +}
25 +
26 +.menu li{
27 + display: inline-block;
28 + margin: 10px 5px;
29 +}
30 +
31 +.menu li a{
32 + text-decoration: none;
33 + color: #fff;
34 + padding: 5px 10px;
35 + font-family: sans-serif;
36 + letter-spacing: 2px;
37 + border: 1px solid #fff;
38 +}
39 +
40 +.menu li a:hover{
41 + background: #fff;
42 + transition: .4s;
43 + color: #000;
44 +}
45 +
46 +.welcome{
47 + position:relative;
48 + text-align:center;
49 + font-family: sans-serif;
50 + color:#000;
51 + top: 300px;
52 +}
53 +
54 +.welcome h1{
55 + font-size: 42px;
56 + margin: 25px;
57 +}
58 +
1 +*
2 +{
3 + margin: 0;
4 + padding: 0;
5 +}
6 +
7 +header
8 +{
9 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg);
10 + height: 100vh;
11 + background-size: cover;
12 + background-position: center;
13 + background-repeat: no-repeat;
14 + transition: 5s;
15 +
16 + animation-name: animate;
17 + animation-direction: alternate-reverse;
18 + animation-duration: 30s;
19 + animation-fill-mode:forwards;
20 + animation-iteration-count: infinite;
21 + animation-play-state: running;
22 + animation-timing-function:ease-in-out;
23 +}
24 +@keyframes animate{
25 + 0%{
26 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back1.jpg);
27 + }
28 + 33%{
29 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back2.jpg);
30 +
31 + }
32 + 66%{
33 + background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,100,0.5)), url(/images/back3.jpg);
34 +
35 + }
36 +}
37 +.nav-bar
38 +{
39 + background: rgb(0,0,0,0.5);
40 + height: 80px;
41 +}
42 +
43 +.logo{
44 + background-color: #fff;
45 + margin: 10px 50px;
46 + height: 60px;
47 +}
48 +
49 +.menu{
50 + float: right;
51 + list-style: none;
52 + margin:20px;
53 +}
54 +
55 +.menu li{
56 + display: inline-block;
57 + margin: 10px 5px;
58 +}
59 +
60 +.menu li a{
61 + text-decoration: none;
62 + color: #fff;
63 + padding: 5px 10px;
64 + font-family: sans-serif;
65 + letter-spacing: 2px;
66 + border: 1px solid #fff;
67 +}
68 +
69 +.menu li a:hover{
70 + background: #fff;
71 + transition: .4s;
72 + color: #000;
73 +}
74 +
75 +.welcome{
76 + position:relative;
77 + text-align:center;
78 + font-family: sans-serif;
79 + color:#fff;
80 + top: 300px;
81 +}
82 +
83 +.welcome h1{
84 + font-size: 42px;
85 + margin: 25px;
86 +}
87 +
88 +.btn{
89 + font-size:18px;
90 + letter-spacing: 2px;
91 + margin:5px;
92 + padding:7px 10px;
93 + text-decoration: none;
94 + border: 1px solid #fff;
95 +}
96 +
97 +.btn{
98 + color:#fff;
99 +
100 +}
101 +.btn:hover{
102 + background: #fff;
103 + color: #000;
104 + transition: .4s;
105 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,8 +2,11 @@ var express = require('express'); ...@@ -2,8 +2,11 @@ var express = require('express');
2 var router = express.Router(); 2 var router = express.Router();
3 3
4 /* GET home page. */ 4 /* GET home page. */
5 -router.get('/', function(req, res, next) { 5 +router.get('/', function (req, res, next) {
6 - res.render('index', { title: 'Express' }); 6 + res.render('/public/html/main', { title: 'My Gallery' });
7 }); 7 });
8 8
9 +router.get('/login', function (req, res, next) {
10 + res.render('index', { title: 'Express' });
11 +})
9 module.exports = router; 12 module.exports = router;
......
1 +var express = require('express');
2 +var router = express.Router();
3 +var fs = require('fs');
4 +//로그인 페이지에서 실행됨 : title 할당하고 login.html 띄워줌.
5 +router.get('/login', function (req, res, next) {
6 + res.render('login.html', { title: 'Login2' });
7 + var url = request.url;
8 + if (url == '/') {
9 + url = 'send.html';
10 + }
11 + if (url == '/loginmainpage') {
12 + url = 'loginmainpage.html';
13 + }
14 + response.writeHead(200);
15 + response.end(fs.readFileSync(__dirname + url));
16 + console.log('로그인 페이지 접속 성공');
17 +});
18 +module.exports = router;
1 +var express = require('express');
2 +var router = express.Router();
3 +
4 +//루트 페이지 (메인페이지)에서 실행됨 : title 할당하고 main.html 띄워줌.
5 +router.get('/', function (req, res, next) {
6 + res.render('main.html', { title: 'Culture Gallery' });
7 + console.log('main 접속 성공');
8 +});
9 +
10 +/* GET home page. */
11 +router.get('/login', function (req, res, next) {
12 + res.render('login.html', { title: 'Login1' });
13 + console.log('로그인 페이지 접속 성공');
14 +});
15 +module.exports = router;
...\ 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 +<html>
2 +
3 +<head>
4 + <title>로그인 페이지</title>
5 + <link rel="stylesheet" href='/stylesheets/login_style.css' type="text/css">
6 + <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
7 +
8 +</head>
9 +
10 +<body>
11 + <header>
12 + <div class="nav-bar">
13 + <img src="../images/camera.png" alt="" class="logo">
14 +
15 + <ul class="menu">
16 + <li><a href="/">Home</a></li>
17 + <li><a href="">Services</a></li>
18 + <li><a href="">Portfolio</a></li>
19 + <li><a href="">Testimonimal</a></li>
20 + <li><a href="">Career</a></li>
21 + <li><a href="">Contact</a></li>
22 + </ul>
23 +
24 + </div>
25 + <div class="welcome">
26 +
27 + <h1>로그인</h1>
28 + <a id="kakao-login-btn"></a>
29 +
30 + </div>
31 +
32 + </header>
33 +</body>
34 +<script>
35 + Kakao.init('0678e32dab56db1c52ac63ab4ccb7663');
36 +
37 + console.log(Kakao.isInitialized());
38 +
39 + Kakao.Auth.createLoginButton({
40 + container: '#kakao-login-btn',
41 + success: function (authObj) {
42 + console.log(JSON.stringify(authObj));
43 + alert(JSON.stringify(authObj));//authObj -> 토큰임.
44 + },
45 + fail: function (err) {
46 + alert(JSON.stringify(err));
47 + }
48 + })
49 +</script>
50 +
51 +</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>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 +<html>
2 +
3 +<head>
4 + <title>Webpage Design In HTML and CSS</title>
5 + <link rel="stylesheet" href='/stylesheets/main_style.css' type="text/css">
6 +</head>
7 +
8 +<body>
9 + <header>
10 + <div class="nav-bar">
11 + <img src="../images/camera.png" alt="" class="logo">
12 +
13 + <ul class="menu">
14 + <li><a href="">Home</a></li>
15 + <li><a href="">Services</a></li>
16 + <li><a href="">Portfolio</a></li>
17 + <li><a href="">Testimonimal</a></li>
18 + <li><a href="">Career</a></li>
19 + <li><a href="">Contact</a></li>
20 + </ul>
21 +
22 + </div>
23 + <div class="welcome">
24 +
25 + <h1>어떤 공연을 찾으시나요?</h1>
26 + <a href="#" class="btn btn1">나의 근처 공연</a>
27 + <a href="#" class="btn btn2">검색하기</a>
28 + <a href="login" class="btn btn3">로그인</a>
29 + </div>
30 +
31 + </header>
32 +</body>
33 +
34 +</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