Showing
3 changed files
with
42 additions
and
28 deletions
... | @@ -36,7 +36,7 @@ height: 100%; | ... | @@ -36,7 +36,7 @@ height: 100%; |
36 | <body style="width : 100%; height:100%; margin: 0;"> | 36 | <body 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 | - <h1>안녕</h1> | 39 | + |
40 | <!-- | 40 | <!-- |
41 | This HTML file is a template. | 41 | This HTML file is a template. |
42 | If you open it directly in the browser, you will see an empty page. | 42 | If you open it directly in the browser, you will see an empty page. | ... | ... |
client/src/components/Loading.js
0 → 100644
1 | +import React from 'react'; | ||
2 | +import { Spinner } from 'reactstrap'; | ||
3 | + | ||
4 | +const Loading = (props) => { | ||
5 | + return ( | ||
6 | + <span style={{ | ||
7 | + 'display':'flex', 'width':'100%', "height":'85%', 'textAlign':'center', 'alignItems':'center' | ||
8 | + }}><span style={{ | ||
9 | + 'margin': '0 auto' | ||
10 | + }}><Spinner color="danger" style={{ width: '2rem', height: '2rem', marginRight:'1rem' }}/><h1 style={{'display':'inline'}}>Loading..</h1></span></span> | ||
11 | + ); | ||
12 | +} | ||
13 | + | ||
14 | +export default Loading; | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
... | @@ -4,8 +4,7 @@ import MealCard from '../components/MealCard'; | ... | @@ -4,8 +4,7 @@ import MealCard from '../components/MealCard'; |
4 | import { CustomInput, Form, FormGroup, Label } from 'reactstrap'; | 4 | import { CustomInput, Form, FormGroup, Label } 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 | - | 7 | +import Loading from '../components/Loading'; |
8 | - | ||
9 | 8 | ||
10 | const MenuPage = (props) => { | 9 | const MenuPage = (props) => { |
11 | const [datas, setDatas] = useState([]); | 10 | const [datas, setDatas] = useState([]); |
... | @@ -14,7 +13,7 @@ const MenuPage = (props) => { | ... | @@ -14,7 +13,7 @@ const MenuPage = (props) => { |
14 | const fetchData = async () => { | 13 | const fetchData = async () => { |
15 | const result = await axios( | 14 | const result = await axios( |
16 | 'http://localhost:5000/api/datas', | 15 | 'http://localhost:5000/api/datas', |
17 | - // localhost로 바꾸기 | 16 | + // localhostë¡œ 바꾸기 |
18 | ); | 17 | ); |
19 | setDatas(result.data); | 18 | setDatas(result.data); |
20 | setIsLoading(true); | 19 | setIsLoading(true); |
... | @@ -27,7 +26,6 @@ const MenuPage = (props) => { | ... | @@ -27,7 +26,6 @@ const MenuPage = (props) => { |
27 | <> | 26 | <> |
28 | <NavBar/> | 27 | <NavBar/> |
29 | <Container> | 28 | <Container> |
30 | - | ||
31 | {/* ???????? ???? */} | 29 | {/* ???????? ???? */} |
32 | {/* <FormGroup> | 30 | {/* <FormGroup> |
33 | <Label for="exampleCheckbox">??</Label> | 31 | <Label for="exampleCheckbox">??</Label> |
... | @@ -37,32 +35,34 @@ const MenuPage = (props) => { | ... | @@ -37,32 +35,34 @@ const MenuPage = (props) => { |
37 | </div> | 35 | </div> |
38 | </FormGroup> */} | 36 | </FormGroup> */} |
39 | </Container> | 37 | </Container> |
40 | - <Container> | 38 | + |
41 | - <Row xs="2" sm="2" md="4"> | ||
42 | 39 | ||
43 | - { | 40 | + {isLoading ? |
44 | - isLoading ? ( | 41 | + (<Container> |
45 | - datas.map((data) => | 42 | + <Row xs="2" sm="2" md="4"> |
46 | - <Col> | 43 | + {datas.map((data) => |
47 | - <MealCard | 44 | + <Col> |
48 | - id = {data.id} | 45 | + <MealCard |
49 | - name = {data.name} | 46 | + id = {data.id} |
50 | - address = {data.address} | 47 | + name = {data.name} |
51 | - latitude = {data.latitude} | 48 | + address = {data.address} |
52 | - longitude = {data.longitude} | 49 | + latitude = {data.latitude} |
53 | - type = {data.type} | 50 | + longitude = {data.longitude} |
54 | - menu = {data.menu} | 51 | + type = {data.type} |
55 | - img = {data.img} | 52 | + menu = {data.menu} |
56 | - img_source = {data.img_source} | 53 | + img = {data.img} |
57 | - /> | 54 | + img_source = {data.img_source} |
58 | - </Col> | 55 | + /> |
59 | - ) | 56 | + </Col> |
60 | - ) : 'Loading' | 57 | + ) |
61 | - } | 58 | + } |
59 | + </Row> | ||
60 | + </Container>) | ||
61 | + : <Loading/> | ||
62 | + } | ||
62 | 63 | ||
63 | 64 | ||
64 | - </Row> | 65 | + |
65 | - </Container> | ||
66 | </> | 66 | </> |
67 | ); | 67 | ); |
68 | } | 68 | } | ... | ... |
-
Please register or login to post a comment