.

client/src/Pages/App.js

@@ -96,7 +96,7 @@ function App() {
                 <h3 class="mb-0">{recommend.name}</h3>
                 <Image variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={recommend.img} />
                 <p class="card-text mb-auto">{recommend.address}</p>
-                <Link to={`/place?id=${1}&place=${recommend.name}`} >
+                <Link to={`/place?name=${recommend.name}&src=${recommend.img}&address=${recommend.address}`} >
                   <Button variant="info"> {recommend.name} 자세히 살펴보기</Button>
                 </Link>
               </div>
@@ -112,7 +112,7 @@ function App() {
                 <h3 class="mb-0">{latest.name}</h3>
                 <Image variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={latest.img} />
                 <p class="mb-auto">{latest.address}</p>
-                <Link to={`/place?id=${1}&place=${latest.name}`} >
+                <Link to={`/place?name=${latest.name}&src=${latest.img}&address=${latest.address}`} >
                   <Button variant="info"> {latest.name} 자세히 살펴보기</Button>
                 </Link>
               </div>

client/src/Pages/Bookmark.js

@@ -67,7 +67,7 @@ function Bookmark() {
 
     return (
         <Container>
-            <Link to="/" className="d-flex justify-content-center"><Image src={ohuh} /></Link>
+            <Link to="/"><Image src={ohuh} /></Link>
             <div class="d-flex align-items-center p-3 text-white bg-info rounded shadow-sm">
                 <div >
                     <h1 class="h6 mb-0 text-white">북마크</h1>
@@ -94,7 +94,7 @@ function Bookmark() {
                                 <Card.Body >
                                     <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
                                         {place.address} </Card.Text>
-                                    <Link to={`/place?&place=${place.name}`} >
+                                    <Link to={`/place?name=${place.name}&src=${place.img}&address=${place.address}`} >
                                         <Button variant="info"> {place.name} 자세히 살펴보기</Button>
                                     </Link>
                                 </Card.Body>

client/src/Pages/Search.js

@@ -7,7 +7,9 @@ import axios from 'axios';
 import queryString from 'query-string'
 import * as Icon from 'react-bootstrap-icons';
 import { isAuthenticated } from '../utils/auth';
-import catchErrors from '../utils/catchErrors'
+import catchErrors from '../utils/catchErrors';
+import _ from 'lodash';
+
 
 function Search(props) {
 
@@ -42,14 +44,8 @@ function Search(props) {
     }
 
     useEffect(() => {
-        if (association.length < 3) {
-            setPagePlace(paginate(association, index, association.length))
-        }
-        else {
-            setPagePlace(paginate(association, index, 4))
-        }
-        setEndPage(Math.floor((association.length / 4)))
-
+        setPagePlace(paginate(association, index, 4))
+        setEndPage(Math.ceil((association.length / 4)))
     }, [association, index])
 
     useEffect(() => {
@@ -58,21 +54,8 @@ function Search(props) {
         if (state) {
             props.history.push('/search?keyword=' + search)
             setState(false)
-        } window.addEventListener("scroll", infiniteScroll);
-        return () => { window.removeEventListener("scroll", infiniteScroll); }
-    }, [state]);
-
-    const infiniteScroll = () => {
-        const { documentElement, body } = document;
-        const scrollHeight = Math.max(documentElement.scrollHeight, body.scrollHeight);
-        const scrollTop = Math.max(documentElement.scrollTop, body.scrollTop);
-        const clientHeight = documentElement.clientHeight;
-        if (scrollTop + clientHeight >= scrollHeight) {
-            // getReview();
-            console.log("더불러")
         }
-        console.log(scrollHeight, scrollTop, clientHeight)
-    }
+    }, [state]);
 
     const handlePage = (num) => {
         setIndex(num);
@@ -80,7 +63,6 @@ function Search(props) {
         console.log(index)
     }
 
-
     const handleChange = (e) => {
         setSearch(e.target.value);
     }
@@ -92,14 +74,12 @@ function Search(props) {
     }
 
     function paginate(items, pageNumber, itemNumber) {
-        const page = [];
         const startIndex = (pageNumber - 1) * itemNumber
-        for (var i = 0; i < itemNumber; i++) {
 
-            page.push(items[(startIndex + i)])
-        }
-        console.log("뿌릴 data22222222222222222", page)
-        return page
+        return _(items)
+            .slice(startIndex)
+            .take(itemNumber)
+            .value();
     }
 
     async function handlebookmark(index, place) {
@@ -134,7 +114,7 @@ function Search(props) {
 
     return (
         <Container >
-            <Link to="/" className="d-flex justify-content-center" ><Image src={ohuh} /></Link>
+            <Link to="/"><Image src={ohuh} /></Link>
             <Row className="mb-2" className="d-flex justify-content-center">
                 <Form style={{ width: "90vw" }} onSubmit={handleSubmit}>
                     <InputGroup size="lg">
@@ -157,7 +137,7 @@ function Search(props) {
                 {pagePlace.map((place, index) => {
                     return (
                         <Col key={index} md={6} >
-                            <Card align="right" border="info" style={{ margin: "2%" }}>
+                            <Card align="center" border="info" style={{ margin: "2%" }}>
                                 <Row className="d-flex justify-content-between">
                                     <Card.Header style={{ margin: "0", marginLeft: "3%", marginRight: "3%", fontSize: '200%', fontWeight: 'bold', width: "100vw" }} >{place.name}
                                         {console.log(bookmark.findIndex(i => i.name === place.name))}
@@ -173,7 +153,7 @@ function Search(props) {
                                 <Card.Body>
                                     <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
                                         {place.address} </Card.Text>
-                                    <Link to={`/place?id=${index}&place=${place.name}`} >
+                                    <Link to={`/place?name=${place.name}&src=${place.img}&address=${place.address}`} >
                                         <Button variant="info"> {place.name} 자세히 살펴보기</Button>
                                     </Link>
                                 </Card.Body>