MrMirror21

add user choice for position of photos

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>
......
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