swa07016

PickedCard 컴포넌트 구현

...@@ -65,7 +65,7 @@ const MealCard = (props) => { ...@@ -65,7 +65,7 @@ const MealCard = (props) => {
65 65
66 주소 66 주소
67 <hr className="my-2"/> 67 <hr className="my-2"/>
68 - {props.address} 68 + {props.address}
69 <br/> 69 <br/>
70 <Map 70 <Map
71 latitude = {props.latitude} 71 latitude = {props.latitude}
...@@ -83,7 +83,7 @@ const MealCard = (props) => { ...@@ -83,7 +83,7 @@ const MealCard = (props) => {
83 <small> 83 <small>
84 썸네일 출처 84 썸네일 출처
85 <hr className="my-2"/> 85 <hr className="my-2"/>
86 - {props.img_source} 86 + {props.img_source} <Button size="sm" className="float-right" color="warning">Pick!</Button>
87 </small> 87 </small>
88 </div> 88 </div>
89 </ModalFooter> 89 </ModalFooter>
......
1 +button {
2 + opacity: 1.0;
3 + }
4 +
5 + button:hover {
6 + opacity: 0.2;
7 + }
1 +import React, { useState } from 'react';
2 +import { Card, CardBody, CardTitle, CardText, CardImg, CardFooter, Button } from 'reactstrap';
3 +import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
4 +import Map from './Map';
5 +import './PickedCard.css';
6 +import { faAngleRight } from "@fortawesome/free-solid-svg-icons"
7 +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
8 +
9 +
10 +const MealCard = (props) => {
11 +
12 + const [modal, setModal] = useState(false);
13 + const toggleModal = () => setModal(!modal);
14 +
15 + return (
16 + <>
17 + <Card style={{
18 + 'marginTop': '0.6rem',
19 + 'marginBottom': '0.6rem',
20 + 'boxShadow': '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
21 + }}>
22 +
23 + <CardImg
24 + top width="100%"
25 + src={props.img} alt="Card image cap" />
26 + <CardBody>
27 + <CardTitle><strong>{props.name}</strong></CardTitle>
28 + <CardText>
29 + <small>{props.menu}</small>
30 + </CardText>
31 + </CardBody>
32 + <CardFooter className="wrap" style={{
33 + 'padding': '0 0 0 0'
34 + }}>
35 +
36 + <Button
37 + onClick={toggleModal}
38 + className="button"
39 + style={{
40 + 'width':'100%',
41 + 'borderRadius':'0 0 0 0',
42 + 'backgroundColor': '#F6F6F6',
43 + 'border': '0px',
44 + 'color':'black'
45 + }}>
46 + <span style={{
47 + 'float':'left',
48 + 'fontSize': '14px'
49 + }}>
50 + view more
51 + </span>
52 + <FontAwesomeIcon style={{
53 + 'color': 'black',
54 + 'float': 'right',
55 + 'paddingTop':'0.1rem'
56 + }}
57 + size="lg" icon={faAngleRight} />
58 + </Button>
59 + </CardFooter>
60 + </Card>
61 +
62 + <Modal size="lg" className="modalClass" isOpen={modal} toggle={toggleModal}>
63 + <ModalHeader toggle={toggleModal}>{props.name}</ModalHeader>
64 + <ModalBody>
65 + 주소
66 + <hr className="my-2"/>
67 + {props.address}
68 + <br/>
69 + <Map
70 + latitude = {props.latitude}
71 + longitude = {props.longitude}
72 + />
73 + </ModalBody>
74 + <ModalFooter>
75 + <div style={{
76 + width:'100%',
77 + overflow:'hidden',
78 + wordWrap:'break-word'
79 + }}>
80 + <small>
81 + 썸네일 출처
82 + <hr className="my-2"/>
83 + {props.img_source} <Button size="sm" className="float-right" color="danger">Delete</Button>
84 + </small>
85 + </div>
86 + </ModalFooter>
87 + </Modal>
88 +
89 + </>
90 + );
91 +};
92 +
93 +export default MealCard;
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; ...@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
2 import { Container, Row, Col, Button } from 'reactstrap'; 2 import { Container, Row, Col, Button } from 'reactstrap';
3 import cookie from 'react-cookies'; 3 import cookie from 'react-cookies';
4 import axios from 'axios'; 4 import axios from 'axios';
5 -import MealCard from '../components/MealCard'; 5 +import PickedCard from '../components/PickedCard';
6 6
7 const UserCards = (props) => { 7 const UserCards = (props) => {
8 const [datas, setDatas] = useState([]); 8 const [datas, setDatas] = useState([]);
...@@ -96,7 +96,7 @@ const UserCards = (props) => { ...@@ -96,7 +96,7 @@ const UserCards = (props) => {
96 <Row xs="2" sm="2" md="4"> 96 <Row xs="2" sm="2" md="4">
97 {picks.map((data, index) => 97 {picks.map((data, index) =>
98 <Col> 98 <Col>
99 - <MealCard 99 + <PickedCard
100 key = {index} 100 key = {index}
101 id = {data.id} 101 id = {data.id}
102 name = {data.name} 102 name = {data.name}
......