정성훈 / 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 27 additions and 13 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,12 +35,12 @@ const MenuPage = (props) => { ...@@ -37,12 +35,12 @@ const MenuPage = (props) => {
37 </div> 35 </div>
38 </FormGroup> */} 36 </FormGroup> */}
39 </Container> 37 </Container>
40 - <Container>
41 - <Row xs="2" sm="2" md="4">
42 38
43 - { 39 +
44 - isLoading ? ( 40 + {isLoading ?
45 - datas.map((data) => 41 + (<Container>
42 + <Row xs="2" sm="2" md="4">
43 + {datas.map((data) =>
46 <Col> 44 <Col>
47 <MealCard 45 <MealCard
48 id = {data.id} 46 id = {data.id}
...@@ -57,12 +55,14 @@ const MenuPage = (props) => { ...@@ -57,12 +55,14 @@ const MenuPage = (props) => {
57 /> 55 />
58 </Col> 56 </Col>
59 ) 57 )
60 - ) : 'Loading' 58 + }
59 + </Row>
60 + </Container>)
61 + : <Loading/>
61 } 62 }
62 63
63 64
64 - </Row> 65 +
65 - </Container>
66 </> 66 </>
67 ); 67 );
68 } 68 }
......