정성훈 / MEALKHU

Go to a project
Toggle navigation Toggle navigation pinning
swa07016
59835b4a 1 parent 5af6b452

랜덤 추천 구현

Expand all
Inline Side-by-side
Showing 9 changed files with 118 additions and 13 deletions
This diff is collapsed. Click to expand it.
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
14 "axios": "^0.19.2", 14 "axios": "^0.19.2",
15 "bootstrap": "^4.5.0", 15 "bootstrap": "^4.5.0",
16 "http-proxy-middleware": "^1.0.4", 16 "http-proxy-middleware": "^1.0.4",
17 + "mdbreact": "^4.27.0",
17 "react": "^16.13.1", 18 "react": "^16.13.1",
18 "react-app-polyfill": "^1.0.6", 19 "react-app-polyfill": "^1.0.6",
19 "react-cookies": "^0.1.1", 20 "react-cookies": "^0.1.1",
......
...@@ -28,6 +28,7 @@ height: 100%; ...@@ -28,6 +28,7 @@ height: 100%;
28 Learn how to configure a non-root public URL by running `npm run build`. 28 Learn how to configure a non-root public URL by running `npm run build`.
29 --> 29 -->
30 <title>MEALKHU</title> 30 <title>MEALKHU</title>
31 +
31 <link href="https://fonts.googleapis.com/css?family=Do+Hyeon:400" rel="stylesheet"> 32 <link href="https://fonts.googleapis.com/css?family=Do+Hyeon:400" rel="stylesheet">
32 <style> 33 <style>
33 #root, .modalClass{font-family: 'Do Hyeon', sans-serif;} 34 #root, .modalClass{font-family: 'Do Hyeon', sans-serif;}
......
1 /*global kakao*/ 1 /*global kakao*/
2 -import React, { useEffect, useState } from "react"; 2 +import React, { useEffect, useState, Fragment } from "react";
3 import { Input, Button, ButtonGroup } from "reactstrap"; 3 import { Input, Button, ButtonGroup } from "reactstrap";
4 import { Label, CustomInput, Row, Col, FormGroup } from "reactstrap"; 4 import { Label, CustomInput, Row, Col, FormGroup } from "reactstrap";
5 import appKey from "../config/appKey.json"; 5 import appKey from "../config/appKey.json";
...@@ -122,7 +122,7 @@ const LandingMap = (props) => { ...@@ -122,7 +122,7 @@ const LandingMap = (props) => {
122 122
123 return ( 123 return (
124 <> 124 <>
125 - 125 + <hr className="my-2" />
126 <Row> 126 <Row>
127 <Col> 127 <Col>
128 <span className="font-weight-bold">MEALKHU MAP</span> 128 <span className="font-weight-bold">MEALKHU MAP</span>
......
...@@ -7,7 +7,7 @@ const Loading = (props) => { ...@@ -7,7 +7,7 @@ const Loading = (props) => {
7 'display':'flex', 'width':'100%', "height":'85%', 'textAlign':'center', 'alignItems':'center' 7 'display':'flex', 'width':'100%', "height":'85%', 'textAlign':'center', 'alignItems':'center'
8 }}><span style={{ 8 }}><span style={{
9 'margin': '0 auto' 9 'margin': '0 auto'
10 - }}><Spinner color="danger" style={{ width: '2rem', height: '2rem', marginRight:'1rem' }}/><h1 style={{'display':'inline'}}>Loading..</h1></span></span> 10 +}}><Spinner color="danger" style={{ width: '2rem', height: '2rem', marginRight:'1rem' }}/><h1 style={{'display':'inline'}}>{props.value}</h1></span></span>
11 ); 11 );
12 } 12 }
13 13
......
...@@ -5,6 +5,9 @@ import * as serviceWorker from './serviceWorker'; ...@@ -5,6 +5,9 @@ import * as serviceWorker from './serviceWorker';
5 import 'bootstrap/dist/css/bootstrap.min.css'; 5 import 'bootstrap/dist/css/bootstrap.min.css';
6 import 'react-app-polyfill/ie11'; 6 import 'react-app-polyfill/ie11';
7 7
8 +// import '@fortawesome/fontawesome-free/css/all.min.css';
9 +// import 'bootstrap-css-only/css/bootstrap.min.css';
10 +// import 'mdbreact/dist/css/mdb.css';
8 11
9 ReactDOM.render( 12 ReactDOM.render(
10 <React.StrictMode> 13 <React.StrictMode>
......
...@@ -8,7 +8,7 @@ const AboutPage = (props) => { ...@@ -8,7 +8,7 @@ const AboutPage = (props) => {
8 <> 8 <>
9 <NavBar/> 9 <NavBar/>
10 <div style={{'display':'flex', 'width':'100%', "height":'100%', 'textAlign':'center', 'alignItems':'center'}}> 10 <div style={{'display':'flex', 'width':'100%', "height":'100%', 'textAlign':'center', 'alignItems':'center'}}>
11 - <Container style={{}}> 11 + <Container>
12 <Jumbotron 12 <Jumbotron
13 style={{'backgroundColor':'#fff'}} 13 style={{'backgroundColor':'#fff'}}
14 > 14 >
......
1 -import React, { useState, useEffect } from 'react'; 1 +import React, { useState, useEffect, Fragment } from 'react';
2 import NavBar from '../components/NavBar'; 2 import NavBar from '../components/NavBar';
3 import LandingMap from '../components/LandingMap'; 3 import LandingMap from '../components/LandingMap';
4 import { CustomInput } from 'reactstrap'; 4 import { CustomInput } from 'reactstrap';
5 -import { Container, Row, Col } from "reactstrap"; 5 +import { Container, Row, Col, Button, Jumbotron } from "reactstrap";
6 import axios from 'axios'; 6 import axios from 'axios';
7 - 7 +import Loading from '../components/Loading';
8 +import MealCard from '../components/MealCard';
8 9
9 const LandingPage = (props) => { 10 const LandingPage = (props) => {
10 const [datas, setDatas] = useState([]); 11 const [datas, setDatas] = useState([]);
11 const [filteredDatas, setFilteredDatas] = useState([]); 12 const [filteredDatas, setFilteredDatas] = useState([]);
13 + const [RandomCards, setRandomCards] = useState([]);
12 const [isLoading, setIsLoading] = useState(false); 14 const [isLoading, setIsLoading] = useState(false);
13 const [all, setAll] = useState(false); 15 const [all, setAll] = useState(false);
14 const [Kfood, setKfood] = useState(false); 16 const [Kfood, setKfood] = useState(false);
...@@ -20,7 +22,7 @@ const LandingPage = (props) => { ...@@ -20,7 +22,7 @@ const LandingPage = (props) => {
20 const [fastfood, setFastfood] = useState(false); 22 const [fastfood, setFastfood] = useState(false);
21 const [cafe, setCafe] = useState(false); 23 const [cafe, setCafe] = useState(false);
22 const [etc, setEtc] = useState(false); 24 const [etc, setEtc] = useState(false);
23 - 25 + const [isRandom, setIsRandom] = useState(0);
24 26
25 useEffect(() => { 27 useEffect(() => {
26 const fetchData = async () => { 28 const fetchData = async () => {
...@@ -34,8 +36,6 @@ const LandingPage = (props) => { ...@@ -34,8 +36,6 @@ const LandingPage = (props) => {
34 fetchData(); 36 fetchData();
35 }, []); 37 }, []);
36 38
37 - // filtereddatas 처리 + isloading변경
38 -
39 useEffect(() => { 39 useEffect(() => {
40 setIsLoading(false); 40 setIsLoading(false);
41 let result = []; 41 let result = [];
...@@ -82,6 +82,30 @@ const LandingPage = (props) => { ...@@ -82,6 +82,30 @@ const LandingPage = (props) => {
82 } 82 }
83 }, [all]); 83 }, [all]);
84 84
85 + const randomHandler = () => {
86 +
87 + if(filteredDatas.length === 0) {
88 + alert('메뉴를 선택하세요');
89 + return ;
90 + }
91 + else {
92 + console.log(filteredDatas);
93 + setIsRandom(1);
94 + setTimeout(()=>{
95 + let x = getRandomInt(0, filteredDatas.length);
96 + let y = getRandomInt(0, filteredDatas.length);
97 + setRandomCards([filteredDatas[x], filteredDatas[y]]);
98 + setIsRandom(2);
99 + }, 2500);
100 + }
101 + }
102 +
103 + const getRandomInt = (min, max) => {
104 + min = Math.ceil(min);
105 + max = Math.floor(max);
106 + return Math.floor(Math.random() * (max - min)) + min; //최댓값은 제외, 최솟값은 포함
107 + }
108 +
85 return ( 109 return (
86 <> 110 <>
87 <NavBar/> 111 <NavBar/>
...@@ -89,6 +113,30 @@ const LandingPage = (props) => { ...@@ -89,6 +113,30 @@ const LandingPage = (props) => {
89 paddingTop : '1.5rem' 113 paddingTop : '1.5rem'
90 }}> 114 }}>
91 115
116 + <div style={{'display':'flex', 'width':'100%', "height":'100%'}}>
117 + <Container>
118 +
119 + <Jumbotron
120 + style={{
121 + 'backgroundColor':'#fff',
122 + 'paddingTop': '1.5rem',
123 + 'boxShadow': '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
124 + }}
125 + >
126 + <Row xs="1" sm="2" md="2">
127 + <Col style={{
128 +
129 + }}>
130 + <h3 className="text-center">
131 + <span className="font-weight-bold">랜덤추천 : </span>메뉴를 선택하세요
132 + </h3>
133 + <span style={{
134 + 'paddingLeft' : '0.5rem'
135 + }}>
136 + {/* <Button color="warning">Random!</Button> */}
137 +
138 + </span>
139 + <Container>
92 <Row> 140 <Row>
93 <Col> 141 <Col>
94 <CustomInput type="switch" id="all" label="전체" 142 <CustomInput type="switch" id="all" label="전체"
...@@ -97,7 +145,7 @@ const LandingPage = (props) => { ...@@ -97,7 +145,7 @@ const LandingPage = (props) => {
97 /> 145 />
98 </Col> 146 </Col>
99 </Row> 147 </Row>
100 - <Row xs="3" sm="3" md="5"> 148 + <Row xs="3" sm="3" md="4">
101 <Col> 149 <Col>
102 <CustomInput type="checkbox" id="Kfood" label="한식" 150 <CustomInput type="checkbox" id="Kfood" label="한식"
103 checked={Kfood} 151 checked={Kfood}
...@@ -153,8 +201,56 @@ const LandingPage = (props) => { ...@@ -153,8 +201,56 @@ const LandingPage = (props) => {
153 onChange={()=>setEtc(!etc)} 201 onChange={()=>setEtc(!etc)}
154 /> 202 />
155 </Col> 203 </Col>
204 + </Row>
205 + <div style={{
206 + 'paddingTop':'1.5rem',
207 + 'alignItems':'center'
208 + ,'display':'flex', 'width':'100%', "height":'100%','textAlign':'center'
209 + }}>
210 + <Button onClick={randomHandler} size="lg" style={{
211 + 'margin':'0 auto'
212 + }} color="danger">Random!</Button>
213 + </div>
214 + </Container>
215 +
156 216
217 + </Col>
218 + <Col>
219 + {isRandom === 0 ? ('') : ( (isRandom === 1) ? <span style={{'padding':'1.5rem'}}><Loading value="추첨중.."/></span> :(
220 + <Container>
221 + <Row>
222 + {
223 + RandomCards.map((data, index)=> (
224 + <Col>
225 + <MealCard
226 + key = {index}
227 + id = {data.id}
228 + name = {data.name}
229 + address = {data.address}
230 + latitude = {data.latitude}
231 + longitude = {data.longitude}
232 + type = {data.type}
233 + menu = {data.menu}
234 + img = {data.img}
235 + img_source = {data.img_source}
236 + />
237 + </Col>
238 + ))
239 + }
240 +
241 +
242 + </Row>
243 +</Container>
244 + )
245 +
246 +
247 + )}
248 + </Col>
157 </Row> 249 </Row>
250 + </Jumbotron>
251 + </Container>
252 + </div>
253 +
158 {datas ? <LandingMap 254 {datas ? <LandingMap
159 datas = {datas} 255 datas = {datas}
160 /> : 'loading...'} 256 /> : 'loading...'}
......
...@@ -3,6 +3,9 @@ import NavBar from '../components/NavBar'; ...@@ -3,6 +3,9 @@ import NavBar from '../components/NavBar';
3 import MealCard from '../components/MealCard'; 3 import MealCard from '../components/MealCard';
4 import { CustomInput } from 'reactstrap'; 4 import { CustomInput } from 'reactstrap';
5 import { Container, Row, Col } from "reactstrap"; 5 import { Container, Row, Col } from "reactstrap";
6 +
7 +import { Card, CardText, CardBody, CardTitle, } from "reactstrap";
8 +
6 import axios from 'axios'; 9 import axios from 'axios';
7 import Loading from '../components/Loading'; 10 import Loading from '../components/Loading';
8 11
...@@ -155,8 +158,9 @@ const MenuPage = (props) => { ...@@ -155,8 +158,9 @@ const MenuPage = (props) => {
155 onChange={()=>setEtc(!etc)} 158 onChange={()=>setEtc(!etc)}
156 /> 159 />
157 </Col> 160 </Col>
158 -
159 </Row> 161 </Row>
162 +
163 +
160 </Container> 164 </Container>
161 165
162 166
...@@ -184,7 +188,7 @@ const MenuPage = (props) => { ...@@ -184,7 +188,7 @@ const MenuPage = (props) => {
184 } 188 }
185 </Row> 189 </Row>
186 </Container>) 190 </Container>)
187 - : <Loading/> 191 + : <Loading value="Loading.."/>
188 } 192 }
189 193
190 194
......