정성훈 / 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" ...@@ -10,8 +10,40 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
10 const MealCard = (props) => { 10 const MealCard = (props) => {
11 11
12 const [modal, setModal] = useState(false); 12 const [modal, setModal] = useState(false);
13 + const [isLogin, setIsLogin] = useState(false);
13 const toggleModal = () => setModal(!modal); 14 const toggleModal = () => setModal(!modal);
14 15
16 +
17 + const authApi = () => {
18 + const user = JSON.parse(localStorage.getItem('user'));
19 + return fetch('/api/auth', {
20 + method: 'GET',
21 + headers: {
22 + 'Content-Type': 'application/json',
23 + 'authorization': user
24 + }
25 + }).then(response => response.json())
26 + .then(result => {
27 + if(result.message === 'valid token') {
28 + setIsLogin(true);
29 + // pick 로직 수행
30 + } else {
31 + alert('로그인이 필요합니다.');
32 + window.location.href = "/mypick";
33 + }
34 + });
35 + }
36 +
37 + const pickHandler = (e) => {
38 + e.preventDefault();
39 + authApi();
40 + }
41 +
42 + // useEffect(() => {
43 + // authApi();
44 + // }, [isLogin]);
45 +
46 +
15 return ( 47 return (
16 <> 48 <>
17 <Card style={{ 49 <Card style={{
...@@ -83,7 +115,7 @@ const MealCard = (props) => { ...@@ -83,7 +115,7 @@ const MealCard = (props) => {
83 <small> 115 <small>
84 썸네일 출처 116 썸네일 출처
85 <hr className="my-2"/> 117 <hr className="my-2"/>
86 - {props.img_source} <Button size="sm" className="float-right" color="warning">Pick!</Button> 118 + {props.img_source} <Button onClick={pickHandler} size="sm" className="float-right" color="warning">Pick!</Button>
87 </small> 119 </small>
88 </div> 120 </div>
89 </ModalFooter> 121 </ModalFooter>
......
1 -import React from 'react'; 1 +import React, { useState, useEffect } from 'react';
2 import NavBar from '../components/NavBar'; 2 import NavBar from '../components/NavBar';
3 +import MealCard from '../components/MealCard';
4 +import { CustomInput } from 'reactstrap';
5 +import { Container, Row, Col } from "reactstrap";
6 +import axios from 'axios';
7 +import Loading from '../components/Loading';
3 8
4 const LandingPage = (props) => { 9 const LandingPage = (props) => {
10 + const [datas, setDatas] = useState([]);
11 + const [filteredDatas, setFilteredDatas] = useState([]);
12 + const [isLoading, setIsLoading] = useState(false);
13 + const [all, setAll] = useState(false);
14 + const [Kfood, setKfood] = useState(false);
15 + const [Cfood, setCfood] = useState(false);
16 + const [Jfood, setJfood] = useState(false);
17 + const [meat, setMeat] = useState(false);
18 + const [snackfood, setSnackfood] = useState(false);
19 + const [pub, setPub] = useState(false);
20 + const [fastfood, setFastfood] = useState(false);
21 + const [cafe, setCafe] = useState(false);
22 + const [etc, setEtc] = useState(false);
23 +
24 + useEffect(() => {
25 + const fetchData = async () => {
26 + const result = await axios(
27 + 'http://localhost:5000/api/datas',
28 + // localhost로 바꾸기
29 + );
30 + setDatas(result.data);
31 + setIsLoading(true);
32 + };
33 + fetchData();
34 + }, []);
35 +
36 + // filtereddatas 처리 + isloading변경
37 +
38 + useEffect(() => {
39 + setIsLoading(false);
40 + let result = [];
41 + const states = [Kfood, Cfood, Jfood, meat, snackfood, pub, fastfood, cafe, etc];
42 + const types = [['한식'], ['중식'], ['일식'], ['고기'], ['분식'], ['호프', '술집'], ['패스트푸드'], ['카페', '디저트'], ['기타']];
43 + for(let i = 0; i < states.length; i++) {
44 + if(states[i] === true) {
45 + const temp = types[i];
46 + for(let j = 0; j < datas.length; j++) {
47 + for(let k = 0; k < temp.length; k++) {
48 + if(datas[j].type === temp[k]) {
49 + result.push(datas[j]);
50 + }
51 + }
52 + }
53 + }
54 + }
55 + setFilteredDatas(result);
56 + setIsLoading(true);
57 + }, [Kfood, Cfood, Jfood, meat, snackfood, pub, fastfood, cafe, etc]);
58 +
59 + useEffect(() => {
60 + if(all === true) {
61 + setKfood(true);
62 + setCfood(true);
63 + setJfood(true);
64 + setMeat(true);
65 + setSnackfood(true);
66 + setPub(true);
67 + setFastfood(true);
68 + setCafe(true);
69 + setEtc(true);
70 + }
71 + else {
72 + setKfood(false);
73 + setCfood(false);
74 + setJfood(false);
75 + setMeat(false);
76 + setSnackfood(false);
77 + setPub(false);
78 + setFastfood(false);
79 + setCafe(false);
80 + setEtc(false);
81 + }
82 + }, [all]);
5 83
6 return ( 84 return (
7 <> 85 <>
8 <NavBar/> 86 <NavBar/>
9 - Landign page 87 + <Container style={{
88 + paddingTop : '1.5rem'
89 + }}>
90 +
91 + <Row>
92 + <Col>
93 + <CustomInput type="switch" id="all" label="전체"
94 + checked={all}
95 + onChange={()=> setAll(!all)}
96 + />
97 + </Col>
98 + </Row>
99 + <Row xs="3" sm="3" md="5">
100 + <Col>
101 + <CustomInput type="checkbox" id="Kfood" label="한식"
102 + checked={Kfood}
103 + onChange={()=>setKfood(!Kfood)}
104 + />
105 + </Col>
106 + <Col>
107 + <CustomInput type="checkbox" id="Cfood" label="중식"
108 + checked={Cfood}
109 + onChange={()=>setCfood(!Cfood)}
110 + />
111 + </Col>
112 + <Col>
113 + <CustomInput type="checkbox" id="Jfood" label="일식"
114 + checked={Jfood}
115 + onChange={()=>setJfood(!Jfood)}
116 + />
117 + </Col>
118 + <Col>
119 + <CustomInput type="checkbox" id="meat" label="고기"
120 + checked={meat}
121 + onChange={()=>setMeat(!meat)}
122 + />
123 + </Col>
124 + <Col>
125 + <CustomInput type="checkbox" id="snackfood" label="분식"
126 + checked={snackfood}
127 + onChange={()=>setSnackfood(!snackfood)}
128 + />
129 + </Col>
130 + <Col>
131 + <CustomInput type="checkbox" id="pub" label="호프/술집"
132 + checked={pub}
133 + onChange={()=>setPub(!pub)}
134 + />
135 + </Col>
136 +
137 + <Col>
138 + <CustomInput type="checkbox" id="fastfood" label="패스트푸드"
139 + checked={fastfood}
140 + onChange={()=>setFastfood(!fastfood)}
141 + />
142 + </Col>
143 + <Col>
144 + <CustomInput type="checkbox" id="cafe" label="카페/디저트"
145 + checked={cafe}
146 + onChange={()=>setCafe(!cafe)}
147 + />
148 + </Col>
149 + <Col>
150 + <CustomInput type="checkbox" id="etc" label="기타"
151 + checked={etc}
152 + onChange={()=>setEtc(!etc)}
153 + />
154 + </Col>
155 +
156 + </Row>
157 + </Container>
158 +
159 +
160 + <Container>
161 + {/* ???????? ???? */}
162 + {/* <FormGroup>
163 + <Label for="exampleCheckbox">??</Label>
164 + <div>
165 + <CustomInput type="checkbox" id="exampleCustomInline" label="??" inline />
166 +
167 + </div>
168 + </FormGroup> */}
169 + </Container>
170 +
171 +
172 +
173 +
10 </> 174 </>
11 ); 175 );
12 } 176 }
13 177
178 +
14 export default LandingPage; 179 export default LandingPage;
...\ No newline at end of file ...\ No newline at end of file
......
1 -/* .custom-control-label:before{
2 - background-color:#940f0f;
3 - }
4 -
5 -.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
6 -background-color: #940f0f;
7 -} */
...\ No newline at end of file ...\ No newline at end of file
...@@ -5,7 +5,7 @@ import { CustomInput } from 'reactstrap'; ...@@ -5,7 +5,7 @@ import { CustomInput } from 'reactstrap';
5 import { Container, Row, Col } from "reactstrap"; 5 import { Container, Row, Col } from "reactstrap";
6 import axios from 'axios'; 6 import axios from 'axios';
7 import Loading from '../components/Loading'; 7 import Loading from '../components/Loading';
8 -import './MenuPage.css'; 8 +
9 9
10 10
11 const MenuPage = (props) => { 11 const MenuPage = (props) => {
......
...@@ -23,7 +23,7 @@ const MypickPage = () => { ...@@ -23,7 +23,7 @@ const MypickPage = () => {
23 setIsLogin(true); 23 setIsLogin(true);
24 24
25 } else if(result.message === 'expired token') { 25 } else if(result.message === 'expired token') {
26 - alert('토큰이 만료되었습니다. 로그인 해주세요.'); 26 + // alert('토큰이 만료되었습니다. 로그인 해주세요.');
27 setIsLogin(false); 27 setIsLogin(false);
28 } else if(result.message === 'invalid token') { 28 } else if(result.message === 'invalid token') {
29 setIsLogin(false); 29 setIsLogin(false);
......