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-17 10:25:16 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
716f4d1efc1bb0dafea5fcc4012ed1b091432a6e
716f4d1e
1 parent
500428ca
LandingPage 카테고리 필터 구현
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
202 additions
and
12 deletions
client/src/components/MealCard.js
client/src/pages/LandingPage.js
client/src/pages/MenuPage.css
client/src/pages/MenuPage.js
client/src/pages/MypickPage.js
client/src/components/MealCard.js
View file @
716f4d1
...
...
@@ -10,8 +10,40 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
const
MealCard
=
(
props
)
=>
{
const
[
modal
,
setModal
]
=
useState
(
false
);
const
[
isLogin
,
setIsLogin
]
=
useState
(
false
);
const
toggleModal
=
()
=>
setModal
(
!
modal
);
const
authApi
=
()
=>
{
const
user
=
JSON
.
parse
(
localStorage
.
getItem
(
'user'
));
return
fetch
(
'/api/auth'
,
{
method
:
'GET'
,
headers
:
{
'Content-Type'
:
'application/json'
,
'authorization'
:
user
}
}).
then
(
response
=>
response
.
json
())
.
then
(
result
=>
{
if
(
result
.
message
===
'valid token'
)
{
setIsLogin
(
true
);
// pick 로직 수행
}
else
{
alert
(
'로그인이 필요합니다.'
);
window
.
location
.
href
=
"/mypick"
;
}
});
}
const
pickHandler
=
(
e
)
=>
{
e
.
preventDefault
();
authApi
();
}
// useEffect(() => {
// authApi();
// }, [isLogin]);
return
(
<>
<
Card
style
=
{{
...
...
@@ -83,7 +115,7 @@ const MealCard = (props) => {
<
small
>
썸네일
출처
<
hr
className
=
"my-2"
/>
{
props
.
img_source
}
<
Button
size
=
"sm"
className
=
"float-right"
color
=
"warning"
>
Pick
!<
/Button
>
{
props
.
img_source
}
<
Button
onClick
=
{
pickHandler
}
size
=
"sm"
className
=
"float-right"
color
=
"warning"
>
Pick
!<
/Button
>
<
/small
>
<
/div
>
<
/ModalFooter
>
...
...
client/src/pages/LandingPage.js
View file @
716f4d1
import
React
from
'react'
;
import
React
,
{
useState
,
useEffect
}
from
'react'
;
import
NavBar
from
'../components/NavBar'
;
import
MealCard
from
'../components/MealCard'
;
import
{
CustomInput
}
from
'reactstrap'
;
import
{
Container
,
Row
,
Col
}
from
"reactstrap"
;
import
axios
from
'axios'
;
import
Loading
from
'../components/Loading'
;
const
LandingPage
=
(
props
)
=>
{
const
[
datas
,
setDatas
]
=
useState
([]);
const
[
filteredDatas
,
setFilteredDatas
]
=
useState
([]);
const
[
isLoading
,
setIsLoading
]
=
useState
(
false
);
const
[
all
,
setAll
]
=
useState
(
false
);
const
[
Kfood
,
setKfood
]
=
useState
(
false
);
const
[
Cfood
,
setCfood
]
=
useState
(
false
);
const
[
Jfood
,
setJfood
]
=
useState
(
false
);
const
[
meat
,
setMeat
]
=
useState
(
false
);
const
[
snackfood
,
setSnackfood
]
=
useState
(
false
);
const
[
pub
,
setPub
]
=
useState
(
false
);
const
[
fastfood
,
setFastfood
]
=
useState
(
false
);
const
[
cafe
,
setCafe
]
=
useState
(
false
);
const
[
etc
,
setEtc
]
=
useState
(
false
);
useEffect
(()
=>
{
const
fetchData
=
async
()
=>
{
const
result
=
await
axios
(
'http://localhost:5000/api/datas'
,
// localhost로 바꾸기
);
setDatas
(
result
.
data
);
setIsLoading
(
true
);
};
fetchData
();
},
[]);
// filtereddatas 처리 + isloading변경
useEffect
(()
=>
{
setIsLoading
(
false
);
let
result
=
[];
const
states
=
[
Kfood
,
Cfood
,
Jfood
,
meat
,
snackfood
,
pub
,
fastfood
,
cafe
,
etc
];
const
types
=
[[
'한식'
],
[
'중식'
],
[
'일식'
],
[
'고기'
],
[
'분식'
],
[
'호프'
,
'술집'
],
[
'패스트푸드'
],
[
'카페'
,
'디저트'
],
[
'기타'
]];
for
(
let
i
=
0
;
i
<
states
.
length
;
i
++
)
{
if
(
states
[
i
]
===
true
)
{
const
temp
=
types
[
i
];
for
(
let
j
=
0
;
j
<
datas
.
length
;
j
++
)
{
for
(
let
k
=
0
;
k
<
temp
.
length
;
k
++
)
{
if
(
datas
[
j
].
type
===
temp
[
k
])
{
result
.
push
(
datas
[
j
]);
}
}
}
}
}
setFilteredDatas
(
result
);
setIsLoading
(
true
);
},
[
Kfood
,
Cfood
,
Jfood
,
meat
,
snackfood
,
pub
,
fastfood
,
cafe
,
etc
]);
useEffect
(()
=>
{
if
(
all
===
true
)
{
setKfood
(
true
);
setCfood
(
true
);
setJfood
(
true
);
setMeat
(
true
);
setSnackfood
(
true
);
setPub
(
true
);
setFastfood
(
true
);
setCafe
(
true
);
setEtc
(
true
);
}
else
{
setKfood
(
false
);
setCfood
(
false
);
setJfood
(
false
);
setMeat
(
false
);
setSnackfood
(
false
);
setPub
(
false
);
setFastfood
(
false
);
setCafe
(
false
);
setEtc
(
false
);
}
},
[
all
]);
return
(
<>
<
NavBar
/>
Landign
page
<
Container
style
=
{{
paddingTop
:
'1.5rem'
}}
>
<
Row
>
<
Col
>
<
CustomInput
type
=
"switch"
id
=
"all"
label
=
"전체"
checked
=
{
all
}
onChange
=
{()
=>
setAll
(
!
all
)}
/
>
<
/Col
>
<
/Row
>
<
Row
xs
=
"3"
sm
=
"3"
md
=
"5"
>
<
Col
>
<
CustomInput
type
=
"checkbox"
id
=
"Kfood"
label
=
"한식"
checked
=
{
Kfood
}
onChange
=
{()
=>
setKfood
(
!
Kfood
)}
/
>
<
/Col
>
<
Col
>
<
CustomInput
type
=
"checkbox"
id
=
"Cfood"
label
=
"중식"
checked
=
{
Cfood
}
onChange
=
{()
=>
setCfood
(
!
Cfood
)}
/
>
<
/Col
>
<
Col
>
<
CustomInput
type
=
"checkbox"
id
=
"Jfood"
label
=
"일식"
checked
=
{
Jfood
}
onChange
=
{()
=>
setJfood
(
!
Jfood
)}
/
>
<
/Col
>
<
Col
>
<
CustomInput
type
=
"checkbox"
id
=
"meat"
label
=
"고기"
checked
=
{
meat
}
onChange
=
{()
=>
setMeat
(
!
meat
)}
/
>
<
/Col
>
<
Col
>
<
CustomInput
type
=
"checkbox"
id
=
"snackfood"
label
=
"분식"
checked
=
{
snackfood
}
onChange
=
{()
=>
setSnackfood
(
!
snackfood
)}
/
>
<
/Col
>
<
Col
>
<
CustomInput
type
=
"checkbox"
id
=
"pub"
label
=
"호프/술집"
checked
=
{
pub
}
onChange
=
{()
=>
setPub
(
!
pub
)}
/
>
<
/Col
>
<
Col
>
<
CustomInput
type
=
"checkbox"
id
=
"fastfood"
label
=
"패스트푸드"
checked
=
{
fastfood
}
onChange
=
{()
=>
setFastfood
(
!
fastfood
)}
/
>
<
/Col
>
<
Col
>
<
CustomInput
type
=
"checkbox"
id
=
"cafe"
label
=
"카페/디저트"
checked
=
{
cafe
}
onChange
=
{()
=>
setCafe
(
!
cafe
)}
/
>
<
/Col
>
<
Col
>
<
CustomInput
type
=
"checkbox"
id
=
"etc"
label
=
"기타"
checked
=
{
etc
}
onChange
=
{()
=>
setEtc
(
!
etc
)}
/
>
<
/Col
>
<
/Row
>
<
/Container
>
<
Container
>
{
/* ???????? ???? */
}
{
/* <FormGroup>
<Label for="exampleCheckbox">??</Label>
<div>
<CustomInput type="checkbox" id="exampleCustomInline" label="??" inline />
</div>
</FormGroup> */
}
<
/Container
>
<
/
>
);
}
export
default
LandingPage
;
\ No newline at end of file
...
...
client/src/pages/MenuPage.css
deleted
100644 → 0
View file @
500428c
/* .custom-control-label:before{
background-color:#940f0f;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
background-color: #940f0f;
} */
\ No newline at end of file
client/src/pages/MenuPage.js
View file @
716f4d1
...
...
@@ -5,7 +5,7 @@ import { CustomInput } from 'reactstrap';
import
{
Container
,
Row
,
Col
}
from
"reactstrap"
;
import
axios
from
'axios'
;
import
Loading
from
'../components/Loading'
;
import
'./MenuPage.css'
;
const
MenuPage
=
(
props
)
=>
{
...
...
client/src/pages/MypickPage.js
View file @
716f4d1
...
...
@@ -23,7 +23,7 @@ const MypickPage = () => {
setIsLogin
(
true
);
}
else
if
(
result
.
message
===
'expired token'
)
{
alert
(
'토큰이 만료되었습니다. 로그인 해주세요.'
);
//
alert('토큰이 만료되었습니다. 로그인 해주세요.');
setIsLogin
(
false
);
}
else
if
(
result
.
message
===
'invalid token'
)
{
setIsLogin
(
false
);
...
...
Please
register
or
login
to post a comment