한우준 / 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.
import React, { useState } from 'react'
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { useRecoilState, useSetRecoilState } from 'recoil';
import Header from './components/Header';
import Checkbox from './components/Checkbox';
......@@ -63,27 +64,32 @@ export default function Main() {
// 오류를 발생시킨 요청을 설정하는 중에 문제가 발생했습니다.
console.log('Error', error.message);
}
setAnalysisResult('error');
console.log(error.config);
});
}
return (
<div>
<div className="MainPageContainer">
<Header />
<span>This is Main Page</span>
<div className="Image-Preview-Container" style={{ "backgroundColor": "#efefef", "width": "400px", "height": "400px" }}>
<img className="Image-Preview" alt="preview" src={imgBase64}></img>
<div className="ImagePreviewContainer">
<img className="ImagePreview" alt="" src={imgBase64}></img>
<div className="ImageInput">
<input type="file" name="file" onChange={handleChangeFile} />
</div>
</div>
<div className="Image_input">
<input type="file" name="file" onChange={handleChangeFile} />
<div className="position-selector">
<div className="ImageInputSetting">
<div className="PositionSelector">
<h3>전면 사진</h3>
<Checkbox checked={selectedPosition === "front"} onChange={(isChecked) => {isChecked ? setPosition('front') : setPosition(undefined)}}/>
<Checkbox checked={selectedPosition === "front"} onChange={(isChecked) => { isChecked ? setPosition('front') : setPosition(undefined) }} />
<h3>측면 사진 - 왼쪽</h3>
<Checkbox checked={selectedPosition === "left"} onChange={(isChecked) => {isChecked ? setPosition('left') : setPosition(undefined)}}/>
<Checkbox checked={selectedPosition === "left"} onChange={(isChecked) => { isChecked ? setPosition('left') : setPosition(undefined) }} />
<h3>측면 사진 - 오른쪽</h3>
<Checkbox checked={selectedPosition === "right"} onChange={(isChecked) => {isChecked ? setPosition('right') : setPosition(undefined)}}/>
<Checkbox checked={selectedPosition === "right"} onChange={(isChecked) => { isChecked ? setPosition('right') : setPosition(undefined) }} />
</div>
<button type="button" onClick={analysisImage}>Submit</button>
<Link to="/result">
<button className="startBtn" type="button" onClick={analysisImage}>Submit</button>
</Link>
</div>
</div>
)
......
......@@ -3,12 +3,12 @@ import { useRecoilValue } from 'recoil';
import { analysisResultState } from './store/Global';
import Header from './components/Header';
import ResultContent from './components/ResultContent';
import './style/ResultContent.css';
const Result = () => {
const analysisResult = useRecoilValue(analysisResultState);
return (
<div>
<div className="resultPageContainer">
<Header />
<ResultContent
result={analysisResult}
......
......@@ -3,6 +3,7 @@ import React from 'react'
const Checkbox = (props) => {
return (
<input
className="Checkbox"
type="checkbox"
checked={props.checked}
onChange={(e) => props.onChange(e.target.checked)}
......
......@@ -11,7 +11,6 @@ const Header = () => {
background: '#2f3640'
}}
>
<div className="logo">
<Link to="/landing">
<img
......
import React from 'react'
import { useRecoilValue } from 'recoil';
import ResultForLn from './ResultForLn';
import ResultForErr from './ResultForErr';
import ResultForOk from './ResultForOk';
import ResultForBn from './ResultForBn';
import ResultForBb from './ResultForBb';
import ResultForErrTrust from './ResultForErrTrust';
import { selectedPosState } from '../store/Global';
const ResultContent = (props) => {
const resultStr = props.result.toString();
const headLetters = resultStr.substr([0, 4]);
const direction = useRecoilValue(selectedPosState);
if (headLetters === 'error') {
return <ResultForErrTrust />;
}
......@@ -15,7 +18,6 @@ const ResultContent = (props) => {
return <ResultForOk />;
}
else if (headLetters === "leani") {
const direction = resultStr.substr([8, 11]) ? 'left'('left') : ('right');
return <ResultForLn direction={direction} />
}
......
import React from 'react'
import Button from './Button';
import '../style/ResultContent.css';
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 className="resultContainer">
<div className="resultPhoto Bb">
</div>
<div className="resultTextContainer">
<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> <br />
<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>
</div>
)
}
......
import React from 'react'
import Button from './Button';
import '../style/ResultContent.css';
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 className="resultContainer">
<div className="resultPhoto Bn">
</div>
<div className="resultTextContainer">
<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> <br />
<a href="https://youtu.be/oYaal-ir9cc" target="blank">https://youtu.be/oYaal-ir9cc</a>
<Button btnText="Try Again" />
</div>
</div>
)
}
......
import React from 'react'
import Button from './Button';
import '../style/ResultContent.css';
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 className="resultContainer">
<div className="resultPhoto Err">
</div>
<div className="resultTextContainer">
<h1>분석 결과 : 자세 분석 실패</h1>
<p>자세 분석에 실패했습니다.</p>
<p>다시 시도해주시기 바랍니다.</p>
<Button btnText="Try Again" />
</div>
</div>
)
}
......
import React from 'react'
import Button from './Button';
import '../style/ResultContent.css';
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 className="resultContainer">
<div className="resultPhoto Err">
</div>
<div className="resultTextContainer">
<h1>분석 결과 : 자세 분석 실패</h1>
<p>자세 분석에 실패했습니다.</p>
<p>주의사항에 맞게 사진을 업로드했는지 확인해주세요.</p>
<Button btnText="Try Again" />
</div>
</div>
)
}
......
import React from 'react'
import Button from './Button';
import '../style/ResultContent.css';
const ResultForLn = (props) => {
const conclusion = `어깨와 머리가 ${props.direction}으로 기울어져 있습니다.`;
const direction = props.direction === 'left' ? '왼쪽' : '오른쪽';
const conclusion = `어깨와 머리가 ${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 className="resultContainer">
<div className="resultPhoto Ln">
</div>
<div className="resultTextContainer">
<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><br />
<a href="https://youtu.be/n4T4bRINdp" target="blank">https://youtu.be/n4T4bRINdp</a>
<Button btnText="Try Again" />
</div>
</div>
)
}
......
import React from 'react'
import Button from './Button';
import '../style/ResultContent.css';
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 className="resultContainer">
<div className="resultPhoto Ok">
</div>
<div className="resultTextContainer">
<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>
</div>
)
}
......
......@@ -2,10 +2,10 @@ import { atom } from 'recoil';
export const selectedPosState = atom({
key: 'selectedPosState',
default: "front",
default: "left",
})
export const analysisResultState = atom({
key: 'analysisResultState',
default: "bent-neck",
default: "leani",
})
......
......@@ -16,20 +16,11 @@ body {
margin: 0;
width: 100vw;
height: 100vh;
text-align: center;
align-items: center;
justify-content: center;
}
/*
.Landingbg:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 0;
background: rgba(0,0,0,0.001);
box-shadow: inset 100px 100px 250px #000000, inset -100px -100px 250px #000000;
}
*/
.mainTextContainer{
text-align: center;
position: relative;
......
.Image-Preview{
html, body {
width: 100vw;
height: 100vh;
}
body {
margin: 0;
}
.MainPageContainer {
background: url("Landing.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
overflow: hidden;
margin: 0;
width: 100vw;
height: 100vh;
text-align: center;
align-items: center;
justify-content: center;
}
.ImagePreviewContainer{
display: inline-block;
background: lightgrey;
border-radius: 15px;
}
.ImagePreview{
width: 400px;
height: 400px;
background-color: #efefef;
}
.PositionSelector {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
}
.Checkbox {
padding: 1rem;
}
h3{
color: white;
padding: 1rem;
}
\ No newline at end of file
......
html, body {
width: 100vw;
height: 100vh;
}
body {
margin: 0;
}
a {
color: #4b70fd;
text-decoration : none;
}
.logo {
height: 100px;
}
.resultPageContainer{
text-align: center;
align-items: center;
justify-content: center;
}
.resultContainer{
background: url("Landing.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
overflow: hidden;
margin: 0;
width: 100vw;
height: 100vh;
text-align: center;
align-items: center;
justify-content: center;
}
.resultPhoto {
margin: auto;
margin-top : 1rem;
width: 40vw;
height: 40vh;
}
.Bb {
background: url(bent-back.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.Bn {
background: url(bent-neck.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.Err {
background: url(oops.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.Ln {
background: url(lean.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.Ok {
background: url(okay.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.resultTextContainer {
margin-left: 3rem;
margin-right: 3rem;
height : 350px;
text-align: center;
background-color: lightcyan;
color: black;
}
.mainBtnContainer {
display: flex;
align-items: center;
justify-content: center;
}