김재현 / open-source-project-2017-02

Go to a project
Toggle navigation Toggle navigation pinning
김재현
9d768be8 2 parents e6b28ced 9bd06312

프론트 부분 머지

Inline Side-by-side
Showing 8 changed files with 220 additions and 104 deletions
...@@ -6,7 +6,7 @@ ul.sidenav { ...@@ -6,7 +6,7 @@ ul.sidenav {
6 list-style-type: none; 6 list-style-type: none;
7 margin: 0; 7 margin: 0;
8 padding: 0; 8 padding: 0;
9 - width: 10%; 9 + width: 15%;
10 background-color: #f1f1f1; 10 background-color: #f1f1f1;
11 height: 100%; 11 height: 100%;
12 position: fixed; 12 position: fixed;
...@@ -17,7 +17,6 @@ ul.sidenav li a { ...@@ -17,7 +17,6 @@ ul.sidenav li a {
17 color: #000; 17 color: #000;
18 padding: 8px 16px; 18 padding: 8px 16px;
19 text-decoration: none; 19 text-decoration: none;
20 - transition: 0.3s;
21 } 20 }
22 ul.sidenav li a.active { 21 ul.sidenav li a.active {
23 background-color: #4caf50; 22 background-color: #4caf50;
...@@ -27,19 +26,33 @@ ul.sidenav li a:hover:not(.active) { ...@@ -27,19 +26,33 @@ ul.sidenav li a:hover:not(.active) {
27 background-color: #555; 26 background-color: #555;
28 color: #fff; 27 color: #fff;
29 } 28 }
29 +#title {
30 + text-align: center;
31 + width: 100%;
32 + font-size: 50px;
33 + padding-bottom: 30px;
34 +}
30 #content { 35 #content {
31 margin-left: 25%; 36 margin-left: 25%;
32 - padding: 1px 16px; 37 + padding: 10px 16px;
33 height: 100%; 38 height: 100%;
34 } 39 }
35 table { 40 table {
36 - display: block;
37 width: 70%; 41 width: 70%;
38 - height: 100%; 42 + border-collapse: collapse;
43 + text-align: center;
44 + vertical-align: middle;
39 } 45 }
40 td { 46 td {
47 + vertical-align: middle;
41 text-align: center; 48 text-align: center;
42 - display: block; 49 + border: 1px solid #ddd;
50 + width: 10%;
51 + height: 0%;
52 + padding-bottom: 20%;
53 + background-image: url("/images/stamp.jpg");
54 + background-repeat: no-repeat;
55 + background-position: center top;
43 } 56 }
44 .bold { 57 .bold {
45 color: #ffc0cb; 58 color: #ffc0cb;
...@@ -49,7 +62,30 @@ td { ...@@ -49,7 +62,30 @@ td {
49 color: #808080; 62 color: #808080;
50 font-size: 8pt; 63 font-size: 8pt;
51 } 64 }
52 -#map{ 65 +#show {
66 + width: 15%;
67 + display: inline-block;
68 + float: left;
69 + position: fixed;
70 + overflow: auto;
71 +}
72 +#maintitle {
73 + text-align: center;
74 + background: #ffc0cb;
75 + padding: 8px 16px;
76 + margin-left: 15%;
77 +}
78 +#mynav {
79 + display: block;
80 + margin-left: -250px;
81 + transition: all 0.4s ease-in-out 0s;
82 +}
83 +#mynav.open {
84 + transition: all 0.4s ease-in-out 0s;
85 + float: left;
86 + margin-left: 0px;
87 +}
88 +#map {
53 height: 400px; 89 height: 400px;
54 width: 100%; 90 width: 100%;
55 } 91 }
......
1 body 1 body
2 2
3 +
4 +
5 +
3 a 6 a
4 color: gray; 7 color: gray;
5 8
...@@ -7,7 +10,7 @@ ul.sidenav ...@@ -7,7 +10,7 @@ ul.sidenav
7 list-style-type: none; 10 list-style-type: none;
8 margin: 0; 11 margin: 0;
9 padding: 0; 12 padding: 0;
10 - width: 10%; 13 + width: 15%;
11 background-color: #f1f1f1; 14 background-color: #f1f1f1;
12 height: 100%; 15 height: 100%;
13 position : fixed; 16 position : fixed;
...@@ -18,7 +21,6 @@ ul.sidenav li a ...@@ -18,7 +21,6 @@ ul.sidenav li a
18 color: #000; 21 color: #000;
19 padding: 8px 16px; 22 padding: 8px 16px;
20 text-decoration: none; 23 text-decoration: none;
21 - transition: 0.3s;
22 24
23 25
24 ul.sidenav li a.active 26 ul.sidenav li a.active
...@@ -31,21 +33,33 @@ ul.sidenav li a:hover:not(.active) ...@@ -31,21 +33,33 @@ ul.sidenav li a:hover:not(.active)
31 color: white; 33 color: white;
32 34
33 35
36 +#title
37 + text-align : center;
38 + width : 100%
39 + font-size : 50px;
40 + padding-bottom : 30px;
41 +
34 #content 42 #content
35 43
36 margin-left: 25%; 44 margin-left: 25%;
37 - padding: 1px 16px; 45 + padding: 10px 16px;
38 height: 100%; 46 height: 100%;
39 47
40 table 48 table
41 - display : block 49 + width : 70%;
42 - width : 70% 50 + border-collapse: collapse;
43 - height : 100% 51 + text-align : center;
44 - 52 + vertical-align : middle;
45 -
46 td 53 td
54 + vertical-align: middle;
47 text-align : center; 55 text-align : center;
48 - display : block 56 + border: 1px solid #ddd;
57 + width : 10%;
58 + height : 0%;
59 + padding-bottom: 20%;
60 + background-image : url("/images/stamp.jpg");
61 + background-repeat: no-repeat;
62 + background-position: center top;
49 63
50 .bold 64 .bold
51 color : pink; 65 color : pink;
...@@ -53,3 +67,28 @@ td ...@@ -53,3 +67,28 @@ td
53 .small 67 .small
54 color : grey; 68 color : grey;
55 font-size : 8pt; 69 font-size : 8pt;
70 +#show
71 + width: 15%;
72 + display : inline-block;
73 + float : left;
74 + position : fixed;
75 + overflow : auto;
76 +
77 +#maintitle
78 + text-align : center;
79 + background : pink;
80 + padding: 8px 16px;
81 + margin-left : 15%;
82 +
83 +#mynav
84 + display: block;
85 + margin-left: -250px;
86 + transition:all 0.4s ease-in-out 0s;
87 +
88 +#mynav.open
89 + transition:all 0.4s ease-in-out 0s;
90 + float:left;
91 + margin-left : 0px;
92 +#map
93 + height: 400px;
94 + width: 100%;
......
...@@ -20,6 +20,9 @@ router.get('/home', function(req,res,next){ ...@@ -20,6 +20,9 @@ router.get('/home', function(req,res,next){
20 20
21 res.render('main', {title: '맛집견문록'}); 21 res.render('main', {title: '맛집견문록'});
22 }); 22 });
23 +
24 +
25 +
23 router.get('/mybook', function(req, res, next){ 26 router.get('/mybook', function(req, res, next){
24 27
25 var rows = new Array(); 28 var rows = new Array();
...@@ -35,15 +38,24 @@ router.get('/mybook', function(req, res, next){ ...@@ -35,15 +38,24 @@ router.get('/mybook', function(req, res, next){
35 var temp5 = {name : "와장창창", place : "윌집앞"} 38 var temp5 = {name : "와장창창", place : "윌집앞"}
36 var temp6 = {name : "맛있는 짜장면", place : "너네집앞"} 39 var temp6 = {name : "맛있는 짜장면", place : "너네집앞"}
37 var temp4 = {name : "네모네모 오징어", place : "영등포경찰서"} 40 var temp4 = {name : "네모네모 오징어", place : "영등포경찰서"}
41 + var temp7 = {name : "스타벅스", place : "서울특별시 영등포구 여의도동"}
38 42
39 rows.push(temp1); 43 rows.push(temp1);
40 rows.push(temp2); 44 rows.push(temp2);
41 - rows.push(temp3); 45 +// rows.push(temp3);
42 - rows.push(temp4); 46 +// rows.push(temp4);
43 - rows.push(temp5); 47 +// rows.push(temp5);
44 rows.push(temp6); 48 rows.push(temp6);
49 + rows.push(temp7);
45 50
46 res.render('mybook', {title: '견문록 보기', rows : rows}); 51 res.render('mybook', {title: '견문록 보기', rows : rows});
47 52
48 }); 53 });
54 +
55 +router.get('/test', function(req, res, next){
56 +
57 +res.render('test', {title: 'test'});
58 +
59 +});
60 +
49 module.exports = router; 61 module.exports = router;
......
1 +requestUrl = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/locationBasedList?serviceKey=D0l3YlPyS%2FkOOP6THiiZfSx2sqFsFLD7F14cAj7kqio3k7G%2BPHsb66v2W4C5qOuj7GeEXqjaYsFFZcn%2BLIDItg%3D%3D&numOfRoews=10&startPage=1&MobileOS=ETC&MobileApp=openSource&arrange=A&contenTypeId=15&listYN=Y&radius=10000"
2 +requestNumUrl = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/locationBasedList?serviceKey=D0l3YlPyS%2FkOOP6THiiZfSx2sqFsFLD7F14cAj7kqio3k7G%2BPHsb66v2W4C5qOuj7GeEXqjaYsFFZcn%2BLIDItg%3D%3D&numOfRoews=10&MobileOS=ETC&MobileApp=AppTest&arrange=A&contenTypeId=15&radius=10000&listYN=N"
3 +
4 +resultObject = new Array();
5 +
6 +function findShops(latitude, longitude) {
7 +
8 + //var parameter = "&mapX=" + 126.981611 + "&mapY=" + 37.568477;
9 + pageIndex = 1;
10 + var parameter = "&mapX=" + longitude + "&mapY=" + latitude + "&pageNo=" + pageIndex;
11 + $.ajax({
12 + type: "GET"
13 + ,dataType: "xml"
14 + ,url: requestUrl + parameter
15 + ,success: function(xml){
16 + totalCount = Number($(xml).find("totalCount").text());
17 + for(pageIndex=1; pageIndex<=totalCount/10; pageIndex++)
18 + {
19 + $.ajax({
20 + type: "GET"
21 + ,dataType: "xml"
22 + ,url: requestUrl + "&mapX=" + longitude + "&mapY=" + latitude + "&pageNo=" + pageIndex
23 + ,success: function(xml){
24 + var xmlData = $(xml).find("items item");
25 + var listLength = xmlData.length;
26 + if (listLength) {
27 + $(xmlData).each(function(){
28 + var data = new Object() ;
29 + data.title = $(this).find("title").text()
30 + data.lng = $(this).find("mapx").text()
31 + data.lat = $(this).find("mapy").text()
32 + //console.log(data)
33 + resultObject.push(data);
34 + });
35 +
36 + var markers = resultObject.map(function(currentValue, index, array) {
37 + var marker = new google.maps.Marker({
38 + position: {lat: Number(currentValue.lat), lng: Number(currentValue.lng)},
39 + title: currentValue.title,
40 + });
41 + marker.setMap(map);
42 + });
43 + }
44 + }
45 + });
46 + }
47 + }
48 + });
49 +}
...@@ -10,11 +10,18 @@ ...@@ -10,11 +10,18 @@
10 <script> 10 <script>
11 11
12 $(document).ready(function() { 12 $(document).ready(function() {
13 - $('.sidenav').hide(); 13 +
14 +
15 +
16 +
17 +
14 18
15 $('#show').click(function() { 19 $('#show').click(function() {
16 20
17 - $('.sidenav').slideToggle("fast"); 21 + //$('.sidenav').slideToggle("fast");
22 + $this = $(this);
23 + $nav = $('#mynav');
24 + $nav.toggleClass('open');
18 }); 25 });
19 }); 26 });
20 27
...@@ -24,22 +31,22 @@ ...@@ -24,22 +31,22 @@
24 31
25 32
26 33
27 - <div id ="menu">
28 <div id ="show">clickmenu</div> 34 <div id ="show">clickmenu</div>
35 + <div id ="maintitle">맛집견문록</div>
29 36
37 + <div id ="mynav">
30 <ul class="sidenav"> 38 <ul class="sidenav">
31 <li><a class="active" href="home">home</a></li> 39 <li><a class="active" href="home">home</a></li>
32 <li><a href="map">맛집도장찍기</a></li> 40 <li><a href="map">맛집도장찍기</a></li>
33 <li><a href="mybook">견문록확인</a></li> 41 <li><a href="mybook">견문록확인</a></li>
34 42
35 </ul> 43 </ul>
36 -
37 -
38 </div> 44 </div>
39 45
40 46
41 - <div id = "header"> </div>
42 47
48 +
49 + <div id= "title"></div>
43 <div id ="content"> 50 <div id ="content">
44 51
45 <h1><%= title %></h1> 52 <h1><%= title %></h1>
......
...@@ -6,59 +6,6 @@ ...@@ -6,59 +6,6 @@
6 <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTR69UvS1403rvBcM64_8nlzpKLv23RIE&libraries=places"></script> 6 <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTR69UvS1403rvBcM64_8nlzpKLv23RIE&libraries=places"></script>
7 <script> 7 <script>
8 8
9 - requestUrl = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/locationBasedList?serviceKey=D0l3YlPyS%2FkOOP6THiiZfSx2sqFsFLD7F14cAj7kqio3k7G%2BPHsb66v2W4C5qOuj7GeEXqjaYsFFZcn%2BLIDItg%3D%3D&numOfRoews=10&startPage=1&MobileOS=ETC&MobileApp=openSource&arrange=A&contenTypeId=15&listYN=Y&radius=10000"
10 - requestNumUrl = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/locationBasedList?serviceKey=D0l3YlPyS%2FkOOP6THiiZfSx2sqFsFLD7F14cAj7kqio3k7G%2BPHsb66v2W4C5qOuj7GeEXqjaYsFFZcn%2BLIDItg%3D%3D&numOfRoews=10&MobileOS=ETC&MobileApp=AppTest&arrange=A&contenTypeId=15&radius=10000&listYN=N"
11 -
12 - resultObject = new Array();
13 -
14 - function findShops(latitude, longitude) {
15 -
16 - //var parameter = "&mapX=" + 126.981611 + "&mapY=" + 37.568477;
17 - pageIndex = 1;
18 - var parameter = "&mapX=" + longitude + "&mapY=" + latitude + "&pageNo=" + pageIndex;
19 - $.ajax({
20 - type: "GET"
21 - ,dataType: "xml"
22 - ,url: requestUrl + parameter
23 - ,success: function(xml){
24 - totalCount = Number($(xml).find("totalCount").text());
25 - for(pageIndex=1; pageIndex<=totalCount/10; pageIndex++)
26 - {
27 - $.ajax({
28 - type: "GET"
29 - ,dataType: "xml"
30 - ,url: requestUrl + "&mapX=" + longitude + "&mapY=" + latitude + "&pageNo=" + pageIndex
31 - ,success: function(xml){
32 - var xmlData = $(xml).find("items item");
33 - var listLength = xmlData.length;
34 - if (listLength) {
35 - $(xmlData).each(function(){
36 - var data = new Object() ;
37 - data.title = $(this).find("title").text()
38 - data.lng = $(this).find("mapx").text()
39 - data.lat = $(this).find("mapy").text()
40 - //console.log(data)
41 - resultObject.push(data);
42 - });
43 -
44 - var markers = resultObject.map(function(currentValue, index, array) {
45 - var marker = new google.maps.Marker({
46 - position: {lat: Number(currentValue.lat), lng: Number(currentValue.lng)},
47 - title: currentValue.title,
48 - });
49 - marker.setMap(map);
50 - });
51 - }
52 - }
53 - });
54 - }
55 - }
56 - });
57 - }
58 -
59 - $('.popup').click(function(e){
60 -
61 - })
62 9
63 function initMap(latitude, longitude) { 10 function initMap(latitude, longitude) {
64 var center = {lat: latitude, lng: longitude}; 11 var center = {lat: latitude, lng: longitude};
...@@ -112,7 +59,7 @@ ...@@ -112,7 +59,7 @@
112 '<h1 id="firstHeading" class="firstHeading">'+place.name+'</h1>'+ 59 '<h1 id="firstHeading" class="firstHeading">'+place.name+'</h1>'+
113 '<div id="bodyContent">'+ 60 '<div id="bodyContent">'+
114 '<p>주소: '+place.vicinity+'<br/>'+ 61 '<p>주소: '+place.vicinity+'<br/>'+
115 - '<a href="https://localhost:3000/id=297882194">'+ 62 + '<a href="https://localhost:3000/id=' + place.id + '">'+
116 '표시하기</a> '+ 63 '표시하기</a> '+
117 '</p>'+ 64 '</p>'+
118 '</div>'+ 65 '</div>'+
...@@ -120,6 +67,7 @@ ...@@ -120,6 +67,7 @@
120 67
121 68
122 google.maps.event.addListener(marker1, 'click', function(e) { 69 google.maps.event.addListener(marker1, 'click', function(e) {
70 + //console.log(place)
123 var infowindow = new google.maps.InfoWindow({ 71 var infowindow = new google.maps.InfoWindow({
124 content: contentString, 72 content: contentString,
125 maxWidth: 300 73 maxWidth: 300
...@@ -140,9 +88,15 @@ ...@@ -140,9 +88,15 @@
140 } 88 }
141 89
142 $(document).ready(function() { 90 $(document).ready(function() {
143 - $('.sidenav').hide(); 91 +
92 + // $('.sidenav').hide();
93 +
144 $('#show').click(function() { 94 $('#show').click(function() {
145 - $('.sidenav').slideToggle("fast"); 95 +
96 + //$('.sidenav').slideToggle("fast");
97 + $this = $(this);
98 + $nav = $('#mynav');
99 + $nav.toggleClass('open');
146 }); 100 });
147 101
148 if("geolocation" in navigator) { 102 if("geolocation" in navigator) {
...@@ -155,19 +109,24 @@ ...@@ -155,19 +109,24 @@
155 109
156 } 110 }
157 }); 111 });
112 +
113 +
158 </script> 114 </script>
159 - </head> 115 +
160 - <body> 116 +
161 - <div id ="menu">
162 <div id ="show">clickmenu</div> 117 <div id ="show">clickmenu</div>
118 + <div id ="maintitle">맛집견문록</div>
119 +
120 + <div id ="mynav">
163 <ul class="sidenav"> 121 <ul class="sidenav">
164 <li><a class="active" href="home">home</a></li> 122 <li><a class="active" href="home">home</a></li>
165 <li><a href="map">맛집도장찍기</a></li> 123 <li><a href="map">맛집도장찍기</a></li>
166 <li><a href="mybook">견문록확인</a></li> 124 <li><a href="mybook">견문록확인</a></li>
167 </ul> 125 </ul>
168 - </div> 126 +</div>
127 +
169 128
170 - <div id = "header"> </div> 129 + <div id = "title"> </div>
171 130
172 <div id ="content"> 131 <div id ="content">
173 <div id="map"></div> 132 <div id="map"></div>
......
...@@ -9,11 +9,14 @@ ...@@ -9,11 +9,14 @@
9 <script> 9 <script>
10 10
11 $(document).ready(function() { 11 $(document).ready(function() {
12 - $('.sidenav').hide(); 12 + //$('.sidenav').hide();
13 13
14 $('#show').click(function() { 14 $('#show').click(function() {
15 15
16 - $('.sidenav').slideToggle("fast"); 16 + //$('.sidenav').slideToggle("fast");
17 + $this = $(this);
18 + $nav = $('#mynav');
19 + $nav.toggleClass('open');
17 }); 20 });
18 }); 21 });
19 22
...@@ -22,22 +25,24 @@ ...@@ -22,22 +25,24 @@
22 25
23 26
24 27
25 -
26 - <div id ="menu">
27 <div id ="show">clickmenu</div> 28 <div id ="show">clickmenu</div>
29 + <div id ="maintitle">맛집견문록</div>
28 30
31 + <div id ="mynav">
29 <ul class="sidenav"> 32 <ul class="sidenav">
30 <li><a class="active" href="home">home</a></li> 33 <li><a class="active" href="home">home</a></li>
31 <li><a href="map">맛집도장찍기</a></li> 34 <li><a href="map">맛집도장찍기</a></li>
32 <li><a href="mybook">견문록확인</a></li> 35 <li><a href="mybook">견문록확인</a></li>
33 36
34 </ul> 37 </ul>
38 +</div>
35 39
36 40
37 - </div> 41 + <div id = "title">
38 42
43 + ㅇㅇㅇ님의 맛집 견문록<br/>
39 44
40 - <div id = "header"> </div> 45 + </div>
41 46
42 <div id ="content"> 47 <div id ="content">
43 48
...@@ -45,31 +50,39 @@ ...@@ -45,31 +50,39 @@
45 50
46 51
47 <% 52 <%
48 - for( var i=0; i<rows.length; i++) 53 + for(var i=0; i<rows.length; i++)
49 { 54 {
50 55
56 + var oneItem = rows[i];
51 57
52 - for( var j = 0; j<3; j++){ 58 + %>
53 - num = i * 3 + j;
54 - var item = rows[num];
55 59
60 + <%if(i==0){ %>
56 61
62 + <tr>
63 + <td><p class="bold"><%=i%>:a <%=oneItem.name%></p>
64 + <p class="small"><%=oneItem.place%></p></td>
57 65
58 - %> 66 + <%} else if (i%3==0){%>
67 + </tr>
59 <tr> 68 <tr>
60 - <td><p class="bold"><%=num%> : <%=item.name%></p> 69 + <td><p class="bold"><%=i%>:b <%=oneItem.name%></p>
70 + <p class="small"><%=oneItem.place%></p></td>
61 71
62 - <p class="small"><%=item.place%></p></td>
63 72
73 + <%}else if(i%3!=0 && i!=rows.length-1){%>
64 74
65 - <% } %> 75 + <td><p class="bold"><%=i%>:c <%=oneItem.name%></p>
76 + <p class="small"><%=oneItem.place%></p></td>
66 77
67 - </tr> 78 + <%}else{%>
79 +
80 + <td><p class="bold"><%=i%>:c <%=oneItem.name%></p>
81 + <p class="small"><%=oneItem.place%></p></td></tr>
82 +
83 + <%}}%>
68 84
69 85
70 - <%
71 - }
72 - %>
73 </table> 86 </table>
74 87
75 88
...@@ -83,6 +96,7 @@ ...@@ -83,6 +96,7 @@
83 96
84 97
85 98
99 +
86 </body> 100 </body>
87 101
88 </html> 102 </html>
......