정성훈 / MEALKHU

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

Loading 컴포넌트 구현

Inline Side-by-side
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.
......
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 }
......