Showing
2 changed files
with
22 additions
and
2 deletions
1 | import React, { useState } from 'react' | 1 | import React, { useState } from 'react' |
2 | -import { useSetRecoilState } from 'recoil'; | 2 | +import { useRecoilState, useSetRecoilState } from 'recoil'; |
3 | import Header from './components/Header'; | 3 | import Header from './components/Header'; |
4 | +import Checkbox from './components/Checkbox'; | ||
4 | import checkStraight from './AnalysisPose'; | 5 | import checkStraight from './AnalysisPose'; |
5 | -import { analysisResultState } from './store/Global'; | 6 | +import { selectedPosState, analysisResultState } from './store/Global'; |
6 | import './style/Main.css'; | 7 | import './style/Main.css'; |
7 | require('dotenv').config(); | 8 | require('dotenv').config(); |
8 | 9 | ||
... | @@ -15,6 +16,7 @@ export default function Main() { | ... | @@ -15,6 +16,7 @@ export default function Main() { |
15 | const [imgBase64, setImgBase64] = useState(""); | 16 | const [imgBase64, setImgBase64] = useState(""); |
16 | const [img, setImage] = useState(null); | 17 | const [img, setImage] = useState(null); |
17 | const setAnalysisResult = useSetRecoilState(analysisResultState); | 18 | const setAnalysisResult = useSetRecoilState(analysisResultState); |
19 | + const [selectedPosition, setPosition] = useRecoilState(selectedPosState); | ||
18 | const handleChangeFile = (event) => { | 20 | const handleChangeFile = (event) => { |
19 | let reader = new FileReader(); | 21 | let reader = new FileReader(); |
20 | reader.onloadend = () => { | 22 | reader.onloadend = () => { |
... | @@ -73,6 +75,12 @@ export default function Main() { | ... | @@ -73,6 +75,12 @@ export default function Main() { |
73 | </div> | 75 | </div> |
74 | <div className="Image_input"> | 76 | <div className="Image_input"> |
75 | <input type="file" name="file" onChange={handleChangeFile} /> | 77 | <input type="file" name="file" onChange={handleChangeFile} /> |
78 | + <div className="position-selector"> | ||
79 | + <h3>전면 사진</h3> | ||
80 | + <Checkbox checked={selectedPosition === "front"} onChange={(isChecked) => {isChecked ? setPosition('front') : setPosition('side')}}/> | ||
81 | + <h3>측면 사진</h3> | ||
82 | + <Checkbox checked={selectedPosition === "side"} onChange={(isChecked) => {isChecked ? setPosition('side') : setPosition('front')}}/> | ||
83 | + </div> | ||
76 | <button type="button" onClick={analysisImage}>Submit</button> | 84 | <button type="button" onClick={analysisImage}>Submit</button> |
77 | </div> | 85 | </div> |
78 | </div> | 86 | </div> | ... | ... |
straight-up/src/components/Checkbox.js
0 → 100644
1 | +import React from 'react' | ||
2 | + | ||
3 | +const Checkbox = (props) => { | ||
4 | + return ( | ||
5 | + <input | ||
6 | + type="checkbox" | ||
7 | + checked={props.checked} | ||
8 | + onChange={(e) => props.onChange(e.target.checked)} | ||
9 | + /> | ||
10 | + ) | ||
11 | +} | ||
12 | +export default Checkbox; | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or login to post a comment