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

@@ -8,7 +8,7 @@
 
 
 20대 남자면 꼭 가야만 하는 군대, 어떤 보직이 알맞을지 미리 추천해 드리겠습니다.
 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 React from 'react'
 import { useSelector } from 'react-redux';
 import { useSelector } from 'react-redux';
 import ResultPage from '../pages/ResultPage';
 import ResultPage from '../pages/ResultPage';
+import Loading from '../components/loading/Loading';
 
 
 export function ResultPageContainer() {
 export function ResultPageContainer() {
-    const data = useSelector((state) => state.result.data);
+    const {loading,data,error} = useSelector((state) => state.result);
     return (
     return (
         <>
         <>
-            <ResultPage
-                result={data}
-            />
+            {loading && <Loading />}
+            {data && <ResultPage result={data}/>}
+            {error && <div>에러 발생!!</div>}
         </>
         </>
     )
     )
 }
 }

 import React from 'react';
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { useSelector } from 'react-redux';
 import SurveyPage from '../pages/SurveyPage';
 import SurveyPage from '../pages/SurveyPage';
-// import { createHashHistory } from 'history'
-// const history = createHashHistory();
+import Loading from '../components/loading/Loading';
 
 
 export function SurveyPageContainer({history}) {
 export function SurveyPageContainer({history}) {
-    const data = useSelector((state) => state.survey.data);
+    const {loading,data,error} = useSelector((state) => state.survey);
     return (
     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개가 채워지면,
     if(answer.length === 10){ // answer state 배열에 10개가 채워지면,
       dispatch(getResultThunk(answer));
       dispatch(getResultThunk(answer));
       history.push('/result');
       history.push('/result');
-      console.log(history);
     }
     }
   },[answer]);
   },[answer]);