MrMirror21

deploy 1.0.0

This diff is collapsed. Click to expand it.
......@@ -24,9 +24,7 @@
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "npm-run-all --parallel start:**",
"start:client": "react-scripts start",
"start:server": "node ./server/app.js",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
......
const express = require('express');
const bodyParser = require('body-parser')
const app = express();
const api = require('./routes/index');
app.use(bodyParser.json());
app.use('/api', api);
const port = 3001;
app.listen(port, () => console.log(`Listening on port ${port}`));
\ No newline at end of file
const express = require('express');
const router = express.Router();
router.get('/', (req, res) => res.json({data:'this is index.'}));
module.exports = router
\ No newline at end of file
......@@ -52,13 +52,13 @@ const checkStraight = (resData, position) => { //resData: API로 받은 JSON 객
var d_right = distance(x_position[ear + 1], y_position[ear + 1], x_position[shoulder + 1], y_position[shoulder + 1]);
var gap = difference(d_left, d_right);
if (gap >= 20) { //기운 각도가 20도를 넘을 경우
if (gap >= 15) { //기운 각도가 15도를 넘을 경우
if (d_left > d_right) { //오른쪽으로 기울인 경우
return 'leaning right by ' + gap + 'percent.';
} else if (d_left < d_right) { //왼쪽으로 기울인 경우
return 'leaning left by ' + gap + 'percent.';
}
} else { //기운 각도가 20도 미만인 경우
} else { //기운 각도가 15도 미만인 경우
return 'okay';
}
......
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
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() {
......@@ -9,15 +8,13 @@ export default function Landing() {
<div className="Landingbg">
<Header />
<div className="mainTextContainer">
<h1 className="mainText">Welcome to Straight Up</h1>
<span className="mainText">We support posture correction for you.</span>
<Button btnText="Get Started!"/>
{/* for test */}
<Button btnText="Get Started!" />
<div className="mainBtnContainer">
<Link to="/result">
<button className="startBtn">To Result</button>
</Link>
<a target="blank" href="http://khuhub.khu.ac.kr/2019102240/Straight-Up">
<button className="startBtn">Contact Us</button>
</a>
</div>
</div>
</div>
......
......@@ -9,8 +9,8 @@ import './style/Main.css';
require('dotenv').config();
const axios = require('axios');
const API_KEY = "1f14e860f7f53f39a4dfe0a2a919a8c7";
//process.env.api_key;
const API_KEY = process.env.REACT_APP_APIKEY;
console.log(API_KEY);
let imageFormData = new FormData();
export default function Main() {
......@@ -86,10 +86,16 @@ export default function Main() {
<h3>측면 사진 - 오른쪽</h3>
<Checkbox checked={selectedPosition === "right"} onChange={(isChecked) => { isChecked ? setPosition('right') : setPosition(undefined) }} />
</div>
<div className="Caution">
<p>-- 이미지 업로드 유의사항 --</p>
<p>1. 업로드 되는 이미지는 JPEG, PNG 포맷만 지원합니다.</p>
<p>2. 업로드할 있는 이미지의 최대 용량은 2MB입니다.</p>
<p>3. 이미지의 권장 비율은 가로:세로 기준 16:9 ~ 9:16 입니다.</p>
<p>4. 이미지의 가로와 세로 길이는 320px~2048px 범위 내여야 합니다.</p>
</div>
<Link to="/result">
<button className="startBtn" type="button" onClick={analysisImage}>Submit</button>
</Link>
</div>
</div>
)
......
......@@ -23,15 +23,12 @@ const ResultContent = (props) => {
}
else if (headLetters === "leani") {
return <ResultForLn direction={direction} />
}
else if (resultStr === "bent-neck") {
return <ResultForBn />;
}
else if (resultStr === "bent-back") {
return <ResultForBb />;
}
else {
return <ResultForErr />;
......
......@@ -13,7 +13,6 @@ const ResultForErr = () => {
<p>다시 시도해주시기 바랍니다.</p>
<RetryBtn btnText="Try Again" />
</div>
</div>
)
}
......
......@@ -13,7 +13,6 @@ const ResultForErr = () => {
<p>주의사항에 맞게 사진을 업로드했는지 확인해주세요.</p>
<RetryBtn btnText="Try Again" />
</div>
</div>
)
}
......
......@@ -14,7 +14,7 @@ const RetryBtn = (props) => {
return (
<div className="mainBtnContainer">
<Link to="/main">
<button className="startBtn" onClick={reset}>{props.btnText}</button>
<button className="startBtn" onClick={reset}>{props.btnText}</button>
</Link>
</div>
)
......
const proxy = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
proxy('/api', {
target: 'http://localhost:3001/'
})
);
};
\ No newline at end of file
......@@ -28,16 +28,16 @@ body {
}
.ImagePreview{
width: 400px;
width: 300px;
height: 400px;
background-color: #efefef;
border-radius: 15px;
}
.PositionSelector {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
}
.Checkbox {
......@@ -47,4 +47,8 @@ body {
h3{
color: white;
padding: 1rem;
}
\ No newline at end of file
}
.Caution{
color: pink;
}
......