한우준 / Straight-Up

Go to a project
Toggle navigation Toggle navigation pinning
MrMirror21
8dd2e87e 1 parent 90abd982

add loading page & add retry button

Expand all
Inline Side-by-side
Showing 13 changed files with 66 additions and 15 deletions
This diff is collapsed. Click to expand it.
...@@ -6,12 +6,16 @@ import ResultForOk from './ResultForOk'; ...@@ -6,12 +6,16 @@ import ResultForOk from './ResultForOk';
6 import ResultForBn from './ResultForBn'; 6 import ResultForBn from './ResultForBn';
7 import ResultForBb from './ResultForBb'; 7 import ResultForBb from './ResultForBb';
8 import ResultForErrTrust from './ResultForErrTrust'; 8 import ResultForErrTrust from './ResultForErrTrust';
9 +import ResultLoading from './ResultLoading';
9 import { selectedPosState } from '../store/Global'; 10 import { selectedPosState } from '../store/Global';
10 const ResultContent = (props) => { 11 const ResultContent = (props) => {
11 const resultStr = props.result.toString(); 12 const resultStr = props.result.toString();
12 const headLetters = resultStr.substr([0, 4]); 13 const headLetters = resultStr.substr([0, 4]);
13 const direction = useRecoilValue(selectedPosState); 14 const direction = useRecoilValue(selectedPosState);
14 - if (headLetters === 'error') { 15 + if (resultStr === "loading") {
16 + return <ResultLoading />
17 + }
18 + else if (headLetters === 'error') {
15 return <ResultForErrTrust />; 19 return <ResultForErrTrust />;
16 } 20 }
17 else if (resultStr === "okay") { 21 else if (resultStr === "okay") {
......
1 import React from 'react' 1 import React from 'react'
2 -import Button from './Button'; 2 +import RetryBtn from './RetryBtn';
3 import '../style/ResultContent.css'; 3 import '../style/ResultContent.css';
4 4
5 const ResultForBb = () => { 5 const ResultForBb = () => {
...@@ -13,7 +13,7 @@ const ResultForBb = () => { ...@@ -13,7 +13,7 @@ const ResultForBb = () => {
13 <p>주기적으로 일어나 척추 스트레칭이나 요가를 해주시면 도움이 됩니다.</p> 13 <p>주기적으로 일어나 척추 스트레칭이나 요가를 해주시면 도움이 됩니다.</p>
14 <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 /> 14 <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 />
15 <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> 15 <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>
16 - <Button btnText="Try Again" /> 16 + <RetryBtn btnText="Try Again" />
17 </div> 17 </div>
18 </div> 18 </div>
19 ) 19 )
......
1 import React from 'react' 1 import React from 'react'
2 -import Button from './Button'; 2 +import RetryBtn from './RetryBtn';
3 import '../style/ResultContent.css'; 3 import '../style/ResultContent.css';
4 4
5 const ResultForBn = () => { 5 const ResultForBn = () => {
...@@ -13,7 +13,7 @@ const ResultForBn = () => { ...@@ -13,7 +13,7 @@ const ResultForBn = () => {
13 <p>20~30분마다 목을 뒤로 젖혀 주는 신전 운동을 해주시면 도움이 됩니다.</p> 13 <p>20~30분마다 목을 뒤로 젖혀 주는 신전 운동을 해주시면 도움이 됩니다.</p>
14 <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 /> 14 <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 />
15 <a href="https://youtu.be/oYaal-ir9cc" target="blank">https://youtu.be/oYaal-ir9cc</a> 15 <a href="https://youtu.be/oYaal-ir9cc" target="blank">https://youtu.be/oYaal-ir9cc</a>
16 - <Button btnText="Try Again" /> 16 + <RetryBtn btnText="Try Again" />
17 </div> 17 </div>
18 </div> 18 </div>
19 ) 19 )
......
1 import React from 'react' 1 import React from 'react'
2 -import Button from './Button'; 2 +import RetryBtn from './RetryBtn';
3 import '../style/ResultContent.css'; 3 import '../style/ResultContent.css';
4 4
5 const ResultForErr = () => { 5 const ResultForErr = () => {
...@@ -11,7 +11,7 @@ const ResultForErr = () => { ...@@ -11,7 +11,7 @@ const ResultForErr = () => {
11 <h1>분석 결과 : 자세 분석 실패</h1> 11 <h1>분석 결과 : 자세 분석 실패</h1>
12 <p>자세 분석에 실패했습니다.</p> 12 <p>자세 분석에 실패했습니다.</p>
13 <p>다시 시도해주시기 바랍니다.</p> 13 <p>다시 시도해주시기 바랍니다.</p>
14 - <Button btnText="Try Again" /> 14 + <RetryBtn btnText="Try Again" />
15 </div> 15 </div>
16 16
17 </div> 17 </div>
......
1 import React from 'react' 1 import React from 'react'
2 -import Button from './Button'; 2 +import RetryBtn from './RetryBtn';
3 import '../style/ResultContent.css'; 3 import '../style/ResultContent.css';
4 4
5 const ResultForErr = () => { 5 const ResultForErr = () => {
...@@ -11,7 +11,7 @@ const ResultForErr = () => { ...@@ -11,7 +11,7 @@ const ResultForErr = () => {
11 <h1>분석 결과 : 자세 분석 실패</h1> 11 <h1>분석 결과 : 자세 분석 실패</h1>
12 <p>자세 분석에 실패했습니다.</p> 12 <p>자세 분석에 실패했습니다.</p>
13 <p>주의사항에 맞게 사진을 업로드했는지 확인해주세요.</p> 13 <p>주의사항에 맞게 사진을 업로드했는지 확인해주세요.</p>
14 - <Button btnText="Try Again" /> 14 + <RetryBtn btnText="Try Again" />
15 </div> 15 </div>
16 16
17 </div> 17 </div>
......
1 import React from 'react' 1 import React from 'react'
2 -import Button from './Button'; 2 +import RetryBtn from './RetryBtn';
3 import '../style/ResultContent.css'; 3 import '../style/ResultContent.css';
4 4
5 const ResultForLn = (props) => { 5 const ResultForLn = (props) => {
...@@ -16,7 +16,7 @@ const ResultForLn = (props) => { ...@@ -16,7 +16,7 @@ const ResultForLn = (props) => {
16 <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><br /> 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><br />
18 <a href="https://youtu.be/n4T4bRINdp" target="blank">https://youtu.be/n4T4bRINdp</a> 18 <a href="https://youtu.be/n4T4bRINdp" target="blank">https://youtu.be/n4T4bRINdp</a>
19 - <Button btnText="Try Again" /> 19 + <RetryBtn btnText="Try Again" />
20 </div> 20 </div>
21 </div> 21 </div>
22 ) 22 )
......
1 import React from 'react' 1 import React from 'react'
2 -import Button from './Button'; 2 +import RetryBtn from './RetryBtn';
3 import '../style/ResultContent.css'; 3 import '../style/ResultContent.css';
4 4
5 const ResultForOk = () => { 5 const ResultForOk = () => {
...@@ -12,7 +12,7 @@ const ResultForOk = () => { ...@@ -12,7 +12,7 @@ const ResultForOk = () => {
12 <p>아주 건강한 자세를 유지하고 계시네요!</p> 12 <p>아주 건강한 자세를 유지하고 계시네요!</p>
13 <p>지금처럼 건강한 자세를 유지하는데 도움이 될 스트레칭을 추천해드릴게요!</p> 13 <p>지금처럼 건강한 자세를 유지하는데 도움이 될 스트레칭을 추천해드릴게요!</p>
14 <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> 14 <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>
15 - <Button btnText="Try Again" /> 15 + <RetryBtn btnText="Try Again" />
16 </div> 16 </div>
17 </div> 17 </div>
18 ) 18 )
......
1 +import React from 'react'
2 +import '../style/ResultContent.css';
3 +
4 +const ResultLoading = () => {
5 + return (
6 + <div className="resultContainer">
7 + <div className="resultPhoto Loading">
8 + </div>
9 + <div className="resultTextContainer">
10 + <h1>분석중..</h1>
11 + <p></p>
12 + <p>자세를 분석중입니다... 분석에는 5~10초가 소요됩니다.</p>
13 + </div>
14 + </div>
15 + )
16 +}
17 +
18 +export default ResultLoading;
...\ No newline at end of file ...\ No newline at end of file
1 +import React from 'react'
2 +import { useSetRecoilState } from 'recoil';
3 +import { Link } from 'react-router-dom';
4 +import "../style/Landing.css";
5 +import { selectedPosState, analysisResultState } from '../store/Global';
6 +
7 +const RetryBtn = (props) => {
8 + const setPosition = useSetRecoilState(selectedPosState);
9 + const setResult = useSetRecoilState(analysisResultState);
10 + const reset = () => {
11 + setPosition('front');
12 + setResult('loading');
13 + }
14 + return (
15 + <div className="mainBtnContainer">
16 + <Link to="/main">
17 + <button className="startBtn" onClick={reset}>{props.btnText}</button>
18 + </Link>
19 + </div>
20 + )
21 +}
22 +export default RetryBtn;
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,10 +2,10 @@ import { atom } from 'recoil'; ...@@ -2,10 +2,10 @@ import { atom } from 'recoil';
2 2
3 export const selectedPosState = atom({ 3 export const selectedPosState = atom({
4 key: 'selectedPosState', 4 key: 'selectedPosState',
5 - default: "left", 5 + default: "front",
6 }) 6 })
7 7
8 export const analysisResultState = atom({ 8 export const analysisResultState = atom({
9 key: 'analysisResultState', 9 key: 'analysisResultState',
10 - default: "leani", 10 + default: "loading",
11 }) 11 })
......
...@@ -71,6 +71,13 @@ a { ...@@ -71,6 +71,13 @@ a {
71 background-position: center; 71 background-position: center;
72 } 72 }
73 73
74 +.Loading {
75 + background: url(Loading.JPG);
76 + background-repeat: no-repeat;
77 + background-size: contain;
78 + background-position: center;
79 +}
80 +
74 .Ok { 81 .Ok {
75 background: url(okay.jpg); 82 background: url(okay.jpg);
76 background-repeat: no-repeat; 83 background-repeat: no-repeat;
......