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"] [{"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 \ No newline at end of file
...@@ -4,8 +4,8 @@ import ohuh from './ohuh.PNG'; ...@@ -4,8 +4,8 @@ import ohuh from './ohuh.PNG';
import { Container, Row, Form, Image, InputGroup, Button } from 'react-bootstrap'; import { Container, Row, Form, Image, InputGroup, Button } from 'react-bootstrap';
function App() { function App() {
const [search, setSearch] = useState("");
const [state, setState] = useState(false); const [state, setState] = useState(false);
const [search, setSearch] = useState("");
if (state !== false) { if (state !== false) {
return <Redirect to={{ return <Redirect to={{
...@@ -18,7 +18,7 @@ function App() { ...@@ -18,7 +18,7 @@ function App() {
setSearch(e.target.value); setSearch(e.target.value);
} }
const handleSubmit = (e) => { const handleSubmit = () => {
setState(true); setState(true);
} }
......
...@@ -7,7 +7,7 @@ import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button ...@@ -7,7 +7,7 @@ import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button
function Search(props) { function Search(props) {
const [state, setState] = useState(false); const [state, setState] = useState(false);
const [index, setIndex] = useState(1); 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 [search, setSearch] = useState(props.location.state.id);
const places = [{ const places = [{
...@@ -463,19 +463,18 @@ function Search(props) { ...@@ -463,19 +463,18 @@ function Search(props) {
<Card.Title>{place.name}</Card.Title> <Card.Title>{place.name}</Card.Title>
<Card.Text> <Card.Text>
{place.address} </Card.Text> {place.address} </Card.Text>
<Button variant="primary" onClick={() => { show[index] = true; console.log(show) }}>{place.name} 자세히 살펴보기</Button> <Button variant="primary" onClick={() => { setShow(true); console.log(show) }}>{place.name} 자세히 살펴보기</Button>
<Place search={place.name} show={show[index]} onHide={() => show[index] = false} /> <Place search={place} show={show} onHide={() => setShow(false)} />
</Card.Body> </Card.Body>
</Card> </Card>
</Col> </Col>
) )
})} })}
</Row> </Row>
{console.log(show)}
<Row className="mt-2 d-flex justify-content-center"> <Row className="mt-2 d-flex justify-content-center">
<Pagination> <Pagination>
<Pagination.First onClick={() => setIndex(1)} /> <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 < 3 ? "" : <Pagination.Item onClick={() => setIndex(index - 2)}>{index - 2}</Pagination.Item>}
{index === 1 ? "" : <Pagination.Item onClick={() => setIndex(index - 1)}>{index - 1}</Pagination.Item>} {index === 1 ? "" : <Pagination.Item onClick={() => setIndex(index - 1)}>{index - 1}</Pagination.Item>}
...@@ -483,7 +482,7 @@ function Search(props) { ...@@ -483,7 +482,7 @@ function Search(props) {
{index === 10 ? "" : <Pagination.Item onClick={() => setIndex(index + 1)}>{index + 1}</Pagination.Item>} {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.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.Last onClick={() => setIndex(10)} />
</Pagination> </Pagination>
</Row> </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