update crawling news and add style

서민정
Commit e287d55969a3338982de8cc0607475848e2c00f2 e287d559 1 parent 2d1bae03
Showing 6 changed files with 40 additions and 68 deletions
README.md
client/src/chatbot/chatbot.js
client/src/chatbot/sections/card.js
client/src/index.css
server/routes/news.js
server/routes/related.js
--- a/README.md
View file @e287d55
+++ b/README.md
View file @e287d55
@@ -2,15 +2,4 @@
 ## CHATBOT WITH CRAWLING
 front
-- [x] Modify card component 
-- [x] Remove card message on dialogflow
-- [ ] Modify Intent on dialogflow
-- [ ] Add additional functions on dialogflow
-- [x] Show video list on front (card compo)
-
-back
-- [ ] Modify crawling.js to deal with null data
-- [ ] Dealing with Event queries
-- [ ] 가수와 관련되지 않은 영상이 포함될 땐?
-- [ ] 배포 어떻게 할것인가
-- [ ] 전반적인 내용 완전히 이해하기 (구조 등)
\ No newline at end of file
+- 뉴스 크롤링 후 이미지 사이자 80*80 인 것을 원본으로 변환할 수 있는 방법은..?
\ No newline at end of file
--- a/client/src/chatbot/chatbot.js
View file @e287d55
+++ b/client/src/chatbot/chatbot.js
View file @e287d55
@@ -15,7 +15,7 @@ function Chatbot() {
     useEffect(() => {
         eventQuery('001_Welcome')
-        eventQuery('002_Intro')
+        .then(eventQuery('002_Intro'))
     }, [])
@@ -54,6 +54,7 @@ function Chatbot() {
                     response = await Axios.post('/api/related/textQuery', textQueryVariables)
                 }
                 else if(inputString === '소식'){ //@가수명_소식
+                    console.log("뉴스들어옴")
                     response = await Axios.post('/api/news/textQuery', textQueryVariables)
                 }
@@ -182,12 +183,6 @@ function Chatbot() {
             </div>
         }
-
-        // template for card message 
-
-
-
-
     }
     const renderMessage = (returnedMessages) => {
@@ -207,7 +202,7 @@ function Chatbot() {
             height: 650, width: 700,
             border: '3px solid black', borderRadius: '7px'
         }}>
-            <div style={{ height: 594, width: '100%', overflow: 'auto' }}>
+            <div style={{ height: 594, width: '100%', overflow: 'auto'}}>
                 {renderMessage(messagesFromRedux)}
@@ -217,7 +212,7 @@ function Chatbot() {
             <input
                 style={{
                     margin: 0, width: '100%', height: 50,
-                    borderRadius: '4px', padding: '5px', fontSize: '1rem'
+                    borderRadius: '4px', padding: '5px', fontSize: '1rem', fontFamily: 'KyoboHand'
                 }}
                 placeholder="Send a message..."
                 onKeyPress={keyPressHanlder}
--- a/client/src/chatbot/sections/card.js
View file @e287d55
+++ b/client/src/chatbot/sections/card.js
View file @e287d55
@@ -8,11 +8,12 @@ function CardComponent(props) {
     console.log("props" ,props)
     return (
         <Card
-            style={{ width: 200 }}
+            style={{ width: 180}}
             cover={
                 <img
                     alt={props.cardInfo.description}
-                    src={props.cardInfo.image} />
+                    src={props.cardInfo.image} 
+                    />
             }
             actions={[
                 <a target="_blank" rel="noopener noreferrer" href={props.cardInfo.link}>
@@ -29,32 +30,4 @@ function CardComponent(props) {
     )
 }
-
-
-/*
-function CardComponent(props) {
-    return (
-        <Card
-            style={{ width: 300 }}
-            cover={
-                <img
-                    alt={props.cardInfo.fields.description.stringValue}
-                    src={props.cardInfo.fields.image.stringValue} />
-            }
-            actions={[
-                <a target="_blank" rel="noopener noreferrer" href={props.cardInfo.fields.link.stringValue}>
-                    <Icon type="ellipsis" key="ellipsis" />
-                </a>
-            ]}
-        >
-            <Meta
-                title={props.cardInfo.fields.title.stringValue}
-                description={props.cardInfo.fields.description.stringValue}
-            />
-
-        </Card>
-
-    )
-}
-*/
 export default CardComponent
--- a/client/src/index.css
View file @e287d55
+++ b/client/src/index.css
View file @e287d55
-@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
+@font-face { 
+  font-family: 'KyoboHand'; 
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/KyoboHand.woff') format('woff'); 
+  font-weight: normal; 
+  font-style: normal; 
+}
+
 * {
   word-break: keep-all;
   overflow-wrap: break-word;
@@ -8,26 +14,30 @@
 html,
 body {
   max-height: 800px;
+  font-family: 'KyoboHand';
 }
 body {
   margin: 0;
   padding: 0;
-  font-family: Nanum Gothic,Lato, Helvetica Neue, Arial, Helvetica, sans-serif;
+  font-family: 'KyoboHand','Nanum Gothic',Lato, Helvetica Neue, Arial, Helvetica, sans-serif;
   -webkit-font-smoothing: antialiased;
 }
 .ant-list-item-meta-content {
   max-width: 500px;
   overflow-x: scroll;
+  font-family: 'KyoboHand';
 }
 .ant-list-item-meta-title {
   font-size: 20px !important;
+  font-family: 'KyoboHand';
 }
 .ant-list-item-meta-description {
   display: flex;
   color: black !important;
+  font-family: 'KyoboHand';
 }
--- a/server/routes/news.js
View file @e287d55
+++ b/server/routes/news.js
View file @e287d55
@@ -9,16 +9,20 @@ const cheerio = require('cheerio');
 router.post('/textQuery', async(req,res)=>{
     const result = req.body.text;
-    var name = result.substring(1)
+    var i = 0;
-
+    for(i; i < result.length; i++){
-    var url = 'https://tv.naver.com/search/clip?query=' //naverTV의 링크
+        if(result[i] === '_') break;
-    var sort = '&sort=date'
+    }
-    url = url + name + sort
+    var name = result.substr(1,i-1);
+
+    var url = 'https://search.naver.com/search.naver?query=' //naverTV의 링크
+    var where = '&where=news'
+    url = url + name + where
     url = encodeURI(url)
     console.log("url is ",url)
     const getHtml = async() => {
         try{
-            return await axios.get(url); //axios.get 함수를 이용해서 비동기로 네이버티비의 해당 가수의 최신 영상 html 파일을 가져온다. 
+            return await axios.get(url); //axios.get 함수를 이용해서 비동기로 네이버 뉴스 중 해당 가수의 이름이 들어간 최신 뉴스 html 파일을 가져온다. 
         } catch(error){
             console.log("error! check your code");
         }
@@ -26,20 +30,21 @@ router.post('/textQuery', async(req,res)=>{
     getHtml()
     .then(html => {
-        let videoList = [];
+        let newsList = [];
         const $ = cheerio.load(html.data);
-        const $bodyList = $("div.src_wrap div.thl ").children("div.thl_a");
+        const $bodyList = $("div.news").children("ul.type01").children("li");
+
         $bodyList.each(function(i, elem){
-            videoList[i] = {
+            newsList[i] = {
-                description : "naverTV",
+                description : "네이버 검색 기사",
-                image : $(this).find('a.cds_thm').children('img').attr('src'), 
+                title :  $(this).find('a._sp_each_title').attr('title'),
-                title : $(this).find('a.cds_thm').attr('title'),
+                link : $(this).find('a._sp_each_title').attr('href'),
-                link : "https://tv.naver.com/" + $(this).find('a.cds_thm').attr('href')
+                image : $(this).find('a.sp_thmb').children('img').attr('src')
             }
         })
-        data = videoList.filter(n => n.title);
+        data = newsList.filter(n => n.title);
         data = JSON.stringify(data.slice(0,3))
         res.send(data);
--- a/server/routes/related.js
View file @e287d55
+++ b/server/routes/related.js
View file @e287d55
@@ -24,7 +24,7 @@ router.post('/textQuery', async(req,res)=>{
     console.log("url is ",url)
     const getHtml = async() => {
         try{
-            return await axios.get(url); //axios.get 함수를 이용해서 비동기로 네이버티비의 해당 가수의 최신 영상 html 파일을 가져온다. 
+            return await axios.get(url); //axios.get 함수를 이용해서 비동기로 네이버티비의 해당 가수의 이름과 정확도가 높은  html 파일을 가져온다. 
         } catch(error){
             console.log("error! check your code");
         }