post image to pose api

@@ -3,6 +3,11 @@ import Header from './components/Header';
 import './style/Main.css';
 import './style/Main.css';
 require('dotenv').config();
 require('dotenv').config();
 
 
+const axios = require('axios');
+const API_KEY = "1f14e860f7f53f39a4dfe0a2a919a8c7";
+//process.env.api_key;
+let imageFormData = new FormData();
+
 export default function Main() {
 export default function Main() {
     const [imgBase64, setImgBase64] = useState("");
     const [imgBase64, setImgBase64] = useState("");
     const [img, setImage] = useState(null);
     const [img, setImage] = useState(null);
@@ -19,16 +24,50 @@ export default function Main() {
             setImage(event.target.files[0]); // 파일 상태 업데이트
             setImage(event.target.files[0]); // 파일 상태 업데이트
         }
         }
     }
     }
+
+    const analysisImage = () => {
+        imageFormData.append('file', img);
+        axios({
+            method: 'post',
+            url: "https://cors-anywhere.herokuapp.com/https://cv-api.kakaobrain.com/pose",
+            headers: {
+                'Authorization': `KakaoAK ${API_KEY}`,
+                'Content-Type': 'multipart/form-data',
+                'X-Requested-With': '*'
+            },
+            data: imageFormData
+        }).then(function (response) {
+            console.log(JSON.stringify(response.data));
+        }).catch(function (error) {
+            if (error.response) {
+              // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다.
+              console.log(error.response.data);
+              console.log(error.response.status);
+              console.log(error.response.headers);
+            }
+            else if (error.request) {
+              // 요청이 이루어 졌으나 응답을 받지 못했습니다.
+              // `error.request`는 브라우저의 XMLHttpRequest 인스턴스 또는
+              // Node.js의 http.ClientRequest 인스턴스입니다.
+              console.log(error.request);
+            }
+            else {
+              // 오류를 발생시킨 요청을 설정하는 중에 문제가 발생했습니다.
+              console.log('Error', error.message);
+            }
+            console.log(error.config);
+          });
+    }
     return (
     return (
         <div>
         <div>
-            <Header/>
+            <Header />
             <span>This is Main Page</span>
             <span>This is Main Page</span>
-            <div className="Image-Preview-Container" style={{"backgroundColor": "#efefef", "width":"400px", "height": "400px"}}>
-            <img className="Image-Preview" alt="preview"src={imgBase64}></img>
+            <div className="Image-Preview-Container" style={{ "backgroundColor": "#efefef", "width": "400px", "height": "400px" }}>
+                <img className="Image-Preview" alt="preview" src={imgBase64}></img>
             </div>
             </div>
             <div className="Image_input">
             <div className="Image_input">
-                <input type="file" name="file" onChange={handleChangeFile}/>
-                <button type="button" onClick={null}/>
+                <input type="file" name="file" onChange={handleChangeFile} />
+                <button type="button" onClick={analysisImage} />
             </div>
             </div>
         </div>
         </div>
     )
     )