초기화면설정 수정

Heo
Commit 3aee806a0a124a11e312c212e8a982eb60151901 3aee806a 2 parents 9273bf42 d79d253a
Showing 4 changed files with 70 additions and 25 deletions
README.md
app.js
public/css/master.css
views/index.ejs
--- a/README.md
View file @3aee806
+++ b/README.md
View file @3aee806
-## Topic
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-> 코로나 19 예방접종 의료기관 조회 웹서비스를 제공하는 프로젝트입니다.
+
+## 🔍 About the Project
+> 현재 코로나19로 인해 얼마전부터 위탁의료기관을 통한 신종 코로나바이러스 감염증(코로나19) 접종이 본격 시작되었습니다. 
+이에 따라, 원하는 지역의 예방접종 위탁의료기관을 간편하게 조회할 수 있는 서비스를 개발하였습니다. 
+이 프로젝트는 매 정각 1번씩 갱신되고 있는 위탁의료기관의 정보 데이터를 기반으로 제공합니다.
+
+## 💻 User Interface 
+<img src="/uploads/c003a2a8d20b368d3c0fb07c49007251/UI예시.png"  width="800" height="400">
+
+   
+## 📋 기술 스택
+- Nodejs
+- Html
+- Css
+- JavaScript
+- Express
+- AWS EC2
-## Member
+
+## ✏️ 프로젝트 사용 방법
+1. cloning
+```
+http://khuhub.khu.ac.kr/2018103585/Corona_Vaccination_Medical_Institution.git
+```
+
+2. install npm packages
+```
+npm install
+```
+3. add API key
+> Fill {} with API Key
+```
+const $key = '{Corona Vaccination Medical Institution API key}' (app.js)
+```
+```
+<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey={Kakao map API Key}&libraries=services"></script> (index.ejs)
+```
+4. Execute 
+```
+node app.js
+```
+
+## 💻 Project Architecture
+<img src="/uploads/abc7fb1cd4ee2ab997956e529c24670e/프로젝트아키텍쳐.png"  width="800" height="400">
+
+  
+   
+## ✨ Contributors 
+
 | 김서연 | 허재경 |
 | :----: | :----: |
 | [@ksy991018](https://github.com/ksy991018) | [@JaeKyungHeo](https://github.com/JaeKyungHeo) |
--- a/app.js
View file @3aee806
+++ b/app.js
View file @3aee806
@@ -2,11 +2,15 @@ var express = require('express');
 var bodyParser = require('body-parser');
 var request = require('request');
 var cheerio = require('cheerio');
+
 var app =express();
+const HTTPS = require('https');
+const domain = "www.stagefive.tk"
+const sslport = 80;
+
 app.set('view engine','ejs');
 app.set('views','./views')
 app.use(express.urlencoded( {extended : false } ));
-app.use(express.static(__dirname + '/public'));
 app.locals.pretty=true;
 // app.set('view engine','pug');
--- a/public/css/master.css deleted 100644 → 0
View file @9273bf4
+++ b/public/css/master.css deleted 100644 → 0
View file @9273bf4
-/* #placeList li{list-style: none;}
-#placesList .item {position:relative;border-bottom:1px solid #888;overflow: hidden;cursor: pointer;min-height: 65px;}
-#placesList .item span {display: block;margin-top:4px;}
-#placesList .item h5, #placesList .item .info {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
-#placesList .info .gray {color:#8a8a8a;}
-#placesList .info .jibun {padding-left:26px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png) no-repeat;}
-#placesList .info .tel {color:#009900;} */
\ No newline at end of file
--- a/views/index.ejs
View file @3aee806
+++ b/views/index.ejs
View file @3aee806
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <title>코로나 백신 의료기관 조회</title>
-    <!-- <link rel="stylesheet" href="/css/master.css"> -->
+
     <%if(typeof(info)!="undefined"){%>
         <script>
             try {
@@ -14,18 +14,20 @@
             }
         </script>
     <% }%>
+    
 </head>
 <body>
     <center>
-        <h1>COVID-19 예방접종 위탁 의료기관 조회</h1> <br><hr>
+
+        <!-- <div style="background: #e8ecff; border-left: 0.5em solid #688FF4;border-right: 0.5em solid #688FF4; padding: 0.5em;"> -->
+            <h2>COVID-19 예방접종 위탁 의료기관 조회</h2> <hr>
+        <!-- </div> -->
         <form action="/" method="post">
         <p> 
-            <br>
+            <div style="float:right; width:40%; margin-bottom:10px; margin-right: 5px;">
-            <div style="float:right; margin-right:250px;margin-right:70px; margin-bottom:7px;">
+                <input type="text" style="height:25px;font-size:15px;" name="region" placeholder="지역을 입력하세요" size="20"/>
-                <input type="text" style="width:450px;height:30px;font-size:20px;" name="region" placeholder="지역을 입력하세요" size="20"/>
+                <button type="submit" style="height:30px;font-size:15px;" class="btn btn-info" >검색</button> 
-                <button type="submit" style="height:35px;font-size:20px;">검색</button> 
+            </div>        
-            </div>
-            
         </p>
         </form>
     </center>
@@ -34,11 +36,11 @@
     <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
     <% if(typeof(info) != "undefined"){ %>
-
+    <div id="map" style="width:65%;height:550px;float:left; margin-left: 2%; border-radius: 2%; border:1px solid black" ></div>  
-    <div style="overflow:scroll; width:500px; height:675px; padding:10px;float:right; margin-right:70px; border:1px solid black;">
+    <div style="overflow:scroll; width:25%; height:550px;float:left; margin-left:2%; border:1px solid black;">
         <ol id="placelist">   
             <% for(i=0; i<info.length; i++){%>
-            <li class="item">
+            <li class="item" style="font-size: 13px; ">
                 <div class="info" onmouseover="displayinfowindow('<%=info[i].orgZipaddr%>', '<%=info[i].orgnm%>', true)" onmouseout="displayinfowindow('<%=info[i].orgZipaddr%>', '<%=info[i].orgnm%>', false)">
                     <span><strong><%= info[i].orgnm%></strong></span>
                     <%if(info[i].hldyYn=='N') {%>
@@ -54,7 +56,7 @@
                     <% if(timeList[i][4]!="" && timeList[i][5]!="" && timeList[i][6]!="" && timeList[i][7]!=""){%>
                         <span>진료시간 : <%=timeList[i][4]%>:<%=timeList[i][5]%>~<%=timeList[i][6]%>:<%=timeList[i][7] %></span><br>
                     <%}%>
-                    <span style="color:gray" class="jibun gray"><%=info[i].orgZipaddr%></span><br>
+                    <span style="color:gray" class="jibun gray; font-style: oblique;" ><%=info[i].orgZipaddr%></span><br>
                     <span style="color:blue" class="tel"><%=info[i].orgTlno%></span><br>
                 </div>
                 <hr>
@@ -103,7 +105,7 @@
                     var num=1;
                     // 인포윈도우를 생성합니다 
                     var infowindow = new kakao.maps.InfoWindow({
-                        content: '<div style="width:250px;text-align:center;padding:5px 0;">' + addr.orgnm + '</div>', 
+                        content: '<div style="border-radius:3%; width:200px;text-align:center;padding:3px 0; font-size:12px">' + addr.orgnm + '</div>', 
                     }); 
                     // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
                     // 이벤트 리스너로는 클로저를 만들어 등록합니다 
@@ -144,7 +146,7 @@
                     clickable: true
                 }); 
                 infowindow = new kakao.maps.InfoWindow({
-                        content: '<div style="width:250px;text-align:center;padding:5px 0;">' + name + '</div>', 
+                        content: '<div style="border-radius:3%; width:200px;text-align:center;padding:3px 0; font-size:12px">' + name + '</div>', 
                 }); 
             infowindows.push(infowindow);
             infowindow.open(map, marker);