정성훈 / MEALKHU

Go to a project
Toggle navigation Toggle navigation pinning
swa07016
716f4d1e 1 parent 500428ca

LandingPage 카테고리 필터 구현

Inline Side-by-side
Showing 5 changed files with 202 additions and 12 deletions
......@@ -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>
......
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
......
/* .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
......@@ -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) => {
......
......@@ -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);
......