Skip to content

GitLab

Commit 4071c980 authored by Kim, Chaerin's avatar Kim, Chaerin
Browse files

Merge remote-tracking branch 'origin/BAE' into cherry

parents df8b798d 2b2b96aa
Hide whitespace changes
Inline Side-by-side
client/.eslintcache
View file @ 4071c980
[{"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Pages\\Bookmark.js":"1","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Pages\\App.js":"2","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Pages\\Search.js":"3","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Pages\\Place.js":"4","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Components\\PrivateRoute.js":"5"},{"size":5286,"mtime":1612155520769,"results":"6","hashOfConfig":"7"},{"size":6708,"mtime":1612155591498,"results":"8","hashOfConfig":"7"},{"size":7226,"mtime":1612289264469,"results":"9","hashOfConfig":"7"},{"size":3297,"mtime":1612290072703,"results":"10","hashOfConfig":"7"},{"size":438,"mtime":1611896266513,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":12,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"1n20xnc",{"filePath":"14","messages":"15","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"16","messages":"17","errorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"18","messages":"19","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Pages\\Bookmark.js",["22","23","24","25","26","27","28","29","30","31","32","33"],"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Pages\\App.js",["34"],"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Pages\\Search.js",["35","36","37","38","39"],"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Pages\\Place.js",["40","41","42","43"],"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Components\\PrivateRoute.js",[],{"ruleId":"44","severity":1,"message":"45","line":2,"column":45,"nodeType":"46","messageId":"47","endLine":2,"endColumn":48},{"ruleId":"44","severity":1,"message":"48","line":2,"column":50,"nodeType":"46","messageId":"47","endLine":2,"endColumn":56},{"ruleId":"44","severity":1,"message":"49","line":17,"column":12,"nodeType":"46","messageId":"47","endLine":17,"endColumn":16},{"ruleId":"44","severity":1,"message":"50","line":17,"column":18,"nodeType":"46","messageId":"47","endLine":17,"endColumn":25},{"ruleId":"44","severity":1,"message":"51","line":18,"column":12,"nodeType":"46","messageId":"47","endLine":18,"endColumn":17},{"ruleId":"44","severity":1,"message":"52","line":18,"column":19,"nodeType":"46","messageId":"47","endLine":18,"endColumn":27},{"ruleId":"44","severity":1,"message":"53","line":19,"column":12,"nodeType":"46","messageId":"47","endLine":19,"endColumn":17},{"ruleId":"44","severity":1,"message":"54","line":20,"column":12,"nodeType":"46","messageId":"47","endLine":20,"endColumn":17},{"ruleId":"44","severity":1,"message":"55","line":20,"column":19,"nodeType":"46","messageId":"47","endLine":20,"endColumn":27},{"ruleId":"44","severity":1,"message":"56","line":23,"column":12,"nodeType":"46","messageId":"47","endLine":23,"endColumn":19},{"ruleId":"44","severity":1,"message":"57","line":23,"column":21,"nodeType":"46","messageId":"47","endLine":23,"endColumn":31},{"ruleId":"58","severity":1,"message":"59","line":65,"column":8,"nodeType":"60","endLine":65,"endColumn":10,"suggestions":"61"},{"ruleId":"44","severity":1,"message":"62","line":4,"column":64,"nodeType":"46","messageId":"47","endLine":4,"endColumn":68},{"ruleId":"44","severity":1,"message":"45","line":4,"column":83,"nodeType":"46","messageId":"47","endLine":4,"endColumn":86},{"ruleId":"44","severity":1,"message":"53","line":23,"column":12,"nodeType":"46","messageId":"47","endLine":23,"endColumn":17},{"ruleId":"58","severity":1,"message":"63","line":57,"column":8,"nodeType":"60","endLine":57,"endColumn":15,"suggestions":"64"},{"ruleId":"44","severity":1,"message":"65","line":113,"column":9,"nodeType":"46","messageId":"47","endLine":113,"endColumn":13},{"ruleId":"66","severity":1,"message":"67","line":118,"column":35,"nodeType":"68","endLine":118,"endColumn":76},{"ruleId":"44","severity":1,"message":"69","line":1,"column":10,"nodeType":"70","messageId":"47","endLine":1,"endColumn":15},{"ruleId":"44","severity":1,"message":"53","line":11,"column":10,"nodeType":"46","messageId":"47","endLine":11,"endColumn":15},{"ruleId":"58","severity":1,"message":"71","line":30,"column":6,"nodeType":"60","endLine":30,"endColumn":8,"suggestions":"72"},{"ruleId":"73","severity":1,"message":"74","line":90,"column":11,"nodeType":"75","endLine":90,"endColumn":44},"no-unused-vars","'Nav' is defined but never used.","Identifier","unusedVar","'Navbar' is defined but never used.","'page' is assigned a value but never used.","'setPage' is assigned a value but never used.","'index' is assigned a value but never used.","'setIndex' is assigned a value but never used.","'error' is assigned a value but never used.","'state' is assigned a value but never used.","'setState' is assigned a value but never used.","'showSet' is assigned a value but never used.","'setShowSet' is assigned a value but never used.","react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'getBookmark'. Either include it or remove the dependency array.","ArrayExpression",["76"],"'Card' is defined but never used.","React Hook useEffect has missing dependencies: 'getAssociation', 'getBookmark', 'props.history', and 'search'. Either include them or remove the dependency array.",["77"],"'time' is assigned a value but never used.","react/jsx-no-duplicate-props","No duplicate props allowed","JSXAttribute","'kakao' is defined but never used.","Program","React Hook useEffect has a missing dependency: 'getReview'. Either include it or remove the dependency array.",["78"],"jsx-a11y/anchor-is-valid","The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md","JSXOpeningElement",{"desc":"79","fix":"80"},{"desc":"81","fix":"82"},{"desc":"83","fix":"84"},"Update the dependencies array to be: [getBookmark]",{"range":"85","text":"86"},"Update the dependencies array to be: [getAssociation, getBookmark, props.history, search, state]",{"range":"87","text":"88"},"Update the dependencies array to be: [getReview]",{"range":"89","text":"90"},[2281,2283],"[getBookmark]",[2159,2166],"[getAssociation, getBookmark, props.history, search, state]",[1055,1057],"[getReview]"] [{"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Components\\Paginations.js":"1"},{"size":4208,"mtime":1612292675311,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1n20xnc","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Components\\Paginations.js",[]]
\ No newline at end of file \ No newline at end of file
client/src/Components/Paginations.js
View file @ 4071c980
...@@ -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)} />
...@@ -50,4 +67,4 @@ function Paginations(props) { ...@@ -50,4 +67,4 @@ function Paginations(props) {
) )
} }
export default Paginations export default Paginations
\ No newline at end of file
client/src/Pages/App.js
View file @ 4071c980
...@@ -53,112 +53,87 @@ function App() { ...@@ -53,112 +53,87 @@ function App() {
return ( return (
<Container className="vh-100 "> <>
<Col xs={12} > <style type="text/css">
<Nav className="justify-content-end" bg="#fff" variant="light" style={{}} > {`
{user ? <> .nav-link{
<Nav.Link onClick={() => handleLogout()}>로그아웃</Nav.Link> color: #17a2b8;
<Nav.Link href='/bookmark'>북마크</Nav.Link> }
</>
: ( `}
<> </style>
<Nav.Link href="/signup">회원가입</Nav.Link> <Container className="vh-100 ">
<Nav.Link href="/login">로그인</Nav.Link> <Col xs={12} >
</> <Nav className="justify-content-end" bg="#fff" variant="light" id="nav">
)} {user ? <>
</Nav> <Nav.Link onClick={() => handleLogout()}>로그아웃</Nav.Link>
<Row className="justify-content-center" md={2}> <Nav.Link href='/bookmark'>북마크</Nav.Link>
<Col className="d-flex justify-content-center"> </>
<Image src={ohuh} style={{ margin: "3%", marginTop: "3%" }} fluid /> : (
</Col> <>
</Row> <Nav.Link href="/signup">회원가입</Nav.Link>
<Row style={{ marginBottom: "5%" }}> <Nav.Link href="/login">로그인</Nav.Link>
<Form className="vw-100" onSubmit={handleSubmit}> </>
<InputGroup > )}
<Form.Control </Nav>
size="lg" <Row className="justify-content-center" md={2}>
placeholder="검색어를 입력하세요." <Col className="d-flex justify-content-center">
aria-label="Large" <Image src={ohuh} style={{ margin: "3%", marginTop: "3%" }} fluid />
aria-describedby="inputGroup-sizing-sm" </Col>
onChange={handleChange} </Row>
/> <Row style={{ marginBottom: "5%" }}>
<InputGroup.Append> <Form className="vw-100" onSubmit={handleSubmit}>
<Button type='submit' variant="outline-secondary">검색</Button> <InputGroup >
</InputGroup.Append> <Form.Control
</InputGroup> size="lg"
</Form> placeholder="검색어를 입력하세요."
</Row> aria-label="Large"
<div class="row mb-2"> aria-describedby="inputGroup-sizing-sm"
<div class="col-md-6"> onChange={handleChange}
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> />
<div class="col p-4 d-flex flex-column position-static"> <InputGroup.Append >
<strong class="d-inline-block mb-2 text-info">인기관광지</strong> <Button type='submit' variant="outline-secondary">검색</Button>
<h3 class="mb-0">{recommend.name}</h3> </InputGroup.Append>
<Image variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={recommend.img} /> </InputGroup>
<p class="card-text mb-auto">{recommend.address}</p> </Form>
<Link to={`/place?name=${recommend.name}&src=${recommend.img}&address=${recommend.address}`} > </Row>
<Button variant="info"> {recommend.name} 자세히 살펴보기</Button>
</Link> <Row xs={6}>
</div> <Col md={6} xs={12}>
<div class="col-auto d-none d-lg-block"> <Card border="info" style={{ margin: "2%" }}>
<Card.Title style={{ margin: "0", paddingTop: "3%", fontSize: '200%', fontWeight: 'bold' }} >
</div> <Row style={{ fontSize: "60%", marginLeft: "7%" }}><strong class="border p-2 text-danger mb-2">인기관광지</strong></Row>
</div> <Row style={{ fontSize: "100%", marginLeft: "8%" }}>{recommend.name}</Row></Card.Title>
</div> <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={recommend.img} />
<div class="col-md-6"> <Card.Body style={{ paddingTop: "0" }} >
<div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> <Card.Text style={{ margin: "0", overflow: 'auto', fontSize: '120%', width: '100%', height: "65px" }} >
<div class="col p-4 d-flex flex-column position-static"> {recommend.address} </Card.Text>
<strong class="d-inline-block mb-2 text-success">최근검색 관광지</strong> <Link to={`/place?name=${recommend.name}&src=${recommend.img}&address=${recommend.address}`} >
<h3 class="mb-0">{latest.name}</h3> <Button variant="info"> {recommend.name} 자세히 살펴보기</Button>
<Image variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={latest.img} /> </Link>
<p class="mb-auto">{latest.address}</p> </Card.Body>
<Link to={`/place?name=${latest.name}&src=${latest.img}&address=${latest.address}`} > </Card>
<Button variant="info"> {latest.name} 자세히 살펴보기</Button> </Col>
</Link>
</div> <Col md={6} xs={12}>
<div class="col-auto d-none d-lg-block"> <Card border="info" style={{ margin: "2%" }} >
<Card.Title style={{ margin: "0", paddingTop: "3%", fontSize: '200%', fontWeight: 'bold' }} >
</div> <Row style={{ fontSize: "60%", marginLeft: "7%" }}><strong class="border p-2 text-success mb-2">최근 검색 관광지</strong></Row>
</div> <Row style={{ fontSize: "100%", marginLeft: "8%" }}>{latest.name}</Row></Card.Title>
</div> <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={latest.img} />
</div> <Card.Body style={{ paddingTop: "0" }}>
<Card.Text style={{ margin: "0", overflow: 'auto', fontSize: '120%', width: '100%', height: "65px" }} >
{latest.address} </Card.Text>
{/* <Row xs={6}> <Link to={`/place?name=${latest.name}&src=${latest.img}&address=${latest.address}`} >
<Col md={6} xs={12}> <Button variant="info"> {latest.name} 자세히 살펴보기</Button>
<h1 className=" d-flex justify-content-center" style={{ marginBottom: "7%" }}>인기관광지</h1> </Link>
<Card align="center" border="info" style={{ margin: "3%" }}> </Card.Body>
<Card.Header style={{ margin: "0",fontSize: '200%', fontWeight: 'bold' }} >{recommend.name}</Card.Header> </Card>
<Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={recommend.img} /> </Col>
<Card.Body > </Row>
<Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} > </Col>
{recommend.address} </Card.Text> </Container>
<Link to={`/place?id=${1}&place=${recommend.name}`} > </>
<Button variant="primary"> {recommend.name} 자세히 살펴보기</Button>
</Link>
</Card.Body>
</Card>
</Col>
<Col md={6} xs={12}>
<h1 className=" d-flex justify-content-center" style={{ marginBottom: "7%" }}>최근 검색관광지</h1>
<Card align="center" border="info" style={{ margin: "3%" }} >
<Card.Header style={{ margin: "0", fontSize: '200%', fontWeight: 'bold'}} bg="danger">{latest.name}</Card.Header>
<Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={latest.img} />
<Card.Body >
<Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
{latest.address} </Card.Text>
<Link to={`/place?id=${1}&place=${latest.name}`} >
<Button variant="primary"> {latest.name} 자세히 살펴보기</Button>
</Link>
</Card.Body>
</Card>
</Col>
</Row> */}
</Col>
</Container>
); );
} }
......
client/src/Pages/Bookmark.js
View file @ 4071c980
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';
const INIT_PAGE = {
bookmark: []
}
function Bookmark() { function Bookmark() {
const [page, setPage] = useState(INIT_PAGE)
const [index, setIndex] = useState(1);
const [error, setError] = useState('') const [error, setError] = useState('')
const [state, setState] = useState(false);
const [bookmark, setBookmark] = useState([true, true, true, true]) const [bookmark, setBookmark] = useState([true, true, true, true])
const [pagePlace, setPagePlace] = useState([]) const [pagePlace, setpagePlace] = useState([])
const [showSet, setShowSet] = useState([false, false, false, false]); 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 {
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)
} catch (error) { } catch (err) {
catchErrors(error, setError) catchErrors(err, setError(err))
console.log("북마크에러", error)
} }
} }
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
...@@ -49,50 +48,69 @@ function Bookmark() { ...@@ -49,50 +48,69 @@ 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()
}, []) }, [])
useEffect(() => {
setpagePlace(paginate(bookmarkPlace, index, 4))
setEndPage(Math.ceil((bookmarkPlace.length / 4)))
}, [bookmarkPlace, index])
return ( return (
<Container> <Container>
<Link to="/"><Image src={ohuh} /></Link> <Link to="/"><Image style={{ margin: "1%" }} src={ohuh} /></Link>
<div class="d-flex align-items-center p-3 text-white bg-info rounded shadow-sm"> <div class="d-flex align-items-center p-3 text-white bg-info rounded shadow-sm">
<div > <div >
<h1 class="h6 mb-0 text-white">북마크</h1> <h1 class="h6 mb-0 text-white">북마크</h1>
</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: "2%" }}>
<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: "65px" }} >
{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>
...@@ -102,8 +120,9 @@ function Bookmark() { ...@@ -102,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/Place.js
View file @ 4071c980
...@@ -32,18 +32,17 @@ function Place(props) { ...@@ -32,18 +32,17 @@ function Place(props) {
return ( return (
<Container> <Container>
<Link to="/"><Image src={ohuh} /></Link>
<Link to="/"><Image style={{ margin: "1%" }} src={ohuh} /></Link>
<div class="d-flex align-items-center p-3 my-3 text-white bg-info rounded shadow-sm"> <div class="d-flex align-items-center p-3 my-3 text-white bg-info rounded shadow-sm">
<div >
<h1 class="h6 mb-0 text-white">{name}</h1> <h1 class="h6 mb-0 text-white">{name}</h1>
</div>
</div> </div>
<div class="my-3 p-3 bg-white rounded shadow-sm"> <div class="my-3 p-3 bg-white rounded shadow-sm">
<h6 class="border-bottom pb-2 mb-0">관광지 정보</h6> <h6 class="border-bottom pb-2 mb-0">관광지 정보</h6>
<Row> <Row>
<Col> <Col>
<Image variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={src} /> <Image variant="top" style={{ padding: "5%", width: "100%", height: "100%" }} src={src} />
</Col> </Col>
<Col> <Col>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-muted pt-3">
......
client/src/Pages/Search.js
View file @ 4071c980
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import ohuh from '../ohuh-sm.PNG'; import ohuh from '../ohuh-sm.PNG';
import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button, Nav } from 'react-bootstrap'; import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button } from 'react-bootstrap';
import Paginations from '../Components/Paginations'; import Paginations from '../Components/Paginations';
import axios from 'axios'; import axios from 'axios';
import queryString from 'query-string' import queryString from 'query-string'
...@@ -16,12 +16,13 @@ function Search(props) { ...@@ -16,12 +16,13 @@ function Search(props) {
const [index, setIndex] = useState(1); const [index, setIndex] = useState(1);
const [search, setSearch] = useState(queryString.parse(props.location.search).keyword); const [search, setSearch] = useState(queryString.parse(props.location.search).keyword);
const [bookmark, setBookmark] = useState([]) const [bookmark, setBookmark] = useState([])
const user = isAuthenticated()
const [association, setAssociation] = useState([{ name: " ", address: " ", img: " " }]) const [association, setAssociation] = useState([{ name: " ", address: " ", img: " " }])
const [pagePlace, setPagePlace] = useState([{ name: " ", address: " ", img: " " }, { name: " ", address: " ", img: " " }]) const [pagePlace, setPagePlace] = useState([{ name: " ", address: " ", img: " " }, { name: " ", address: " ", img: " " }])
const [endPage, setEndPage] = useState(1) const [endPage, setEndPage] = useState(1)
const [error, setError] = useState('') const [error, setError] = useState('')
const user = isAuthenticated()
async function getBookmark() { async function getBookmark() {
try { try {
const response = await axios.get(`/api/users/bookmark?ID=${user}`) const response = await axios.get(`/api/users/bookmark?ID=${user}`)
...@@ -34,7 +35,6 @@ function Search(props) { ...@@ -34,7 +35,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 => {
...@@ -58,8 +58,6 @@ function Search(props) { ...@@ -58,8 +58,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) => {
...@@ -70,6 +68,7 @@ function Search(props) { ...@@ -70,6 +68,7 @@ function Search(props) {
e.preventDefault() e.preventDefault()
setState(true) setState(true)
setIndex(1) setIndex(1)
setBookmark([false, false, false, false])
} }
function paginate(items, pageNumber, itemNumber) { function paginate(items, pageNumber, itemNumber) {
...@@ -84,14 +83,10 @@ function Search(props) { ...@@ -84,14 +83,10 @@ function Search(props) {
async function handlebookmark(index, place) { async function handlebookmark(index, place) {
const include = bookmark.findIndex(i => i.name === place.name) !== -1 const include = bookmark.findIndex(i => i.name === place.name) !== -1
if (!include) { if (!include) {
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}`)
alert(response.data, '북마크가 저장되었습니다.') alert(response.data, '북마크가 저장되었습니다.')
const showArr = bookmark getBookmark()
showArr[index] = true
setBookmark(showArr)
console.log("bookmark=", bookmark)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
...@@ -99,19 +94,12 @@ function Search(props) { ...@@ -99,19 +94,12 @@ function Search(props) {
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=${pagePlace[index]._id}`)
alert(response.data, '저장된 북마크가 삭제되었습니다.') alert(response.data, '저장된 북마크가 삭제되었습니다.')
const showArr = bookmark getBookmark()
showArr[index] = false
setBookmark(showArr)
console.log("bookmark=", bookmark)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
} }
} }
} }
let time = new Date()
return ( return (
<Container > <Container >
<Link to="/"><Image src={ohuh} /></Link> <Link to="/"><Image src={ohuh} /></Link>
...@@ -131,27 +119,27 @@ function Search(props) { ...@@ -131,27 +119,27 @@ function Search(props) {
</InputGroup> </InputGroup>
</Form> </Form>
</Row> </Row>
<Row className="d-flex flex-wrap"> <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 align="center" border="info" style={{ margin: "2%" }}> <Card border="info" style={{ margin: "2%" }}>
<Row className="d-flex justify-content-between"> <Row>
<Card.Header style={{ margin: "0", marginLeft: "3%", marginRight: "3%", fontSize: '200%', fontWeight: 'bold', width: "100vw" }} >{place.name} <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} />
</Button> : null} </Button> : null}
{place.name}
</Card.Header> </Card.Header>
</Row> </Row>
<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: '25px', width: '100%', height: "65px" }} >
{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>
......
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