deploy 1.0.0

@@ -24,9 +24,7 @@
     "web-vitals": "^0.2.4"
     "web-vitals": "^0.2.4"
   },
   },
   "scripts": {
   "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",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
     "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 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);
         var gap = difference(d_left, d_right);
 
 
-        if (gap >= 20) { //기운 각도가 20도를 넘을 경우
+        if (gap >= 15) { //기운 각도가 15도를 넘을 경우
             if (d_left > d_right) { //오른쪽으로 기울인 경우
             if (d_left > d_right) { //오른쪽으로 기울인 경우
                 return 'leaning right by ' + gap + 'percent.';
                 return 'leaning right by ' + gap + 'percent.';
             } else if (d_left < d_right) { //왼쪽으로 기울인 경우
             } else if (d_left < d_right) { //왼쪽으로 기울인 경우
                 return 'leaning left by ' + gap + 'percent.';
                 return 'leaning left by ' + gap + 'percent.';
             }
             }
-        } else { //기운 각도가 20도 미만인 경우
+        } else { //기운 각도가 15도 미만인 경우
             return 'okay';
             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 React from 'react'
 import './style/Landing.css';
 import './style/Landing.css';
-import { Link } from 'react-router-dom'; // for test
 import Button from './components/Button';
 import Button from './components/Button';
 import Header from './components/Header';
 import Header from './components/Header';
 export default function Landing() {
 export default function Landing() {
@@ -9,15 +8,13 @@ export default function Landing() {
         <div className="Landingbg">
         <div className="Landingbg">
             <Header />
             <Header />
             <div className="mainTextContainer">
             <div className="mainTextContainer">
-
                 <h1 className="mainText">Welcome to Straight Up</h1>
                 <h1 className="mainText">Welcome to Straight Up</h1>
                 <span className="mainText">We support posture correction for you.</span>
                 <span className="mainText">We support posture correction for you.</span>
-                <Button btnText="Get Started!"/>
-                {/* for test */}
+                <Button btnText="Get Started!" />
                 <div className="mainBtnContainer">
                 <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>
             </div>
         </div>
         </div>

@@ -9,8 +9,8 @@ import './style/Main.css';
 require('dotenv').config();
 require('dotenv').config();
 
 
 const axios = require('axios');
 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();
 let imageFormData = new FormData();
 
 
 export default function Main() {
 export default function Main() {
@@ -86,10 +86,16 @@ export default function Main() {
                     <h3>측면 사진 - 오른쪽</h3>
                     <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>
                 </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">
                 <Link to="/result">
                     <button className="startBtn" type="button" onClick={analysisImage}>Submit</button>
                     <button className="startBtn" type="button" onClick={analysisImage}>Submit</button>
                 </Link>
                 </Link>
-
             </div>
             </div>
         </div>
         </div>
     )
     )

@@ -23,15 +23,12 @@ const ResultContent = (props) => {
     }
     }
     else if (headLetters === "leani") {
     else if (headLetters === "leani") {
         return <ResultForLn direction={direction} />
         return <ResultForLn direction={direction} />
-
     }
     }
     else if (resultStr === "bent-neck") {
     else if (resultStr === "bent-neck") {
         return <ResultForBn />;
         return <ResultForBn />;
-
     }
     }
     else if (resultStr === "bent-back") {
     else if (resultStr === "bent-back") {
         return <ResultForBb />;
         return <ResultForBb />;
-
     }
     }
     else {
     else {
         return <ResultForErr />;
         return <ResultForErr />;

@@ -13,7 +13,6 @@ const ResultForErr = () => {
                 <p>다시 시도해주시기 바랍니다.</p>
                 <p>다시 시도해주시기 바랍니다.</p>
                 <RetryBtn btnText="Try Again" />
                 <RetryBtn btnText="Try Again" />
             </div>
             </div>
-
         </div>
         </div>
     )
     )
 }
 }

@@ -13,7 +13,6 @@ const ResultForErr = () => {
                 <p>주의사항에 맞게 사진을 업로드했는지 확인해주세요.</p>
                 <p>주의사항에 맞게 사진을 업로드했는지 확인해주세요.</p>
                 <RetryBtn btnText="Try Again" />
                 <RetryBtn btnText="Try Again" />
             </div>
             </div>
-
         </div>
         </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{
 .ImagePreview{
-    width: 400px;
+    width: 300px;
     height: 400px;
     height: 400px;
     background-color: #efefef;
     background-color: #efefef;
+    border-radius: 15px;
 }
 }
 
 
 .PositionSelector {
 .PositionSelector {
     display: flex;
     display: flex;
     justify-content: center;
     justify-content: center;
     align-items: center;
     align-items: center;
-    padding: 1rem;
 }
 }
 
 
 .Checkbox {
 .Checkbox {
@@ -48,3 +48,7 @@ h3{
     color: white;
     color: white;
     padding: 1rem;
     padding: 1rem;
 }
 }
+
+.Caution{
+    color: pink;
+}