한우준 / Straight-Up

Go to a project
Toggle navigation Toggle navigation pinning
MrMirror21
766a6735 1 parent 2eb1fa7c

route & create pages for result

Inline Side-by-side
Showing 14 changed files with 209 additions and 8 deletions
......@@ -11679,6 +11679,11 @@
"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": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
......
......@@ -2,6 +2,7 @@
"name": "straight-up",
"version": "0.1.0",
"private": true,
"homepage": "http://khuhub.khu.ac.kr/2019102240/Straight-Up",
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
......@@ -19,6 +20,7 @@
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"recoil": "^0.1.2",
"web-vitals": "^0.2.4"
},
"scripts": {
......
import React from 'react';
import {RecoilRoot} from 'recoil';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import Landing from './Landing';
import Main from './Main';
import Result from './Result';
class App extends React.Component {
render() {
return (
<RecoilRoot>
<Router>
<Switch>
<Route exact path="/landing" component={Landing} />
<Route exact path="/main" component={Main} />
<Route exact path="/result" component={Result} />
<Redirect path="*" to="/landing" />
</Switch>
</Router>
</RecoilRoot>
);
}
}
......
import React from 'react'
import './style/Landing.css';
import { Link } from 'react-router-dom'; // for test
import Button from './components/Button';
import Header from './components/Header';
export default function Landing() {
......@@ -11,7 +12,13 @@ export default function Landing() {
<h1 className="mainText">Welcome to Straight Up</h1>
<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>
)
......
import React, { useState } from 'react'
import { useSetRecoilState } from 'recoil';
import Header from './components/Header';
import checkStraight from './AnalysisPose';
import { analysisResultState } from './store/Global';
import './style/Main.css';
require('dotenv').config();
......@@ -12,6 +14,7 @@ let imageFormData = new FormData();
export default function Main() {
const [imgBase64, setImgBase64] = useState("");
const [img, setImage] = useState(null);
const setAnalysisResult = useSetRecoilState(analysisResultState);
const handleChangeFile = (event) => {
let reader = new FileReader();
reader.onloadend = () => {
......@@ -40,10 +43,7 @@ export default function Main() {
}).then(function (response) {
const resdata = response.data[0].keypoints;
console.log(resdata[0]);
const result = checkStraight(resdata, 'front');
console.log(result);
// console.log(resdata[0] === )
setAnalysisResult(checkStraight(resdata, 'front'));
}).catch(function (error) {
if (error.response) {
// 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다.
......@@ -73,7 +73,7 @@ export default function Main() {
</div>
<div className="Image_input">
<input type="file" name="file" onChange={handleChangeFile} />
<button type="button" onClick={analysisImage} >Submit</button>
<button type="button" onClick={analysisImage}>Submit</button>
</div>
</div>
)
......
......@@ -2,11 +2,11 @@ import React from 'react'
import { Link } from 'react-router-dom';
import "../style/Landing.css";
const Button = () => {
const Button = (props) => {
return (
<div className="mainBtnContainer">
<Link to="/main">
<button className="startBtn">Get Started!</button>
<button className="startBtn">{props.btnText}</button>
</Link>
</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",
})