Commit 939f2b23 authored by Lee SeoYeon's avatar Lee SeoYeon
Browse files

.

parents 631583e0 7c475728
<<<<<<< HEAD
[{"C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\index.js":"1","C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\App.js":"2","C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\reportWebVitals.js":"3","C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\Hello.js":"4","C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\Search.js":"5","C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\Components\\Place.js":"6"},{"size":903,"mtime":1609909281894,"results":"7","hashOfConfig":"8"},{"size":1893,"mtime":1609907905424,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":499162500000,"results":"10","hashOfConfig":"8"},{"size":290,"mtime":1609117397222,"results":"11","hashOfConfig":"12"},{"size":38270,"mtime":1609909879317,"results":"13","hashOfConfig":"8"},{"size":2406,"mtime":1609909281882,"results":"14","hashOfConfig":"8"},{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1t9w6go",{"filePath":"17","messages":"18","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":"19","usedDeprecatedRules":"20"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"lx0k82",{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\index.js",[],"C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\App.js",["29","30","31"],"import React, { useEffect, useState } from 'react';\r\nimport { Link, Redirect } from 'react-router-dom';\r\nimport ohuh from './ohuh.PNG';\r\nimport { Col, FormControl, Container, Row, Form, Image, InputGroup, Button } from 'react-bootstrap';\r\n\r\n\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 {/* <Row as={Image} src={ohuh} col-sm-5 col-lg-6 offset-lg-0> */}\r\n <Col md={6} className=\"mt-5\">\r\n <Image src={ohuh} fluid />\r\n </Col>\r\n {/* </Row> */}\r\n <Col lg={{ span: 10, offset: 1 }} > {/*xs={{ span: 12, offset: 3 }} */}\r\n <InputGroup size=\"lg\" lg={6} xs={4} fluid>\r\n <FormControl\r\n className=\"d-flex justify-content-lg-center\"\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 variant=\"outline-secondary\" onClick={handleSubmit}>검색</Button>\r\n </InputGroup.Append>\r\n </InputGroup>\r\n {/* <form onSubmit={handleSubmit}>\r\n <input className=\"\" name=\"search\" type=\"text\" placeholder=\"검색어를 입력하세요.\" onChange={handleChange}></input>\r\n <Link to=\"/search\"><button type=\"submit\">검색</button></Link>\r\n </form> */}\r\n </Col>\r\n </Row>\r\n </Container>\r\n );\r\n}\r\n\r\nexport default App;\r\n",["32","33"],"C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\reportWebVitals.js",[],"C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\Hello.js",[],"C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\Search.js",[],"C:\\Users\\hello\\Desktop\\project\\search-page\\client\\src\\Components\\Place.js",["34"],{"ruleId":"35","severity":1,"message":"36","line":1,"column":17,"nodeType":"37","messageId":"38","endLine":1,"endColumn":26},{"ruleId":"35","severity":1,"message":"39","line":2,"column":10,"nodeType":"37","messageId":"38","endLine":2,"endColumn":14},{"ruleId":"35","severity":1,"message":"40","line":4,"column":44,"nodeType":"37","messageId":"38","endLine":4,"endColumn":48},{"ruleId":"41","replacedBy":"42"},{"ruleId":"43","replacedBy":"44"},{"ruleId":"35","severity":1,"message":"45","line":2,"column":33,"nodeType":"37","messageId":"38","endLine":2,"endColumn":36},"no-unused-vars","'useEffect' is defined but never used.","Identifier","unusedVar","'Link' is defined but never used.","'Form' is defined but never used.","no-native-reassign",["46"],"no-negated-in-lhs",["47"],"'Col' is defined but never used.","no-global-assign","no-unsafe-negation"]
=======
[{"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":1022,"mtime":1609858198940,"results":"7","hashOfConfig":"8"},{"size":375,"mtime":1609072355927,"results":"9","hashOfConfig":"8"},{"size":1411,"mtime":1609294197036,"results":"10","hashOfConfig":"8"},{"size":37563,"mtime":1609908883760,"results":"11","hashOfConfig":"8"},{"size":2464,"mtime":1609860408273,"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":2,"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","34"],"C:\\Users\\Korea\\Desktop\\2020winter\\search-page\\client\\src\\Components\\Place.js",["35"],"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=\"xl\"\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\" style={{fontSize:'40px'}}>\r\n {props.search.name}\r\n </Modal.Title>\r\n </Modal.Header>\r\n <Modal.Body className=\"show-grid\">\r\n <Container style={{fontSize:'30px'}}>\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 block 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":"36","replacedBy":"37"},{"ruleId":"38","replacedBy":"39"},{"ruleId":"40","severity":1,"message":"41","line":1,"column":17,"nodeType":"42","messageId":"43","endLine":1,"endColumn":26},{"ruleId":"40","severity":1,"message":"44","line":2,"column":10,"nodeType":"42","messageId":"43","endLine":2,"endColumn":14},{"ruleId":"40","severity":1,"message":"45","line":5,"column":83,"nodeType":"42","messageId":"43","endLine":5,"endColumn":93},{"ruleId":"46","severity":1,"message":"47","line":447,"column":35,"nodeType":"48","endLine":447,"endColumn":76},{"ruleId":"40","severity":1,"message":"49","line":2,"column":33,"nodeType":"42","messageId":"43","endLine":2,"endColumn":36},"no-native-reassign",["50"],"no-negated-in-lhs",["51"],"no-unused-vars","'useEffect' is defined but never used.","Identifier","unusedVar","'Link' is defined but never used.","'Pagination' is defined but never used.","react/jsx-no-duplicate-props","No duplicate props allowed","JSXAttribute","'Col' is defined but never used.","no-global-assign","no-unsafe-negation"]
>>>>>>> Sangjune
# Getting Started with Create React App
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
......
......@@ -12,19 +12,19 @@ function Place(props) {
`}
</style>
<Modal {...props}
size="lg"
size="xl"
keyboard="true"
variant="backdrop.in"
// show={lgShow}
// onHide={() => setLgShow(false)}
aria-labelledby="example-modal-sizes-title-lg">
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
<Modal.Title id="contained-modal-title-vcenter" style={{fontSize:'40px'}}>
{props.search.name}
</Modal.Title>
</Modal.Header>
<Modal.Body className="show-grid">
<Container>
<Container style={{fontSize:'30px'}}>
<Row className="mt-4">
<div>주도 전역을 지배하는 한라산은 남한에서 가장 높은 산으로 높이는 1,947.3m이다. 한라산이라는 이름은 산이 높아 산정에 서면 은하수를 잡아당길 있다는 뜻이며, 부악·원산·선산·두무악·영주산·부라산·혈망봉·여장군 등으로도 불려왔다.</div>
<a href="https://www.daum.net">다음의 블로그</a>
......@@ -39,7 +39,7 @@ function Place(props) {
</Container>
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>Close</Button>
<Button block onClick={props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
</>
......
import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./home/Home";
import Main from "./home/Main";
function MainRouter() {
return (
<div>
{/* <Main /> */}
<Switch>
<Route exact path="/">
<Main />
</Route>
<Route path="/main">
<Main />
</Route>
{/* <Route path="/signup">
<Signup />
</Route> */}
</Switch>
</div>
);
}
export default MainRouter;
......@@ -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);
}
......@@ -435,9 +442,10 @@ function Search(props) {
const pagePlace = paginate(places, index)
return (
<Container>
<Row className="mt-2 mb-2">
<Form className="vw-100" onSubmit={handleSubmit}>
<Container >
<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">
<Link to="/">
<Col>
......@@ -462,12 +470,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" style={{margin:"3%"}}>
<Card.Title style={{margin:"3%", fontSize:'200%', fontWeight:'bold'}} >{place.name}</Card.Title>
<Card.Img variant="top" style={{padding:"5%" ,width:"100%", height:"340px"}} 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)} />
......@@ -478,19 +486,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 === 10 ? "" : <Pagination.Next onClick={() => setIndex(index + 1)} />}
<Pagination.Last onClick={() => setIndex(10)} />
</Pagination>
<Paginations index={index} endPage={endPage} handlePage={handlePage}></Paginations>
</Row>
</Container>
);
......
import React from "react";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import Container from "react-bootstrap/Container";
// import { Link } from "react-router-dom";
import { Redirect } from "react-router-dom";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Image from 'react-bootstrap/Image'
import mainlogo from '../picture/mainlogo.jpg'
// import Modal from "react-bootstrap/Modal";
// import 'bootstrap / dist / css / bootstrap.min.css';
function Home() {
const clickSubmit = (event) => {
event.preventDefault();
console.log("버튼실행 = 메인으로 넘기기 ")
return <Redirect to="/main"/>
};
// if (values.redirect) {
// return <Redirect to="/" />;
// }
return (
<Container className="col-sm-6 col-md-5 col-lg-4 p-5">
{/* <Row> */}
<Image src={mainlogo} rounded />
<Form>
<Form.Group controlId="inputbox">
<Form.Label>오늘! 어디가?</Form.Label>
<Form.Control
/>
<Form.Text className="text-muted">
관광지를 입력하면 관련된 정보들이 나옵니다.
</Form.Text>
</Form.Group>
<Button variant="danger" type="submit" onClick={clickSubmit}>관광지 검색하기</Button>
</Form>
{/* </Row> */}
</Container>
);
}
export default Home;
import React from "react";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import Container from "react-bootstrap/Container";
import { Link } from "react-router-dom";
import { Redirect } from "react-router-dom";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Image from 'react-bootstrap/Image'
import { Card } from 'react-bootstrap'
// import Modal from "react-bootstrap/Modal";
// import 'bootstrap / dist / css / bootstrap.min.css';
import mainlogo from '../picture/mainlogo.jpg'
import hallasan from '../picture/hallasan.PNG'
import osulloc from '../picture/osulloc.PNG'
import sungsan from '../picture/sungsan.PNG'
import haenyeo from '../picture/haenyeo.PNG'
function Main() {
const clickSubmit = (event) => {
event.preventDefault();
console.log("메인페이지 도착")
};
// if (values.redirect) {
// return <Redirect to="/" />;
// }
return (
<Container className="">
<Form>
<Image src={mainlogo} rounded />
<Form.Label>made by Cherry </Form.Label>
<Form.Group controlId="contentsbox">
<Form.Text>관광지 정보</Form.Text>
{/* <Form.Control
/> */}
<Row>
<Card style={{ width: '30rem' }}>
<Card.Img variant="top" src={hallasan} />
<Card.Body>
<Card.Title>한라산(hallasan)</Card.Title>
<Card.Text>
제주 서귀포시 토평동 산15-1 </Card.Text>
<Link to="/">
<Button variant="primary">한라산 자세히 살펴보기</Button>
</Link>
</Card.Body>
</Card>
<Card style={{ width: '30rem' }}>
<Card.Img variant="top" src={sungsan} />
<Card.Body>
<Card.Title>성산일출봉(sungsan)</Card.Title>
<Card.Text>
제주 서귀포시 성산읍 성산리 1 </Card.Text>
<Link to="/">
<Button variant="primary">성산일출봉 자세히 살펴보기</Button>
</Link>
</Card.Body>
</Card>
</Row>
<Row>
<Card style={{ width: '30rem' }}>
<Card.Img variant="top" src={haenyeo} />
<Card.Body>
<Card.Title>해녀의 집(haenyeo)</Card.Title>
<Card.Text>
제주 서귀포시 성산읍 한도로 141-13지번오조리 3 오조해녀의집 </Card.Text>
<Link to="/">
<Button variant="primary">해녀의 집 자세히 살펴보기</Button>
</Link>
</Card.Body>
</Card>
{/* modal같이 다른 창 띄우는 것도 방법이고 링크 넣거나 화면하나 만드는 것도 방법일 듯 */}
<Card style={{ width: '30rem' }}>
<Card.Img variant="top" src={osulloc} />
<Card.Body>
<Card.Title>오설록 티 뮤지엄(osulloc)</Card.Title>
<Card.Text>
제주 서귀포시 안덕면 신화역사로 15 오설록지번서광리 1235-1 오설록 </Card.Text>
<Link to="/">
<Button variant="primary">오설록 티 뮤지엄 자세히 살펴보기</Button>
</Link>
</Card.Body>
</Card>
</Row>
</Form.Group>
{/* <Button variant="primary" type="submit" onClick={clickSubmit}>Submit</Button> */}
{/* <Form.Group controlId="inputbox">
<Form.Label>다른 관광지 검색하기</Form.Label>
<Form.Control
/>
<Form.Text className="text-muted">
새로운 관광지를 검색합니다.
</Form.Text>
</Form.Group>
<Button variant="danger" type="submit" onClick={clickSubmit}>다른 관광지 검색하기</Button> */}
</Form>
</Container >
);
}
export default Main;
......@@ -11,6 +11,11 @@ import {
Route,
Redirect,
} from "react-router-dom";
import axios from 'axios';
axios.defaults.validateStatus = function (status){
return status < 500; //default
}
ReactDOM.render(
<React.StrictMode>
......
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
import cheerio from "cheerio"
import express from 'express'
import request from 'request'
import axios from 'axios'
const app = express()
// axios를 활용해 AJAX로 HTML 문서를 가져오는 함수 구현
// getHTML 함수 실행 후 데이터에서
// body > main > div > section > ul > li > article > h2 > a
// 에 속하는 제목을 titleList에 저장
app.get('/', (req, res) => {
const url = "https://section.blog.naver.com/Search/Post.nhn?pageNo=1&rangeType=ALL&orderBy=sim&keyword=%ED%95%9C%EB%9D%BC%EC%82%B0"
request(url,function(err, res, html) {
console.log(html)
if(!err){
let $=cheerio.load(html);
}
}
// .then(html => {
// let titleList = [];
// const $ = cheerio.load(html.data);
// // ul.list--posts를 찾고 그 children 노드를 bodyList에 저장
// const bodyList = $(".title_post > span");
// // bodyList를 순회하며 titleList에 h2 > a의 내용을 저장
// bodyList.each(function (i, elem) {
// titleList[i] = {
// title: $(this)
// .text()
// };
// });
// return titleList;
// })
// .then(res => console.log(res)); // 저장된 결과를 출력
)
})
app.listen(3001, () => {
console.log('Server is listening on port 3001')
})
\ No newline at end of file
This diff is collapsed.
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