.

client/.eslintcache

+<<<<<<< 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

client/README.md

-# 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).
 

client/src/Components/Place.js

@@ -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>
     </>

client/src/MainRouter.jsx

+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;

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);
     }
@@ -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>
     );

client/src/home/Home.jsx

+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;

client/src/home/Main.jsx

+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;

client/src/index.js

@@ -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>

client/src/pagination.js

+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

server/scraper.js

+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