.

client/src/Pages/Search.js

@@ -13,7 +13,7 @@ function Search(props) {
     const [showSet, setShowSet] = useState([false, false, false, false]);
     const [search, setSearch] = useState(props.location.state.id);
     const [mobile, setMobile] = useState();
-    const [place, setPlace] = useState([])
+    const [place, setPlace] = useState([{name:"", category:"", address:""}])
     const [imgUrl, setImgUrl] = useState([])
 
     const getImg = () => {
@@ -473,9 +473,9 @@ function Search(props) {
         setState(true);
     }
 
-    function paginate(items, pageNumber) {
+    function paginate(items, pageNumber, itemNumber) {
         const page = [];
-        const startIndex = (pageNumber - 1) * 4
+        const startIndex = (pageNumber - 1) * itemNumber
         for (var i = 0; i < 4; i++) {
             page.push(items[(startIndex + i)])
         }
@@ -483,7 +483,7 @@ function Search(props) {
     }
 
 
-    const pagePlace = paginate(places, index)
+    const pagePlace = paginate(places, index, 1)
 
     return (
         <Container >
@@ -504,7 +504,25 @@ function Search(props) {
                     </InputGroup>
                 </Form>
             </Row>
-            <Image src={imgUrl} />
+
+            <Col md={6} >
+                            <Card align="center" border="info" style={{ margin: "3%" }}>
+                                <Card.Title style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{place[0].name}</Card.Title>
+                                <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={imgUrl} />
+                                <Card.Body >
+                                    <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
+                                        {place[0].address}{place[0].category} </Card.Text>
+                                    <Button variant="primary" onClick={() => {
+                                        // const showArr = [false, false, false, false]
+                                        // showArr[index] = true
+                                        // setShowSet(showArr)
+                                    }}>{place[0].name} 자세히 살펴보기</Button>
+                                    {/* <Place search={place}  show={show} onHide={() => setShowSet([false, false, false, false])} /> */}
+                                </Card.Body>
+                            </Card>
+                        </Col>
+
+ 
             <Row className="d-flex flex-wrap">
                 {pagePlace.map((place, index) => {
                     return (

server/controllers/place.controller.js

-import Place from '../models/Place.js'
+import Places from '../models/Place.js'
 import cheerio from 'cheerio'
 import fs from 'fs'
 import axios from 'axios';
 
 const searchPlace = async (req, res) => {
-    console.log("여기까지는 옵니다~")
 
-    const url = "https://www.google.com/search?q=" + encodeURI(req.params.search) + "+site%3Atistory.com&page_no=1"
+    const url = "https://search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&query=" + encodeURI(req.params.search)
     const editUrl = /(http(s)?:\/\/)([a-z0-9\w]+\.*)+[a-z0-9]{2,4}/gi
     axios.get(url)
-        .then((response) => {
+        .then( async (response) => {
             const html = response.data
             let $1 = cheerio.load(html);
 
-            let places = []
-            $1('.kCrYT').each(function (i) {
+            let places = {}
+            $1('.ct_box_area').each(function (i) {
+                // console.log($1('.biz_name').text())
+                // console.log($1('.category').text())
+                // console.log($1('.addr').text())
+                // console.log($1('.t?ime highlight').text())
 
-                if ($1(this).find('h3').text()) {
-                    places[i] = { name: $1(this).find('h3').text(), link: ($1(this).find('a').attr('href')) }
-                } else if ($1(this).find('.s3v9rd').find('.s3v9rd').text()) {
-                    places[i - 1] = { ...places[i - 1], address: $1(this).find('.s3v9rd').find('.s3v9rd').text() }
-                    places = places.filter(e => e)
-                }
+                
+                places[i] = { name: $1('.biz_name').text(), category: $1('.category').text(), address: $1('.addr').text() }
             })
-            console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@", places)
+            // 값이 비어있거나 에러가 생겼을 때를 대비해 try catch를 해야함
+            const newPlaces = await new Places(places[0]
+            ).save()
             res.send(places)
         })
 }
@@ -32,8 +33,9 @@ const searchImg = async (req, res) => {
     const imgUrl = "https://www.google.com/search?q=" + encodeURI(req.params.search) + "+site:tistory.com/&sxsrf=ALeKk023Dv08KQDodRmpB5222lQuzw2Vaw:1610612821100&source=lnms&tbm=isch"
 
     axios.get(imgUrl)
-        .then((response) => {
+        .then(async (response) => {
             const html = response.data
+            let name = req.params.search
             let $1 = cheerio.load(html);
 
             let images = $1('.RAyV4b').find('img').attr('src')
@@ -45,6 +47,8 @@ const searchImg = async (req, res) => {
             // })
             // console.log('%%%%%%%%%%%%%%%%%%%%%%%%%%%', images)
             res.send(images)
+            const newPlaces = await new Places(name,images
+                ).save()
         })
 
 }

server/models/Place.js

@@ -25,8 +25,11 @@ const PlaceSchema = new mongoose.Schema({
         type: Array,
         required: true,
     },
+    category:{
+        type:String,
+    }
 }, {
     timestamps: true
 })
 
-export default mongoose.models.Place || mongoose.model('Place', PlaceSchema)
+export default mongoose.models.Places || mongoose.model('Place', PlaceSchema)

server/scraperss.js

@@ -3,9 +3,9 @@ import cheerio from "cheerio";
 import express from 'express';
 import request from 'request-promise'
 import jschardet from 'jschardet'
-import iconv from 'iconv'
-import fs from 'fs'
-const Iconv = iconv.Iconv
+// import iconv from 'iconv'
+// import fs from 'fs'
+// const Iconv = iconv.Iconv
 
 const app = express()
 
@@ -13,7 +13,7 @@ app.get('/', (req, res) => {
     const url = "https://www.google.com/search?q=%ED%95%9C%EB%9D%BC%EC%82%B0%20site%3Atistory.com&oq=tistory&aqs=chrome..69i57j0l4j69i60l3.1746j0j4&sourceid=chrome&ie=UTF-8&ved=2ahUKEwis_bSFz4buAhWVdXAKHU0tBaoQ2wF6BAgIEAE&ei=T1D1X-yZD5XrwQPN2pTQCg"
 
     request(url)
-        .then(anyToUtf8)
+        // .then(anyToUtf8)
         .then((html) => {
             // fs.writeFileSync("googlez.txt", '\ufeff' + html, { encoding: 'utf8' });