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-03 00:32:25 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
e5ea51341f36e1c22beba9b8ec8dd96e74692502
e5ea5134
1 parent
b64914dc
MealCard Modal UI 구현
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
38 additions
and
2 deletions
client/public/index.html
client/src/components/MealCard.js
client/src/pages/MenuPage.js
client/public/index.html
View file @
e5ea513
...
...
@@ -30,7 +30,7 @@ height: 100%;
<title>
MEALKHU
</title>
<link
href=
"https://fonts.googleapis.com/css?family=Do+Hyeon:400"
rel=
"stylesheet"
>
<style>
#root
{
font-family
:
'Do Hyeon'
,
sans-serif
;}
#root
,
.modalClass
{
font-family
:
'Do Hyeon'
,
sans-serif
;}
</style>
</head>
<body
class=
"pt-5"
style=
"width : 100%; height:100%; margin: 0;"
>
...
...
client/src/components/MealCard.js
View file @
e5ea513
import
React
from
'react'
;
import
React
,
{
useState
}
from
'react'
;
import
{
Card
,
CardBody
,
CardTitle
,
CardText
,
CardImg
,
CardFooter
,
Button
}
from
'reactstrap'
;
import
{
Modal
,
ModalHeader
,
ModalBody
,
ModalFooter
,
Container
}
from
'reactstrap'
;
import
'./MealCard.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
=
{{
...
...
@@ -27,6 +33,7 @@ const MealCard = (props) => {
}}
>
<
Button
onClick
=
{
toggleModal
}
className
=
"button"
style
=
{{
'width'
:
'100%'
,
...
...
@@ -50,6 +57,34 @@ const MealCard = (props) => {
<
/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
/>
Lorem
ipsum
dolor
sit
amet
,
consectetur
adipisicing
elit
,
sed
do
eiusmod
tempor
incididunt
ut
labore
et
dolore
magna
aliqua
.
Ut
enim
ad
minim
veniam
,
quis
nostrud
exercitation
ullamco
laboris
nisi
ut
aliquip
ex
ea
commodo
consequat
.
Duis
aute
irure
dolor
in
reprehenderit
in
voluptate
velit
esse
cillum
dolore
eu
fugiat
nulla
pariatur
.
Excepteur
sint
occaecat
cupidatat
non
proident
,
sunt
in
culpa
qui
officia
deserunt
mollit
anim
id
est
laborum
.
<
/ModalBody
>
<
ModalFooter
>
<
div
style
=
{{
width
:
'100%'
,
overflow
:
'hidden'
,
wordWrap
:
'break-word'
}}
>
<
small
>
썸네일
출처
<
hr
className
=
"my-2"
/>
{
props
.
img_source
}
<
/small
>
<
/div
>
<
/ModalFooter
>
<
/Modal
>
<
/
>
);
};
...
...
client/src/pages/MenuPage.js
View file @
e5ea513
...
...
@@ -24,6 +24,7 @@ const MenuPage = (props) => {
const
[
cafe
,
setCafe
]
=
useState
(
false
);
const
[
etc
,
setEtc
]
=
useState
(
false
);
useEffect
(()
=>
{
const
fetchData
=
async
()
=>
{
const
result
=
await
axios
(
...
...
Please
register
or
login
to post a comment