정성훈 / 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%;
#root{font-family: 'Do Hyeon', sans-serif;}
</style>
</head>
<body style="width : 100%; height:100%; margin: 0;">
<body class="pt-5" style="width : 100%; height:100%; margin: 0;">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" style="width : 100%; height:100%;"></div>
......
......@@ -7,18 +7,17 @@ import {
NavbarBrand,
Nav,
NavItem,
NavLink
NavLink,
Col
} from 'reactstrap';
const NavBar = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div>
<Navbar style={{'backgroundColor': '#940f0f'}} light expand="md">
<>
<Navbar style={{'backgroundColor': '#940f0f', 'display':'block'}} light expand="md" fixed="top">
<Container className="themed-container">
<span>
<a href='/'><img src="logo.png" width="50" /></a>
......@@ -41,7 +40,7 @@ const NavBar = (props) => {
</Collapse>
</Container>
</Navbar>
</div>
</>
);
}
......
......@@ -21,7 +21,7 @@ const AboutPage = (props) => {
<hr className="my-2" />
<br/>
<p>식당추가 등 문의사항은 언제든지 환영입니다! swa07016@khu.ac.kr 연락주세요</p>
<br/><br/><br/>
{/* <br/><br/><br/> */}
</Jumbotron>
</Container>
</div>
......
/* .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
import React, { useState, useEffect } from 'react';
import NavBar from '../components/NavBar';
import MealCard from '../components/MealCard';
import { CustomInput, Form, FormGroup, Label } from 'reactstrap';
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) => {
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(
......@@ -18,13 +33,134 @@ const MenuPage = (props) => {
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]);
console.log('skr');
}
}
}
}
}
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/>
<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>
......@@ -35,14 +171,13 @@ const MenuPage = (props) => {
</div>
</FormGroup> */}
</Container>
{isLoading ?
(<Container>
(<Container style={{'paddingTop':'1.2rem'}}>
<Row xs="2" sm="2" md="4">
{datas.map((data) =>
{filteredDatas.map((data, index) =>
<Col>
<MealCard
key = {index}
id = {data.id}
name = {data.name}
address = {data.address}
......
......@@ -19,7 +19,7 @@ app.get('/api/hello', (req, res) => {
app.get('/api/datas', (req, res) => {
iconv.extendNodeEncodings();
res.header("Access-Control-Allow-Origin", "http://localhost:3000");
res.header("Access-Control-Allow-Origin", "*");
res.send(iconv.decode(dataBuffer, 'EUC-KR').toString());
})
......