Skip to content

GitLab

Commit 0a8413a1 authored by baesangjune's avatar baesangjune
Browse files

페이지네이션 수정 및 랜더링문제 해결

parent ea78c498
Show whitespace changes
Inline Side-by-side
client/.eslintcache
View file @ 0a8413a1
[{"C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Pages\\Bookmark.js":"1","C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Pages\\Place.js":"2","C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Pages\\Search.js":"3","C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Pages\\App.js":"4"},{"size":5770,"mtime":1612274308433,"results":"5","hashOfConfig":"6"},{"size":6513,"mtime":1612273971390,"results":"7","hashOfConfig":"6"},{"size":8014,"mtime":1612274731884,"results":"8","hashOfConfig":"6"},{"size":6659,"mtime":1612274895073,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"13y9yvi",{"filePath":"12","messages":"13","errorCount":1,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"14","messages":"15","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"16","messages":"17","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Pages\\Bookmark.js",["18","19","20"],"C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Pages\\Place.js",["21"],"C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Pages\\Search.js",["22","23","24"],"C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Pages\\App.js",["25"],{"ruleId":"26","severity":1,"message":"27","line":2,"column":45,"nodeType":"28","messageId":"29","endLine":2,"endColumn":48},{"ruleId":"26","severity":1,"message":"30","line":2,"column":50,"nodeType":"28","messageId":"29","endLine":2,"endColumn":56},{"ruleId":"31","severity":1,"message":"32","line":66,"column":8,"nodeType":"33","endLine":66,"endColumn":18,"suggestions":"34"},{"ruleId":null,"fatal":true,"severity":2,"message":"35","line":4,"column":2},{"ruleId":"26","severity":1,"message":"36","line":21,"column":12,"nodeType":"28","messageId":"29","endLine":21,"endColumn":17},{"ruleId":"31","severity":1,"message":"37","line":64,"column":8,"nodeType":"33","endLine":64,"endColumn":15,"suggestions":"38"},{"ruleId":"39","severity":1,"message":"40","line":136,"column":35,"nodeType":"41","endLine":136,"endColumn":76},{"ruleId":"26","severity":1,"message":"42","line":4,"column":64,"nodeType":"28","messageId":"29","endLine":4,"endColumn":68},"no-unused-vars","'Nav' is defined but never used.","Identifier","unusedVar","'Navbar' is defined but never used.","react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'getBookmark'. Either include it or remove the dependency array.","ArrayExpression",["43"],"Parsing error: Unexpected token\n\n 2 | import axios from 'axios';\n 3 | import React, { useEffect, useState } from 'react';\n> 4 | <<<<<<< HEAD\n | ^\n 5 | import { Container, Image } from 'react-bootstrap';\n 6 | import queryString from 'query-string'\n 7 | import ohuh from '../ohuh-sm.PNG';","'error' is assigned a value but never used.","React Hook useEffect has missing dependencies: 'getAssociation', 'getBookmark', 'props.history', and 'search'. Either include them or remove the dependency array.",["44"],"react/jsx-no-duplicate-props","No duplicate props allowed","JSXAttribute","'Card' is defined but never used.",{"desc":"45","fix":"46"},{"desc":"47","fix":"48"},"Update the dependencies array to be: [bookmark, getBookmark]",{"range":"49","text":"50"},"Update the dependencies array to be: [getAssociation, getBookmark, props.history, search, state]",{"range":"51","text":"52"},[2332,2342],"[bookmark, getBookmark]",[2429,2436],"[getAssociation, getBookmark, props.history, search, state]"] [{"C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Pages\\Bookmark.js":"1","C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Pages\\Place.js":"2","C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Pages\\Search.js":"3","C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Pages\\App.js":"4","C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Components\\Signup.js":"5","C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Components\\Paginations.js":"6"},{"size":5982,"mtime":1612283271210,"results":"7","hashOfConfig":"8"},{"size":6513,"mtime":1612273971390,"results":"9","hashOfConfig":"8"},{"size":6981,"mtime":1612283645060,"results":"10","hashOfConfig":"8"},{"size":7440,"mtime":1612280171800,"results":"11","hashOfConfig":"8"},{"size":2959,"mtime":1612275114296,"results":"12","hashOfConfig":"8"},{"size":4208,"mtime":1612282364720,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"13y9yvi",{"filePath":"16","messages":"17","errorCount":1,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"18","messages":"19","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"20","messages":"21","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Pages\\Bookmark.js",["26","27"],"C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Pages\\Place.js",["28"],"C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Pages\\Search.js",["29","30","31"],"C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Pages\\App.js",["32"],"C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Components\\Signup.js",[],"C:\\Users\\노트북펜\\Desktop\\2021YDK\\search-page\\client\\src\\Components\\Paginations.js",[],{"ruleId":"33","severity":1,"message":"34","line":26,"column":19,"nodeType":"35","messageId":"36","endLine":26,"endColumn":30},{"ruleId":"37","severity":1,"message":"38","line":77,"column":8,"nodeType":"39","endLine":77,"endColumn":10,"suggestions":"40"},{"ruleId":null,"fatal":true,"severity":2,"message":"41","line":4,"column":2},{"ruleId":"33","severity":1,"message":"42","line":23,"column":12,"nodeType":"35","messageId":"36","endLine":23,"endColumn":17},{"ruleId":"37","severity":1,"message":"43","line":58,"column":8,"nodeType":"39","endLine":58,"endColumn":15,"suggestions":"44"},{"ruleId":"45","severity":1,"message":"46","line":116,"column":35,"nodeType":"47","endLine":116,"endColumn":76},{"ruleId":"33","severity":1,"message":"48","line":4,"column":64,"nodeType":"35","messageId":"36","endLine":4,"endColumn":68},"no-unused-vars","'bookmarkArr' is assigned a value but never used.","Identifier","unusedVar","react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'getBookmark'. Either include it or remove the dependency array.","ArrayExpression",["49"],"Parsing error: Unexpected token\n\n 2 | import axios from 'axios';\n 3 | import React, { useEffect, useState } from 'react';\n> 4 | <<<<<<< HEAD\n | ^\n 5 | import { Container, Image } from 'react-bootstrap';\n 6 | import queryString from 'query-string'\n 7 | import ohuh from '../ohuh-sm.PNG';","'error' is assigned a value but never used.","React Hook useEffect has missing dependencies: 'getAssociation', 'getBookmark', 'props.history', and 'search'. Either include them or remove the dependency array.",["50"],"react/jsx-no-duplicate-props","No duplicate props allowed","JSXAttribute","'Card' is defined but never used.",{"desc":"51","fix":"52"},{"desc":"53","fix":"54"},"Update the dependencies array to be: [getBookmark]",{"range":"55","text":"56"},"Update the dependencies array to be: [getAssociation, getBookmark, props.history, search, state]",{"range":"57","text":"58"},[2593,2595],"[getBookmark]",[2100,2107],"[getAssociation, getBookmark, props.history, search, state]"]
\ No newline at end of file \ No newline at end of file
client/src/Components/Paginations.js
View file @ 0a8413a1
...@@ -7,6 +7,23 @@ function Paginations(props) { ...@@ -7,6 +7,23 @@ function Paginations(props) {
return ( return (
<> <>
<style type="text/css">
{`
.page-link, .page-link:hover {
color: #17a2b8;
border: 0;
}
.page-link:focus {
box-shadow: 0 0 0 0;
}
.page-item.active .page-link {
background-color: #17a2b8;
color: #fff;
}
`}
</style>
{(props.endPage > 5) ? {(props.endPage > 5) ?
<Pagination > <Pagination >
<Pagination.First onClick={() => props.handlePage(1)} /> <Pagination.First onClick={() => props.handlePage(1)} />
......
client/src/Pages/App.js
View file @ 0a8413a1
...@@ -53,6 +53,24 @@ function App() { ...@@ -53,6 +53,24 @@ function App() {
return ( return (
<>
<style type="text/css">
{`
@font-face {
font-family: 'Jal_Onuel';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Jal_Onuel.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body{font-family:'Jal_Onuel'}
Nav{
font-color: 'red';
}
`}
</style>
<Container className="vh-100 "> <Container className="vh-100 ">
<Col xs={12} > <Col xs={12} >
<Nav className="justify-content-end" bg="#fff" variant="light" style={{}} > <Nav className="justify-content-end" bg="#fff" variant="light" style={{}} >
...@@ -157,8 +175,7 @@ function App() { ...@@ -157,8 +175,7 @@ function App() {
</Row> */} </Row> */}
</Col> </Col>
</Container> </Container>
</>
); );
} }
......
client/src/Pages/Bookmark.js
View file @ 0a8413a1
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { Col, Card, Container, Row, Button, Nav, Navbar, Image } from "react-bootstrap" import { Col, Card, Container, Row, Button, Image } from "react-bootstrap"
import axios from "axios" import axios from "axios"
import ohuh from '../ohuh-sm.PNG'; import ohuh from '../ohuh-sm.PNG';
import catchErrors from '../utils/catchErrors.js' import catchErrors from '../utils/catchErrors.js'
import { isAuthenticated } from '../utils/auth' import { isAuthenticated } from '../utils/auth'
import * as Icon from 'react-bootstrap-icons'; import * as Icon from 'react-bootstrap-icons';
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import Paginations from '../Components/Paginations';
import _ from 'lodash';
function Bookmark() { function Bookmark() {
const [error, setError] = useState('') const [error, setError] = useState('')
const [bookmark, setBookmark] = useState([]) const [bookmark, setBookmark] = useState([true, true, true, true])
const [pagePlace, setPagePlace] = useState([]) const [pagePlace, setpagePlace] = useState([])
const [index, setIndex] = useState(1);
const [endPage, setEndPage] = useState(1)
const [bookmarkPlace, setBookmarkPlace] = useState([{ name: " ", address: " ", img: " " }])
const user = isAuthenticated() const user = isAuthenticated()
async function getBookmark() { async function getBookmark() {
try { try {
console.log("bookmarkArr 까지는 온다.")
const bookmarkArr = []; const bookmarkArr = [];
const response = await axios.get(`/api/users/bookmark?ID=${user}`) const response = await axios.get(`/api/users/bookmark?ID=${user}`)
setPagePlace(response.data.bookmark) setBookmarkPlace(response.data.bookmark)
for (let a = 0; a < pagePlace.length; a++) {
bookmarkArr.push(true)
}
setBookmark(bookmarkArr)
console.log("bookmarkArr=",bookmarkArr)
} catch (err) { } catch (err) {
catchErrors(err, setError(err)) catchErrors(err, setError(err))
console.log("북마크에러", error) console.log("북마크에러", error)
...@@ -37,9 +35,9 @@ function Bookmark() { ...@@ -37,9 +35,9 @@ function Bookmark() {
async function handleBookmark(index) { async function handleBookmark(index) {
if (!bookmark[index]) { if (!bookmark[index]) {
console.log(pagePlace[index]) console.log(bookmarkPlace[index])
try { try {
const response = await axios.put(`/api/users/bookmark?ID=${user}&place=${pagePlace[index]._id}`) const response = await axios.put(`/api/users/bookmark?ID=${user}&place=${bookmarkPlace[index]._id}`)
alert(response.data, '북마크가 저장되었습니다.') alert(response.data, '북마크가 저장되었습니다.')
const showArr = bookmark const showArr = bookmark
showArr[index] = true showArr[index] = true
...@@ -50,21 +48,39 @@ function Bookmark() { ...@@ -50,21 +48,39 @@ function Bookmark() {
} }
} else { } else {
try { try {
const response = await axios.delete(`/api/users/bookmark?ID=${user}&place=${pagePlace[index]._id}`) const response = await axios.delete(`/api/users/bookmark?ID=${user}&place=${bookmarkPlace[index]._id}`)
alert(response.data, '저장된 북마크가 삭제되었습니다.') alert(response.data, '저장된 북마크가 삭제되었습니다.')
const showArr = bookmark getBookmark()
showArr[index] = false
setBookmark(showArr)
console.log("bookmark=", bookmark) console.log("bookmark=", bookmark)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
} }
} }
const handlePage = (num) => {
setIndex(num);
}
function paginate(items, pageNumber, itemNumber) {
const startIndex = (pageNumber - 1) * itemNumber
return _(items)
.slice(startIndex)
.take(itemNumber)
.value();
}
useEffect(() => { useEffect(() => {
getBookmark() getBookmark()
}, [bookmark]) }, [])
useEffect(() => {
setpagePlace(paginate(bookmarkPlace, index, 4))
setEndPage(Math.ceil((bookmarkPlace.length / 4)))
}, [bookmarkPlace, index])
return ( return (
<Container> <Container>
...@@ -75,25 +91,26 @@ function Bookmark() { ...@@ -75,25 +91,26 @@ function Bookmark() {
</div> </div>
</div> </div>
<Row className="d-flex flex-wrap"> <Row className="d-flex flex-wrap">
{console.log("#####################33", pagePlace)} {console.log("#####################33", bookmarkPlace)}
{pagePlace.map((place, index) => { {pagePlace.map((place, index) => {
return ( return (
<Col key={index} md={6} > <Col key={index} md={6} >
<Card align="center" border="info" style={{ margin: "3%" }}> <Card border="info" style={{ margin: "3%" }}>
<Card.Header className="d-flex justify-content-center" style={{ margin: "0", fontSize: '200%', fontWeight: 'bold' }} >{place.name} <Card.Header style={{ margin: "0", fontSize: '200%', fontWeight: 'bold' }} >
{user ? {user ?
<Button <Button
className="float-right" style={{marginRight:"3%"}}
variant={bookmark[index] ? "info" : "light"} variant={bookmark[index] ? "info" : "light"}
onClick={() => handleBookmark(index, place)}> onClick={() => handleBookmark(index, place)}>
<Icon.BookmarkStarFill size={35} /> <Icon.BookmarkStarFill size={35} />
{console.log("bookmark", bookmark)} {console.log("bookmark", bookmark)}
{console.log("bookmark[index]", bookmark[index])}</Button> : null} {console.log("bookmark[index]", bookmark[index])}</Button> : null}
{place.name}
</Card.Header> </Card.Header>
<Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={place.img} /> <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={place.img} />
<Card.Body > <Card.Body >
<Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} > <Card.Text style={{ overflow: 'auto', fontSize: '150%', width: '100%', height: "60px" }} >
{place.address} </Card.Text> {place.address} </Card.Text>
<Link to={`/place?name=${place.name}&src=${place.img}&address=${place.address}`} > <Link to={`/place?name=${place.name}&src=${place.img}&address=${place.address}`} >
<Button variant="info"> {place.name} 자세히 살펴보기</Button> <Button variant="info"> {place.name} 자세히 살펴보기</Button>
...@@ -103,8 +120,9 @@ function Bookmark() { ...@@ -103,8 +120,9 @@ function Bookmark() {
</Col> </Col>
) )
})} })}
</Row>
<Row className="mt-2 d-flex justify-content-center">
<Paginations index={index} endPage={endPage} handlePage={handlePage}></Paginations>
</Row> </Row>
</Container > </Container >
) )
......
client/src/Pages/Search.js
View file @ 0a8413a1
...@@ -36,7 +36,6 @@ function Search(props) { ...@@ -36,7 +36,6 @@ function Search(props) {
const getAssociation = () => { const getAssociation = () => {
axios.get(`/api/search/association?keyword=${search}`) axios.get(`/api/search/association?keyword=${search}`)
.then(res => { .then(res => {
console.log("Associations = ", res.data)
setAssociation(res.data) setAssociation(res.data)
}) })
.catch(err => { .catch(err => {
...@@ -60,8 +59,6 @@ function Search(props) { ...@@ -60,8 +59,6 @@ function Search(props) {
const handlePage = (num) => { const handlePage = (num) => {
setIndex(num); setIndex(num);
console.log("pagenation num", num)
console.log(index)
} }
const handleChange = (e) => { const handleChange = (e) => {
...@@ -85,7 +82,7 @@ function Search(props) { ...@@ -85,7 +82,7 @@ function Search(props) {
} }
async function handlebookmark(index, place) { async function handlebookmark(index, place) {
if (!bookmark.includes(place.name)) { if (!bookmark[index]) {
console.log(pagePlace[index]) console.log(pagePlace[index])
try { try {
const response = await axios.put(`/api/users/bookmark?ID=${user}&place=${pagePlace[index]._id}`) const response = await axios.put(`/api/users/bookmark?ID=${user}&place=${pagePlace[index]._id}`)
...@@ -93,7 +90,8 @@ function Search(props) { ...@@ -93,7 +90,8 @@ function Search(props) {
const showArr = bookmark const showArr = bookmark
showArr[index] = true showArr[index] = true
setBookmark(showArr) setBookmark(showArr)
console.log("bookmark=", bookmark) getBookmark()
console.log("bookmark111111=", bookmark)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
...@@ -104,7 +102,9 @@ function Search(props) { ...@@ -104,7 +102,9 @@ function Search(props) {
const showArr = bookmark const showArr = bookmark
showArr[index] = false showArr[index] = false
setBookmark(showArr) setBookmark(showArr)
console.log("bookmark=", bookmark) getBookmark()
console.log("bookmark2222222=", bookmark)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
...@@ -131,16 +131,15 @@ function Search(props) { ...@@ -131,16 +131,15 @@ function Search(props) {
</Row> </Row>
<Row> <Row>
{console.log("#####################33", pagePlace)}
{pagePlace.map((place, index) => { {pagePlace.map((place, index) => {
return ( return (
<Col key={index} md={6} > <Col key={index} md={6} >
<Card border="info" style={{ margin: "2%" }}> <Card border="info" style={{ margin: "2%" }}>
<Row> <Row>
<Card.Header style={{ margin: "0", marginLeft: "3%", marginRight: "3%", fontSize: '200%', fontWeight: 'bold', width: "100vw" }} > <Card.Header style={{ margin: "0", marginLeft: "3%", marginRight: "3%", fontSize: '200%', fontWeight: 'bold', width: "100vw" }} >
{console.log(bookmark.findIndex(i => i.name === place.name))}
{user ? {user ?
<Button <Button
style={{ marginRight: "3%" }}
variant={bookmark.findIndex(i => i.name === place.name) !== -1 ? "info" : "light"} variant={bookmark.findIndex(i => i.name === place.name) !== -1 ? "info" : "light"}
onClick={() => handlebookmark(index, place)}> onClick={() => handlebookmark(index, place)}>
<Icon.BookmarkStarFill size={35} /> <Icon.BookmarkStarFill size={35} />
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment