add user choice for position of photos

 import React, { useState } from 'react'
-import { useSetRecoilState } from 'recoil';
+import { useRecoilState, useSetRecoilState } from 'recoil';
 import Header from './components/Header';
+import Checkbox from './components/Checkbox';
 import checkStraight from './AnalysisPose';
-import { analysisResultState } from './store/Global';
+import { selectedPosState, analysisResultState } from './store/Global';
 import './style/Main.css';
 require('dotenv').config();
 
@@ -15,6 +16,7 @@ export default function Main() {
     const [imgBase64, setImgBase64] = useState("");
     const [img, setImage] = useState(null);
     const setAnalysisResult = useSetRecoilState(analysisResultState);
+    const [selectedPosition, setPosition] = useRecoilState(selectedPosState);
     const handleChangeFile = (event) => {
         let reader = new FileReader();
         reader.onloadend = () => {
@@ -73,6 +75,12 @@ export default function Main() {
             </div>
             <div className="Image_input">
                 <input type="file" name="file" onChange={handleChangeFile} />
+                <div className="position-selector">
+                    <h3>전면 사진</h3>
+                    <Checkbox checked={selectedPosition === "front"} onChange={(isChecked) => {isChecked ? setPosition('front') : setPosition('side')}}/>
+                    <h3>측면 사진</h3>
+                    <Checkbox checked={selectedPosition === "side"} onChange={(isChecked) => {isChecked ? setPosition('side') : setPosition('front')}}/>
+                </div>
                 <button type="button" onClick={analysisImage}>Submit</button>
             </div>
         </div>

+import React from 'react'
+
+const Checkbox = (props) => {
+    return (
+        <input
+            type="checkbox"
+            checked={props.checked}
+            onChange={(e) => props.onChange(e.target.checked)}
+        />
+    )
+}
+export default Checkbox;
\ No newline at end of file