정성훈 / 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%;
<body 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>
<h1>안녕</h1>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
......
import React from 'react';
import { Spinner } from 'reactstrap';
const Loading = (props) => {
return (
<span style={{
'display':'flex', 'width':'100%', "height":'85%', 'textAlign':'center', 'alignItems':'center'
}}><span style={{
'margin': '0 auto'
}}><Spinner color="danger" style={{ width: '2rem', height: '2rem', marginRight:'1rem' }}/><h1 style={{'display':'inline'}}>Loading..</h1></span></span>
);
}
export default Loading;
\ No newline at end of file
......@@ -4,8 +4,7 @@ import MealCard from '../components/MealCard';
import { CustomInput, Form, FormGroup, Label } from 'reactstrap';
import { Container, Row, Col } from "reactstrap";
import axios from 'axios';
import Loading from '../components/Loading';
const MenuPage = (props) => {
const [datas, setDatas] = useState([]);
......@@ -14,7 +13,7 @@ const MenuPage = (props) => {
const fetchData = async () => {
const result = await axios(
'http://localhost:5000/api/datas',
// localhost로 바꾸기
// localhost로 바꾸기
);
setDatas(result.data);
setIsLoading(true);
......@@ -27,7 +26,6 @@ const MenuPage = (props) => {
<>
<NavBar/>
<Container>
{/* ???????? ???? */}
{/* <FormGroup>
<Label for="exampleCheckbox">??</Label>
......@@ -37,12 +35,12 @@ const MenuPage = (props) => {
</div>
</FormGroup> */}
</Container>
<Container>
<Row xs="2" sm="2" md="4">
{
isLoading ? (
datas.map((data) =>
{isLoading ?
(<Container>
<Row xs="2" sm="2" md="4">
{datas.map((data) =>
<Col>
<MealCard
id = {data.id}
......@@ -57,12 +55,14 @@ const MenuPage = (props) => {
/>
</Col>
)
) : 'Loading'
}
</Row>
</Container>)
: <Loading/>
}
</Row>
</Container>
</>
);
}
......