route & create pages for result

@@ -11679,6 +11679,11 @@
         "picomatch": "^2.2.1"
         "picomatch": "^2.2.1"
       }
       }
     },
     },
+    "recoil": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.1.2.tgz",
+      "integrity": "sha512-hIRrHlkmW4yITlBFprVYjVPhzPKYrJKoaDrrJtAtbkMeXfXaa/XE5OlyR10n+rNfnKWNToCKb3Z4fo86IGjkzg=="
+    },
     "recursive-readdir": {
     "recursive-readdir": {
       "version": "2.2.2",
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",

@@ -2,6 +2,7 @@
   "name": "straight-up",
   "name": "straight-up",
   "version": "0.1.0",
   "version": "0.1.0",
   "private": true,
   "private": true,
+  "homepage": "http://khuhub.khu.ac.kr/2019102240/Straight-Up",
   "dependencies": {
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/react": "^11.1.0",
@@ -19,6 +20,7 @@
     "react-dom": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "react-scripts": "4.0.1",
+    "recoil": "^0.1.2",
     "web-vitals": "^0.2.4"
     "web-vitals": "^0.2.4"
   },
   },
   "scripts": {
   "scripts": {

 import React from 'react';
 import React from 'react';
+import {RecoilRoot} from 'recoil';
 import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
 import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
 import Landing from './Landing';
 import Landing from './Landing';
 import Main from './Main';
 import Main from './Main';
+import Result from './Result';
 
 
 
 
 class App extends React.Component {
 class App extends React.Component {
     render() {
     render() {
         return (
         return (
+            <RecoilRoot>
                 <Router>
                 <Router>
                     <Switch>
                     <Switch>
                         <Route exact path="/landing" component={Landing} />
                         <Route exact path="/landing" component={Landing} />
                         <Route exact path="/main" component={Main} />
                         <Route exact path="/main" component={Main} />
+                        <Route exact path="/result" component={Result} />
                         <Redirect path="*" to="/landing" />
                         <Redirect path="*" to="/landing" />
                     </Switch>
                     </Switch>
                 </Router>
                 </Router>
+
+            </RecoilRoot>
+
         );
         );
     }
     }
 }
 }

 import React from 'react'
 import React from 'react'
 import './style/Landing.css';
 import './style/Landing.css';
+import { Link } from 'react-router-dom'; // for test
 import Button from './components/Button';
 import Button from './components/Button';
 import Header from './components/Header';
 import Header from './components/Header';
 export default function Landing() {
 export default function Landing() {
@@ -11,7 +12,13 @@ export default function Landing() {
 
 
                 <h1 className="mainText">Welcome to Straight Up</h1>
                 <h1 className="mainText">Welcome to Straight Up</h1>
                 <span className="mainText">We support posture correction for you.</span>
                 <span className="mainText">We support posture correction for you.</span>
-                <Button />
+                <Button btnText="Get Started!"/>
+                {/* for test */}
+                <div className="mainBtnContainer">
+                    <Link to="/result">
+                        <button className="startBtn">To Result</button>
+                    </Link>
+                </div>
             </div>
             </div>
         </div>
         </div>
     )
     )

 import React, { useState } from 'react'
 import React, { useState } from 'react'
+import { useSetRecoilState } from 'recoil';
 import Header from './components/Header';
 import Header from './components/Header';
 import checkStraight from './AnalysisPose';
 import checkStraight from './AnalysisPose';
+import { analysisResultState } from './store/Global';
 import './style/Main.css';
 import './style/Main.css';
 require('dotenv').config();
 require('dotenv').config();
 
 
@@ -12,6 +14,7 @@ let imageFormData = new FormData();
 export default function Main() {
 export default function Main() {
     const [imgBase64, setImgBase64] = useState("");
     const [imgBase64, setImgBase64] = useState("");
     const [img, setImage] = useState(null);
     const [img, setImage] = useState(null);
+    const setAnalysisResult = useSetRecoilState(analysisResultState);
     const handleChangeFile = (event) => {
     const handleChangeFile = (event) => {
         let reader = new FileReader();
         let reader = new FileReader();
         reader.onloadend = () => {
         reader.onloadend = () => {
@@ -40,10 +43,7 @@ export default function Main() {
         }).then(function (response) {
         }).then(function (response) {
             const resdata = response.data[0].keypoints;
             const resdata = response.data[0].keypoints;
             console.log(resdata[0]);
             console.log(resdata[0]);
-            const result = checkStraight(resdata, 'front');
-            console.log(result);
-
-            // console.log(resdata[0] === )
+            setAnalysisResult(checkStraight(resdata, 'front'));
         }).catch(function (error) {
         }).catch(function (error) {
             if (error.response) {
             if (error.response) {
                 // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다.
                 // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다.
@@ -73,7 +73,7 @@ export default function Main() {
             </div>
             </div>
             <div className="Image_input">
             <div className="Image_input">
                 <input type="file" name="file" onChange={handleChangeFile} />
                 <input type="file" name="file" onChange={handleChangeFile} />
-                <button type="button" onClick={analysisImage} >Submit</button>
+                <button type="button" onClick={analysisImage}>Submit</button>
             </div>
             </div>
         </div>
         </div>
     )
     )

@@ -2,11 +2,11 @@ import React from 'react'
 import { Link } from 'react-router-dom';
 import { Link } from 'react-router-dom';
 import "../style/Landing.css";
 import "../style/Landing.css";
 
 
-const Button = () => {
+const Button = (props) => {
     return (
     return (
         <div className="mainBtnContainer">
         <div className="mainBtnContainer">
             <Link to="/main">
             <Link to="/main">
-                <button className="startBtn">Get Started!</button>
+                <button className="startBtn">{props.btnText}</button>
             </Link>
             </Link>
         </div>
         </div>
     )
     )

+import React from 'react'
+import ResultForLn from './ResultForLn';
+import ResultForErr from './ResultForErr';
+import ResultForOk from './ResultForOk';
+import ResultForBn from './ResultForBn';
+import ResultForBb from './ResultForBb';
+import ResultForErrTrust from './ResultForErrTrust';
+const ResultContent = (props) => {
+    const resultStr = props.result.toString();
+    const headLetters = resultStr.substr([0, 4]);
+    if (headLetters === 'error') {
+        return <ResultForErrTrust />;
+    }
+    else if (resultStr === "okay") {
+        return <ResultForOk />;
+    }
+    else if (headLetters === "leani") {
+        const direction = resultStr.substr([8, 11]) ? 'left'('left') : ('right');
+        return <ResultForLn direction={direction} />
+
+    }
+    else if (resultStr === "bent-neck") {
+        return <ResultForBn />;
+
+    }
+    else if (resultStr === "bent-back") {
+        return <ResultForBb />;
+
+    }
+    else {
+        return <ResultForErr />;
+    }
+}
+
+export default ResultContent;

+import React from 'react'
+import Button from './Button';
+
+const ResultForBb = () => {
+    return (
+        <div>
+            <img src="https://ibb.co/Xkm3JPK"
+                width='auto'
+                height='500px'
+                alt='resultImg'
+            />
+            <img src="https://ibb.co/Xkm3JPK" alt="test" />
+            <h1>분석 결과 : [굽은등] 증상이 의심됩니다.</h1>
+            <p>척추 자세를 바로잡아 등을 곧게 하고 어깨를 펴주세요.</p>
+            <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>
+            <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" />
+        </div>
+    )
+}
+
+export default ResultForBb;
\ No newline at end of file

+import React from 'react'
+import Button from './Button';
+
+const ResultForBn = () => {
+    return (
+        <div>
+            <img src="https://ibb.co/Xkm3JPK"
+                width='auto'
+                height='500px'
+                alt='resultImg'
+            />
+            <img src="https://ibb.co/Xkm3JPK" alt="test" />
+            <h1>분석 결과 : [거북목] 증상이 의심됩니다.</h1>
+            <p>모니터에서 떨어져 목을 곧게 하고 어깨를 펴주세요.</p>
+            <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>
+            <a href="https://youtu.be/oYaal-ir9cc" target="blank">https://youtu.be/oYaal-ir9cc</a>
+            <Button btnText="Try Again" />
+        </div>
+    )
+}
+
+export default ResultForBn;

+import React from 'react'
+import Button from './Button';
+
+const ResultForErr = () => {
+    return (
+        <div>
+            <img src="https://ibb.co/Xkm3JPK"
+                width='auto'
+                height='500px'
+                alt='resultImg'
+            />
+            <img src="https://ibb.co/Xkm3JPK" alt="test" />
+            <h1>분석 결과 : 자세 분석 실패</h1>
+            <p>자세 분석에 실패했습니다.</p>
+            <p>다시 시도해주시기 바랍니다.</p>
+            <Button btnText="Try Again" />
+        </div>
+    )
+}
+
+export default ResultForErr;

+import React from 'react'
+import Button from './Button';
+
+const ResultForErr = () => {
+    return (
+        <div>
+            <img src="https://ibb.co/Xkm3JPK"
+                width='auto'
+                height='500px'
+                alt='resultImg'
+            />
+            <img src="https://ibb.co/Xkm3JPK" alt="test" />
+            <h1>분석 결과 : 자세 분석 실패</h1>
+            <p>자세 분석에 실패했습니다.</p>
+            <p>주의사항에 맞게 사진을 업로드했는지 확인해주세요.</p>
+            <Button btnText="Try Again" />
+        </div>
+    )
+}
+
+export default ResultForErr;

+import React from 'react'
+import Button from './Button';
+const ResultForLn = (props) => {
+    const conclusion = `어깨와 머리가 ${props.direction}으로 기울어져 있습니다.`;
+    return (
+        <div>
+            <img src="https://ibb.co/Xkm3JPK"
+                width='auto'
+                height='500px'
+                alt='resultImg'
+            />
+            <img src="https://ibb.co/Xkm3JPK" alt="test" />
+            <h1>분석 결과 : 정상</h1>
+            <p>{conclusion}!</p>
+            <p>턱을 괴거나 삐딱하게 화면을 주시하는 경우가 많다면 어깨 비대칭을 의심해볼 수 있습니다.</p>
+            <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>
+            <a href="https://youtu.be/n4T4bRINdp" target="blank">https://youtu.be/n4T4bRINdp</a>
+            <Button btnText="Try Again" />
+        </div>
+    )
+}
+
+export default ResultForLn;
\ No newline at end of file

+import React from 'react'
+import Button from './Button';
+
+const ResultForOk = () => {
+    return (
+        <div>
+            <img src="https://ibb.co/Xkm3JPK"
+                width='auto'
+                height='500px'
+                alt='resultImg'
+            />
+            <img src="https://ibb.co/Xkm3JPK" alt="test" />
+            <h1>분석 결과 : 정상</h1>
+            <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" />
+        </div>
+    )
+}
+
+export default ResultForOk;

+import { atom } from 'recoil';
+
+export const selectedPosState = atom({
+    key: 'selectedPosState',
+    default: "front",
+})
+
+export const analysisResultState = atom({
+    key: 'analysisResultState',
+    default: "bent-neck",
+})