add loading page & add retry button

@@ -6,12 +6,16 @@ import ResultForOk from './ResultForOk';
 import ResultForBn from './ResultForBn';
 import ResultForBb from './ResultForBb';
 import ResultForErrTrust from './ResultForErrTrust';
+import ResultLoading from './ResultLoading';
 import { selectedPosState } from '../store/Global';
 const ResultContent = (props) => {
     const resultStr = props.result.toString();
     const headLetters = resultStr.substr([0, 4]);
     const direction = useRecoilValue(selectedPosState);
-    if (headLetters === 'error') {
+    if (resultStr === "loading") {
+        return <ResultLoading />
+    }
+    else if (headLetters === 'error') {
         return <ResultForErrTrust />;
     }
     else if (resultStr === "okay") {

 import React from 'react'
-import Button from './Button';
+import RetryBtn from './RetryBtn';
 import '../style/ResultContent.css';
 
 const ResultForBb = () => {
@@ -13,7 +13,7 @@ const ResultForBb = () => {
                 <p>주기적으로 일어나 척추 스트레칭이나 요가를 해주시면 도움이 됩니다.</p>
                 <a href="https://terms.naver.com/entry.nhn?docId=2119027&cid=51035&categoryId=51035" target="blank">https://terms.naver.com/entry.nhn?docId=2119027&cid=51035&categoryId=51035</a> <br />
                 <a href="https://www.youtube.com/watch?v=fFIL0rlRH78&feature=youtu.be" target="blank">https://www.youtube.com/watch?v=fFIL0rlRH78&feature=youtu.be</a>
-                <Button btnText="Try Again" />
+                <RetryBtn btnText="Try Again" />
             </div>
         </div>
     )

 import React from 'react'
-import Button from './Button';
+import RetryBtn from './RetryBtn';
 import '../style/ResultContent.css';
 
 const ResultForBn = () => {
@@ -13,7 +13,7 @@ const ResultForBn = () => {
                 <p>20~30분마다 목을 뒤로 젖혀 주는 신전 운동을 해주시면 도움이 됩니다.</p>
                 <a href="https://terms.naver.com/entry.nhn?docId=927290&cid=51007&categoryId=51007" target="blank">https://terms.naver.com/entry.nhn?docId=927290&cid=51007&categoryId=51007</a> <br />
                 <a href="https://youtu.be/oYaal-ir9cc" target="blank">https://youtu.be/oYaal-ir9cc</a>
-                <Button btnText="Try Again" />
+                <RetryBtn btnText="Try Again" />
             </div>
         </div>
     )

 import React from 'react'
-import Button from './Button';
+import RetryBtn from './RetryBtn';
 import '../style/ResultContent.css';
 
 const ResultForErr = () => {
@@ -11,7 +11,7 @@ const ResultForErr = () => {
                 <h1>분석 결과 : 자세 분석 실패</h1>
                 <p>자세 분석에 실패했습니다.</p>
                 <p>다시 시도해주시기 바랍니다.</p>
-                <Button btnText="Try Again" />
+                <RetryBtn btnText="Try Again" />
             </div>
 
         </div>

 import React from 'react'
-import Button from './Button';
+import RetryBtn from './RetryBtn';
 import '../style/ResultContent.css';
 
 const ResultForErr = () => {
@@ -11,7 +11,7 @@ const ResultForErr = () => {
                 <h1>분석 결과 : 자세 분석 실패</h1>
                 <p>자세 분석에 실패했습니다.</p>
                 <p>주의사항에 맞게 사진을 업로드했는지 확인해주세요.</p>
-                <Button btnText="Try Again" />
+                <RetryBtn btnText="Try Again" />
             </div>
 
         </div>

 import React from 'react'
-import Button from './Button';
+import RetryBtn from './RetryBtn';
 import '../style/ResultContent.css';
 
 const ResultForLn = (props) => {
@@ -16,7 +16,7 @@ const ResultForLn = (props) => {
                 <p>주기적으로 어깨와 목 스트레칭을 해주시면 도움이 됩니다.</p>
                 <a href="https://terms.naver.com/entry.nhn?docId=3567879&cid=58904&categoryId=589109" target="blank">https://terms.naver.com/entry.nhn?docId=3567879&cid=58904&categoryId=58910</a><br />
                 <a href="https://youtu.be/n4T4bRINdp" target="blank">https://youtu.be/n4T4bRINdp</a>
-                <Button btnText="Try Again" />
+                <RetryBtn btnText="Try Again" />
             </div>
         </div>
     )

 import React from 'react'
-import Button from './Button';
+import RetryBtn from './RetryBtn';
 import '../style/ResultContent.css';
 
 const ResultForOk = () => {
@@ -12,7 +12,7 @@ const ResultForOk = () => {
                 <p>아주 건강한 자세를 유지하고 계시네요!</p>
                 <p>지금처럼 건강한 자세를 유지하는데 도움이 될 스트레칭을 추천해드릴게요!</p>
                 <a href="http://bakc.net/health/main/index.php?m_cd=109" target="blank">http://bakc.net/health/main/index.php?m_cd=109</a>
-                <Button btnText="Try Again" />
+                <RetryBtn btnText="Try Again" />
             </div>
         </div>
     )

+import React from 'react'
+import '../style/ResultContent.css';
+
+const ResultLoading = () => {
+    return (
+        <div className="resultContainer">
+            <div className="resultPhoto Loading">
+            </div>
+            <div className="resultTextContainer">
+                <h1>분석중..</h1>
+                <p></p>
+                <p>자세를 분석중입니다... 분석에는 5~10초가 소요됩니다.</p>
+            </div>
+        </div>
+    )
+}
+
+export default ResultLoading;
\ No newline at end of file

+import React from 'react'
+import { useSetRecoilState } from 'recoil';
+import { Link } from 'react-router-dom';
+import "../style/Landing.css";
+import { selectedPosState, analysisResultState } from '../store/Global';
+
+const RetryBtn = (props) => {
+    const setPosition = useSetRecoilState(selectedPosState);
+    const setResult = useSetRecoilState(analysisResultState);
+    const reset = () => {
+        setPosition('front');
+        setResult('loading');
+    }
+    return (
+        <div className="mainBtnContainer">
+            <Link to="/main">
+    <button className="startBtn" onClick={reset}>{props.btnText}</button>
+            </Link>
+        </div>
+    )
+}
+export default RetryBtn;
\ No newline at end of file

@@ -2,10 +2,10 @@ import { atom } from 'recoil';
 
 export const selectedPosState = atom({
     key: 'selectedPosState',
-    default: "left",
+    default: "front",
 })
 
 export const analysisResultState = atom({
     key: 'analysisResultState',
-    default: "leani",
+    default: "loading",
 })

@@ -71,6 +71,13 @@ a {
     background-position: center;
 }
 
+.Loading {
+    background: url(Loading.JPG);
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+
 .Ok {
     background: url(okay.jpg);
     background-repeat: no-repeat;