한우준 / Straight-Up

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

add css & fix errPage

Expand all
Inline Side-by-side
Showing 21 changed files with 243 additions and 107 deletions
This diff is collapsed. Click to expand it.
1 -import React, { useState } from 'react' 1 +import React, { useState } from 'react';
2 +import { Link } from 'react-router-dom';
2 import { useRecoilState, useSetRecoilState } from 'recoil'; 3 import { useRecoilState, useSetRecoilState } from 'recoil';
3 import Header from './components/Header'; 4 import Header from './components/Header';
4 import Checkbox from './components/Checkbox'; 5 import Checkbox from './components/Checkbox';
...@@ -63,27 +64,32 @@ export default function Main() { ...@@ -63,27 +64,32 @@ export default function Main() {
63 // 오류를 발생시킨 요청을 설정하는 중에 문제가 발생했습니다. 64 // 오류를 발생시킨 요청을 설정하는 중에 문제가 발생했습니다.
64 console.log('Error', error.message); 65 console.log('Error', error.message);
65 } 66 }
67 + setAnalysisResult('error');
66 console.log(error.config); 68 console.log(error.config);
67 }); 69 });
68 } 70 }
69 return ( 71 return (
70 - <div> 72 + <div className="MainPageContainer">
71 <Header /> 73 <Header />
72 - <span>This is Main Page</span> 74 + <div className="ImagePreviewContainer">
73 - <div className="Image-Preview-Container" style={{ "backgroundColor": "#efefef", "width": "400px", "height": "400px" }}> 75 + <img className="ImagePreview" alt="" src={imgBase64}></img>
74 - <img className="Image-Preview" alt="preview" src={imgBase64}></img> 76 + <div className="ImageInput">
77 + <input type="file" name="file" onChange={handleChangeFile} />
78 + </div>
75 </div> 79 </div>
76 - <div className="Image_input"> 80 + <div className="ImageInputSetting">
77 - <input type="file" name="file" onChange={handleChangeFile} /> 81 + <div className="PositionSelector">
78 - <div className="position-selector">
79 <h3>전면 사진</h3> 82 <h3>전면 사진</h3>
80 - <Checkbox checked={selectedPosition === "front"} onChange={(isChecked) => {isChecked ? setPosition('front') : setPosition(undefined)}}/> 83 + <Checkbox checked={selectedPosition === "front"} onChange={(isChecked) => { isChecked ? setPosition('front') : setPosition(undefined) }} />
81 <h3>측면 사진 - 왼쪽</h3> 84 <h3>측면 사진 - 왼쪽</h3>
82 - <Checkbox checked={selectedPosition === "left"} onChange={(isChecked) => {isChecked ? setPosition('left') : setPosition(undefined)}}/> 85 + <Checkbox checked={selectedPosition === "left"} onChange={(isChecked) => { isChecked ? setPosition('left') : setPosition(undefined) }} />
83 <h3>측면 사진 - 오른쪽</h3> 86 <h3>측면 사진 - 오른쪽</h3>
84 - <Checkbox checked={selectedPosition === "right"} onChange={(isChecked) => {isChecked ? setPosition('right') : setPosition(undefined)}}/> 87 + <Checkbox checked={selectedPosition === "right"} onChange={(isChecked) => { isChecked ? setPosition('right') : setPosition(undefined) }} />
85 </div> 88 </div>
86 - <button type="button" onClick={analysisImage}>Submit</button> 89 + <Link to="/result">
90 + <button className="startBtn" type="button" onClick={analysisImage}>Submit</button>
91 + </Link>
92 +
87 </div> 93 </div>
88 </div> 94 </div>
89 ) 95 )
......
...@@ -3,12 +3,12 @@ import { useRecoilValue } from 'recoil'; ...@@ -3,12 +3,12 @@ import { useRecoilValue } from 'recoil';
3 import { analysisResultState } from './store/Global'; 3 import { analysisResultState } from './store/Global';
4 import Header from './components/Header'; 4 import Header from './components/Header';
5 import ResultContent from './components/ResultContent'; 5 import ResultContent from './components/ResultContent';
6 +import './style/ResultContent.css';
6 7
7 const Result = () => { 8 const Result = () => {
8 const analysisResult = useRecoilValue(analysisResultState); 9 const analysisResult = useRecoilValue(analysisResultState);
9 -
10 return ( 10 return (
11 - <div> 11 + <div className="resultPageContainer">
12 <Header /> 12 <Header />
13 <ResultContent 13 <ResultContent
14 result={analysisResult} 14 result={analysisResult}
......
...@@ -3,6 +3,7 @@ import React from 'react' ...@@ -3,6 +3,7 @@ import React from 'react'
3 const Checkbox = (props) => { 3 const Checkbox = (props) => {
4 return ( 4 return (
5 <input 5 <input
6 + className="Checkbox"
6 type="checkbox" 7 type="checkbox"
7 checked={props.checked} 8 checked={props.checked}
8 onChange={(e) => props.onChange(e.target.checked)} 9 onChange={(e) => props.onChange(e.target.checked)}
......
...@@ -11,7 +11,6 @@ const Header = () => { ...@@ -11,7 +11,6 @@ const Header = () => {
11 background: '#2f3640' 11 background: '#2f3640'
12 }} 12 }}
13 > 13 >
14 -
15 <div className="logo"> 14 <div className="logo">
16 <Link to="/landing"> 15 <Link to="/landing">
17 <img 16 <img
......
1 import React from 'react' 1 import React from 'react'
2 +import { useRecoilValue } from 'recoil';
2 import ResultForLn from './ResultForLn'; 3 import ResultForLn from './ResultForLn';
3 import ResultForErr from './ResultForErr'; 4 import ResultForErr from './ResultForErr';
4 import ResultForOk from './ResultForOk'; 5 import ResultForOk from './ResultForOk';
5 import ResultForBn from './ResultForBn'; 6 import ResultForBn from './ResultForBn';
6 import ResultForBb from './ResultForBb'; 7 import ResultForBb from './ResultForBb';
7 import ResultForErrTrust from './ResultForErrTrust'; 8 import ResultForErrTrust from './ResultForErrTrust';
9 +import { selectedPosState } from '../store/Global';
8 const ResultContent = (props) => { 10 const ResultContent = (props) => {
9 const resultStr = props.result.toString(); 11 const resultStr = props.result.toString();
10 const headLetters = resultStr.substr([0, 4]); 12 const headLetters = resultStr.substr([0, 4]);
13 + const direction = useRecoilValue(selectedPosState);
11 if (headLetters === 'error') { 14 if (headLetters === 'error') {
12 return <ResultForErrTrust />; 15 return <ResultForErrTrust />;
13 } 16 }
...@@ -15,7 +18,6 @@ const ResultContent = (props) => { ...@@ -15,7 +18,6 @@ const ResultContent = (props) => {
15 return <ResultForOk />; 18 return <ResultForOk />;
16 } 19 }
17 else if (headLetters === "leani") { 20 else if (headLetters === "leani") {
18 - const direction = resultStr.substr([8, 11]) ? 'left'('left') : ('right');
19 return <ResultForLn direction={direction} /> 21 return <ResultForLn direction={direction} />
20 22
21 } 23 }
......
1 import React from 'react' 1 import React from 'react'
2 import Button from './Button'; 2 import Button from './Button';
3 +import '../style/ResultContent.css';
3 4
4 const ResultForBb = () => { 5 const ResultForBb = () => {
5 return ( 6 return (
6 - <div> 7 + <div className="resultContainer">
7 - <img src="https://ibb.co/Xkm3JPK" 8 + <div className="resultPhoto Bb">
8 - width='auto' 9 + </div>
9 - height='500px' 10 + <div className="resultTextContainer">
10 - alt='resultImg' 11 + <h1>분석 결과 : [굽은등] 증상이 의심됩니다.</h1>
11 - /> 12 + <p>척추 자세를 바로잡아 등을 곧게 하고 어깨를 펴주세요.</p>
12 - <img src="https://ibb.co/Xkm3JPK" alt="test" /> 13 + <p>주기적으로 일어나 척추 스트레칭이나 요가를 해주시면 도움이 됩니다.</p>
13 - <h1>분석 결과 : [굽은등] 증상이 의심됩니다.</h1> 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 - <p>척추 자세를 바로잡아 등을 곧게 하고 어깨를 펴주세요.</p> 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 - <p>주기적으로 일어나 척추 스트레칭이나 요가를 해주시면 도움이 됩니다.</p> 16 + <Button btnText="Try Again" />
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 + </div>
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> 18 </div>
20 ) 19 )
21 } 20 }
......
1 import React from 'react' 1 import React from 'react'
2 import Button from './Button'; 2 import Button from './Button';
3 +import '../style/ResultContent.css';
3 4
4 const ResultForBn = () => { 5 const ResultForBn = () => {
5 return ( 6 return (
6 - <div> 7 + <div className="resultContainer">
7 - <img src="https://ibb.co/Xkm3JPK" 8 + <div className="resultPhoto Bn">
8 - width='auto' 9 + </div>
9 - height='500px' 10 + <div className="resultTextContainer">
10 - alt='resultImg' 11 + <h1>분석 결과 : [거북목] 증상이 의심됩니다.</h1>
11 - /> 12 + <p>모니터에서 떨어져 목을 곧게 하고 어깨를 펴주세요.</p>
12 - <img src="https://ibb.co/Xkm3JPK" alt="test" /> 13 + <p>20~30분마다 목을 뒤로 젖혀 주는 신전 운동을 해주시면 도움이 됩니다.</p>
13 - <h1>분석 결과 : [거북목] 증상이 의심됩니다.</h1> 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 - <p>모니터에서 떨어져 목을 곧게 하고 어깨를 펴주세요.</p> 15 + <a href="https://youtu.be/oYaal-ir9cc" target="blank">https://youtu.be/oYaal-ir9cc</a>
15 - <p>20~30분마다 목을 뒤로 젖혀 주는 신전 운동을 해주시면 도움이 됩니다.</p> 16 + <Button btnText="Try Again" />
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 + </div>
17 - <a href="https://youtu.be/oYaal-ir9cc" target="blank">https://youtu.be/oYaal-ir9cc</a>
18 - <Button btnText="Try Again" />
19 </div> 18 </div>
20 ) 19 )
21 } 20 }
......
1 import React from 'react' 1 import React from 'react'
2 import Button from './Button'; 2 import Button from './Button';
3 +import '../style/ResultContent.css';
3 4
4 const ResultForErr = () => { 5 const ResultForErr = () => {
5 return ( 6 return (
6 - <div> 7 + <div className="resultContainer">
7 - <img src="https://ibb.co/Xkm3JPK" 8 + <div className="resultPhoto Err">
8 - width='auto' 9 + </div>
9 - height='500px' 10 + <div className="resultTextContainer">
10 - alt='resultImg' 11 + <h1>분석 결과 : 자세 분석 실패</h1>
11 - /> 12 + <p>자세 분석에 실패했습니다.</p>
12 - <img src="https://ibb.co/Xkm3JPK" alt="test" /> 13 + <p>다시 시도해주시기 바랍니다.</p>
13 - <h1>분석 결과 : 자세 분석 실패</h1> 14 + <Button btnText="Try Again" />
14 - <p>자세 분석에 실패했습니다.</p> 15 + </div>
15 - <p>다시 시도해주시기 바랍니다.</p> 16 +
16 - <Button btnText="Try Again" />
17 </div> 17 </div>
18 ) 18 )
19 } 19 }
......
1 import React from 'react' 1 import React from 'react'
2 import Button from './Button'; 2 import Button from './Button';
3 +import '../style/ResultContent.css';
3 4
4 const ResultForErr = () => { 5 const ResultForErr = () => {
5 return ( 6 return (
6 - <div> 7 + <div className="resultContainer">
7 - <img src="https://ibb.co/Xkm3JPK" 8 + <div className="resultPhoto Err">
8 - width='auto' 9 + </div>
9 - height='500px' 10 + <div className="resultTextContainer">
10 - alt='resultImg' 11 + <h1>분석 결과 : 자세 분석 실패</h1>
11 - /> 12 + <p>자세 분석에 실패했습니다.</p>
12 - <img src="https://ibb.co/Xkm3JPK" alt="test" /> 13 + <p>주의사항에 맞게 사진을 업로드했는지 확인해주세요.</p>
13 - <h1>분석 결과 : 자세 분석 실패</h1> 14 + <Button btnText="Try Again" />
14 - <p>자세 분석에 실패했습니다.</p> 15 + </div>
15 - <p>주의사항에 맞게 사진을 업로드했는지 확인해주세요.</p> 16 +
16 - <Button btnText="Try Again" />
17 </div> 17 </div>
18 ) 18 )
19 } 19 }
......
1 import React from 'react' 1 import React from 'react'
2 import Button from './Button'; 2 import Button from './Button';
3 +import '../style/ResultContent.css';
4 +
3 const ResultForLn = (props) => { 5 const ResultForLn = (props) => {
4 - const conclusion = `어깨와 머리가 ${props.direction}으로 기울어져 있습니다.`; 6 + const direction = props.direction === 'left' ? '왼쪽' : '오른쪽';
7 + const conclusion = `어깨와 머리가 ${direction}으로 기울어져 있습니다.`;
5 return ( 8 return (
6 - <div> 9 + <div className="resultContainer">
7 - <img src="https://ibb.co/Xkm3JPK" 10 + <div className="resultPhoto Ln">
8 - width='auto' 11 + </div>
9 - height='500px' 12 + <div className="resultTextContainer">
10 - alt='resultImg' 13 + <h1>분석 결과 : 어깨 비대칭</h1>
11 - /> 14 + <p>{conclusion}</p>
12 - <img src="https://ibb.co/Xkm3JPK" alt="test" /> 15 + <p>턱을 괴거나 삐딱하게 화면을 주시하는 경우가 많다면 어깨 비대칭을 의심해볼 수 있습니다.</p>
13 - <h1>분석 결과 : 정상</h1> 16 + <p>주기적으로 어깨와 목 스트레칭을 해주시면 도움이 됩니다.</p>
14 - <p>{conclusion}!</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 />
15 - <p>턱을 괴거나 삐딱하게 화면을 주시하는 경우가 많다면 어깨 비대칭을 의심해볼 수 있습니다.</p> 18 + <a href="https://youtu.be/n4T4bRINdp" target="blank">https://youtu.be/n4T4bRINdp</a>
16 - <p>주기적으로 어깨와 목 스트레칭을 해주시면 도움이 됩니다.</p> 19 + <Button btnText="Try Again" />
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> 20 + </div>
18 - <a href="https://youtu.be/n4T4bRINdp" target="blank">https://youtu.be/n4T4bRINdp</a>
19 - <Button btnText="Try Again" />
20 </div> 21 </div>
21 ) 22 )
22 } 23 }
......
1 import React from 'react' 1 import React from 'react'
2 import Button from './Button'; 2 import Button from './Button';
3 +import '../style/ResultContent.css';
3 4
4 const ResultForOk = () => { 5 const ResultForOk = () => {
5 return ( 6 return (
6 - <div> 7 + <div className="resultContainer">
7 - <img src="https://ibb.co/Xkm3JPK" 8 + <div className="resultPhoto Ok">
8 - width='auto' 9 + </div>
9 - height='500px' 10 + <div className="resultTextContainer">
10 - alt='resultImg' 11 + <h1>분석 결과 : 정상</h1>
11 - /> 12 + <p>아주 건강한 자세를 유지하고 계시네요!</p>
12 - <img src="https://ibb.co/Xkm3JPK" alt="test" /> 13 + <p>지금처럼 건강한 자세를 유지하는데 도움이 될 스트레칭을 추천해드릴게요!</p>
13 - <h1>분석 결과 : 정상</h1> 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 - <p>아주 건강한 자세를 유지하고 계시네요!</p> 15 + <Button btnText="Try Again" />
15 - <p>지금처럼 건강한 자세를 유지하는데 도움이 될 스트레칭을 추천해드릴게요!</p> 16 + </div>
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> 17 </div>
19 ) 18 )
20 } 19 }
......
...@@ -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: "front", 5 + default: "left",
6 }) 6 })
7 7
8 export const analysisResultState = atom({ 8 export const analysisResultState = atom({
9 key: 'analysisResultState', 9 key: 'analysisResultState',
10 - default: "bent-neck", 10 + default: "leani",
11 }) 11 })
......
...@@ -16,20 +16,11 @@ body { ...@@ -16,20 +16,11 @@ body {
16 margin: 0; 16 margin: 0;
17 width: 100vw; 17 width: 100vw;
18 height: 100vh; 18 height: 100vh;
19 + text-align: center;
20 + align-items: center;
21 + justify-content: center;
19 } 22 }
20 -/* 23 +
21 -.Landingbg:after {
22 - content: '';
23 - position: absolute;
24 - top: 0;
25 - left: 0;
26 - width: 100vw;
27 - height: 100vh;
28 - z-index: 0;
29 - background: rgba(0,0,0,0.001);
30 - box-shadow: inset 100px 100px 250px #000000, inset -100px -100px 250px #000000;
31 -}
32 -*/
33 .mainTextContainer{ 24 .mainTextContainer{
34 text-align: center; 25 text-align: center;
35 position: relative; 26 position: relative;
......
1 -.Image-Preview{ 1 +html, body {
2 + width: 100vw;
3 + height: 100vh;
4 +}
5 +
6 +body {
7 + margin: 0;
8 +}
9 +
10 +.MainPageContainer {
11 + background: url("Landing.jpg");
12 + background-repeat: no-repeat;
13 + background-size: cover;
14 + background-position: center;
15 + overflow: hidden;
16 + margin: 0;
17 + width: 100vw;
18 + height: 100vh;
19 + text-align: center;
20 + align-items: center;
21 + justify-content: center;
22 +}
23 +
24 +.ImagePreviewContainer{
25 + display: inline-block;
26 + background: lightgrey;
27 + border-radius: 15px;
28 +}
29 +
30 +.ImagePreview{
2 width: 400px; 31 width: 400px;
3 height: 400px; 32 height: 400px;
33 + background-color: #efefef;
34 +}
35 +
36 +.PositionSelector {
37 + display: flex;
38 + justify-content: center;
39 + align-items: center;
40 + padding: 1rem;
41 +}
42 +
43 +.Checkbox {
44 + padding: 1rem;
45 +}
46 +
47 +h3{
48 + color: white;
49 + padding: 1rem;
4 } 50 }
...\ No newline at end of file ...\ No newline at end of file
......
1 +html, body {
2 + width: 100vw;
3 + height: 100vh;
4 +}
5 +
6 +body {
7 + margin: 0;
8 +}
9 +
10 +a {
11 + color: #4b70fd;
12 + text-decoration : none;
13 +}
14 +
15 +.logo {
16 + height: 100px;
17 +}
18 +
19 +.resultPageContainer{
20 + text-align: center;
21 + align-items: center;
22 + justify-content: center;
23 +}
24 +
25 +.resultContainer{
26 + background: url("Landing.jpg");
27 + background-repeat: no-repeat;
28 + background-size: cover;
29 + background-position: center;
30 + overflow: hidden;
31 + margin: 0;
32 + width: 100vw;
33 + height: 100vh;
34 + text-align: center;
35 + align-items: center;
36 + justify-content: center;
37 +}
38 +
39 +.resultPhoto {
40 + margin: auto;
41 + margin-top : 1rem;
42 + width: 40vw;
43 + height: 40vh;
44 +}
45 +
46 +.Bb {
47 + background: url(bent-back.jpg);
48 + background-repeat: no-repeat;
49 + background-size: contain;
50 + background-position: center;
51 +}
52 +
53 +.Bn {
54 + background: url(bent-neck.jpg);
55 + background-repeat: no-repeat;
56 + background-size: contain;
57 + background-position: center;
58 +}
59 +
60 +.Err {
61 + background: url(oops.jpg);
62 + background-repeat: no-repeat;
63 + background-size: contain;
64 + background-position: center;
65 +}
66 +
67 +.Ln {
68 + background: url(lean.jpg);
69 + background-repeat: no-repeat;
70 + background-size: contain;
71 + background-position: center;
72 +}
73 +
74 +.Ok {
75 + background: url(okay.jpg);
76 + background-repeat: no-repeat;
77 + background-size: contain;
78 + background-position: center;
79 +}
80 +
81 +.resultTextContainer {
82 + margin-left: 3rem;
83 + margin-right: 3rem;
84 + height : 350px;
85 + text-align: center;
86 + background-color: lightcyan;
87 + color: black;
88 +}
89 +.mainBtnContainer {
90 + display: flex;
91 + align-items: center;
92 + justify-content: center;
93 +}