MrMirror21

route & create pages for result

...@@ -11679,6 +11679,11 @@ ...@@ -11679,6 +11679,11 @@
11679 "picomatch": "^2.2.1" 11679 "picomatch": "^2.2.1"
11680 } 11680 }
11681 }, 11681 },
11682 + "recoil": {
11683 + "version": "0.1.2",
11684 + "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.1.2.tgz",
11685 + "integrity": "sha512-hIRrHlkmW4yITlBFprVYjVPhzPKYrJKoaDrrJtAtbkMeXfXaa/XE5OlyR10n+rNfnKWNToCKb3Z4fo86IGjkzg=="
11686 + },
11682 "recursive-readdir": { 11687 "recursive-readdir": {
11683 "version": "2.2.2", 11688 "version": "2.2.2",
11684 "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz", 11689 "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
2 "name": "straight-up", 2 "name": "straight-up",
3 "version": "0.1.0", 3 "version": "0.1.0",
4 "private": true, 4 "private": true,
5 + "homepage": "http://khuhub.khu.ac.kr/2019102240/Straight-Up",
5 "dependencies": { 6 "dependencies": {
6 "@testing-library/jest-dom": "^5.11.4", 7 "@testing-library/jest-dom": "^5.11.4",
7 "@testing-library/react": "^11.1.0", 8 "@testing-library/react": "^11.1.0",
...@@ -19,6 +20,7 @@ ...@@ -19,6 +20,7 @@
19 "react-dom": "^17.0.1", 20 "react-dom": "^17.0.1",
20 "react-router-dom": "^5.2.0", 21 "react-router-dom": "^5.2.0",
21 "react-scripts": "4.0.1", 22 "react-scripts": "4.0.1",
23 + "recoil": "^0.1.2",
22 "web-vitals": "^0.2.4" 24 "web-vitals": "^0.2.4"
23 }, 25 },
24 "scripts": { 26 "scripts": {
......
1 import React from 'react'; 1 import React from 'react';
2 +import {RecoilRoot} from 'recoil';
2 import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'; 3 import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
3 import Landing from './Landing'; 4 import Landing from './Landing';
4 import Main from './Main'; 5 import Main from './Main';
6 +import Result from './Result';
5 7
6 8
7 class App extends React.Component { 9 class App extends React.Component {
8 render() { 10 render() {
9 return ( 11 return (
10 - <Router> 12 + <RecoilRoot>
11 - <Switch> 13 + <Router>
12 - <Route exact path="/landing" component={Landing} /> 14 + <Switch>
13 - <Route exact path="/main" component={Main} /> 15 + <Route exact path="/landing" component={Landing} />
14 - <Redirect path="*" to="/landing" /> 16 + <Route exact path="/main" component={Main} />
15 - </Switch> 17 + <Route exact path="/result" component={Result} />
16 - </Router> 18 + <Redirect path="*" to="/landing" />
19 + </Switch>
20 + </Router>
21 +
22 + </RecoilRoot>
23 +
17 ); 24 );
18 } 25 }
19 } 26 }
......
1 import React from 'react' 1 import React from 'react'
2 import './style/Landing.css'; 2 import './style/Landing.css';
3 +import { Link } from 'react-router-dom'; // for test
3 import Button from './components/Button'; 4 import Button from './components/Button';
4 import Header from './components/Header'; 5 import Header from './components/Header';
5 export default function Landing() { 6 export default function Landing() {
...@@ -11,7 +12,13 @@ export default function Landing() { ...@@ -11,7 +12,13 @@ export default function Landing() {
11 12
12 <h1 className="mainText">Welcome to Straight Up</h1> 13 <h1 className="mainText">Welcome to Straight Up</h1>
13 <span className="mainText">We support posture correction for you.</span> 14 <span className="mainText">We support posture correction for you.</span>
14 - <Button /> 15 + <Button btnText="Get Started!"/>
16 + {/* for test */}
17 + <div className="mainBtnContainer">
18 + <Link to="/result">
19 + <button className="startBtn">To Result</button>
20 + </Link>
21 + </div>
15 </div> 22 </div>
16 </div> 23 </div>
17 ) 24 )
......
1 import React, { useState } from 'react' 1 import React, { useState } from 'react'
2 +import { useSetRecoilState } from 'recoil';
2 import Header from './components/Header'; 3 import Header from './components/Header';
3 import checkStraight from './AnalysisPose'; 4 import checkStraight from './AnalysisPose';
5 +import { analysisResultState } from './store/Global';
4 import './style/Main.css'; 6 import './style/Main.css';
5 require('dotenv').config(); 7 require('dotenv').config();
6 8
...@@ -12,6 +14,7 @@ let imageFormData = new FormData(); ...@@ -12,6 +14,7 @@ let imageFormData = new FormData();
12 export default function Main() { 14 export default function Main() {
13 const [imgBase64, setImgBase64] = useState(""); 15 const [imgBase64, setImgBase64] = useState("");
14 const [img, setImage] = useState(null); 16 const [img, setImage] = useState(null);
17 + const setAnalysisResult = useSetRecoilState(analysisResultState);
15 const handleChangeFile = (event) => { 18 const handleChangeFile = (event) => {
16 let reader = new FileReader(); 19 let reader = new FileReader();
17 reader.onloadend = () => { 20 reader.onloadend = () => {
...@@ -40,10 +43,7 @@ export default function Main() { ...@@ -40,10 +43,7 @@ export default function Main() {
40 }).then(function (response) { 43 }).then(function (response) {
41 const resdata = response.data[0].keypoints; 44 const resdata = response.data[0].keypoints;
42 console.log(resdata[0]); 45 console.log(resdata[0]);
43 - const result = checkStraight(resdata, 'front'); 46 + setAnalysisResult(checkStraight(resdata, 'front'));
44 - console.log(result);
45 -
46 - // console.log(resdata[0] === )
47 }).catch(function (error) { 47 }).catch(function (error) {
48 if (error.response) { 48 if (error.response) {
49 // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다. 49 // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다.
...@@ -73,7 +73,7 @@ export default function Main() { ...@@ -73,7 +73,7 @@ export default function Main() {
73 </div> 73 </div>
74 <div className="Image_input"> 74 <div className="Image_input">
75 <input type="file" name="file" onChange={handleChangeFile} /> 75 <input type="file" name="file" onChange={handleChangeFile} />
76 - <button type="button" onClick={analysisImage} >Submit</button> 76 + <button type="button" onClick={analysisImage}>Submit</button>
77 </div> 77 </div>
78 </div> 78 </div>
79 ) 79 )
......
...@@ -2,11 +2,11 @@ import React from 'react' ...@@ -2,11 +2,11 @@ import React from 'react'
2 import { Link } from 'react-router-dom'; 2 import { Link } from 'react-router-dom';
3 import "../style/Landing.css"; 3 import "../style/Landing.css";
4 4
5 -const Button = () => { 5 +const Button = (props) => {
6 return ( 6 return (
7 <div className="mainBtnContainer"> 7 <div className="mainBtnContainer">
8 <Link to="/main"> 8 <Link to="/main">
9 - <button className="startBtn">Get Started!</button> 9 + <button className="startBtn">{props.btnText}</button>
10 </Link> 10 </Link>
11 </div> 11 </div>
12 ) 12 )
......
1 +import React from 'react'
2 +import ResultForLn from './ResultForLn';
3 +import ResultForErr from './ResultForErr';
4 +import ResultForOk from './ResultForOk';
5 +import ResultForBn from './ResultForBn';
6 +import ResultForBb from './ResultForBb';
7 +import ResultForErrTrust from './ResultForErrTrust';
8 +const ResultContent = (props) => {
9 + const resultStr = props.result.toString();
10 + const headLetters = resultStr.substr([0, 4]);
11 + if (headLetters === 'error') {
12 + return <ResultForErrTrust />;
13 + }
14 + else if (resultStr === "okay") {
15 + return <ResultForOk />;
16 + }
17 + else if (headLetters === "leani") {
18 + const direction = resultStr.substr([8, 11]) ? 'left'('left') : ('right');
19 + return <ResultForLn direction={direction} />
20 +
21 + }
22 + else if (resultStr === "bent-neck") {
23 + return <ResultForBn />;
24 +
25 + }
26 + else if (resultStr === "bent-back") {
27 + return <ResultForBb />;
28 +
29 + }
30 + else {
31 + return <ResultForErr />;
32 + }
33 +}
34 +
35 +export default ResultContent;
1 +import React from 'react'
2 +import Button from './Button';
3 +
4 +const ResultForBb = () => {
5 + return (
6 + <div>
7 + <img src="https://ibb.co/Xkm3JPK"
8 + width='auto'
9 + height='500px'
10 + alt='resultImg'
11 + />
12 + <img src="https://ibb.co/Xkm3JPK" alt="test" />
13 + <h1>분석 결과 : [굽은등] 증상이 의심됩니다.</h1>
14 + <p>척추 자세를 바로잡아 등을 곧게 하고 어깨를 펴주세요.</p>
15 + <p>주기적으로 일어나 척추 스트레칭이나 요가를 해주시면 도움이 됩니다.</p>
16 + <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>
17 + <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>
18 + <Button btnText="Try Again" />
19 + </div>
20 + )
21 +}
22 +
23 +export default ResultForBb;
...\ No newline at end of file ...\ No newline at end of file
1 +import React from 'react'
2 +import Button from './Button';
3 +
4 +const ResultForBn = () => {
5 + return (
6 + <div>
7 + <img src="https://ibb.co/Xkm3JPK"
8 + width='auto'
9 + height='500px'
10 + alt='resultImg'
11 + />
12 + <img src="https://ibb.co/Xkm3JPK" alt="test" />
13 + <h1>분석 결과 : [거북목] 증상이 의심됩니다.</h1>
14 + <p>모니터에서 떨어져 목을 곧게 하고 어깨를 펴주세요.</p>
15 + <p>20~30분마다 목을 뒤로 젖혀 주는 신전 운동을 해주시면 도움이 됩니다.</p>
16 + <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>
17 + <a href="https://youtu.be/oYaal-ir9cc" target="blank">https://youtu.be/oYaal-ir9cc</a>
18 + <Button btnText="Try Again" />
19 + </div>
20 + )
21 +}
22 +
23 +export default ResultForBn;
1 +import React from 'react'
2 +import Button from './Button';
3 +
4 +const ResultForErr = () => {
5 + return (
6 + <div>
7 + <img src="https://ibb.co/Xkm3JPK"
8 + width='auto'
9 + height='500px'
10 + alt='resultImg'
11 + />
12 + <img src="https://ibb.co/Xkm3JPK" alt="test" />
13 + <h1>분석 결과 : 자세 분석 실패</h1>
14 + <p>자세 분석에 실패했습니다.</p>
15 + <p>다시 시도해주시기 바랍니다.</p>
16 + <Button btnText="Try Again" />
17 + </div>
18 + )
19 +}
20 +
21 +export default ResultForErr;
1 +import React from 'react'
2 +import Button from './Button';
3 +
4 +const ResultForErr = () => {
5 + return (
6 + <div>
7 + <img src="https://ibb.co/Xkm3JPK"
8 + width='auto'
9 + height='500px'
10 + alt='resultImg'
11 + />
12 + <img src="https://ibb.co/Xkm3JPK" alt="test" />
13 + <h1>분석 결과 : 자세 분석 실패</h1>
14 + <p>자세 분석에 실패했습니다.</p>
15 + <p>주의사항에 맞게 사진을 업로드했는지 확인해주세요.</p>
16 + <Button btnText="Try Again" />
17 + </div>
18 + )
19 +}
20 +
21 +export default ResultForErr;
1 +import React from 'react'
2 +import Button from './Button';
3 +const ResultForLn = (props) => {
4 + const conclusion = `어깨와 머리가 ${props.direction}으로 기울어져 있습니다.`;
5 + return (
6 + <div>
7 + <img src="https://ibb.co/Xkm3JPK"
8 + width='auto'
9 + height='500px'
10 + alt='resultImg'
11 + />
12 + <img src="https://ibb.co/Xkm3JPK" alt="test" />
13 + <h1>분석 결과 : 정상</h1>
14 + <p>{conclusion}!</p>
15 + <p>턱을 괴거나 삐딱하게 화면을 주시하는 경우가 많다면 어깨 비대칭을 의심해볼 있습니다.</p>
16 + <p>주기적으로 어깨와 스트레칭을 해주시면 도움이 됩니다.</p>
17 + <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>
18 + <a href="https://youtu.be/n4T4bRINdp" target="blank">https://youtu.be/n4T4bRINdp</a>
19 + <Button btnText="Try Again" />
20 + </div>
21 + )
22 +}
23 +
24 +export default ResultForLn;
...\ No newline at end of file ...\ No newline at end of file
1 +import React from 'react'
2 +import Button from './Button';
3 +
4 +const ResultForOk = () => {
5 + return (
6 + <div>
7 + <img src="https://ibb.co/Xkm3JPK"
8 + width='auto'
9 + height='500px'
10 + alt='resultImg'
11 + />
12 + <img src="https://ibb.co/Xkm3JPK" alt="test" />
13 + <h1>분석 결과 : 정상</h1>
14 + <p>아주 건강한 자세를 유지하고 계시네요!</p>
15 + <p>지금처럼 건강한 자세를 유지하는데 도움이 스트레칭을 추천해드릴게요!</p>
16 + <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>
17 + <Button btnText="Try Again" />
18 + </div>
19 + )
20 +}
21 +
22 +export default ResultForOk;
1 +import { atom } from 'recoil';
2 +
3 +export const selectedPosState = atom({
4 + key: 'selectedPosState',
5 + default: "front",
6 +})
7 +
8 +export const analysisResultState = atom({
9 + key: 'analysisResultState',
10 + default: "bent-neck",
11 +})