modal

client/src/Components/Place.js

 import React from 'react';
-import { Modal, Container, Row, Col, Button } from 'react-bootstrap';
+import { Modal, Container, Row, Col, Button, Badge, Card, Accordion } from 'react-bootstrap';
 
 function Place(props) {
+
+
   return (
     <>
+
       <style type="text/css">
         {`
         .modal-backdrop.in {
@@ -19,23 +22,39 @@ function Place(props) {
         // onHide={() => setLgShow(false)}
         aria-labelledby="example-modal-sizes-title-lg">
         <Modal.Header closeButton>
-          <Modal.Title id="contained-modal-title-vcenter" style={{fontSize:'40px'}}>
-            {props.search.name}
+          <Modal.Title id="contained-modal-title-vcenter" style={{ fontSize: '40px' }}>
+            {props.search.name}{props.index}
           </Modal.Title>
         </Modal.Header>
         <Modal.Body className="show-grid">
-          <Container style={{fontSize:'30px'}}>
-            <Row className="mt-4">
-              <div>주도 전역을 지배하는 한라산은 남한에서 가장 높은 산으로 높이는 1,947.3m이다. 한라산이라는 이름은 산이 높아 산정에 서면 은하수를 잡아당길 수 있다는 뜻이며, 부악·원산·선산·두무악·영주산·부라산·혈망봉·여장군 등으로도 불려왔다.</div>
-              <a href="https://www.daum.net">다음의 블로그</a>
+          <Container style={{ fontSize: '40px' }}>
+            <Accordion defaultActiveKey="0">
+              <Accordion.Toggle as={Button} variant="link" eventKey="0">
+                <a className="mb-2">다음의 블로그 보기</a>
+              </Accordion.Toggle>
+              <a href= "https://www.daum.net/" className="mb-2">다음</a>
+              <Accordion.Collapse eventKey="0">
+                <Card.Body><div>주도 전역을 지배하는 한라산은 남한에서 가장 높은 산으로 높이는 1,947.3m이다. 한라산이라는 이름은 산이 높아 산정에 서면 은하수를 잡아당길 수 있다는 뜻이며, 부악·원산·선산·두무악·영주산·부라산·혈망봉·여장군 등으로도 불려왔다.</div></Card.Body>
+              </Accordion.Collapse>
+              <Row>
+                <Accordion.Toggle as={Button} variant="link" eventKey="1">
+                  <a className="mb-2">네이버의 블로그 보기</a>
+                </Accordion.Toggle>
+                <a href="https://www.naver.com/" className="mb-2">네이버</a>
+                <Accordion.Collapse eventKey="1">
+                  <Card.Body><div>한라산은 1966년 한라산 천연보호구역으로, 1970년 국립공원으로 지정되었다. 그리고 2002년에는 유네스코 생물권보전지역으로 지정되었으며 2007년에는 유네스코 세계자연유산으로 등재되었다. 2008년에는 물장오리오름 산정화구호 습지가 람사르 습지로 등록되어 보호 관리되고 있다</div></Card.Body>
+                </Accordion.Collapse>
               </Row>
-            <Row className="mt-4">
-              <div>한라산은 1966년 한라산 천연보호구역으로, 1970년 국립공원으로 지정되었다. 그리고 2002년에는 유네스코 생물권보전지역으로 지정되었으며 2007년에는 유네스코 세계자연유산으로 등재되었다. 2008년에는 물장오리오름 산정화구호 습지가 람사르 습지로 등록되어 보호 관리되고 있다</div>
-              <a href="https://www.naver.com/">네이버의 블로그</a>
+              <Row>
+                <Accordion.Toggle as={Button} variant="link" eventKey="2">
+                  <a className="mb-2">구글의 블로그 보기</a>
+                </Accordion.Toggle>
+                <a href="https://www.google.com/" className="mb-2">구글</a>
+                <Accordion.Collapse eventKey="2">
+                  <Card.Body><div>한라산은 제주도에 있는 해발 1,947.06m, 면적 약 1,820km²의 화산으로, 제주도의 면적 대부분을 차지하고 있다. 정상에 백록담이라는 화산호가 있는데, 백록담이라는 이름은 흰 사슴이 물을 먹는 곳이라는 뜻에서 왔다고 전해진다.</div></Card.Body>
+                </Accordion.Collapse>
             </Row>
-            <Row className="mt-4">
-              <div>한라산은 제주도에 있는 해발 1,947.06m, 면적 약 1,820km²의 화산으로, 제주도의 면적 대부분을 차지하고 있다. 정상에 백록담이라는 화산호가 있는데, 백록담이라는 이름은 흰 사슴이 물을 먹는 곳이라는 뜻에서 왔다고 전해진다.</div>
-              <a href="https://www.google.com/">구글의 블로그</a></Row>
+            </Accordion>
           </Container>
         </Modal.Body>
         <Modal.Footer>

client/src/Search.js

@@ -9,7 +9,7 @@ function Search(props) {
     const endPage = 10;
     const [state, setState] = useState(false);
     const [index, setIndex] = useState(1);
-    const [show, setShow] = useState(false);
+    const [showSet, setShowSet] = useState([false,false,false,false]);
     const [search, setSearch] = useState(props.location.state.id);
 
     const places = [{
@@ -439,6 +439,10 @@ function Search(props) {
         return page
     }
 
+    // function handleShow(){
+    //     setShow(true)
+    // }
+
     const pagePlace = paginate(places, index)
 
     return (
@@ -470,18 +474,25 @@ function Search(props) {
                                 <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={pagePlace} show={show} onHide={() => setShow(false)} />
+                                    <Button variant="primary" onClick={() => {
+                                        const showArr = [false,false,false,false]
+                                        showArr[index] = true
+                                        setShowSet(showArr)
+                                        } }>{place.name} 자세히 살펴보기</Button>
+                                    <Place search={place} index={index} show={showSet[index]} onHide={() => setShowSet([false,false,false,false])} />
                                 </Card.Body>
                             </Card>
                         </Col>
                     )
                 })}
             </Row>
+            {console.log(showSet)}
+            {/* show가 전부 true로 바뀌어서 전부 다 보이게 되는 것이다. */}
             <Row className="mt-2 d-flex justify-content-center">
                 <Paginations index={index} endPage={endPage} handlePage={handlePage}></Paginations>
             </Row>
         </Container>
+        
     );
 }
 

client/src/pagination.js

@@ -4,7 +4,7 @@ import React from 'react';
 
 
 function Paginations(props) {
-    console.log(props)
+    // console.log(props)
     // const [index, setIndex] = useState(1);
 
     return (

client/src/quadrant.js

+// import React from 'react';
+// import { Row, Col, Card, Button } from "react-bootstrap";
+// import Place from './Components/Place';
+
+
+// function Quadrant(props) {
+//     <Row className="d-flex flex-wrap">
+//         <Col md={6} >
+//             <Card align="center" border="info" style={{ margin: "3%" }}>
+//                 <Card.Title style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{props.pagePlace[0].name}</Card.Title>
+//                 <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={props.pagePlace[0].img} />
+//                 <Card.Body >
+//                     <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
+//                         {props.pagePlace[0].address} </Card.Text>
+//                     <Button variant="primary" onClick={() => props.handleShow(true)}>{props.pagePlace[0].name} 자세히 살펴보기</Button>
+//                     <Place search={props.pagePlace[0]}  onHide={() => props.handleShow(false)} />
+//                 </Card.Body>
+//             </Card>
+//         </Col>
+//         <Col md={6} >
+//             <Card align="center" border="info" style={{ margin: "3%" }}>
+//                 <Card.Title style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{props.pagePlace[1].name}</Card.Title>
+//                 <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={props.pagePlace[1].img} />
+//                 <Card.Body >
+//                     <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
+//                         {props.pagePlace[0].address} </Card.Text>
+//                     <Button variant="primary" onClick={() => props.handleShow(true)}>{props.pagePlace[0].name} 자세히 살펴보기</Button>
+//                     <Place search={props.pagePlace[0]}   onHide={() => props.handleShow(false)} />
+//                 </Card.Body>
+//             </Card>
+//         </Col>
+//         <Col md={6} >
+//             <Card align="center" border="info" style={{ margin: "3%" }}>
+//                 <Card.Title style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{props.pagePlace[0].name}</Card.Title>
+//                 <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={props.pagePlace[0].img} />
+//                 <Card.Body >
+//                     <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
+//                         {props.pagePlace[0].address} </Card.Text>
+//                     <Button variant="primary" onClick={() => props.handleShow(true)}>{props.pagePlace[0].name} 자세히 살펴보기</Button>
+//                     <Place search={props.pagePlace[0]}   onHide={() => props.handleShow(false)} />
+//                 </Card.Body>
+//             </Card>
+//         </Col>
+//         <Col md={6} >
+//             <Card align="center" border="info" style={{ margin: "3%" }}>
+//                 <Card.Title style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }} >{props.pagePlace[0].name}</Card.Title>
+//                 <Card.Img variant="top" style={{ padding: "5%", width: "100%", height: "340px" }} src={props.pagePlace[0].img} />
+//                 <Card.Body >
+//                     <Card.Text style={{ overflow: 'auto', fontSize: '25px', width: '100%', height: "80px" }} >
+//                         {props.pagePlace[0].address} </Card.Text>
+//                     <Button variant="primary" onClick={() => props.handleShow(true)}>{props.pagePlace[0].name} 자세히 살펴보기</Button>
+//                     <Place search={props.pagePlace[0]}   onHide={() => props.handleShow(false)} />
+//                 </Card.Body>
+//             </Card>
+//         </Col>
+//     </Row>
+
+
+// }
+// export default Quadrant
\ No newline at end of file