Showing
14 changed files
with
216 additions
and
15 deletions
... | @@ -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 | ) | ... | ... |
straight-up/src/components/ResultContent.js
0 → 100644
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; |
straight-up/src/components/ResultForBb.js
0 → 100644
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 |
straight-up/src/components/ResultForBn.js
0 → 100644
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; |
straight-up/src/components/ResultForErr.js
0 → 100644
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; |
straight-up/src/components/ResultForLn.js
0 → 100644
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 |
straight-up/src/components/ResultForOk.js
0 → 100644
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; |
-
Please register or login to post a comment