diff --git a/client/.eslintcache b/client/.eslintcache index f5c31e5ca8b52ed96408ee74ca86899998dc0d60..7fdaf9ff15dbaef0c60c8771cbe6d680c203c558 100644 --- a/client/.eslintcache +++ b/client/.eslintcache @@ -1 +1 @@ -[{"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 ;\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 \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \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 \r\n setLgShow(false)}\r\n aria-labelledby=\"example-modal-sizes-title-lg\">\r\n \r\n \r\n {props.search.name}\r\n \r\n \r\n \r\n \r\n \r\n
주도 전역을 지배하는 한라산은 남한에서 가장 높은 산으로 높이는 1,947.3m이다. 한라산이라는 이름은 산이 높아 산정에 서면 은하수를 잡아당길 수 있다는 뜻이며, 부악·원산·선산·두무악·영주산·부라산·혈망봉·여장군 등으로도 불려왔다.
\r\n 다음의 블로그\r\n \r\n \r\n
한라산은 1966년 한라산 천연보호구역으로, 1970년 국립공원으로 지정되었다. 그리고 2002년에는 유네스코 생물권보전지역으로 지정되었으며 2007년에는 유네스코 세계자연유산으로 등재되었다. 2008년에는 물장오리오름 산정화구호 습지가 람사르 습지로 등록되어 보호 관리되고 있다
\r\n 네이버의 블로그\r\n \r\n \r\n
한라산은 제주도에 있는 해발 1,947.06m, 면적 약 1,820km²의 화산으로, 제주도의 면적 대부분을 차지하고 있다. 정상에 백록담이라는 화산호가 있는데, 백록담이라는 이름은 흰 사슴이 물을 먹는 곳이라는 뜻에서 왔다고 전해진다.
\r\n 구글의 블로그\r\n \r\n \r\n \r\n \r\n \r\n \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 ;\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 \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \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 \r\n setLgShow(false)}\r\n aria-labelledby=\"example-modal-sizes-title-lg\">\r\n \r\n \r\n {props.search.name}\r\n \r\n \r\n \r\n \r\n \r\n
주도 전역을 지배하는 한라산은 남한에서 가장 높은 산으로 높이는 1,947.3m이다. 한라산이라는 이름은 산이 높아 산정에 서면 은하수를 잡아당길 수 있다는 뜻이며, 부악·원산·선산·두무악·영주산·부라산·혈망봉·여장군 등으로도 불려왔다.
\r\n 다음의 블로그\r\n \r\n \r\n
한라산은 1966년 한라산 천연보호구역으로, 1970년 국립공원으로 지정되었다. 그리고 2002년에는 유네스코 생물권보전지역으로 지정되었으며 2007년에는 유네스코 세계자연유산으로 등재되었다. 2008년에는 물장오리오름 산정화구호 습지가 람사르 습지로 등록되어 보호 관리되고 있다
\r\n 네이버의 블로그\r\n \r\n \r\n
한라산은 제주도에 있는 해발 1,947.06m, 면적 약 1,820km²의 화산으로, 제주도의 면적 대부분을 차지하고 있다. 정상에 백록담이라는 화산호가 있는데, 백록담이라는 이름은 흰 사슴이 물을 먹는 곳이라는 뜻에서 왔다고 전해진다.
\r\n 구글의 블로그\r\n \r\n \r\n \r\n \r\n \r\n \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 diff --git a/client/src/Search.js b/client/src/Search.js index db6e5350bb79b1d0ed15af37c3ae58cf949b4622..e6ecaee3dc372d11395b6ec9d194f4fb129cc1f9 100644 --- a/client/src/Search.js +++ b/client/src/Search.js @@ -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 ( - +
@@ -456,12 +463,12 @@ function Search(props) { {pagePlace.map((place, index) => { return ( - - - - - {place.name} - + + + {place.name} + + + {place.address} setShow(false)} /> @@ -472,24 +479,7 @@ function Search(props) { })} - - setIndex(1)} /> - {index === 1 ? "" : setIndex(index - 1)} />} - - {index < 3 ? "" : setIndex(index - 2)}>{index - 2}} - {index === 1 ? "" : setIndex(index - 1)}>{index - 1}} - - {index} - - - {index === 10 ? "" : setIndex(index + 1)}>{index + 1}} - {index > 8 ? "" : setIndex(index + 2)}>{index + 2}} - {index === 1 ? setIndex(index + 3)}>{index + 3} :"" } - {index === 1 ? setIndex(index + 4)}>{index + 4} :"" } - {index === 10 ? "" : setIndex(index + 1)} />} - - setIndex(10)} /> - + ); diff --git a/client/src/pagination.js b/client/src/pagination.js new file mode 100644 index 0000000000000000000000000000000000000000..9aa8607d34d21ca461b484b9e55c3a46a720cd43 --- /dev/null +++ b/client/src/pagination.js @@ -0,0 +1,37 @@ +import { Pagination } from "react-bootstrap"; +import React from 'react'; + + + +function Paginations(props) { + console.log(props) + // const [index, setIndex] = useState(1); + + return ( + + props.handlePage(1)} /> + {props.index === 1 ? "" : props.handlePage(props.index - 1)} />} + {props.index === props.endPage-1 ? props.handlePage(props.index - 3)}>{props.index - 3} : ""} + {props.index === props.endPage ? props.handlePage(props.index - 4)}>{props.index - 4} : ""} + {props.index === props.endPage ? props.handlePage(props.index - 3)}>{props.index - 3} : ""} + {props.index < 3 ? "" : props.handlePage(props.index - 2)}>{props.index - 2}} + {props.index === 1 ? "" : props.handlePage(props.index - 1)}>{props.index - 1}} + + {props.index} + + + {props.index === props.endPage ? "" : props.handlePage(props.index + 1)}>{props.index + 1}} + {props.index > props.endPage-2 ? "" : props.handlePage(props.index + 2)}>{props.index + 2}} + {props.index === 1 ? props.handlePage(props.index + 3)}>{props.index + 3} : ""} + {props.index === 1 ? props.handlePage(props.index + 4)}>{props.index + 4} : ""} + {props.index === 2 ? props.handlePage(props.index + 3)}>{props.index + 3} : ""} + {props.index === props.endPage ? "" : props.handlePage(props.index + 1)} />} + + props.handlePage(props.endPage)} /> + + + + ) + +} +export default Paginations \ No newline at end of file