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> | ... | ... |
client/src/pages/MenuPage.css
0 → 100644
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 | ... | ... |
-
Please register or login to post a comment