Toggle navigation
Toggle navigation
This project
Loading...
Sign in
정성훈
/
MEALKHU
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
1
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
swa07016
2020-06-15 14:09:48 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
500428ca9dd4f8f698d4624d56ad28508d372716
500428ca
1 parent
ff180483
PickedCard 컴포넌트 구현
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
103 additions
and
3 deletions
client/src/components/MealCard.js
client/src/components/PickedCard.css
client/src/components/PickedCard.js
client/src/components/UserCards.js
client/src/components/MealCard.js
View file @
500428c
...
...
@@ -83,7 +83,7 @@ const MealCard = (props) => {
<
small
>
썸네일
출처
<
hr
className
=
"my-2"
/>
{
props
.
img_source
}
{
props
.
img_source
}
<
Button
size
=
"sm"
className
=
"float-right"
color
=
"warning"
>
Pick
!<
/Button
>
<
/small
>
<
/div
>
<
/ModalFooter
>
...
...
client/src/components/PickedCard.css
0 → 100644
View file @
500428c
button
{
opacity
:
1.0
;
}
button
:hover
{
opacity
:
0.2
;
}
client/src/components/PickedCard.js
0 → 100644
View file @
500428c
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
client/src/components/UserCards.js
View file @
500428c
...
...
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import
{
Container
,
Row
,
Col
,
Button
}
from
'reactstrap'
;
import
cookie
from
'react-cookies'
;
import
axios
from
'axios'
;
import
MealCard
from
'../components/Meal
Card'
;
import
PickedCard
from
'../components/Picked
Card'
;
const
UserCards
=
(
props
)
=>
{
const
[
datas
,
setDatas
]
=
useState
([]);
...
...
@@ -96,7 +96,7 @@ const UserCards = (props) => {
<
Row
xs
=
"2"
sm
=
"2"
md
=
"4"
>
{
picks
.
map
((
data
,
index
)
=>
<
Col
>
<
Meal
Card
<
Picked
Card
key
=
{
index
}
id
=
{
data
.
id
}
name
=
{
data
.
name
}
...
...
Please
register
or
login
to post a comment