Commit 3af59273 authored by Kim, Chaerin's avatar Kim, Chaerin
Browse files

UI 완성!

parent 77421aac
[{"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Search.js":"1"},{"size":45871,"mtime":1609149857806,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"1n20xnc","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Search.js",["6"],{"ruleId":"7","severity":1,"message":"8","line":10,"column":18,"nodeType":"9","messageId":"10","endLine":10,"endColumn":25},"no-unused-vars","'setShow' is assigned a value but never used.","Identifier","unusedVar"]
\ No newline at end of file
[{"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Search.js":"1","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Components\\Place.js":"2","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\App.js":"3"},{"size":45798,"mtime":1609291728121,"results":"4","hashOfConfig":"5"},{"size":2147,"mtime":1609148535437,"results":"6","hashOfConfig":"5"},{"size":1359,"mtime":1609244671772,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1n20xnc",{"filePath":"10","messages":"11","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"12"},{"filePath":"13","messages":"14","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Search.js",[],"C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\Components\\Place.js",["15"],"import React from 'react';\r\nimport { Modal, Container, Row, Col, Button } from 'react-bootstrap';\r\n\r\nfunction Place(props) {\r\n return (\r\n <Modal {...props}\r\n size=\"lg\"\r\n // show={lgShow}\r\n // onHide={() => setLgShow(false)}\r\n aria-labelledby=\"example-modal-sizes-title-lg\">\r\n <Modal.Header closeButton>\r\n <Modal.Title id=\"contained-modal-title-vcenter\">\r\n {props.search.name} \r\n </Modal.Title>\r\n </Modal.Header>\r\n <Modal.Body className=\"show-grid\">\r\n <Container>\r\n <Row className=\"mt-4\">\r\n <div>주도 전역을 지배하는 한라산은 남한에서 가장 높은 산으로 높이는 1,947.3m이다. 한라산이라는 이름은 산이 높아 산정에 서면 은하수를 잡아당길 수 있다는 뜻이며, 부악·원산·선산·두무악·영주산·부라산·혈망봉·여장군 등으로도 불려왔다.</div>\r\n <a href=\"https://www.daum.net\">다음의 블로그</a>\r\n </Row>\r\n <Row className=\"mt-4\">\r\n <div>한라산은 1966년 한라산 천연보호구역으로, 1970년 국립공원으로 지정되었다. 그리고 2002년에는 유네스코 생물권보전지역으로 지정되었으며 2007년에는 유네스코 세계자연유산으로 등재되었다. 2008년에는 물장오리오름 산정화구호 습지가 람사르 습지로 등록되어 보호 관리되고 있다</div>\r\n <a href=\"https://www.naver.com/\">네이버의 블로그</a>\r\n </Row>\r\n <Row className=\"mt-4\">\r\n <div>한라산은 제주도에 있는 해발 1,947.06m, 면적 약 1,820km²의 화산으로, 제주도의 면적 대부분을 차지하고 있다. 정상에 백록담이라는 화산호가 있는데, 백록담이라는 이름은 흰 사슴이 물을 먹는 곳이라는 뜻에서 왔다고 전해진다.</div>\r\n <a href=\"https://www.google.com/\">구글의 블로그</a></Row>\r\n </Container>\r\n </Modal.Body>\r\n <Modal.Footer>\r\n <Button onClick={props.onHide}>Close</Button>\r\n </Modal.Footer>\r\n </Modal>\r\n );\r\n}\r\n\r\nexport default Place;","C:\\Users\\sag06\\Desktop\\project\\search-page\\client\\src\\App.js",["16","17"],{"ruleId":"18","severity":1,"message":"19","line":2,"column":33,"nodeType":"20","messageId":"21","endLine":2,"endColumn":36},{"ruleId":"18","severity":1,"message":"22","line":1,"column":17,"nodeType":"20","messageId":"21","endLine":1,"endColumn":26},{"ruleId":"18","severity":1,"message":"23","line":2,"column":10,"nodeType":"20","messageId":"21","endLine":2,"endColumn":14},"no-unused-vars","'Col' is defined but never used.","Identifier","unusedVar","'useEffect' is defined but never used.","'Link' is defined but never used."]
\ No newline at end of file
......@@ -4,8 +4,8 @@ import ohuh from './ohuh.PNG';
import { Container, Row, Form, Image, InputGroup, Button } from 'react-bootstrap';
function App() {
const [search, setSearch] = useState("");
const [state, setState] = useState(false);
const [search, setSearch] = useState("");
if (state !== false) {
return <Redirect to={{
......@@ -18,7 +18,7 @@ function App() {
setSearch(e.target.value);
}
const handleSubmit = (e) => {
const handleSubmit = () => {
setState(true);
}
......
......@@ -7,7 +7,7 @@ import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button
function Search(props) {
const [state, setState] = useState(false);
const [index, setIndex] = useState(1);
const [show, setShow] = useState([false, false, false, false]);
const [show, setShow] = useState(false);
const [search, setSearch] = useState(props.location.state.id);
const places = [{
......@@ -463,19 +463,18 @@ function Search(props) {
<Card.Title>{place.name}</Card.Title>
<Card.Text>
{place.address} </Card.Text>
<Button variant="primary" onClick={() => { show[index] = true; console.log(show) }}>{place.name} 자세히 살펴보기</Button>
<Place search={place.name} show={show[index]} onHide={() => show[index] = false} />
<Button variant="primary" onClick={() => { setShow(true); console.log(show) }}>{place.name} 자세히 살펴보기</Button>
<Place search={place} show={show} onHide={() => setShow(false)} />
</Card.Body>
</Card>
</Col>
)
})}
</Row>
{console.log(show)}
<Row className="mt-2 d-flex justify-content-center">
<Pagination>
<Pagination.First onClick={() => setIndex(1)} />
{index < 4 ? "" : <Pagination.Prev onClick={() => setIndex(index - 3)} />}
{index === 1 ? "" : <Pagination.Prev onClick={() => setIndex(index - 1)} />}
{index < 3 ? "" : <Pagination.Item onClick={() => setIndex(index - 2)}>{index - 2}</Pagination.Item>}
{index === 1 ? "" : <Pagination.Item onClick={() => setIndex(index - 1)}>{index - 1}</Pagination.Item>}
......@@ -483,7 +482,7 @@ function Search(props) {
{index === 10 ? "" : <Pagination.Item onClick={() => setIndex(index + 1)}>{index + 1}</Pagination.Item>}
{index > 8 ? "" : <Pagination.Item onClick={() => setIndex(index + 2)}>{index + 2}</Pagination.Item>}
{index > 8 ? "" : <Pagination.Next onClick={() => setIndex(index + 3)} />}
{index === 10 ? "" : <Pagination.Next onClick={() => setIndex(index + 1)} />}
<Pagination.Last onClick={() => setIndex(10)} />
</Pagination>
</Row>
......
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