Showing
4 changed files
with
104 additions
and
4 deletions
... | @@ -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> | ... | ... |
client/src/components/PickedCard.css
0 → 100644
client/src/components/PickedCard.js
0 → 100644
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} | ... | ... |
-
Please register or login to post a comment