UI 첫 병합

client/src/App.js

@@ -5,17 +5,14 @@ import { Container, Row, Col, Image, InputGroup, FormControl, Button } from 'rea
 
 function App() {
   const [search, setSearch] = useState("");
-  const [state, setState] = useState();
-
-  useEffect(() => {
-    if (state === true) {
-      <Redirect to="/search" />
-      // <Redirect to={{
-      //   pathname: `/search/${search}`,
-      //   state: { id: search },
-      // }} />
+  const [state, setState] = useState(false);
+
+  if (state !== false) {
+    return <Redirect to={{
+      pathname: `/search/${search}`,
+      state: { id: search },
+    }} />;
   }
-  }, [])
 
   const handleChange = (e) => {
     setSearch(e.target.value);
@@ -26,13 +23,13 @@ function App() {
     setState(true);
   }
 
+
+
   return (
-    <Container className="min-height 100vh">
-      <Row className="justify-content-md-center" >
+    <Container className="vh-100">
+      <Row className="d-flex justify-content-md-center">
         <Image src={ohuh} />
-      </Row>
-      <Row>
-        <InputGroup size="lg">
+        <InputGroup size="lg" xs={5}>
           <FormControl
             placeholder="검색어를 입력하세요."
             aria-label="Large"
@@ -40,7 +37,7 @@ function App() {
             onChange={handleChange}
           />
           <InputGroup.Append>
-            <Button variant="outline-secondary" onClick={handleSubmit}><Link to="/search">검색</Link></Button>
+            <Button variant="outline-secondary" onClick={handleSubmit}>검색</Button>
           </InputGroup.Append>
         </InputGroup>
         {/* <form onSubmit={handleSubmit}>

client/src/Components/Place.js

+import React from 'react';
+import { Modal, Container, Row, Col, Button } from 'react-bootstrap';
+
+function Place(props) {
+  return (
+    <Modal {...props}
+      size="lg"
+      // show={lgShow}
+      // onHide={() => setLgShow(false)}
+      aria-labelledby="example-modal-sizes-title-lg">
+      <Modal.Header closeButton>
+        <Modal.Title id="contained-modal-title-vcenter">
+          {props.search} 
+          </Modal.Title>
+      </Modal.Header>
+      <Modal.Body className="show-grid">
+        <Container>
+          <Row>
+            <Col xs={12} md={8}>
+              크롤링 해와서
+              </Col>
+            <Col xs={6} md={4}>
+              내용을 담아주세요.
+              </Col>
+          </Row>
+
+          <Row className="mt-4">
+            <div>주도 전역을 지배하는 한라산은 남한에서 가장 높은 산으로 높이는 1,947.3m이다. 한라산이라는 이름은 산이 높아 산정에 서면 은하수를 잡아당길 수 있다는 뜻이며, 부악·원산·선산·두무악·영주산·부라산·혈망봉·여장군 등으로도 불려왔다.</div>
+            <a href="https://www.daum.net">다음의 블로그</a>
+            {/* <Col xs={6} md={4}>
+                .col-xs-6 .col-md-4
+              </Col>
+              <Col xs={6} md={4}>
+                .col-xs-6 .col-md-4
+              </Col>
+              <Col xs={6} md={4}>
+                .col-xs-6 .col-md-4
+              </Col> */}
+          </Row>
+          <Row className="mt-4">
+            <div>한라산은 1966년 한라산 천연보호구역으로, 1970년 국립공원으로 지정되었다. 그리고 2002년에는 유네스코 생물권보전지역으로 지정되었으며 2007년에는 유네스코 세계자연유산으로 등재되었다. 2008년에는 물장오리오름 산정화구호 습지가 람사르 습지로 등록되어 보호 관리되고 있다</div>
+            <a href="https://www.naver.com/">네이버의 블로그</a>
+          </Row>
+          <Row className="mt-4">
+            <div>한라산은 제주도에 있는 해발 1,947.06m, 면적 약 1,820km²의 화산으로, 제주도의 면적 대부분을 차지하고 있다. 정상에 백록담이라는 화산호가 있는데, 백록담이라는 이름은 흰 사슴이 물을 먹는 곳이라는 뜻에서 왔다고 전해진다.</div>
+            <a href="https://www.google.com/">구글의 블로그</a></Row>
+        </Container>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onClick={props.onHide}>Close</Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+export default Place;
\ No newline at end of file

client/src/Search.js

 import React, { useState } from 'react';
 import { Link, Redirect } from 'react-router-dom';
 import ohuh from './ohuh-sm.PNG';
-import { Container, Row, Col, Image, InputGroup, FormControl, Button } from 'react-bootstrap';
+import Place from './Components/Place';
+import halla from './halla.jpg';
+import { Container, Row, Card, Image, InputGroup, FormControl, Button, Form } from 'react-bootstrap';
 
 function Search(props) {
-    const [search, setSearch] = useState("");
+    const [state, setState] = useState(false);
+    const [search, setSearch] = useState(props.location.state.id);
+    const [modalShow, setModalShow] = useState(false);
+
+    if (state !== false) {
+        return <Redirect to={{
+          pathname: `/search/${search}`,
+          state: { id: search },
+        }} />;
+      }
+
     const handleChange = (e) => {
         setSearch(e.target.value);
     }
+
     const handleSubmit = (e) => {
+        setState(true);
     }
     return (
-        <Container className="">
+        <Container className="mt-3">
             <Row className="" >
                 <InputGroup size="lg">
-                    <Image src={ohuh} />
+                    <Link to="/"><Image src={ohuh} /></Link>
                     <FormControl
                         placeholder="검색어를 입력하세요."
+                        value={search}
                         aria-label="Large"
                         aria-describedby="inputGroup-sizing-sm"
                         onChange={handleChange}
@@ -25,24 +40,56 @@ function Search(props) {
                         <Button variant="outline-secondary" onClick={handleSubmit}><Link to="/search">검색</Link></Button>
                     </InputGroup.Append>
                 </InputGroup>
-                {/* <form onSubmit={handleSubmit}>
-          <input className="" name="search" type="text" placeholder="검색어를 입력하세요." onChange={handleChange}></input>
-          <Link to="/search"><button type="submit">검색</button></Link>
-        </form> */}
             </Row>
-            <Link to="/">여기는 검색창이야아아아ㅏㅏ</Link>
+            <Form>
+                <Row className="d-flex justify-content-between">
+                    <Card style={{ width: '35rem' }}>
+                        <Card.Img variant="top" src={halla} />
+                        <Card.Body>
+                            <Card.Title>한라산(hallasan)</Card.Title>
+                            <Card.Text>
+                                제주 서귀포시 토평동 산15-1 </Card.Text>
+                                <Button variant="primary" onClick={() => setModalShow(true)}>한라산 자세히 살펴보기</Button>
+                                <Place search={search} show={modalShow} onHide={() => setModalShow(false)} />
+                        </Card.Body>
+                    </Card>
+
+                    <Card style={{ width: '35rem' }}>
+                        <Card.Img variant="top" src={halla} />
+                        <Card.Body>
+                            <Card.Title>성산일출봉(sungsan)</Card.Title>
+                            <Card.Text>
+                                제주 서귀포시 성산읍 성산리 1 </Card.Text>
+                                <Button variant="primary" onClick={() => setModalShow(true)}>성산일출봉 자세히 살펴보기</Button>
+                                <Place search={search} show={modalShow} onHide={() => setModalShow(false)} />
+                        </Card.Body>
+                    </Card>
+                </Row>
+                <Row className="d-flex justify-content-between">
+                    <Card style={{ width: '35rem' }}>
+                        <Card.Img variant="top" src={halla} />
+                        <Card.Body>
+                            <Card.Title>해녀의 집(haenyeo)</Card.Title>
+                            <Card.Text>
+                                제주 서귀포시 성산읍 한도로 141-13지번오조리 3 오조해녀의집 </Card.Text>
+                                <Button variant="primary" onClick={() => setModalShow(true)}>해녀의 집 자세히 살펴보기</Button>
+                                <Place search={search} show={modalShow} onHide={() => setModalShow(false)} />
+                        </Card.Body>
+                    </Card>
+
+                    <Card style={{ width: '35rem' }}>
+                        <Card.Img variant="top" src={halla} />
+                        <Card.Body>
+                            <Card.Title>오설록 티 뮤지엄(osulloc)</Card.Title>
+                            <Card.Text>
+                                제주 서귀포시 안덕면 신화역사로 15 오설록지번서광리 1235-1 오설록 </Card.Text>
+                                <Button variant="primary" onClick={() => setModalShow(true)}>오설록 티 뮤지엄 자세히 살펴보기</Button>
+                                <Place search={search} show={modalShow} onHide={() => setModalShow(false)} />
+                        </Card.Body>
+                    </Card>
+                </Row>
+            </Form>
         </Container>
-        // <div className="">
-        //     {console.log(props)}
-        //     <header className="">
-        //     <img src={ohuh} className="" alt="ohuh" />
-        //         <Link to={"/search"}>여기는 검색창이야아아아ㅏㅏ</Link>
-        //         <form onSubmit={handleSubmit}>
-        //             <input className="" name="search" type="text" value={search} onChange={handleChange}></input>
-        //             <button type="submit">검색</button>
-        //         </form>
-        //     </header>
-        // </div>
     );
 }