Skip to content

GitLab

Commit 1bd65831 authored by baesangjune's avatar baesangjune
Browse files

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

parents 1b46e125 e08aede8
Expand all Show whitespace changes
Inline Side-by-side
client/README.md
View file @ 1bd65831
...@@ -6,7 +6,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo ...@@ -6,7 +6,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
In the project directory, you can run: In the project directory, you can run:
### `yarn start` ### `npm start`
Runs the app in the development mode.\ Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
...@@ -14,12 +14,12 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser. ...@@ -14,12 +14,12 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.\ The page will reload if you make edits.\
You will also see any lint errors in the console. You will also see any lint errors in the console.
### `yarn test` ### `npm test`
Launches the test runner in the interactive watch mode.\ Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `yarn build` ### `npm run build`
Builds the app for production to the `build` folder.\ Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance. It correctly bundles React in production mode and optimizes the build for the best performance.
...@@ -29,7 +29,7 @@ Your app is ready to be deployed! ...@@ -29,7 +29,7 @@ Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `yarn eject` ### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can’t go back!** **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
...@@ -65,6 +65,6 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/a ...@@ -65,6 +65,6 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/a
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `yarn build` fails to minify ### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
client/debug.log deleted 100644 → 0
View file @ 1b46e125
[0122/091810.668:ERROR:directory_reader_win.cc(43)] FindFirstFile: 지정된 경로를 찾을 수 없습니다. (0x3)
[0125/001732.960:ERROR:directory_reader_win.cc(43)] FindFirstFile: 지정된 경로를 찾을 수 없습니다. (0x3)
[0125/093515.306:ERROR:directory_reader_win.cc(43)] FindFirstFile: 지정된 경로를 찾을 수 없습니다. (0x3)
client/package-lock.json
View file @ 1bd65831
...@@ -9288,22 +9288,6 @@ ...@@ -9288,22 +9288,6 @@
"prepend-http": "^1.0.0", "prepend-http": "^1.0.0",
"query-string": "^4.1.0", "query-string": "^4.1.0",
"sort-keys": "^1.0.0" "sort-keys": "^1.0.0"
},
"dependencies": {
"query-string": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
"integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
"requires": {
"object-assign": "^4.1.0",
"strict-uri-encode": "^1.0.0"
}
},
"strict-uri-encode": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
}
} }
}, },
"npm-run-path": { "npm-run-path": {
...@@ -11120,13 +11104,12 @@ ...@@ -11120,13 +11104,12 @@
"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==" "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
}, },
"query-string": { "query-string": {
"version": "6.13.8", "version": "4.3.4",
"resolved": "https://registry.npmjs.org/query-string/-/query-string-6.13.8.tgz", "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
"integrity": "sha512-jxJzQI2edQPE/NPUOusNjO/ZOGqr1o2OBa/3M00fU76FsLXDVbJDv/p7ng5OdQyorKrkRz1oqfwmbe5MAMePQg==", "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
"requires": { "requires": {
"decode-uri-component": "^0.2.0", "object-assign": "^4.1.0",
"split-on-first": "^1.0.0", "strict-uri-encode": "^1.0.0"
"strict-uri-encode": "^2.0.0"
} }
}, },
"querystring": { "querystring": {
...@@ -12955,11 +12938,6 @@ ...@@ -12955,11 +12938,6 @@
"wbuf": "^1.7.3" "wbuf": "^1.7.3"
} }
}, },
"split-on-first": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
"integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
},
"split-string": { "split-string": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz", "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
...@@ -13135,9 +13113,9 @@ ...@@ -13135,9 +13113,9 @@
"integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==" "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
}, },
"strict-uri-encode": { "strict-uri-encode": {
"version": "2.0.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz", "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
"integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY=" "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
}, },
"string-length": { "string-length": {
"version": "4.0.1", "version": "4.0.1",
......
client/package.json
View file @ 1bd65831
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",
"bootstrap": "^4.5.3", "bootstrap": "^4.5.3",
"query-string": "^6.13.8",
"react": "^17.0.1", "react": "^17.0.1",
"react-bootstrap": "^1.4.0", "react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
...@@ -39,5 +38,5 @@ ...@@ -39,5 +38,5 @@
"last 1 safari version" "last 1 safari version"
] ]
}, },
"proxy": "http://localhost:3001" "proxy":"http://localhost:3001"
} }
client/src/Bookmark.js 0 → 100644
View file @ 1bd65831
import React, { useState, useEffect } from 'react'
import { Alert, Col, Card, Container, Form, Row, Button, Nav, Navbar } from "react-bootstrap"
import axios from "axios"
import catchErrors from './utils/catchErrors.js'
import { isAuthenticated } from './utils/auth'
import * as Icon from 'react-bootstrap-icons';
import Place from './Components/Place.js'
const INIT_PAGE = {
bookmark: []
}
function Bookmark() {
const [page, setPage] = useState(INIT_PAGE)
const [index, setIndex] = useState(1);
const [error, setError] = useState('')
const [state, setState] = useState(false);
const [bookmark, setBookmark] = useState([false, false, false, false])
const [pagePlace, setPagePlace] = useState([])
const [showSet, setShowSet] = useState([false, false, false, false]);
const user = isAuthenticated()
async function getBookmark() {
try {
const response = await axios.get(`/api/users/bookmark?ID=${user}`)
setPagePlace(response.data.bookmark)
} catch (error) {
catchErrors(error, setError)
}
}
async function handleBookmark(index) {
if (!bookmark[index]) {
console.log(pagePlace[index])
try {
const response = await axios.put(`/api/users/bookmark?ID=${user}&place=${pagePlace[index]._id}`)
alert(response.data, '북마크가 저장되었습니다.')
const showArr = bookmark
showArr[index] = true
setBookmark(showArr)
console.log("bookmark=", bookmark)
} catch (error) {
catchErrors(error, setError)
}
} else {
try {
const response = await axios.delete(`/api/users/bookmark?ID=${user}`)
alert(response.data, '저장된 북마크가 삭제되었습니다.')
const showArr = bookmark
showArr[index] = false
setBookmark(showArr)
console.log("bookmark=", bookmark)
} catch (error) {
catchErrors(error, setError)
}
}
}
useEffect(() => {
getBookmark()
}, [])
return (
<Container>
<Navbar bg="info" variant="dark">
<Navbar.Brand href="/">북마크</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="/">Home</Nav.Link>
</Nav>
</Navbar>
<Row className="d-flex flex-wrap">
{console.log("#####################33", pagePlace)}
{pagePlace.map((place, index) => {
return (
<Col key={index} md={6} >
<Card align="center" border="info" style={{ margin: "3%" }}>
<Card.Title className="d-flex justify-content-center" style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{place.name}
{user ?
<Button
variant={bookmark[index] ? "primary" : "light"}
onClick={() => handleBookmark(index, place)}>
<Icon.BookmarkStarFill size={35} />
{console.log("bookmark", bookmark)}
{console.log("bookmark[index]", bookmark[index])}</Button> : null}
</Card.Title>
<Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={place.img} />
<Card.Body >
<Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
{place.address} </Card.Text>
<Button variant="info" onClick={() => {
const showArr = [false, false, false, false]
showArr[index] = true
setShowSet(showArr)
}}>{place.name} 자세히 살펴보기</Button>
{/* <Place place={place} index={index} show={showSet[index]} onHide={() => setShowSet([false, false, false, false])} /> */}
</Card.Body>
</Card>
</Col>
)
})}
</Row>
</Container>
)
}
export default Bookmark
// async function handleSubmit(e){
// setState(true); //버튼이 눌려서 handlesubmit이될때 setState값이 true로 바뀐다
// try { //respons 서버에 post로 요청하여 데이터를 받아온다
// const response = await axios.post('/api/users/bookmark', page)
// setSuccess(true)
// } catch (error) {
// console.log(error)
// catchErrors(error, setError)
// }
// }
// useEffect(() => {
// getBookmark(user)
// }, [user])
\ No newline at end of file
client/src/Components/Login.js 0 → 100644
View file @ 1bd65831
import React, { useState, useEffect } from 'react'
import { Alert, Col, Container, Form, Row, Button, Spinner } from "react-bootstrap"
import axios from "axios"
import catchErrors from '../utils/catchErrors'
import { Redirect } from 'react-router-dom'
import { handleLogin } from '../utils/auth'
const INIT_USER = {
email: '',
password: ''
} //초기 유저에 이메일 비밀번호 설정
function Login() {
//const [<상태 값 저장 변수>, <상태 값 갱신 함수>] = useState(<상태 초기 값>);
const [user, setUser] = useState(INIT_USER)
const [disabled, setDisabled] = useState(true)
const [error, setError] = useState('')
const [success, setSuccess] = useState(false)
const [loading, setLoading] = useState(false)
useEffect(() => { //참거짓 판단 값들의 원소들이 element로 들어간다
const isUser = Object.values(user).every(el => Boolean(el))
isUser ? setDisabled(false) : setDisabled(true)
}, [user])
function handleChange(event) {
const {name, value} = event.target //{}안에 값을 이벤트.타겟에 지정?한다
setUser({...user, [name]: value})
}
async function handleSubmit(event) {
event.preventDefault() //리셋을 막는다
try {
setLoading(true)
setError('') //값을 배열로 설정
const response = await axios.post('/api/auth/login', user)
console.log(response.data)
handleLogin(response.data.userId)//로그인했을때 userid data를 넣는다
setSuccess(true)
} catch (error) {
catchErrors(error, setError)
} finally {
setLoading(false)
}
}
if (success) {
console.log('success', success)
return <Redirect to= '/'/> //성공하면 홈화면으로 간다
}
return (
<Container>
<Row className= 'vh-100 flex-column align-items-center justify-content-center'>
<h2>로그인</h2>
<Col md={6}>
{error && <Alert variant='danger'>
{error}
</Alert>}
<Form onSubmit={handleSubmit}>
<Form.Group>
<Form.Label>이메일</Form.Label>
<Form.Control name='email' type='email'value={user.email} onChange={handleChange}/>
</Form.Group>
<Form.Group>
<Form.Label>비밀번호</Form.Label>
<Form.Control name='password' type='password' value={user.password} onChange={handleChange}/>
</Form.Group>
<Button disabled={disabled || setLoading} type='submit'
block>
{loading && <Spinner as= 'span' animation= 'border' size='sm'
role= 'status' aria-hidden= 'true' />}{' '}확인</Button>
</Form>
</Col>
</Row>
</Container>
)
}
export default Login
client/src/Components/Paginations.js
View file @ 1bd65831
...@@ -8,7 +8,7 @@ function Paginations(props) { ...@@ -8,7 +8,7 @@ function Paginations(props) {
return ( return (
<> <>
{(props.endPage > 5) ? {(props.endPage > 5) ?
<Pagination> <Pagination >
<Pagination.First onClick={() => props.handlePage(1)} /> <Pagination.First onClick={() => props.handlePage(1)} />
{props.index === 1 ? <Pagination.Prev onClick={() => props.handlePage(props.index)} /> : <Pagination.Prev onClick={() => props.handlePage(props.index - 1)} />} {props.index === 1 ? <Pagination.Prev onClick={() => props.handlePage(props.index)} /> : <Pagination.Prev onClick={() => props.handlePage(props.index - 1)} />}
{props.index === props.endPage - 1 ? <Pagination.Item onClick={() => props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""} {props.index === props.endPage - 1 ? <Pagination.Item onClick={() => props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""}
......
client/src/Components/Place.js deleted 100644 → 0
View file @ 1b46e125
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { Modal, Container, Row, Button, } from 'react-bootstrap';
function Place(props) {
const [reviews, setReviews] = useState()
const [db, setDb] = useState(false)
const getReview = () => {
axios({ url: `/api/review?keyword=${props.place.name}`, method: 'post', data: { db: db } })
.then(res => {
console.log("place res.data", res.data)
setReviews(res.data)
})
.catch(err => {
console.log(err)
})
}
useEffect(() => {
getReview();
}, [])
return (
<Modal {...props}
size="xl"
keyboard="true"
variant="backdrop.in"
aria-labelledby="example-modal-sizes-title-lg">
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter" style={{ fontSize: '40px' }}>
{props.place.name}
</Modal.Title>
</Modal.Header>
<Modal.Body className="show-grid">
<Container style={{ fontSize: '40px' }}>
{Array.isArray(reviews) ? reviews.map((review) => {
return (
<Row className="mt-4">
<a href={review.link}>{review.title}</a>
<div>{review.summary}</div>
<div>{review.content}</div>
</Row>
)
})
: "리뷰가 없습니다."}
</Container>
</Modal.Body>
<Modal.Footer>
<Button block onClick={props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
);
}
export default Place;
client/src/Components/PrivateRoute.js 0 → 100644
View file @ 1bd65831
import React from 'react'
import { Route, Redirect } from 'react-router-dom'
import { isAuthenticated } from "../utils/auth";
function PrivateRoute({path, children}) {
if (isAuthenticated()) {
return (
<Route path={path}>
{children}
</Route>
)
} else {
return (
<Redirect to='/login' />
)
}
}
export default PrivateRoute
client/src/Components/Signup.js 0 → 100644
View file @ 1bd65831
import React, { useState, useEffect } from 'react'
import { Col, Container, Form, Row, Button, Alert } from "react-bootstrap"
import axios from "axios"
import catchErrors from '../utils/catchErrors'
import { Redirect } from 'react-router-dom'
const INIT_USER = {
name: '',
email: '',
password: ''
} // 초기유저에 이름, 이메일, 비밀번호를 빈배열로 지정한다.
function Signup() {
const [user, setUser] = useState(INIT_USER)
const [disabled, setDisabled] = useState(true)
const [error, setError] = useState('')
const [success, setSuccess] = useState(false)
useEffect(() => {
const isUser = Object.values(user).every(el => Boolean(el))
isUser ? setDisabled(false) : setDisabled(true)
}, [user])
//바뀌는것이 있을때 이벤트가 발생하는 함수
function handleChange(event) {
const {name, value} = event.target
setUser({...user, [name]: value})
}
async function handleSubmit(event) {
event.preventDefault() //submit을 누르면 이벤트가 실행
try {
setError('') //post로 경로를 지정해서 서버에서 값을 받는다
const response = await axios.post('/api/users/signup', user)
console.log(response.data)
console.log(user)
setSuccess(true)
} catch (error) {
console.log(error)
catchErrors(error, setError)
}
}
//성공시 알림창이 뜨고 원래 페이지로 돌아간다
if (success) {
alert('회원가입 되었습니다.')
return <Redirect to='/'/>
}
return (
<Container>
<Row className= 'vh-100 flex-column align-items-center justify-content-center'>
<h2>회원가입</h2>
<Col md={5}>
{error && <Alert variant='danger'>
{error}
</Alert>}
<Form onSubmit={handleSubmit}>
<Form.Group>
<Form.Label>이름</Form.Label>
<Form.Control name='name' value={user.name} onChange={handleChange}/>
</Form.Group>
<Form.Group>
<Form.Label>이메일</Form.Label>
<Form.Control name='email' type='email'value={user.email} onChange={handleChange}/>
</Form.Group>
<Form.Group>
<Form.Label>비밀번호</Form.Label>
<Form.Control name='password' type='password' value={user.password} onChange={handleChange}/>
</Form.Group>
<Button disabled={disabled} type='submit' block>확인</Button>
</Form>
</Col>
</Row>
</Container>
)
}
export default Signup
client/src/Pages/App.js
View file @ 1bd65831
...@@ -4,6 +4,9 @@ import ohuh from '../ohuh.PNG'; ...@@ -4,6 +4,9 @@ import ohuh from '../ohuh.PNG';
import { Container, Row, Form, Image, InputGroup, Button, Col, Card } from 'react-bootstrap'; import { Container, Row, Form, Image, InputGroup, Button, Col, Card } from 'react-bootstrap';
import axios from 'axios'; import axios from 'axios';
import Place from '../Components/Place'; import Place from '../Components/Place';
import ohuh from '../ohuh.PNG'
import { Container, Row, Form, Image, InputGroup, Button, Col, Nav } from 'react-bootstrap';
import { handleLogout, isAuthenticated } from '../utils/auth.js'
function App() { function App() {
const [state, setState] = useState(false); const [state, setState] = useState(false);
...@@ -17,6 +20,7 @@ function App() { ...@@ -17,6 +20,7 @@ function App() {
getRecommend() getRecommend()
getLatest() getLatest()
}, []); }, []);
const user = isAuthenticated()
if (state !== false) { if (state !== false) {
return <Redirect to={`/search?keyword=${search}`} />; return <Redirect to={`/search?keyword=${search}`} />;
...@@ -24,11 +28,11 @@ function App() { ...@@ -24,11 +28,11 @@ function App() {
const handleChange = (e) => { const handleChange = (e) => {
setSearch(e.target.value); setSearch(e.target.value);
} } //바뀌는 것이 있을때 이벤트 발생
const handleSubmit = () => { const handleSubmit = () => {
setState(true); setState(true);
} } //submit 버튼을 누르면 state 값을 true로 바뀐다
const getRecommend = () => { const getRecommend = () => {
axios.get(`/api/app/recommend`) axios.get(`/api/app/recommend`)
...@@ -54,14 +58,30 @@ function App() { ...@@ -54,14 +58,30 @@ function App() {
return ( return (
<Container className="vh-100 "> // <Container className="vh-100 ">
<Col md={12} > // <Col md={12} >
<Row className="justify-content-center" > // <Row className="justify-content-center" >
<Image src={ohuh} style={{ margin: "5%", marginTop : "3%" }} /> // <Image src={ohuh} style={{ margin: "5%", marginTop : "3%" }} />
// </Row>
// <Row style={{ marginBottom: "5%" }}>
<Container className="vh-100 d-flex justify-content-md-center align-items-center">
<Col md={6} style={{ marginTop: 140 }}>
<Nav className="justify-content-end" bg="#fff" variant="light" >
{user ? <Nav.Link onClick={() => handleLogout()}>로그아웃</Nav.Link>
: (
<>
<Nav.Link href="/signup">회원가입</Nav.Link>
<Nav.Link href="/login">로그인</Nav.Link>
</>
)}
<Nav.Link href='/bookmark'>북마크</Nav.Link>
</Nav>
<Row style={{ marginBottom: 20 }}>
<Image src={ohuh} />
</Row> </Row>
<Row style={{ marginBottom: "5%" }}> <Row style={{ marginBottom: 500 }}>
<Form className="vw-100" onSubmit={handleSubmit}> <Form className="vw-100" onSubmit={handleSubmit}>
<InputGroup> <InputGroup style={{ width: 560 }}>
<Form.Control <Form.Control
size="lg" size="lg"
placeholder="검색어를 입력하세요." placeholder="검색어를 입력하세요."
......
client/src/Pages/Place.js 0 → 100644
View file @ 1bd65831
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { Container, Row, Button, } from 'react-bootstrap';
import queryString from 'query-string'
function Place(props) {
console.log(props)
const [db, setDb] = useState(false)
const [index, setIndex] = useState(0)
const [reviews, setReviews] = useState([])
const place = queryString.parse(props.location.search).place
const getReview = (index) => {
console.log(index, "dlseprtm")
axios({ url: `/api/review?keyword=${place}&index=${index}`, method: 'post', data: { db: db } })
.then(res => {
console.log("place res.data", res.data)
setReviews([...reviews, ...res.data.review])
setDb(res.data.db)
setIndex(res.data.index)
})
.then(() => {
console.log(index, "인텍스", db)
})
.catch(err => {
console.log(err)
})
}
useEffect(() => {
getReview();
window.addEventListener("scroll", infiniteScroll);
return () => { window.removeEventListener("scroll", infiniteScroll); }
}, []);
// useEffect(() => {
// getReview();
// }, [index])
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) {
// setIndex(index + 1)
getReview(index + 1);
console.log("더불러", index + 1)
}
console.log(scrollHeight, scrollTop, clientHeight)
}
return (
<Container {...props}>
{place}
{Array.isArray(reviews) ? reviews.map((review, index) => {
return (
<Row className="mt-4">
<a href={review.link}>{review.title}</a>
<div>{review.summary}</div>
<div>{review.content}</div>
</Row>
)
})
: "리뷰가 없습니다."}
</Container>
);
}
export default Place;
client/src/Pages/Search.js
View file @ 1bd65831
...@@ -2,10 +2,13 @@ import React, { useState, useEffect } from 'react'; ...@@ -2,10 +2,13 @@ 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 Place from '../Components/Place'; import Place from '../Components/Place';
import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button } from 'react-bootstrap'; import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button, Nav } 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'
import * as Icon from 'react-bootstrap-icons';
import { isAuthenticated } from '../utils/auth';
import catchErrors from '../utils/catchErrors'
function Search(props) { function Search(props) {
...@@ -13,12 +16,22 @@ function Search(props) { ...@@ -13,12 +16,22 @@ function Search(props) {
const [index, setIndex] = useState(1); const [index, setIndex] = useState(1);
const [showSet, setShowSet] = useState([false, false, false, false]); const [showSet, setShowSet] = useState([false, false, false, false]);
const [search, setSearch] = useState(queryString.parse(props.location.search).keyword); const [search, setSearch] = useState(queryString.parse(props.location.search).keyword);
const [bookmark, setBookmark] = useState([false, false, false, false])
const user = isAuthenticated()
const [mobile, setMobile] = useState(); const [mobile, setMobile] = useState();
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('')
async function getBookmark() {
try {
const response = await axios.get(`/api/users/bookmark?ID=${user}`)
// setBookmark(response.data.bookmark)
} catch (error) {
catchErrors(error, setError)
}
}
const getAssociation = () => { const getAssociation = () => {
axios.get(`/api/search/association?keyword=${search}`) axios.get(`/api/search/association?keyword=${search}`)
...@@ -35,12 +48,6 @@ function Search(props) { ...@@ -35,12 +48,6 @@ function Search(props) {
useEffect(() => { useEffect(() => {
getAssociation() getAssociation()
if (window.innerWidth < 960) {
setMobile(true)
} else {
setMobile(false)
}
}, []); }, []);
useEffect(() => { useEffect(() => {
...@@ -51,18 +58,39 @@ function Search(props) { ...@@ -51,18 +58,39 @@ function Search(props) {
setPagePlace(paginate(association, index, 4)) setPagePlace(paginate(association, index, 4))
} }
setEndPage(Math.floor((association.length / 4))) setEndPage(Math.floor((association.length / 4)))
<<<<<<< HEAD
=======
console.log("7489309484839", endPage)
>>>>>>> origin/cherry
}, [association, index]) }, [association, index])
useEffect(() => { useEffect(() => {
getAssociation() getAssociation()
if (state) { if (state) {
// window.location.reload()
// return <Redirect to={{
// pathname: `/search?keyword=${search}`,
// state: { id: search },
// }} />;
props.history.push('/search?keyword=' + search) props.history.push('/search?keyword=' + search)
setState(false) setState(false)
console.log("search야", search) // console.log("search야", search)
} 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 places = [{ const places = [{
...@@ -127,14 +155,39 @@ function Search(props) { ...@@ -127,14 +155,39 @@ function Search(props) {
} }
//usestate 쓰거나 한번에 useeffect에 넣기 //usestate 쓰거나 한번에 useeffect에 넣기
async function handlebookmark(index) {
if (!bookmark[index]) {
console.log(pagePlace[index])
try {
const response = await axios.put(`/api/users/bookmark?ID=${user}&place=${pagePlace[index]._id}`)
alert(response.data, '북마크가 저장되었습니다.')
const showArr = bookmark
showArr[index] = true
setBookmark(showArr)
console.log("bookmark=", bookmark)
} catch (error) {
catchErrors(error, setError)
}
} else {
try {
const response = await axios.delete(`/api/users/bookmark?ID=${user}&place=${pagePlace[index]._id}`)
alert(response.data, '저장된 북마크가 삭제되었습니다.')
const showArr = bookmark
showArr[index] = false
setBookmark(showArr)
console.log("bookmark=", bookmark)
} catch (error) {
catchErrors(error, setError)
}
}
}
let time = new Date() let time = new Date()
return ( return (
<Container > <Container >
<Link to="/" className="d-flex justify-content-center"><Image src={ohuh} /></Link> <Link to="/path" className="d-flex justify-content-center"><Image src={ohuh} /></Link>
<Row className="mb-2" className="d-flex justify-content-center"> <Row className="mb-2" className="d-flex justify-content-center">
<Form style={{ width: "90vw" }} onSubmit={handleSubmit}> <Form style={{ width: "90vw" }} onSubmit={handleSubmit}>
<InputGroup size="lg"> <InputGroup size="lg">
...@@ -159,29 +212,33 @@ function Search(props) { ...@@ -159,29 +212,33 @@ function Search(props) {
return ( return (
<Col key={index} md={6} > <Col key={index} md={6} >
<Card align="center" border="info" style={{ margin: "3%" }}> <Card align="center" border="info" style={{ margin: "3%" }}>
<Card.Title style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{place.name}</Card.Title>
<Card.Title className="d-flex justify-content-center" style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{place.name}
{user ?
<Button
variant={bookmark[index] ? "primary" : "light"}
onClick={() => handlebookmark(index, place)}>
<Icon.BookmarkStarFill size={35} />
{console.log("bookmark", bookmark)}
{console.log("bookmark[index]", bookmark[index])}</Button> : null}
</Card.Title>
<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: "80px" }} >
{place.address} </Card.Text> {place.address} </Card.Text>
<Button variant="primary" onClick={() => { <Link to={`/place?id=${index}&place=${place.name}`} >
const showArr = [false, false, false, false] <Button variant="primary"> {place.name} 자세히 살펴보기</Button>
showArr[index] = true </Link>
setShowSet(showArr)
}}>{place.name} 자세히 살펴보기</Button>
<Place place={place} index={index} show={showSet[index]} onHide={() => setShowSet([false, false, false, false])} />
</Card.Body> </Card.Body>
</Card> </Card>
</Col> </Col>
) )
})} })}
</Row> </Row>
<Row className="mt-2 d-flex justify-content-center"> <Row className="mt-2 d-flex justify-content-center">
<Paginations index={index} endPage={endPage} handlePage={handlePage}></Paginations> <Paginations index={index} endPage={endPage} handlePage={handlePage}></Paginations>
</Row> </Row>
</Container> </Container >
); );
} }
......
client/src/index.js
View file @ 1bd65831
...@@ -2,16 +2,20 @@ import React from 'react'; ...@@ -2,16 +2,20 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css'; import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import App from './Pages/App'; import App from './Pages/App'
import Search from './Pages/Search'; import Search from './Pages/Search';
import axios from 'axios';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
import Signup from './Components/Signup'
import Login from './Components/Login'
import PrivateRoute from "./Components/PrivateRoute";
import Bookmark from "./Bookmark"
import { import {
BrowserRouter as Router, BrowserRouter as Router,
Switch, Switch,
Route, Route,
Redirect, Redirect,
} from "react-router-dom"; } from "react-router-dom";
import Place from './Pages/Place';
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
...@@ -19,6 +23,10 @@ ReactDOM.render( ...@@ -19,6 +23,10 @@ ReactDOM.render(
<Switch> <Switch>
<Route exact path="/" component={App} /> <Route exact path="/" component={App} />
<Route path="/search" component={Search} /> <Route path="/search" component={Search} />
<Route path="/place" component={Place} />
<Route path='/signup' component={Signup}/>
<Route path='/login' component={Login} />
<PrivateRoute path='/bookmark'><Bookmark/></PrivateRoute>
<Redirect path="/search" to="/search" /> <Redirect path="/search" to="/search" />
</Switch> </Switch>
</Router> </Router>
......
client/src/utils/auth.js 0 → 100644
View file @ 1bd65831
import axios from "axios"
export function handleLogin(userId) { //로그인할때 로컬스토리지에 유저 아이디를 설정한다
localStorage.setItem('loginStatus', userId)
}
export async function handleLogout() {
localStorage.removeItem('loginStatus') //로컬스토리지에서 로그인상태를 지운다
await axios.get('/api/auth/logout')
window.location.href='/' //경로 지정
}
//유저가 로그인 했는 지 확인하는 함수
export function isAuthenticated() {
const userId = localStorage.getItem('loginStatus') //유저아이디를 로컬스토리지에서 가져와서 저장
if (userId) {
return userId
}else{
return false
}
}
\ No newline at end of file
client/src/utils/catchErrors.js 0 → 100644
View file @ 1bd65831
function catchErrors(error, displayError) {
let errorMsg
if (error.response) {
errorMsg = error.response.data
console.log(errorMsg)
}else if (error.requset) {
errorMsg = error.requset
console.log(errorMsg)
} else {
errorMsg = error.message
console.log(errorMsg)
}
displayError(errorMsg)
}
export default catchErrors
\ No newline at end of file
package-lock.json
View file @ 1bd65831
This diff is collapsed.
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