정성훈 / MEALKHU

Go to a project
Toggle navigation Toggle navigation pinning
swa07016
b64914dc 1 parent 58366e99

menu 카테고리 필터 구현

Inline Side-by-side
Showing 6 changed files with 156 additions and 15 deletions
...@@ -33,7 +33,7 @@ height: 100%; ...@@ -33,7 +33,7 @@ height: 100%;
33 #root{font-family: 'Do Hyeon', sans-serif;} 33 #root{font-family: 'Do Hyeon', sans-serif;}
34 </style> 34 </style>
35 </head> 35 </head>
36 - <body style="width : 100%; height:100%; margin: 0;"> 36 + <body class="pt-5" style="width : 100%; height:100%; margin: 0;">
37 <noscript>You need to enable JavaScript to run this app.</noscript> 37 <noscript>You need to enable JavaScript to run this app.</noscript>
38 <div id="root" style="width : 100%; height:100%;"></div> 38 <div id="root" style="width : 100%; height:100%;"></div>
39 39
......
...@@ -7,18 +7,17 @@ import { ...@@ -7,18 +7,17 @@ import {
7 NavbarBrand, 7 NavbarBrand,
8 Nav, 8 Nav,
9 NavItem, 9 NavItem,
10 - NavLink 10 + NavLink,
11 + Col
11 } from 'reactstrap'; 12 } from 'reactstrap';
12 13
13 const NavBar = (props) => { 14 const NavBar = (props) => {
14 const [isOpen, setIsOpen] = useState(false); 15 const [isOpen, setIsOpen] = useState(false);
15 -
16 const toggle = () => setIsOpen(!isOpen); 16 const toggle = () => setIsOpen(!isOpen);
17 17
18 return ( 18 return (
19 - <div> 19 + <>
20 - 20 + <Navbar style={{'backgroundColor': '#940f0f', 'display':'block'}} light expand="md" fixed="top">
21 - <Navbar style={{'backgroundColor': '#940f0f'}} light expand="md">
22 <Container className="themed-container"> 21 <Container className="themed-container">
23 <span> 22 <span>
24 <a href='/'><img src="logo.png" width="50" /></a> 23 <a href='/'><img src="logo.png" width="50" /></a>
...@@ -41,7 +40,7 @@ const NavBar = (props) => { ...@@ -41,7 +40,7 @@ const NavBar = (props) => {
41 </Collapse> 40 </Collapse>
42 </Container> 41 </Container>
43 </Navbar> 42 </Navbar>
44 - </div> 43 + </>
45 ); 44 );
46 } 45 }
47 46
......
...@@ -21,7 +21,7 @@ const AboutPage = (props) => { ...@@ -21,7 +21,7 @@ const AboutPage = (props) => {
21 <hr className="my-2" /> 21 <hr className="my-2" />
22 <br/> 22 <br/>
23 <p>식당추가 등 문의사항은 언제든지 환영입니다! swa07016@khu.ac.kr 연락주세요</p> 23 <p>식당추가 등 문의사항은 언제든지 환영입니다! swa07016@khu.ac.kr 연락주세요</p>
24 - <br/><br/><br/> 24 + {/* <br/><br/><br/> */}
25 </Jumbotron> 25 </Jumbotron>
26 </Container> 26 </Container>
27 </div> 27 </div>
......
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
1 import React, { useState, useEffect } 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'; 3 import MealCard from '../components/MealCard';
4 -import { CustomInput, Form, FormGroup, Label } from 'reactstrap'; 4 +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';
9 +
8 10
9 const MenuPage = (props) => { 11 const MenuPage = (props) => {
10 const [datas, setDatas] = useState([]); 12 const [datas, setDatas] = useState([]);
13 + const [filteredDatas, setFilteredDatas] = useState([]);
11 const [isLoading, setIsLoading] = useState(false); 14 const [isLoading, setIsLoading] = useState(false);
15 +
16 + const [all, setAll] = useState(false);
17 + const [Kfood, setKfood] = useState(false);
18 + const [Cfood, setCfood] = useState(false);
19 + const [Jfood, setJfood] = useState(false);
20 + const [meat, setMeat] = useState(false);
21 + const [snackfood, setSnackfood] = useState(false);
22 + const [pub, setPub] = useState(false);
23 + const [fastfood, setFastfood] = useState(false);
24 + const [cafe, setCafe] = useState(false);
25 + const [etc, setEtc] = useState(false);
26 +
12 useEffect(() => { 27 useEffect(() => {
13 const fetchData = async () => { 28 const fetchData = async () => {
14 const result = await axios( 29 const result = await axios(
...@@ -18,13 +33,134 @@ const MenuPage = (props) => { ...@@ -18,13 +33,134 @@ const MenuPage = (props) => {
18 setDatas(result.data); 33 setDatas(result.data);
19 setIsLoading(true); 34 setIsLoading(true);
20 }; 35 };
21 -
22 fetchData(); 36 fetchData();
23 }, []); 37 }, []);
24 38
39 + // filtereddatas 처리 + isloading변경
40 +
41 + useEffect(() => {
42 + setIsLoading(false);
43 + let result = [];
44 + const states = [Kfood, Cfood, Jfood, meat, snackfood, pub, fastfood, cafe, etc];
45 + const types = [['한식'], ['중식'], ['일식'], ['고기'], ['분식'], ['호프', '술집'], ['패스트푸드'], ['카페', '디저트'], ['기타']];
46 + for(let i = 0; i < states.length; i++) {
47 + if(states[i] === true) {
48 + const temp = types[i];
49 + for(let j = 0; j < datas.length; j++) {
50 + for(let k = 0; k < temp.length; k++) {
51 + if(datas[j].type === temp[k]) {
52 + result.push(datas[j]);
53 + console.log('skr');
54 + }
55 + }
56 + }
57 + }
58 + }
59 + setFilteredDatas(result);
60 + setIsLoading(true);
61 + }, [Kfood, Cfood, Jfood, meat, snackfood, pub, fastfood, cafe, etc]);
62 +
63 + useEffect(() => {
64 + if(all === true) {
65 + setKfood(true);
66 + setCfood(true);
67 + setJfood(true);
68 + setMeat(true);
69 + setSnackfood(true);
70 + setPub(true);
71 + setFastfood(true);
72 + setCafe(true);
73 + setEtc(true);
74 + }
75 + else {
76 + setKfood(false);
77 + setCfood(false);
78 + setJfood(false);
79 + setMeat(false);
80 + setSnackfood(false);
81 + setPub(false);
82 + setFastfood(false);
83 + setCafe(false);
84 + setEtc(false);
85 + }
86 + }, [all]);
87 +
25 return ( 88 return (
26 <> 89 <>
27 <NavBar/> 90 <NavBar/>
91 + <Container style={{
92 + paddingTop : '1.5rem'
93 + }}>
94 +
95 + <Row>
96 + <Col>
97 + <CustomInput type="switch" id="all" label="전체"
98 + checked={all}
99 + onChange={()=> setAll(!all)}
100 + />
101 + </Col>
102 + </Row>
103 + <Row xs="3" sm="3" md="5">
104 + <Col>
105 + <CustomInput type="checkbox" id="Kfood" label="한식"
106 + checked={Kfood}
107 + onChange={()=>setKfood(!Kfood)}
108 + />
109 + </Col>
110 + <Col>
111 + <CustomInput type="checkbox" id="Cfood" label="중식"
112 + checked={Cfood}
113 + onChange={()=>setCfood(!Cfood)}
114 + />
115 + </Col>
116 + <Col>
117 + <CustomInput type="checkbox" id="Jfood" label="일식"
118 + checked={Jfood}
119 + onChange={()=>setJfood(!Jfood)}
120 + />
121 + </Col>
122 + <Col>
123 + <CustomInput type="checkbox" id="meat" label="고기"
124 + checked={meat}
125 + onChange={()=>setMeat(!meat)}
126 + />
127 + </Col>
128 + <Col>
129 + <CustomInput type="checkbox" id="snackfood" label="분식"
130 + checked={snackfood}
131 + onChange={()=>setSnackfood(!snackfood)}
132 + />
133 + </Col>
134 + <Col>
135 + <CustomInput type="checkbox" id="pub" label="호프/술집"
136 + checked={pub}
137 + onChange={()=>setPub(!pub)}
138 + />
139 + </Col>
140 +
141 + <Col>
142 + <CustomInput type="checkbox" id="fastfood" label="패스트푸드"
143 + checked={fastfood}
144 + onChange={()=>setFastfood(!fastfood)}
145 + />
146 + </Col>
147 + <Col>
148 + <CustomInput type="checkbox" id="cafe" label="카페/디저트"
149 + checked={cafe}
150 + onChange={()=>setCafe(!cafe)}
151 + />
152 + </Col>
153 + <Col>
154 + <CustomInput type="checkbox" id="etc" label="기타"
155 + checked={etc}
156 + onChange={()=>setEtc(!etc)}
157 + />
158 + </Col>
159 +
160 + </Row>
161 + </Container>
162 +
163 +
28 <Container> 164 <Container>
29 {/* ???????? ???? */} 165 {/* ???????? ???? */}
30 {/* <FormGroup> 166 {/* <FormGroup>
...@@ -35,14 +171,13 @@ const MenuPage = (props) => { ...@@ -35,14 +171,13 @@ const MenuPage = (props) => {
35 </div> 171 </div>
36 </FormGroup> */} 172 </FormGroup> */}
37 </Container> 173 </Container>
38 -
39 -
40 {isLoading ? 174 {isLoading ?
41 - (<Container> 175 + (<Container style={{'paddingTop':'1.2rem'}}>
42 <Row xs="2" sm="2" md="4"> 176 <Row xs="2" sm="2" md="4">
43 - {datas.map((data) => 177 + {filteredDatas.map((data, index) =>
44 <Col> 178 <Col>
45 <MealCard 179 <MealCard
180 + key = {index}
46 id = {data.id} 181 id = {data.id}
47 name = {data.name} 182 name = {data.name}
48 address = {data.address} 183 address = {data.address}
......
...@@ -19,7 +19,7 @@ app.get('/api/hello', (req, res) => { ...@@ -19,7 +19,7 @@ app.get('/api/hello', (req, res) => {
19 19
20 app.get('/api/datas', (req, res) => { 20 app.get('/api/datas', (req, res) => {
21 iconv.extendNodeEncodings(); 21 iconv.extendNodeEncodings();
22 - res.header("Access-Control-Allow-Origin", "http://localhost:3000"); 22 + res.header("Access-Control-Allow-Origin", "*");
23 res.send(iconv.decode(dataBuffer, 'EUC-KR').toString()); 23 res.send(iconv.decode(dataBuffer, 'EUC-KR').toString());
24 }) 24 })
25 25
......