Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
search-page
Commits
20a12a94
Commit
20a12a94
authored
Feb 01, 2021
by
Lee SeoYeon
Browse files
.
parent
c3d80753
Changes
5
Hide whitespace changes
Inline
Side-by-side
client/.eslintcache
View file @
20a12a94
[{
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
index.js"
:
"1"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
reportWebVitals.js"
:
"2"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Components
\\
Login.js"
:
"3"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
utils
\\
catchErrors.js"
:
"4"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Components
\\
Signup.js"
:
"5"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
utils
\\
auth.js"
:
"6"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Components
\\
Paginations.js"
:
"7"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Components
\\
PrivateRoute.js"
:
"8"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Bookmark.js"
:
"9"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Pages
\\
Search.js"
:
"10"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Pages
\\
App.js"
:
"11"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Pages
\\
Place.js"
:
"12"
},{
"size"
:
1339
,
"mtime"
:
1611985207838
,
"results"
:
"13"
,
"hashOfConfig"
:
"14"
},{
"size"
:
362
,
"mtime"
:
499162500000
,
"results"
:
"15"
,
"hashOfConfig"
:
"14"
},{
"size"
:
3147
,
"mtime"
:
1611985946183
,
"results"
:
"16"
,
"hashOfConfig"
:
"14"
},{
"size"
:
405
,
"mtime"
:
1609915408569
,
"results"
:
"17"
,
"hashOfConfig"
:
"14"
},{
"size"
:
2959
,
"mtime"
:
1611699671429
,
"results"
:
"18"
,
"hashOfConfig"
:
"14"
},{
"size"
:
723
,
"mtime"
:
1611670762295
,
"results"
:
"19"
,
"hashOfConfig"
:
"14"
},{
"size"
:
3725
,
"mtime"
:
1611729247206
,
"results"
:
"20"
,
"hashOfConfig"
:
"14"
},{
"size"
:
438
,
"mtime"
:
1611699613873
,
"results"
:
"21"
,
"hashOfConfig"
:
"14"
},{
"size"
:
5390
,
"mtime"
:
1611985915277
,
"results"
:
"22"
,
"hashOfConfig"
:
"14"
},{
"size"
:
8833
,
"mtime"
:
1611986766969
,
"results"
:
"23"
,
"hashOfConfig"
:
"14"
},{
"size"
:
4297
,
"mtime"
:
1611985933853
,
"results"
:
"24"
,
"hashOfConfig"
:
"14"
},{
"size"
:
2254
,
"mtime"
:
1611987416766
,
"results"
:
"25"
,
"hashOfConfig"
:
"14"
},{
"filePath"
:
"26"
,
"messages"
:
"27"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"28"
},
"1t9w6go"
,{
"filePath"
:
"29"
,
"messages"
:
"30"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"28"
},{
"filePath"
:
"31"
,
"messages"
:
"32"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"28"
},{
"filePath"
:
"33"
,
"messages"
:
"34"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"28"
},{
"filePath"
:
"35"
,
"messages"
:
"36"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"28"
},{
"filePath"
:
"37"
,
"messages"
:
"38"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"39"
},{
"filePath"
:
"40"
,
"messages"
:
"41"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"28"
},{
"filePath"
:
"42"
,
"messages"
:
"43"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"28"
},{
"filePath"
:
"44"
,
"messages"
:
"45"
,
"errorCount"
:
0
,
"warningCount"
:
12
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
"46"
,
"usedDeprecatedRules"
:
"28"
},{
"filePath"
:
"47"
,
"messages"
:
"48"
,
"errorCount"
:
0
,
"warningCount"
:
14
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
"49"
,
"usedDeprecatedRules"
:
"28"
},{
"filePath"
:
"50"
,
"messages"
:
"51"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"28"
},{
"filePath"
:
"52"
,
"messages"
:
"53"
,
"errorCount"
:
0
,
"warningCount"
:
3
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
"54"
,
"usedDeprecatedRules"
:
"28"
},
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
index.js"
,[],[
"55"
,
"56"
],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
reportWebVitals.js"
,[],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Components
\\
Login.js"
,[],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
utils
\\
catchErrors.js"
,[],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Components
\\
Signup.js"
,[],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
utils
\\
auth.js"
,[],[
"57"
,
"58"
],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Components
\\
Paginations.js"
,[],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Components
\\
PrivateRoute.js"
,[],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Bookmark.js"
,[
"59"
,
"60"
,
"61"
,
"62"
,
"63"
,
"64"
,
"65"
,
"66"
,
"67"
,
"68"
,
"69"
,
"70"
],
"import React, { useState, useEffect } from 'react'
\r\n
import { Alert, Col, Card, Container, Form, Row, Button, Nav, Navbar } from
\"
react-bootstrap
\"\r\n
import axios from
\"
axios
\"\r\n
import catchErrors from './utils/catchErrors.js'
\r\n
import { isAuthenticated } from './utils/auth'
\r\n
import * as Icon from 'react-bootstrap-icons';
\r\n
import Place from './Pages/Place.js'
\r\n\r\n\r\n
const INIT_PAGE = {\r
\n
bookmark: []
\r\n
}
\r\n\r\n\r\n
function Bookmark() {\r
\n
const [page, setPage] = useState(INIT_PAGE)
\r\n
const [index, setIndex] = useState(1);
\r\n
const [error, setError] = useState('')
\r\n
const [state, setState] = useState(false);
\r\n
const [bookmark, setBookmark] = useState([false, false, false, false])
\r\n
const [pagePlace, setPagePlace] = useState([])
\r\n
const [showSet, setShowSet] = useState([false, false, false, false]);
\r\n\r\n
const user = isAuthenticated()
\r\n\r\n
async function getBookmark() {\r
\n
try {\r
\n
const response = await axios.get(`/api/users/bookmark?ID=${user}`)
\r\n
setPagePlace(response.data.bookmark)
\r\n
} catch (error) {\r
\n
catchErrors(error, setError)
\r\n
}
\r\n
}
\r\n\r\n\r\n
async function handleBookmark(index) {\r
\n
if (!bookmark[index]) {\r
\n
console.log(pagePlace[index])
\r\n
try {\r
\n
const response = await axios.put(`/api/users/bookmark?ID=${user}&place=${pagePlace[index]._id}`)
\r\n
alert(response.data, '북마크가 저장되었습니다.')
\r\n
const showArr = bookmark
\r\n
showArr[index] = true
\r\n
setBookmark(showArr)
\r\n
console.log(
\"
bookmark=
\"
, bookmark)
\r\n
} catch (error) {\r
\n
catchErrors(error, setError)
\r\n
}
\r\n
} else {\r
\n
try {\r
\n
const response = await axios.delete(`/api/users/bookmark?ID=${user}`)
\r\n
alert(response.data, '저장된 북마크가 삭제되었습니다.')
\r\n
const showArr = bookmark
\r\n
showArr[index] = false
\r\n
setBookmark(showArr)
\r\n
console.log(
\"
bookmark=
\"
, bookmark)
\r\n
} catch (error) {\r
\n
catchErrors(error, setError)
\r\n
}
\r\n
}
\r\n
}
\r\n
useEffect(() => {\r
\n
getBookmark()
\r\n
}, [])
\r\n\r\n\r\n
return (
\r\n
<Container>
\r\n
<Navbar bg=
\"
info
\"
variant=
\"
dark
\"
>
\r\n
<Navbar.Brand href=
\"
/
\"
>북마크</Navbar.Brand>
\r\n
<Nav className=
\"
mr-auto
\"
>
\r\n
<Nav.Link href=
\"
/
\"
>Home</Nav.Link>
\r\n
</Nav>
\r\n
</Navbar>
\r\n
<Row className=
\"
d-flex flex-wrap
\"
>
\r\n
{console.log(
\"
#####################33
\"
, pagePlace)}
\r\n
{pagePlace.map((place, index) => {\r
\n
return (
\r\n
<Col key=
{
index
}
md=
{
6
}
>
\r\n
<Card align=
\"
center
\"
border=
\"
info
\"
style={{ margin:
\"
3%
\"
}}>
\r\n\r\n
<Card.Title className=
\"
d-flex justify-content-center
\"
style={{ margin:
\"
3%
\"
, fontSize: '200%', fontWeight: 'bold' }} >
{
place.name
}
\r\n
{user ?
\r\n
<Button
\r\n
variant={bookmark[index] ?
\"
primary
\"
:
\"
light
\"
}
\r\n
onClick={() => handleBookmark(index, place)}>
\r\n
<Icon.BookmarkStarFill size=
{
35
}
/>
\r\n
{console.log(
\"
bookmark
\"
, bookmark)}
\r\n
{console.log(
\"
bookmark[index]
\"
, bookmark[index])}</Button> : null}
\r\n
</Card.Title>
\r\n
<Card.Img variant=
\"
top
\"
style={{ padding:
\"
5%
\"
, width:
\"
100%
\"
, height:
\"
340px
\"
}} src=
{
place.img
}
/>
\r\n
<Card.Body >
\r\n
<Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height:
\"
80px
\"
}} >
\r\n
{
place.address
}
</Card.Text>
\r\n
<Button variant=
\"
info
\"
onClick={() => {\r
\n
const showArr = [false, false, false, false]
\r\n
showArr[index] = true
\r\n
setShowSet(showArr)
\r\n
}}>
{
place.name
}
자세히 살펴보기</Button>
\r\n
{/* <Place place=
{
place
}
index=
{
index
}
show=
{
showSet[index]
}
onHide={() => setShowSet([false, false, false, false])} /> */}
\r\n
</Card.Body>
\r\n
</Card>
\r\n
</Col>
\r\n
)
\r\n
})}
\r\n\r\n\r\n
</Row>
\r\n
</Container>
\r\n
)
\r\n
}
\r\n\r\n
export default Bookmark
\r\n\r\n\r\n
// async function handleSubmit(e){\r
\n
// setState(true); //버튼이 눌려서 handlesubmit이될때 setState값이 true로 바뀐다
\r\n
// try { //respons 서버에 post로 요청하여 데이터를 받아온다
\r\n
// const response = await axios.post('/api/users/bookmark', page)
\r\n
// setSuccess(true)
\r\n
// } catch (error) {\r
\n
// console.log(error)
\r\n
// catchErrors(error, setError)
\r\n
// }
\r\n
// }
\r\n\r\n
// useEffect(() => {\r
\n
// getBookmark(user)
\r\n
// }, [user])"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Pages
\\
Search.js"
,[
"71"
,
"72"
,
"73"
,
"74"
,
"75"
,
"76"
,
"77"
,
"78"
,
"79"
,
"80"
,
"81"
,
"82"
,
"83"
,
"84"
],
"import React, { useState, useEffect } from 'react';
\r\n
import { Link } from 'react-router-dom';
\r\n
import ohuh from '../ohuh-sm.PNG';
\r\n
import Place from '../Pages/Place.js';
\r\n
import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button, Nav } from 'react-bootstrap';
\r\n
import Paginations from '../Components/Paginations';
\r\n
import axios from 'axios';
\r\n
import queryString from 'query-string'
\r\n
import * as Icon from 'react-bootstrap-icons';
\r\n
import { isAuthenticated } from '../utils/auth';
\r\n
import catchErrors from '../utils/catchErrors'
\r\n\r\n
function Search(props) {\r
\n\r\n
const [state, setState] = useState(false);
\r\n
const [index, setIndex] = useState(1);
\r\n
const [showSet, setShowSet] = useState([false, false, false, false]);
\r\n
const [search, setSearch] = useState(queryString.parse(props.location.search).keyword);
\r\n
const [bookmark, setBookmark] = useState([false, false, false, false])
\r\n
const user = isAuthenticated()
\r\n
const [mobile, setMobile] = useState();
\r\n
const [association, setAssociation] = useState([{ name:
\"
\"
, address:
\"
\"
, img:
\"
\"
}])
\r\n
const [pagePlace, setPagePlace] = useState([{ name:
\"
\"
, address:
\"
\"
, img:
\"
\"
}, { name:
\"
\"
, address:
\"
\"
, img:
\"
\"
}])
\r\n
const [endPage, setEndPage] = useState(1)
\r\n
const [error, setError] = useState('')
\r\n\r\n
async function getBookmark() {\r
\n
try {\r
\n
const response = await axios.get(`/api/users/bookmark?ID=${user}`)
\r\n
// setBookmark(response.data.bookmark)
\r\n
} catch (error) {\r
\n
catchErrors(error, setError)
\r\n
}
\r\n
}
\r\n\r\n
const getAssociation = () => {\r
\n
axios.get(`/api/search/association?keyword=${search}`)
\r\n
.then(res => {\r
\n
console.log(
\"
Associations =
\"
, res.data)
\r\n
setAssociation(res.data)
\r\n
})
\r\n
.catch(err => {\r
\n
console.log(
\"
search.associations 에러 발생
\"
, err)
\r\n
})
\r\n
}
\r\n\r\n\r\n\r\n
useEffect(() => {\r
\n
getAssociation()
\r\n
}, []);
\r\n\r\n
useEffect(() => {\r
\n
if (association.length < 3) {\r
\n
setPagePlace(paginate(association, index, association.length))
\r\n
}
\r\n
else {\r
\n
setPagePlace(paginate(association, index, 4))
\r\n
}
\r\n
setEndPage(Math.floor((association.length / 4)))
\r\n
console.log(
\"
7489309484839
\"
, endPage)
\r\n\r\n
}, [association, index])
\r\n\r\n
useEffect(() => {\r
\n
getAssociation()
\r\n
if (state) {\r
\n
// window.location.reload()
\r\n
// return <Redirect to={{\r
\n
// pathname: `/search?keyword=${search}`,
\r\n
// state: { id: search },
\r\n
// }} />;
\r\n
props.history.push('/search?keyword=' + search)
\r\n
setState(false)
\r\n
// console.log(
\"
search야
\"
, search)
\r\n
} window.addEventListener(
\"
scroll
\"
, infiniteScroll);
\r\n
return () => { window.removeEventListener(
\"
scroll
\"
, infiniteScroll); }
\r\n
}, [state]);
\r\n\r\n
const infiniteScroll = () => {\r
\n
const { documentElement, body } = document;
\r\n
const scrollHeight = Math.max(documentElement.scrollHeight, body.scrollHeight);
\r\n
const scrollTop = Math.max(documentElement.scrollTop, body.scrollTop);
\r\n
const clientHeight = documentElement.clientHeight;
\r\n
if (scrollTop + clientHeight >= scrollHeight) {\r
\n
// getReview();
\r\n
console.log(
\"
더불러
\"
)
\r\n
}
\r\n
console.log(scrollHeight, scrollTop, clientHeight)
\r\n
}
\r\n\r\n\r\n
if (state !== false) {\r
\n
// console.log(queryString.parse(props.location.search))
\r\n
// =
{
keyword:search
}
\r\n
// return <Redirect to={{\r
\n
// pathname: `/search?keyword=${search}`,
\r\n
// state: { id: search },
\r\n
// }} />;
\r\n
// history.pushState(null, null,
\"
?
\"
+queryParams.toString());
\r\n
// return <Redirect to=
{
`/search?keyword=${search}`
}
/>;
\r\n
}
\r\n\r\n
const handlePage = (num) => {\r
\n
setIndex(num);
\r\n
console.log(
\"
pagenation num
\"
, num)
\r\n
console.log(index)
\r\n
}
\r\n\r\n\r\n
const handleChange = (e) => {\r
\n
setSearch(e.target.value);
\r\n
}
\r\n\r\n
const handleSubmit = (e) => {\r
\n
e.preventDefault()
\r\n
setState(true)
\r\n
setIndex(1)
\r\n
}
\r\n\r\n
function paginate(items, pageNumber, itemNumber) {\r
\n
const page = [];
\r\n
const startIndex = (pageNumber - 1) * itemNumber
\r\n
for (var i = 0; i < itemNumber; i++) {\r
\n\r\n
page.push(items[(startIndex + i)])
\r\n
}
\r\n
console.log(
\"
뿌릴 data22222222222222222
\"
, page)
\r\n
return page
\r\n
}
\r\n
//usestate 쓰거나 한번에 useeffect에 넣기
\r\n\r\n
async function handlebookmark(index) {\r
\n
if (!bookmark[index]) {\r
\n
console.log(pagePlace[index])
\r\n
try {\r
\n
const response = await axios.put(`/api/users/bookmark?ID=${user}&place=${pagePlace[index]._id}`)
\r\n
alert(response.data, '북마크가 저장되었습니다.')
\r\n
const showArr = bookmark
\r\n
showArr[index] = true
\r\n
setBookmark(showArr)
\r\n
console.log(
\"
bookmark=
\"
, bookmark)
\r\n
} catch (error) {\r
\n
catchErrors(error, setError)
\r\n
}
\r\n
} else {\r
\n
try {\r
\n
const response = await axios.delete(`/api/users/bookmark?ID=${user}&place=${pagePlace[index]._id}`)
\r\n
alert(response.data, '저장된 북마크가 삭제되었습니다.')
\r\n
const showArr = bookmark
\r\n
showArr[index] = false
\r\n
setBookmark(showArr)
\r\n
console.log(
\"
bookmark=
\"
, bookmark)
\r\n
} catch (error) {\r
\n
catchErrors(error, setError)
\r\n
}
\r\n
}
\r\n
}
\r\n\r\n\r\n
let time = new Date()
\r\n\r\n
return (
\r\n
<Container >
\r\n
<Link to=
\"
/path
\"
className=
\"
d-flex justify-content-center
\"
><Image src=
{
ohuh
}
/></Link>
\r\n
<Row className=
\"
mb-2
\"
className=
\"
d-flex justify-content-center
\"
>
\r\n
<Form style={{ width:
\"
90vw
\"
}} onSubmit=
{
handleSubmit
}
>
\r\n
<InputGroup size=
\"
lg
\"
>
\r\n
<FormControl
\r\n
placeholder=
\"
검색어를 입력하세요.
\"\r\n
value=
{
search
}
\r\n
aria-label=
\"
Large
\"\r\n
aria-describedby=
\"
inputGroup-sizing-sm
\"\r\n
onChange=
{
handleChange
}
\r\n
/>
\r\n
<InputGroup.Append>
\r\n
<Button type=
\"
submit
\"
variant=
\"
outline-secondary
\"
>검색</Button>
\r\n
</InputGroup.Append>
\r\n
</InputGroup>
\r\n
</Form>
\r\n
</Row>
\r\n
{/*
{
time.toLocaleString()
}
*/}
\r\n
<Row className=
\"
d-flex flex-wrap
\"
>
\r\n\r\n
{console.log(
\"
#####################33
\"
, pagePlace)}
\r\n
{pagePlace.map((place, index) => {\r
\n
return (
\r\n
<Col key=
{
index
}
md=
{
6
}
>
\r\n
<Card align=
\"
center
\"
border=
\"
info
\"
style={{ margin:
\"
3%
\"
}}>
\r\n\r\n
<Card.Title className=
\"
d-flex justify-content-center
\"
style={{ margin:
\"
3%
\"
, fontSize: '200%', fontWeight: 'bold' }} >
{
place.name
}
\r\n
{user ?
\r\n
<Button
\r\n
variant={bookmark[index] ?
\"
primary
\"
:
\"
light
\"
}
\r\n
onClick={() => handlebookmark(index, place)}>
\r\n
<Icon.BookmarkStarFill size=
{
35
}
/>
\r\n
</Button> : null}
\r\n
</Card.Title>
\r\n
<Card.Img variant=
\"
top
\"
style={{ padding:
\"
5%
\"
, width:
\"
100%
\"
, height:
\"
340px
\"
}} src=
{
place.img
}
/>
\r\n
<Card.Body>
\r\n
<Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height:
\"
80px
\"
}} >
\r\n
{
place.address
}
</Card.Text>
\r\n
<Link to=
{
`/place?id=${index}&place=${place.name}`
}
>
\r\n
<Button variant=
\"
primary
\"
>
{
place.name
}
자세히 살펴보기</Button>
\r\n
</Link>
\r\n
</Card.Body>
\r\n
</Card>
\r\n
</Col>
\r\n
)
\r\n
})}
\r\n
</Row>
\r\n
<Row className=
\"
mt-2 d-flex justify-content-center
\"
>
\r\n
<Paginations index=
{
index
}
endPage=
{
endPage
}
handlePage=
{
handlePage
}
></Paginations>
\r\n
</Row>
\r\n
</Container >
\r\n
);
\r\n
}
\r\n\r\n
export default Search;
\r\n
"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Pages
\\
App.js"
,[],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Pages
\\
Place.js"
,[
"85"
,
"86"
,
"87"
],
"import axios from 'axios';
\r\n
import React, { useEffect, useState } from 'react';
\r\n
import { Container, Row, Button, Col, ListGroup} from 'react-bootstrap';
\r\n
import queryString from 'query-string'
\r\n\r\n
function Place(props) {\r
\n
console.log(props)
\r\n
const [db, setDb] = useState(false)
\r\n
const [index, setIndex] = useState(0)
\r\n
const [reviews, setReviews] = useState([])
\r\n
const place = queryString.parse(props.location.search).place
\r\n\r\n
const getReview = (index) => {\r
\n
console.log(index,
\"
dlseprtm
\"
)
\r\n
axios({ url: `/api/review?keyword=${place}&index=${index}`, method: 'post', data: { db: db } })
\r\n
.then(res => {\r
\n
console.log(
\"
place res.data
\"
, res.data)
\r\n
setReviews([...reviews, ...res.data.review])
\r\n
setDb(res.data.db)
\r\n
setIndex(res.data.index)
\r\n
})
\r\n
.then(() => {\r
\n
console.log(index,
\"
인텍스
\"
, db)
\r\n
})
\r\n
.catch(err => {\r
\n
console.log(err)
\r\n
})
\r\n
}
\r\n\r\n
useEffect(() => {\r
\n
getReview();
\r\n
window.addEventListener(
\"
scroll
\"
, infiniteScroll);
\r\n
return () => { window.removeEventListener(
\"
scroll
\"
, infiniteScroll); }
\r\n
}, []);
\r\n\r\n
// useEffect(() => {\r
\n
// getReview();
\r\n\r\n
// }, [index])
\r\n\r\n
const infiniteScroll = () => {\r
\n
const { documentElement, body } = document;
\r\n
const scrollHeight = Math.max(documentElement.scrollHeight, body.scrollHeight);
\r\n
const scrollTop = Math.max(documentElement.scrollTop, body.scrollTop);
\r\n
const clientHeight = documentElement.clientHeight;
\r\n
if (scrollTop + clientHeight >= scrollHeight) {\r
\n
// setIndex(index + 1)
\r\n
getReview(index + 1);
\r\n
console.log(
\"
더불러
\"
, index + 1)
\r\n
}
\r\n
console.log(scrollHeight, scrollTop, clientHeight)
\r\n
}
\r\n\r\n
return (
\r\n
<Container
{
...props
}
>
\r\n
<Row>
\r\n
{
place
}
\r\n
{Array.isArray(reviews) ? reviews.map((review, index) => {\r
\n
return (
\r\n
<ListGroup>
\r\n
<ListGroup.Item className=
\"
mt-4
\"
>
\r\n
<a href=
{
review.link}>{review.title
}
</a>
\r\n
<div>
{
review.summary
}
</div>
\r\n
<div>
{
review.content
}
</div>
\r\n
</ListGroup.Item>
\r\n
</ListGroup>
\r\n
)
\r\n
})
\r\n
:
\"
리뷰가 없습니다.
\"
}
\r\n
</Row>
\r\n
</Container>
\r\n
);
\r\n
}
\r\n\r\n
export default Place;
\r\n
"
,{
"ruleId"
:
"88"
,
"replacedBy"
:
"89"
},{
"ruleId"
:
"90"
,
"replacedBy"
:
"91"
},{
"ruleId"
:
"88"
,
"replacedBy"
:
"92"
},{
"ruleId"
:
"90"
,
"replacedBy"
:
"93"
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"95"
,
"line"
:
2
,
"column"
:
10
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
2
,
"endColumn"
:
15
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"98"
,
"line"
:
2
,
"column"
:
39
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
2
,
"endColumn"
:
43
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"99"
,
"line"
:
7
,
"column"
:
8
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
7
,
"endColumn"
:
13
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"100"
,
"line"
:
16
,
"column"
:
12
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
16
,
"endColumn"
:
16
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"101"
,
"line"
:
16
,
"column"
:
18
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
16
,
"endColumn"
:
25
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"102"
,
"line"
:
17
,
"column"
:
12
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
17
,
"endColumn"
:
17
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"103"
,
"line"
:
17
,
"column"
:
19
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
17
,
"endColumn"
:
27
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"104"
,
"line"
:
18
,
"column"
:
12
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
18
,
"endColumn"
:
17
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"105"
,
"line"
:
19
,
"column"
:
12
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
19
,
"endColumn"
:
17
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"106"
,
"line"
:
19
,
"column"
:
19
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
19
,
"endColumn"
:
27
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"107"
,
"line"
:
22
,
"column"
:
12
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
22
,
"endColumn"
:
19
},{
"ruleId"
:
"108"
,
"severity"
:
1
,
"message"
:
"109"
,
"line"
:
64
,
"column"
:
8
,
"nodeType"
:
"110"
,
"endLine"
:
64
,
"endColumn"
:
10
,
"suggestions"
:
"111"
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"99"
,
"line"
:
4
,
"column"
:
8
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
4
,
"endColumn"
:
13
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"112"
,
"line"
:
5
,
"column"
:
83
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
5
,
"endColumn"
:
86
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"107"
,
"line"
:
17
,
"column"
:
12
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
17
,
"endColumn"
:
19
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"113"
,
"line"
:
17
,
"column"
:
21
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
17
,
"endColumn"
:
31
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"114"
,
"line"
:
21
,
"column"
:
12
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
21
,
"endColumn"
:
18
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"115"
,
"line"
:
21
,
"column"
:
20
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
21
,
"endColumn"
:
29
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"104"
,
"line"
:
25
,
"column"
:
12
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
25
,
"endColumn"
:
17
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"116"
,
"line"
:
27
,
"column"
:
20
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
27
,
"endColumn"
:
31
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"117"
,
"line"
:
29
,
"column"
:
19
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
29
,
"endColumn"
:
27
},{
"ruleId"
:
"108"
,
"severity"
:
1
,
"message"
:
"118"
,
"line"
:
51
,
"column"
:
8
,
"nodeType"
:
"110"
,
"endLine"
:
51
,
"endColumn"
:
10
,
"suggestions"
:
"119"
},{
"ruleId"
:
"108"
,
"severity"
:
1
,
"message"
:
"120"
,
"line"
:
63
,
"column"
:
8
,
"nodeType"
:
"110"
,
"endLine"
:
63
,
"endColumn"
:
28
,
"suggestions"
:
"121"
},{
"ruleId"
:
"108"
,
"severity"
:
1
,
"message"
:
"122"
,
"line"
:
78
,
"column"
:
8
,
"nodeType"
:
"110"
,
"endLine"
:
78
,
"endColumn"
:
15
,
"suggestions"
:
"123"
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"124"
,
"line"
:
161
,
"column"
:
9
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
161
,
"endColumn"
:
13
},{
"ruleId"
:
"125"
,
"severity"
:
1
,
"message"
:
"126"
,
"line"
:
166
,
"column"
:
35
,
"nodeType"
:
"127"
,
"endLine"
:
166
,
"endColumn"
:
76
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"128"
,
"line"
:
3
,
"column"
:
26
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
3
,
"endColumn"
:
32
},{
"ruleId"
:
"94"
,
"severity"
:
1
,
"message"
:
"129"
,
"line"
:
3
,
"column"
:
34
,
"nodeType"
:
"96"
,
"messageId"
:
"97"
,
"endLine"
:
3
,
"endColumn"
:
37
},{
"ruleId"
:
"108"
,
"severity"
:
1
,
"message"
:
"130"
,
"line"
:
34
,
"column"
:
6
,
"nodeType"
:
"110"
,
"endLine"
:
34
,
"endColumn"
:
8
,
"suggestions"
:
"131"
},
"no-native-reassign"
,[
"132"
],
"no-negated-in-lhs"
,[
"133"
],[
"132"
],[
"133"
],
"no-unused-vars"
,
"'Alert' is defined but never used."
,
"Identifier"
,
"unusedVar"
,
"'Form' is defined but never used."
,
"'Place' 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."
,
"react-hooks/exhaustive-deps"
,
"React Hook useEffect has a missing dependency: 'getBookmark'. Either include it or remove the dependency array."
,
"ArrayExpression"
,[
"134"
],
"'Nav' is defined but never used."
,
"'setShowSet' is assigned a value but never used."
,
"'mobile' is assigned a value but never used."
,
"'setMobile' is assigned a value but never used."
,
"'getBookmark' is defined but never used."
,
"'response' is assigned a value but never used."
,
"React Hook useEffect has a missing dependency: 'getAssociation'. Either include it or remove the dependency array."
,[
"135"
],
"React Hook useEffect has a missing dependency: 'endPage'. Either include it or remove the dependency array."
,[
"136"
],
"React Hook useEffect has missing dependencies: 'getAssociation', 'props.history', and 'search'. Either include them or remove the dependency array."
,[
"137"
],
"'time' is assigned a value but never used."
,
"react/jsx-no-duplicate-props"
,
"No duplicate props allowed"
,
"JSXAttribute"
,
"'Button' is defined but never used."
,
"'Col' is defined but never used."
,
"React Hook useEffect has missing dependencies: 'getReview' and 'infiniteScroll'. Either include them or remove the dependency array."
,[
"138"
],
"no-global-assign"
,
"no-unsafe-negation"
,{
"desc"
:
"139"
,
"fix"
:
"140"
},{
"desc"
:
"141"
,
"fix"
:
"142"
},{
"desc"
:
"143"
,
"fix"
:
"144"
},{
"desc"
:
"145"
,
"fix"
:
"146"
},{
"desc"
:
"147"
,
"fix"
:
"148"
},
"Update the dependencies array to be: [getBookmark]"
,{
"range"
:
"149"
,
"text"
:
"150"
},
"Update the dependencies array to be: [getAssociation]"
,{
"range"
:
"151"
,
"text"
:
"152"
},
"Update the dependencies array to be: [association, endPage, index]"
,{
"range"
:
"153"
,
"text"
:
"154"
},
"Update the dependencies array to be: [getAssociation, props.history, search, state]"
,{
"range"
:
"155"
,
"text"
:
"156"
},
"Update the dependencies array to be: [getReview, infiniteScroll]"
,{
"range"
:
"157"
,
"text"
:
"158"
},[
2220
,
2222
],
"[getBookmark]"
,[
2006
,
2008
],
"[getAssociation]"
,[
2363
,
2383
],
"[association, endPage, index]"
,[
2962
,
2969
],
"[getAssociation, props.history, search, state]"
,[
1116
,
1118
],
"[getReview, infiniteScroll]"
]
\ No newline at end of file
[{
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
index.js"
:
"1"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
reportWebVitals.js"
:
"2"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Components
\\
Login.js"
:
"3"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
utils
\\
catchErrors.js"
:
"4"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Components
\\
Signup.js"
:
"5"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
utils
\\
auth.js"
:
"6"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Components
\\
Paginations.js"
:
"7"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Components
\\
PrivateRoute.js"
:
"8"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Bookmark.js"
:
"9"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Pages
\\
Search.js"
:
"10"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Pages
\\
App.js"
:
"11"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Pages
\\
Place.js"
:
"12"
},{
"size"
:
1339
,
"mtime"
:
1611985207838
,
"results"
:
"13"
,
"hashOfConfig"
:
"14"
},{
"size"
:
362
,
"mtime"
:
499162500000
,
"results"
:
"15"
,
"hashOfConfig"
:
"14"
},{
"size"
:
3147
,
"mtime"
:
1611985946183
,
"results"
:
"16"
,
"hashOfConfig"
:
"14"
},{
"size"
:
405
,
"mtime"
:
1609915408569
,
"results"
:
"17"
,
"hashOfConfig"
:
"14"
},{
"size"
:
2959
,
"mtime"
:
1611699671429
,
"results"
:
"18"
,
"hashOfConfig"
:
"14"
},{
"size"
:
723
,
"mtime"
:
1611670762295
,
"results"
:
"19"
,
"hashOfConfig"
:
"14"
},{
"size"
:
3724
,
"mtime"
:
1612098437239
,
"results"
:
"20"
,
"hashOfConfig"
:
"14"
},{
"size"
:
438
,
"mtime"
:
1611699613873
,
"results"
:
"21"
,
"hashOfConfig"
:
"14"
},{
"size"
:
5390
,
"mtime"
:
1612135713351
,
"results"
:
"22"
,
"hashOfConfig"
:
"14"
},{
"size"
:
8826
,
"mtime"
:
1612098765816
,
"results"
:
"23"
,
"hashOfConfig"
:
"14"
},{
"size"
:
4857
,
"mtime"
:
1612135718564
,
"results"
:
"24"
,
"hashOfConfig"
:
"14"
},{
"size"
:
2247
,
"mtime"
:
1612097960875
,
"results"
:
"25"
,
"hashOfConfig"
:
"14"
},{
"filePath"
:
"26"
,
"messages"
:
"27"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"28"
},
"1t9w6go"
,{
"filePath"
:
"29"
,
"messages"
:
"30"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"28"
},{
"filePath"
:
"31"
,
"messages"
:
"32"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"28"
},{
"filePath"
:
"33"
,
"messages"
:
"34"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"28"
},{
"filePath"
:
"35"
,
"messages"
:
"36"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"28"
},{
"filePath"
:
"37"
,
"messages"
:
"38"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"28"
},{
"filePath"
:
"39"
,
"messages"
:
"40"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"28"
},{
"filePath"
:
"41"
,
"messages"
:
"42"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"usedDeprecatedRules"
:
"28"
},{
"filePath"
:
"43"
,
"messages"
:
"44"
,
"errorCount"
:
0
,
"warningCount"
:
12
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
null
},{
"filePath"
:
"45"
,
"messages"
:
"46"
,
"errorCount"
:
0
,
"warningCount"
:
14
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
"47"
,
"usedDeprecatedRules"
:
"28"
},{
"filePath"
:
"48"
,
"messages"
:
"49"
,
"errorCount"
:
0
,
"warningCount"
:
0
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
},{
"filePath"
:
"50"
,
"messages"
:
"51"
,
"errorCount"
:
0
,
"warningCount"
:
3
,
"fixableErrorCount"
:
0
,
"fixableWarningCount"
:
0
,
"source"
:
"52"
,
"usedDeprecatedRules"
:
"28"
},
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
index.js"
,[],[
"53"
,
"54"
],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
reportWebVitals.js"
,[],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Components
\\
Login.js"
,[],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
utils
\\
catchErrors.js"
,[],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Components
\\
Signup.js"
,[],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
utils
\\
auth.js"
,[],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Components
\\
Paginations.js"
,[],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Components
\\
PrivateRoute.js"
,[],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Bookmark.js"
,[
"55"
,
"56"
,
"57"
,
"58"
,
"59"
,
"60"
,
"61"
,
"62"
,
"63"
,
"64"
,
"65"
,
"66"
],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Pages
\\
Search.js"
,[
"67"
,
"68"
,
"69"
,
"70"
,
"71"
,
"72"
,
"73"
,
"74"
,
"75"
,
"76"
,
"77"
,
"78"
,
"79"
,
"80"
],
"import React, { useState, useEffect } from 'react';
\r\n
import { Link } from 'react-router-dom';
\r\n
import ohuh from '../ohuh-sm.PNG';
\r\n
import Place from '../Pages/Place.js';
\r\n
import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button, Nav } from 'react-bootstrap';
\r\n
import Paginations from '../Components/Paginations';
\r\n
import axios from 'axios';
\r\n
import queryString from 'query-string'
\r\n
import * as Icon from 'react-bootstrap-icons';
\r\n
import { isAuthenticated } from '../utils/auth';
\r\n
import catchErrors from '../utils/catchErrors'
\r\n\r\n
function Search(props) {\r
\n\r\n
const [state, setState] = useState(false);
\r\n
const [index, setIndex] = useState(1);
\r\n
const [showSet, setShowSet] = useState([false, false, false, false]);
\r\n
const [search, setSearch] = useState(queryString.parse(props.location.search).keyword);
\r\n
const [bookmark, setBookmark] = useState([false, false, false, false])
\r\n
const user = isAuthenticated()
\r\n
const [mobile, setMobile] = useState();
\r\n
const [association, setAssociation] = useState([{ name:
\"
\"
, address:
\"
\"
, img:
\"
\"
}])
\r\n
const [pagePlace, setPagePlace] = useState([{ name:
\"
\"
, address:
\"
\"
, img:
\"
\"
}, { name:
\"
\"
, address:
\"
\"
, img:
\"
\"
}])
\r\n
const [endPage, setEndPage] = useState(1)
\r\n
const [error, setError] = useState('')
\r\n\r\n
async function getBookmark() {\r
\n
try {\r
\n
const response = await axios.get(`/api/users/bookmark?ID=${user}`)
\r\n
// setBookmark(response.data.bookmark)
\r\n
} catch (error) {\r
\n
catchErrors(error, setError)
\r\n
}
\r\n
}
\r\n\r\n
const getAssociation = () => {\r
\n
axios.get(`/api/search/association?keyword=${search}`)
\r\n
.then(res => {\r
\n
console.log(
\"
Associations =
\"
, res.data)
\r\n
setAssociation(res.data)
\r\n
})
\r\n
.catch(err => {\r
\n
console.log(
\"
search.associations 에러 발생
\"
, err)
\r\n
})
\r\n
}
\r\n\r\n\r\n\r\n
useEffect(() => {\r
\n
getAssociation()
\r\n
}, []);
\r\n\r\n
useEffect(() => {\r
\n
if (association.length < 3) {\r
\n
setPagePlace(paginate(association, index, association.length))
\r\n
}
\r\n
else {\r
\n
setPagePlace(paginate(association, index, 4))
\r\n
}
\r\n
setEndPage(Math.floor((association.length / 4)))
\r\n
console.log(
\"
7489309484839
\"
, endPage)
\r\n\r\n
}, [association, index])
\r\n\r\n
useEffect(() => {\r
\n
getAssociation()
\r\n
if (state) {\r
\n
// window.location.reload()
\r\n
// return <Redirect to={{\r
\n
// pathname: `/search?keyword=${search}`,
\r\n
// state: { id: search },
\r\n
// }} />;
\r\n
props.history.push('/search?keyword=' + search)
\r\n
setState(false)
\r\n
// console.log(
\"
search야
\"
, search)
\r\n
} window.addEventListener(
\"
scroll
\"
, infiniteScroll);
\r\n
return () => { window.removeEventListener(
\"
scroll
\"
, infiniteScroll); }
\r\n
}, [state]);
\r\n\r\n
const infiniteScroll = () => {\r
\n
const { documentElement, body } = document;
\r\n
const scrollHeight = Math.max(documentElement.scrollHeight, body.scrollHeight);
\r\n
const scrollTop = Math.max(documentElement.scrollTop, body.scrollTop);
\r\n
const clientHeight = documentElement.clientHeight;
\r\n
if (scrollTop + clientHeight >= scrollHeight) {\r
\n
// getReview();
\r\n
console.log(
\"
더불러
\"
)
\r\n
}
\r\n
console.log(scrollHeight, scrollTop, clientHeight)
\r\n
}
\r\n\r\n\r\n
if (state !== false) {\r
\n
// console.log(queryString.parse(props.location.search))
\r\n
// =
{
keyword:search
}
\r\n
// return <Redirect to={{\r
\n
// pathname: `/search?keyword=${search}`,
\r\n
// state: { id: search },
\r\n
// }} />;
\r\n
// history.pushState(null, null,
\"
?
\"
+queryParams.toString());
\r\n
// return <Redirect to=
{
`/search?keyword=${search}`
}
/>;
\r\n
}
\r\n\r\n
const handlePage = (num) => {\r
\n
setIndex(num);
\r\n
console.log(
\"
pagenation num
\"
, num)
\r\n
console.log(index)
\r\n
}
\r\n\r\n\r\n
const handleChange = (e) => {\r
\n
setSearch(e.target.value);
\r\n
}
\r\n\r\n
const handleSubmit = (e) => {\r
\n
e.preventDefault()
\r\n
setState(true)
\r\n
setIndex(1)
\r\n
}
\r\n\r\n
function paginate(items, pageNumber, itemNumber) {\r
\n
const page = [];
\r\n
const startIndex = (pageNumber - 1) * itemNumber
\r\n
for (var i = 0; i < itemNumber; i++) {\r
\n\r\n
page.push(items[(startIndex + i)])
\r\n
}
\r\n
console.log(
\"
뿌릴 data22222222222222222
\"
, page)
\r\n
return page
\r\n
}
\r\n
//usestate 쓰거나 한번에 useeffect에 넣기
\r\n\r\n
async function handlebookmark(index) {\r
\n
if (!bookmark[index]) {\r
\n
console.log(pagePlace[index])
\r\n
try {\r
\n
const response = await axios.put(`/api/users/bookmark?ID=${user}&place=${pagePlace[index]._id}`)
\r\n
alert(response.data, '북마크가 저장되었습니다.')
\r\n
const showArr = bookmark
\r\n
showArr[index] = true
\r\n
setBookmark(showArr)
\r\n
console.log(
\"
bookmark=
\"
, bookmark)
\r\n
} catch (error) {\r
\n
catchErrors(error, setError)
\r\n
}
\r\n
} else {\r
\n
try {\r
\n
const response = await axios.delete(`/api/users/bookmark?ID=${user}&place=${pagePlace[index]._id}`)
\r\n
alert(response.data, '저장된 북마크가 삭제되었습니다.')
\r\n
const showArr = bookmark
\r\n
showArr[index] = false
\r\n
setBookmark(showArr)
\r\n
console.log(
\"
bookmark=
\"
, bookmark)
\r\n
} catch (error) {\r
\n
catchErrors(error, setError)
\r\n
}
\r\n
}
\r\n
}
\r\n\r\n\r\n
let time = new Date()
\r\n\r\n
return (
\r\n
<Container >
\r\n
<Link to=
\"
/
\"
className=
\"
d-flex justify-content-center
\"
><Image src=
{
ohuh
}
/></Link>
\r\n
<Row className=
\"
mb-2
\"
className=
\"
d-flex justify-content-center
\"
>
\r\n
<Form style={{ width:
\"
90vw
\"
}} onSubmit=
{
handleSubmit
}
>
\r\n
<InputGroup size=
\"
lg
\"
>
\r\n
<FormControl
\r\n
placeholder=
\"
검색어를 입력하세요.
\"\r\n
value=
{
search
}
\r\n
aria-label=
\"
Large
\"\r\n
aria-describedby=
\"
inputGroup-sizing-sm
\"\r\n
onChange=
{
handleChange
}
\r\n
/>
\r\n
<InputGroup.Append>
\r\n
<Button type=
\"
submit
\"
variant=
\"
outline-secondary
\"
>검색</Button>
\r\n
</InputGroup.Append>
\r\n
</InputGroup>
\r\n
</Form>
\r\n
</Row>
\r\n
{/*
{
time.toLocaleString()
}
*/}
\r\n
<Row className=
\"
d-flex flex-wrap
\"
>
\r\n\r\n
{console.log(
\"
#####################33
\"
, pagePlace)}
\r\n
{pagePlace.map((place, index) => {\r
\n
return (
\r\n
<Col key=
{
index
}
md=
{
6
}
>
\r\n
<Card align=
\"
center
\"
border=
\"
info
\"
style={{ margin:
\"
3%
\"
}}>
\r\n\r\n
<Card.Title className=
\"
d-flex justify-content-center
\"
style={{ margin:
\"
3%
\"
, fontSize: '200%', fontWeight: 'bold' }} >
{
place.name
}
\r\n
{user ?
\r\n
<Button
\r\n
variant={bookmark[index] ?
\"
primary
\"
:
\"
light
\"
}
\r\n
onClick={() => handlebookmark(index, place)}>
\r\n
<Icon.BookmarkStarFill size=
{
35
}
/>
\r\n
</Button> : null}
\r\n
</Card.Title>
\r\n
<Card.Img variant=
\"
top
\"
style={{ padding:
\"
5%
\"
, width:
\"
100%
\"
, height:
\"
340px
\"
}} src=
{
place.img
}
/>
\r\n
<Card.Body>
\r\n
<Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height:
\"
80px
\"
}} >
\r\n
{
place.address
}
</Card.Text>
\r\n
<Link to=
{
`/place?id=${index}&place=${place.name}`
}
>
\r\n
<Button variant=
\"
info
\"
>
{
place.name
}
자세히 살펴보기</Button>
\r\n
</Link>
\r\n
</Card.Body>
\r\n
</Card>
\r\n
</Col>
\r\n
)
\r\n
})}
\r\n
</Row>
\r\n
<Row className=
\"
mt-2 d-flex justify-content-center
\"
>
\r\n
<Paginations index=
{
index
}
endPage=
{
endPage
}
handlePage=
{
handlePage
}
></Paginations>
\r\n
</Row>
\r\n
</Container >
\r\n
);
\r\n
}
\r\n\r\n
export default Search;
\r\n
"
,
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Pages
\\
App.js"
,[],
"C:
\\
Users
\\
hello
\\
Desktop
\\
project
\\
search-page
\\
client
\\
src
\\
Pages
\\
Place.js"
,[
"81"
,
"82"
,
"83"
],
"import axios from 'axios';
\r\n
import React, { useEffect, useState } from 'react';
\r\n
import { Container, Row, Button, Col, ListGroup} from 'react-bootstrap';
\r\n
import queryString from 'query-string'
\r\n\r\n
function Place(props) {\r
\n
console.log(props)
\r\n
const [db, setDb] = useState(false)
\r\n
const [index, setIndex] = useState(0)
\r\n
const [reviews, setReviews] = useState([])
\r\n
const place = queryString.parse(props.location).place
\r\n\r\n
const getReview = (index) => {\r
\n
console.log(index,
\"
dlseprtm
\"
)
\r\n
axios({ url: `/api/review?keyword=${place}&index=${index}`, method: 'post', data: { db: db } })
\r\n
.then(res => {\r
\n
console.log(
\"
place res.data
\"
, res.data)
\r\n
setReviews([...reviews, ...res.data.review])
\r\n
setDb(res.data.db)
\r\n
setIndex(res.data.index)
\r\n
})
\r\n
.then(() => {\r
\n
console.log(index,
\"
인텍스
\"
, db)
\r\n
})
\r\n
.catch(err => {\r
\n
console.log(err)
\r\n
})
\r\n
}
\r\n\r\n
useEffect(() => {\r
\n
getReview();
\r\n
window.addEventListener(
\"
scroll
\"
, infiniteScroll);
\r\n
return () => { window.removeEventListener(
\"
scroll
\"
, infiniteScroll); }
\r\n
}, []);
\r\n\r\n
// useEffect(() => {\r
\n
// getReview();
\r\n\r\n
// }, [index])
\r\n\r\n
const infiniteScroll = () => {\r
\n
const { documentElement, body } = document;
\r\n
const scrollHeight = Math.max(documentElement.scrollHeight, body.scrollHeight);
\r\n
const scrollTop = Math.max(documentElement.scrollTop, body.scrollTop);
\r\n
const clientHeight = documentElement.clientHeight;
\r\n
if (scrollTop + clientHeight >= scrollHeight) {\r
\n
// setIndex(index + 1)
\r\n
getReview(index + 1);
\r\n
console.log(
\"
더불러
\"
, index + 1)
\r\n
}
\r\n
console.log(scrollHeight, scrollTop, clientHeight)
\r\n
}
\r\n\r\n
return (
\r\n
<Container
{
...props
}
>
\r\n
<Row>
\r\n
{
place
}
\r\n
{Array.isArray(reviews) ? reviews.map((review, index) => {\r
\n
return (
\r\n
<ListGroup>
\r\n
<ListGroup.Item className=
\"
mt-4
\"
>
\r\n
<a href=
{
review.link}>{review.title
}
</a>
\r\n
<div>
{
review.summary
}
</div>
\r\n
<div>
{
review.content
}
</div>
\r\n
</ListGroup.Item>
\r\n
</ListGroup>
\r\n
)
\r\n
})
\r\n
:
\"
리뷰가 없습니다.
\"
}
\r\n
</Row>
\r\n
</Container>
\r\n
);
\r\n
}
\r\n\r\n
export default Place;
\r\n
"
,{
"ruleId"
:
"84"
,
"replacedBy"
:
"85"
},{
"ruleId"
:
"86"
,
"replacedBy"
:
"87"
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"89"
,
"line"
:
2
,
"column"
:
10
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
2
,
"endColumn"
:
15
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"92"
,
"line"
:
2
,
"column"
:
39
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
2
,
"endColumn"
:
43
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"93"
,
"line"
:
7
,
"column"
:
8
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
7
,
"endColumn"
:
13
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"94"
,
"line"
:
16
,
"column"
:
12
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
16
,
"endColumn"
:
16
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"95"
,
"line"
:
16
,
"column"
:
18
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
16
,
"endColumn"
:
25
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"96"
,
"line"
:
17
,
"column"
:
12
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
17
,
"endColumn"
:
17
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"97"
,
"line"
:
17
,
"column"
:
19
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
17
,
"endColumn"
:
27
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"98"
,
"line"
:
18
,
"column"
:
12
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
18
,
"endColumn"
:
17
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"99"
,
"line"
:
19
,
"column"
:
12
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
19
,
"endColumn"
:
17
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"100"
,
"line"
:
19
,
"column"
:
19
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
19
,
"endColumn"
:
27
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"101"
,
"line"
:
22
,
"column"
:
12
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
22
,
"endColumn"
:
19
},{
"ruleId"
:
"102"
,
"severity"
:
1
,
"message"
:
"103"
,
"line"
:
64
,
"column"
:
8
,
"nodeType"
:
"104"
,
"endLine"
:
64
,
"endColumn"
:
10
,
"suggestions"
:
"105"
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"93"
,
"line"
:
4
,
"column"
:
8
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
4
,
"endColumn"
:
13
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"106"
,
"line"
:
5
,
"column"
:
83
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
5
,
"endColumn"
:
86
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"101"
,
"line"
:
17
,
"column"
:
12
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
17
,
"endColumn"
:
19
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"107"
,
"line"
:
17
,
"column"
:
21
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
17
,
"endColumn"
:
31
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"108"
,
"line"
:
21
,
"column"
:
12
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
21
,
"endColumn"
:
18
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"109"
,
"line"
:
21
,
"column"
:
20
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
21
,
"endColumn"
:
29
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"98"
,
"line"
:
25
,
"column"
:
12
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
25
,
"endColumn"
:
17
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"110"
,
"line"
:
27
,
"column"
:
20
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
27
,
"endColumn"
:
31
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"111"
,
"line"
:
29
,
"column"
:
19
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
29
,
"endColumn"
:
27
},{
"ruleId"
:
"102"
,
"severity"
:
1
,
"message"
:
"112"
,
"line"
:
51
,
"column"
:
8
,
"nodeType"
:
"104"
,
"endLine"
:
51
,
"endColumn"
:
10
,
"suggestions"
:
"113"
},{
"ruleId"
:
"102"
,
"severity"
:
1
,
"message"
:
"114"
,
"line"
:
63
,
"column"
:
8
,
"nodeType"
:
"104"
,
"endLine"
:
63
,
"endColumn"
:
28
,
"suggestions"
:
"115"
},{
"ruleId"
:
"102"
,
"severity"
:
1
,
"message"
:
"116"
,
"line"
:
78
,
"column"
:
8
,
"nodeType"
:
"104"
,
"endLine"
:
78
,
"endColumn"
:
15
,
"suggestions"
:
"117"
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"118"
,
"line"
:
161
,
"column"
:
9
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
161
,
"endColumn"
:
13
},{
"ruleId"
:
"119"
,
"severity"
:
1
,
"message"
:
"120"
,
"line"
:
166
,
"column"
:
35
,
"nodeType"
:
"121"
,
"endLine"
:
166
,
"endColumn"
:
76
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"122"
,
"line"
:
3
,
"column"
:
26
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
3
,
"endColumn"
:
32
},{
"ruleId"
:
"88"
,
"severity"
:
1
,
"message"
:
"123"
,
"line"
:
3
,
"column"
:
34
,
"nodeType"
:
"90"
,
"messageId"
:
"91"
,
"endLine"
:
3
,
"endColumn"
:
37
},{
"ruleId"
:
"102"
,
"severity"
:
1
,
"message"
:
"124"
,
"line"
:
34
,
"column"
:
6
,
"nodeType"
:
"104"
,
"endLine"
:
34
,
"endColumn"
:
8
,
"suggestions"
:
"125"
},
"no-native-reassign"
,[
"126"
],
"no-negated-in-lhs"
,[
"127"
],
"no-unused-vars"
,
"'Alert' is defined but never used."
,
"Identifier"
,
"unusedVar"
,
"'Form' is defined but never used."
,
"'Place' 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."
,
"react-hooks/exhaustive-deps"
,
"React Hook useEffect has a missing dependency: 'getBookmark'. Either include it or remove the dependency array."
,
"ArrayExpression"
,[
"128"
],
"'Nav' is defined but never used."
,
"'setShowSet' is assigned a value but never used."
,
"'mobile' is assigned a value but never used."
,
"'setMobile' is assigned a value but never used."
,
"'getBookmark' is defined but never used."
,
"'response' is assigned a value but never used."
,
"React Hook useEffect has a missing dependency: 'getAssociation'. Either include it or remove the dependency array."
,[
"129"
],
"React Hook useEffect has a missing dependency: 'endPage'. Either include it or remove the dependency array."
,[
"130"
],
"React Hook useEffect has missing dependencies: 'getAssociation', 'props.history', and 'search'. Either include them or remove the dependency array."
,[
"131"
],
"'time' is assigned a value but never used."
,
"react/jsx-no-duplicate-props"
,
"No duplicate props allowed"
,
"JSXAttribute"
,
"'Button' is defined but never used."
,
"'Col' is defined but never used."
,
"React Hook useEffect has missing dependencies: 'getReview' and 'infiniteScroll'. Either include them or remove the dependency array."
,[
"132"
],
"no-global-assign"
,
"no-unsafe-negation"
,{
"desc"
:
"133"
,
"fix"
:
"134"
},{
"desc"
:
"135"
,
"fix"
:
"136"
},{
"desc"
:
"137"
,
"fix"
:
"138"
},{
"desc"
:
"139"
,
"fix"
:
"140"
},{
"desc"
:
"141"
,
"fix"
:
"142"
},
"Update the dependencies array to be: [getBookmark]"
,{
"range"
:
"143"
,
"text"
:
"144"
},
"Update the dependencies array to be: [getAssociation]"
,{
"range"
:
"145"
,
"text"
:
"146"
},
"Update the dependencies array to be: [association, endPage, index]"
,{
"range"
:
"147"
,
"text"
:
"148"
},
"Update the dependencies array to be: [getAssociation, props.history, search, state]"
,{
"range"
:
"149"
,
"text"
:
"150"
},
"Update the dependencies array to be: [getReview, infiniteScroll]"
,{
"range"
:
"151"
,
"text"
:
"152"
},[
2220
,
2222
],
"[getBookmark]"
,[
2006
,
2008
],
"[getAssociation]"
,[
2363
,
2383
],
"[association, endPage, index]"
,[
2962
,
2969
],
"[getAssociation, props.history, search, state]"
,[
1109
,
1111
],
"[getReview, infiniteScroll]"
]
\ No newline at end of file
client/src/Components/Paginations.js
View file @
20a12a94
...
...
@@ -8,7 +8,7 @@ function Paginations(props) {
return
(
<>
{(
props
.
endPage
>
5
)
?
<
Pagination
>
<
Pagination
>
<
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
===
props
.
endPage
-
1
?
<
Pagination
.
Item
onClick
=
{()
=>
props
.
handlePage
(
props
.
index
-
3
)}
>
{
props
.
index
-
3
}
<
/Pagination.Item> : ""
}
...
...
client/src/Pages/App.js
View file @
20a12a94
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
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
,
Nav
}
from
'
react-bootstrap
'
;
import
axios
from
'
axios
'
;
import
Place
from
'
../Pages/Place.js
'
;
import
{
handleLogout
,
isAuthenticated
}
from
'
../utils/auth.js
'
function
App
()
{
const
[
state
,
setState
]
=
useState
(
false
);
...
...
@@ -11,7 +12,7 @@ function App() {
const
[
show
,
setShow
]
=
useState
(
false
);
const
[
recommend
,
setRecommend
]
=
useState
([{
name
:
"
"
,
address
:
"
"
,
img
:
"
"
}]);
const
[
latest
,
setLatest
]
=
useState
([{
name
:
"
"
,
address
:
"
"
,
img
:
"
"
}]);
const
user
=
isAuthenticated
()
useEffect
(()
=>
{
getRecommend
()
...
...
@@ -54,8 +55,18 @@ function App() {
return
(
<
Container
className
=
"
vh-100
"
>
<
Container
className
=
"
vh-100
d-flex justify-content-md-center
\
"
>
<Col md={12} >
<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 className=
"
justify
-
content
-
center
"
>
<Image src={ohuh} style={{ margin:
"
5
%
"
, marginTop :
"
3
%
"
}} />
</Row>
...
...
@@ -84,7 +95,7 @@ function App() {
<Card.Body >
<Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height:
"
80
px
"
}} >
{recommend.address} </Card.Text>
<
Button
variant
=
"
primary
"
onClick
=
{()
=>
{
<Button variant=
"
info
"
onClick={() => {
setShow(true)
}}>{recommend.name} 자세히 살펴보기</Button>
<Place place={recommend} show={show} onHide={() => setShow(false)} />
...
...
@@ -100,7 +111,7 @@ function App() {
<Card.Body >
<Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height:
"
80
px
"
}} >
{latest.address} </Card.Text>
<
Button
variant
=
"
primary
"
onClick
=
{()
=>
{
<Button variant=
"
info
"
onClick={() => {
setShow(true)
}}>{latest.name} 자세히 살펴보기</Button>
<Place place={latest} show={show} onHide={() => setShow(false)} />
...
...
client/src/Pages/Place.js
View file @
20a12a94
...
...
@@ -8,7 +8,7 @@ function Place(props) {
const
[
db
,
setDb
]
=
useState
(
false
)
const
[
index
,
setIndex
]
=
useState
(
0
)
const
[
reviews
,
setReviews
]
=
useState
([])
const
place
=
queryString
.
parse
(
props
.
location
.
search
).
place
const
place
=
queryString
.
parse
(
props
.
location
).
place
const
getReview
=
(
index
)
=>
{
console
.
log
(
index
,
"
dlseprtm
"
)
...
...
client/src/Pages/Search.js
View file @
20a12a94
...
...
@@ -162,7 +162,7 @@ function Search(props) {
return
(
<
Container
>
<
Link
to
=
"
/
path
"
className
=
"
d-flex justify-content-center
"
><
Image
src
=
{
ohuh
}
/></
Link
>
<
Link
to
=
"
/
"
className
=
"
d-flex justify-content-center
"
><
Image
src
=
{
ohuh
}
/></
Link
>
<
Row
className
=
"
mb-2
"
className
=
"
d-flex justify-content-center
"
>
<
Form
style
=
{{
width
:
"
90vw
"
}}
onSubmit
=
{
handleSubmit
}
>
<
InputGroup
size
=
"
lg
"
>
...
...
@@ -201,7 +201,7 @@ function Search(props) {
<
Card
.
Text
style
=
{{
overflow
:
'
auto
'
,
fontSize
:
'
25px
'
,
width
:
'
100%
'
,
height
:
"
80px
"
}}
>
{
place
.
address
}
<
/Card.Text
>
<
Link
to
=
{
`/place?id=
${
index
}
&place=
${
place
.
name
}
`
}
>
<
Button
variant
=
"
primary
"
>
{
place
.
name
}
자세히
살펴보기
<
/Button
>
<
Button
variant
=
"
info
"
>
{
place
.
name
}
자세히
살펴보기
<
/Button
>
<
/Link
>
<
/Card.Body
>
<
/Card
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment