.

client/src/Search.js

@@ -6,6 +6,7 @@ import { Container, Form, Row, Col, Card, Image, InputGroup, FormControl, Button
 import Paginations from './pagination.js';
 import { addFavorite } from './Bookmark.js'
 
+
 function Search(props) {
     const endPage = 10;
     const [state, setState] = useState(false);
@@ -449,6 +450,11 @@ function Search(props) {
         return page
     }
 
+    function addicon() {
+        const [show, setShow] = useState(false);
+
+        const handleClose = () => setShow(false);
+        const handleShow = () => setShow(true);
 
 
         const pagePlace = paginate(places, index)
@@ -456,7 +462,6 @@ function Search(props) {
         return (
             <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">
@@ -483,7 +488,31 @@ function Search(props) {
                         return (
                             <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.Title style={{ margin: "3%", fontSize: '200%', fontWeight: 'bold' }}>{place.name}<Button onClick={handleShow}>   <Modal
+                                        show={show}
+                                        onHide={handleClose}
+                                        backdrop="static"
+                                        keyboard={false}
+                                ><Form>
+                                <Form.Group controlId="formBasicEmail">
+                                  <Form.Label>이름</Form.Label>
+                                  <Form.Control type="email" placeholder="Enter email" />
+                                  <Form.Text className="text-muted">
+                                    We'll never share your email with anyone else.
+                                  </Form.Text>
+                                </Form.Group>
+                              
+                                <Form.Group controlId="formBasicPassword">
+                                  <Form.Label>폴더</Form.Label>
+                                  <Form.Control type="password" placeholder="Password" />
+                                </Form.Group>
+                                <Form.Group controlId="formBasicCheckbox">
+                                  <Form.Check type="checkbox" label="Check me out" />
+                                </Form.Group>
+                                <Button variant="primary" type="submit">
+                                  Submit
+                                </Button>
+                              </Form></Modal></Button></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" }} >
@@ -500,8 +529,8 @@ function Search(props) {
                     )
                 })}
             </Row>
-            {console.log(showSet)}
-            {/* show가 전부 true로 바뀌어서 전부 다 보이게 되는 것이다. */}
+            { console.log(showSet) }
+                        {/* show가 전부 true로 바뀌어서 전부 다 보이게 되는 것이다. */ }
                         <Row className="mt-2 d-flex justify-content-center">
                             <Paginations index={index} endPage={endPage} handlePage={handlePage}></Paginations>
                         </Row>
@@ -510,4 +539,4 @@ function Search(props) {
     );
 }
 
-export default Search;
+export default Search