Commit a4854c6c authored by baesangjune's avatar baesangjune
Browse files

style

parent e3b0d6f3
[{"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\index.js":"1","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\reportWebVitals.js":"2","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\App.js":"3","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\Search.js":"4","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\Components\\Place.js":"5"},{"size":903,"mtime":1609294193427,"results":"6","hashOfConfig":"7"},{"size":375,"mtime":1609072355927,"results":"8","hashOfConfig":"7"},{"size":1411,"mtime":1609294197036,"results":"9","hashOfConfig":"7"},{"size":38299,"mtime":1609721503009,"results":"10","hashOfConfig":"7"},{"size":2406,"mtime":1609720740553,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"zqc0qw",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"17","messages":"18","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"19","usedDeprecatedRules":"14"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"24","usedDeprecatedRules":"14"},"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\index.js",[],["25","26"],"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\reportWebVitals.js",[],"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\App.js",["27","28"],"import React, { useEffect, useState } from 'react';\r\nimport { Link, Redirect } from 'react-router-dom';\r\nimport ohuh from './ohuh.PNG';\r\nimport { Container, Row, Form, Image, InputGroup, Button } from 'react-bootstrap';\r\n\r\nfunction App() {\r\n const [state, setState] = useState(false);\r\n const [search, setSearch] = useState(\"\");\r\n\r\n if (state !== false) {\r\n return <Redirect to={{\r\n pathname: `/search/${search}`,\r\n state: { id: search },\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 = () => {\r\n setState(true);\r\n }\r\n\r\n\r\n\r\n return (\r\n <Container className=\"vh-100\">\r\n <Row className=\"d-flex justify-content-md-center\">\r\n <Image src={ohuh} />\r\n </Row>\r\n <Row className=\"d-flex justify-content-md-center\">\r\n <Form className=\"vw-100\" onSubmit={handleSubmit}>\r\n <InputGroup>\r\n <Form.Control\r\n size=\"lg\"\r\n placeholder=\"검색어를 입력하세요.\"\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 </Container>\r\n );\r\n}\r\n\r\nexport default App;\r\n","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\Search.js",[],"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\Components\\Place.js",["29"],"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 <>\r\n <style type=\"text/css\">\r\n {`\r\n .modal-backdrop.in {\r\n opacity: 0;\r\n }\r\n `}\r\n </style>\r\n <Modal {...props}\r\n size=\"lg\"\r\n keyboard=\"true\"\r\n variant=\"backdrop.in\"\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\n\r\nexport default Place;",{"ruleId":"30","replacedBy":"31"},{"ruleId":"32","replacedBy":"33"},{"ruleId":"34","severity":1,"message":"35","line":1,"column":17,"nodeType":"36","messageId":"37","endLine":1,"endColumn":26},{"ruleId":"34","severity":1,"message":"38","line":2,"column":10,"nodeType":"36","messageId":"37","endLine":2,"endColumn":14},{"ruleId":"34","severity":1,"message":"39","line":2,"column":33,"nodeType":"36","messageId":"37","endLine":2,"endColumn":36},"no-native-reassign",["40"],"no-negated-in-lhs",["41"],"no-unused-vars","'useEffect' is defined but never used.","Identifier","unusedVar","'Link' is defined but never used.","'Col' is defined but never used.","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
[{"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\index.js":"1","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\reportWebVitals.js":"2","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\App.js":"3","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\Search.js":"4","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\Components\\Place.js":"5","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\pagination.js":"6"},{"size":903,"mtime":1609294193427,"results":"7","hashOfConfig":"8"},{"size":375,"mtime":1609072355927,"results":"9","hashOfConfig":"8"},{"size":1411,"mtime":1609294197036,"results":"10","hashOfConfig":"8"},{"size":37445,"mtime":1609858033675,"results":"11","hashOfConfig":"8"},{"size":2406,"mtime":1609720740553,"results":"12","hashOfConfig":"8"},{"size":2211,"mtime":1609742872420,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"zqc0qw",{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"21","usedDeprecatedRules":"16"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"24","messages":"25","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"26","usedDeprecatedRules":"16"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\index.js",[],["29","30"],"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\reportWebVitals.js",[],"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\App.js",["31","32"],"import React, { useEffect, useState } from 'react';\r\nimport { Link, Redirect } from 'react-router-dom';\r\nimport ohuh from './ohuh.PNG';\r\nimport { Container, Row, Form, Image, InputGroup, Button } from 'react-bootstrap';\r\n\r\nfunction App() {\r\n const [state, setState] = useState(false);\r\n const [search, setSearch] = useState(\"\");\r\n\r\n if (state !== false) {\r\n return <Redirect to={{\r\n pathname: `/search/${search}`,\r\n state: { id: search },\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 = () => {\r\n setState(true);\r\n }\r\n\r\n\r\n\r\n return (\r\n <Container className=\"vh-100\">\r\n <Row className=\"d-flex justify-content-md-center\">\r\n <Image src={ohuh} />\r\n </Row>\r\n <Row className=\"d-flex justify-content-md-center\">\r\n <Form className=\"vw-100\" onSubmit={handleSubmit}>\r\n <InputGroup>\r\n <Form.Control\r\n size=\"lg\"\r\n placeholder=\"검색어를 입력하세요.\"\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 </Container>\r\n );\r\n}\r\n\r\nexport default App;\r\n","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\Search.js",["33"],"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\Components\\Place.js",["34"],"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 <>\r\n <style type=\"text/css\">\r\n {`\r\n .modal-backdrop.in {\r\n opacity: 0;\r\n }\r\n `}\r\n </style>\r\n <Modal {...props}\r\n size=\"lg\"\r\n keyboard=\"true\"\r\n variant=\"backdrop.in\"\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\n\r\nexport default Place;","C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\pagination.js",[],{"ruleId":"35","replacedBy":"36"},{"ruleId":"37","replacedBy":"38"},{"ruleId":"39","severity":1,"message":"40","line":1,"column":17,"nodeType":"41","messageId":"42","endLine":1,"endColumn":26},{"ruleId":"39","severity":1,"message":"43","line":2,"column":10,"nodeType":"41","messageId":"42","endLine":2,"endColumn":14},{"ruleId":"39","severity":1,"message":"44","line":5,"column":83,"nodeType":"41","messageId":"42","endLine":5,"endColumn":93},{"ruleId":"39","severity":1,"message":"45","line":2,"column":33,"nodeType":"41","messageId":"42","endLine":2,"endColumn":36},"no-native-reassign",["46"],"no-negated-in-lhs",["47"],"no-unused-vars","'useEffect' is defined but never used.","Identifier","unusedVar","'Link' is defined but never used.","'Pagination' is defined but never used.","'Col' is defined but never used.","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
......@@ -3,8 +3,10 @@ import { Link, Redirect } from 'react-router-dom';
import ohuh from './ohuh-sm.PNG';
import Place from './Components/Place';
import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button, Pagination } from 'react-bootstrap';
import Paginations from './pagination.js';
function Search(props) {
const endPage = 10;
const [state, setState] = useState(false);
const [index, setIndex] = useState(1);
const [show, setShow] = useState(false);
......@@ -13,11 +15,11 @@ function Search(props) {
const places = [{
name: "한라산(hallasan)",
address: "제주 서귀포시 토평동 산15-1",
img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg/269px-KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg",
img: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg/269px-KOCIS_Halla_Mountain_in_Jeju-do_%286387785543%29.jpg?size=200x200",
}, {
name: "성산일출봉(sungsan)",
address: "제주 서귀포시 성산읍 성산리 1",
img: "https://www.jeju.go.kr/pub/site/geopark/images/sub/sub03/02%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84%EC%9D%B4%EC%95%BC%EA%B8%B0/%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84/%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84_%EC%84%B1%EC%82%B0%EC%9D%BC%EC%B6%9C%EB%B4%89/1412402261.jpg",
img: "https://www.jeju.go.kr/pub/site/geopark/images/sub/sub03/02%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84%EC%9D%B4%EC%95%BC%EA%B8%B0/%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84/%EC%A7%80%EC%A7%88%EB%A7%88%EC%9D%84_%EC%84%B1%EC%82%B0%EC%9D%BC%EC%B6%9C%EB%B4%89/1412402261.jpg?400/400",
}, {
name: "해녀의 집(haenyeo)",
address: "제주 서귀포시 성산읍 한도로 141-13지번오조리 3 오조해녀의집",
......@@ -415,6 +417,11 @@ function Search(props) {
}} />;
}
const handlePage = (num) => {
setIndex(num);
}
const handleChange = (e) => {
setSearch(e.target.value);
}
......@@ -436,7 +443,7 @@ function Search(props) {
return (
<Container>
<Row className="mt-2 mb-2">
<Row className="mt-4 mb-3">
<Form className="vw-100" onSubmit={handleSubmit}>
<InputGroup size="lg">
<Link to="/"><Image src={ohuh} /></Link>
......@@ -456,12 +463,12 @@ function Search(props) {
<Row className="d-flex flex-wrap">
{pagePlace.map((place, index) => {
return (
<Col key={index} md={6}>
<Card>
<Card.Img variant="top" src={place.img} />
<Card.Body>
<Card.Title>{place.name}</Card.Title>
<Card.Text>
<Col key={index} md={6} >
<Card align="center" border="info" hei>
<Card.Title style={{fontSize:'40px', fontWeight:'bold'}} >{place.name}</Card.Title>
<Card.Img variant="top" style={{width:"100%", height:"400px"}} src={place.img} />
<Card.Body >
<Card.Text style={{overflow:'auto', fontSize:'25px', width: '100%', height:"80px"}} >
{place.address} </Card.Text>
<Button variant="primary" onClick={() => setShow(true)}>{place.name} 자세히 살펴보기</Button>
<Place search={place} show={show} onHide={() => setShow(false)} />
......@@ -472,24 +479,7 @@ function Search(props) {
})}
</Row>
<Row className="mt-2 d-flex justify-content-center">
<Pagination>
<Pagination.First onClick={() => setIndex(1)} />
{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>}
<Pagination.Item active>{index}</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 === 1 ? <Pagination.Item onClick={() => setIndex(index + 3)}>{index + 3}</Pagination.Item> :"" }
{index === 1 ? <Pagination.Item onClick={() => setIndex(index + 4)}>{index + 4}</Pagination.Item> :"" }
{index === 10 ? "" : <Pagination.Next onClick={() => setIndex(index + 1)} />}
<Pagination.Last onClick={() => setIndex(10)} />
</Pagination>
<Paginations index={index} endPage={endPage} handlePage={handlePage}></Paginations>
</Row>
</Container>
);
......
import { Pagination } from "react-bootstrap";
import React from 'react';
function Paginations(props) {
console.log(props)
// const [index, setIndex] = useState(1);
return (
<Pagination>
<Pagination.First onClick={() => props.handlePage(1)} />
{props.index === 1 ? "" : <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 ? <Pagination.Item onClick={()=>props.handlePage(props.index - 4)}>{props.index - 4}</Pagination.Item> : ""}
{props.index === props.endPage ? <Pagination.Item onClick={()=>props.handlePage(props.index - 3)}>{props.index - 3}</Pagination.Item> : ""}
{props.index < 3 ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index - 2)}>{props.index - 2}</Pagination.Item>}
{props.index === 1 ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index - 1)}>{props.index - 1}</Pagination.Item>}
<Pagination.Item active>{props.index}</Pagination.Item>
{props.index === props.endPage ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index + 1)}>{props.index + 1}</Pagination.Item>}
{props.index > props.endPage-2 ? "" : <Pagination.Item onClick={()=>props.handlePage(props.index + 2)}>{props.index + 2}</Pagination.Item>}
{props.index === 1 ? <Pagination.Item onClick={()=>props.handlePage(props.index + 3)}>{props.index + 3}</Pagination.Item> : ""}
{props.index === 1 ? <Pagination.Item onClick={()=>props.handlePage(props.index + 4)}>{props.index + 4}</Pagination.Item> : ""}
{props.index === 2 ? <Pagination.Item onClick={()=>props.handlePage(props.index + 3)}>{props.index + 3}</Pagination.Item> : ""}
{props.index === props.endPage ? "" : <Pagination.Next onClick={()=>props.handlePage(props.index + 1)} />}
<Pagination.Last onClick={() =>props.handlePage(props.endPage)} />
</Pagination>
)
}
export default Paginations
\ No newline at end of file
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