Merge branch 'front-issue5' into 'main'

edit signup-image upload

See merge request !41

webapp/frontend/src/components/SignUp.js

@@ -51,21 +51,20 @@ function SignUp(){
 
   const handleImageChange = (e) => {
     const file = e.target.files[0];
+    setImageFile(file);             // 실제 파일
+    console.log(imageFile);
     if (file) {
       const reader = new FileReader();
       
       reader.onloadend = () => {
         setImagePreview(reader.result);  // 미리보기용 이미지
-        setImageFile(file);             // 실제 파일
       };
-
-      reader.readAsDataURL(file);  // 파일을 URL로 변환
     }
   };
 
   const handleImageUpload = async (e) => {
 
-    //e.preventDefault();
+    e.preventDefault();
 
     const formData = new FormData();
     formData.append('image', imageFile);
@@ -81,28 +80,22 @@ function SignUp(){
       if (response.ok) {
         // 업로드 성공시, 서버에서 반환된 이미지 URL을 받음
         const imageUrl = data.image_url;
-        return imageUrl;
       } else {
         console.error(data.error);
         alert(data.error);
-        return null;
       }
     } catch (error) {
-      console.error(error);
-      alert('업로드 중 오류가 발생했습니다.');
-      return null;
+      console.log(error);
     }
-  };
 
   const handleSubmit = async (e) => {
 
     e.preventDefault();
+    const imageUrl = await handleImageUpload(imageFile); // 이미지 업로드 함수 호출
+    console.log(imageUrl);
     
     if(isSportTypeID) {
 
-      if (imageFile) {
-        const imageUrl = await handleImageUpload(imageFile); // 이미지 업로드 함수 호출
-  
       const user = {
           
         name: name,
@@ -115,21 +108,37 @@ function SignUp(){
           birthDate: birthdate,
           experience: experience,
           introduction: introduction,
-          sportTypeID: sportTypeMapping[sportTypeID],
+          sportTypeID: sportTypeID,
         },
       };
-  
-      onCreateUser(user);
-      alert("회원가입이 완료되었습니다!");
-      navigate('/login');
+      createUser(user);
     }
     else {
       alert("원하는 운동 종목을 입력해 주세요.");
   }
+}
 
+const createUser = async (newUser) => {
+
+  try {
+    const response = await fetch(`${apiUrl}/api/users`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(newUser),
+    })
+    const data = await response.json();
+    console.log(data)
+    if(data) {
+      navigate('/login');
     }
+  }catch (error) {
+    console.error(error);
   }
 
+};
+
 
   const handleNameChange = (e) => {
     const currentName = e.target.value;