PickedCard 컴포넌트 구현

@@ -65,7 +65,7 @@ const MealCard = (props) => {
         
         
         주소
         주소
         <hr className="my-2"/>
         <hr className="my-2"/>
-        {props.address}
+        {props.address} 
         <br/>
         <br/>
         <Map
         <Map
           latitude = {props.latitude}
           latitude = {props.latitude}
@@ -83,7 +83,7 @@ const MealCard = (props) => {
         <small>
         <small>
         썸네일 출처
         썸네일 출처
         <hr className="my-2"/>
         <hr className="my-2"/>
-        {props.img_source}
+        {props.img_source} <Button size="sm" className="float-right" color="warning">Pick!</Button>
         </small>
         </small>
         </div>
         </div>
         </ModalFooter>
         </ModalFooter>

+button {
+    opacity: 1.0;
+  }
+  
+  button:hover {
+    opacity: 0.2;
+  }

+import React, { useState } from 'react';
+import { Card, CardBody, CardTitle, CardText, CardImg, CardFooter, Button } from 'reactstrap';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import Map from './Map';
+import './PickedCard.css';
+import { faAngleRight } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+
+
+const MealCard = (props) => {
+  
+  const [modal, setModal] = useState(false);
+  const toggleModal = () => setModal(!modal);
+  
+  return (
+    <>
+      <Card style={{
+        'marginTop': '0.6rem',
+        'marginBottom': '0.6rem',
+        'boxShadow': '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
+      }}>
+        
+        <CardImg 
+        top width="100%" 
+        src={props.img} alt="Card image cap" />
+        <CardBody>
+          <CardTitle><strong>{props.name}</strong></CardTitle>
+          <CardText>
+            <small>{props.menu}</small>
+          </CardText>
+        </CardBody>
+        <CardFooter className="wrap" style={{
+          'padding': '0 0 0 0'
+        }}>
+        
+        <Button 
+        onClick={toggleModal}
+        className="button"  
+        style={{
+          'width':'100%',
+          'borderRadius':'0 0 0 0',
+          'backgroundColor': '#F6F6F6',
+          'border': '0px',
+          'color':'black'
+        }}>
+        <span style={{
+          'float':'left',
+          'fontSize': '14px'
+        }}>
+        view more
+        </span>
+          <FontAwesomeIcon style={{
+            'color': 'black',
+            'float': 'right',
+            'paddingTop':'0.1rem'
+          }}
+          size="lg" icon={faAngleRight} />
+        </Button>
+        </CardFooter>
+      </Card>
+     
+      <Modal size="lg" className="modalClass" isOpen={modal} toggle={toggleModal}>
+        <ModalHeader toggle={toggleModal}>{props.name}</ModalHeader> 
+        <ModalBody>
+        주소
+        <hr className="my-2"/>
+        {props.address}
+        <br/>
+        <Map
+          latitude = {props.latitude}
+          longitude = {props.longitude}
+        />
+        </ModalBody>
+        <ModalFooter>
+        <div style={{
+          width:'100%',
+          overflow:'hidden',
+          wordWrap:'break-word'
+        }}>
+        <small>
+        썸네일 출처
+        <hr className="my-2"/>
+        {props.img_source}  <Button size="sm" className="float-right" color="danger">Delete</Button>
+        </small>
+        </div>
+        </ModalFooter>
+      </Modal>
+      
+    </>
+  );
+};
+
+export default MealCard;
\ No newline at end of file

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Container, Row, Col, Button } from 'reactstrap';
 import { Container, Row, Col, Button } from 'reactstrap';
 import cookie from 'react-cookies';
 import cookie from 'react-cookies';
 import axios from 'axios';
 import axios from 'axios';
-import MealCard from '../components/MealCard';
+import PickedCard from '../components/PickedCard';
 
 
 const UserCards = (props) => {
 const UserCards = (props) => {
     const [datas, setDatas] = useState([]);
     const [datas, setDatas] = useState([]);
@@ -96,7 +96,7 @@ const UserCards = (props) => {
                 <Row xs="2" sm="2" md="4">
                 <Row xs="2" sm="2" md="4">
                     {picks.map((data, index) => 
                     {picks.map((data, index) => 
                     <Col>
                     <Col>
-                    <MealCard
+                    <PickedCard
                         key = {index}
                         key = {index}
                         id = {data.id}
                         id = {data.id}
                         name = {data.name}
                         name = {data.name}