이준호

[ADD] 서버 통신에서의 로딩 및 에러처리 코드 추가 & Loading 페이지 추가

......@@ -8,7 +8,7 @@
20대 남자면 꼭 가야만 하는 군대, 어떤 보직이 알맞을지 미리 추천해 드리겠습니다.
(이미지 추가하기)
> (이미지 추가 예정)
## 🔖 프로그램 구조
......
import { Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
const antIcon = <LoadingOutlined style={{ fontSize: 40 }} spin />;
function Loading() {
return (
<Spin indicator={antIcon}
style={{ display: "flex", alignItems: "center", justifyContent:"center", margin: "300px"}}/>
)
}
export default Loading;
// 군인 관련 애니메이션 or 움짤로 개선 예정
\ No newline at end of file
import React from 'react'
import { useSelector } from 'react-redux';
import ResultPage from '../pages/ResultPage';
import Loading from '../components/loading/Loading';
export function ResultPageContainer() {
const data = useSelector((state) => state.result.data);
const {loading,data,error} = useSelector((state) => state.result);
return (
<>
<ResultPage
result={data}
/>
{loading && <Loading />}
{data && <ResultPage result={data}/>}
{error && <div>에러 발생!!</div>}
</>
)
}
......
import React from 'react';
import { useSelector } from 'react-redux';
import SurveyPage from '../pages/SurveyPage';
// import { createHashHistory } from 'history'
// const history = createHashHistory();
import Loading from '../components/loading/Loading';
export function SurveyPageContainer({history}) {
const data = useSelector((state) => state.survey.data);
const {loading,data,error} = useSelector((state) => state.survey);
return (
<>
<SurveyPage
history={history}
question={data}
/>
{loading && <Loading />}
{data && <SurveyPage history={history} question={data}/>}
{error && <div>에러 발생!!</div>}
</>
)
}
......
......@@ -40,7 +40,6 @@ function SurveyPage({ history, question }) {
if(answer.length === 10){ // answer state 배열에 10개가 채워지면,
dispatch(getResultThunk(answer));
history.push('/result');
console.log(history);
}
},[answer]);
......