SignUp.js

import '../assets/App.css';
import '../assets/style.css';
import '../assets/signup.css';
import Region from './Region.js';
import {Link, useNavigate} from 'react-router-dom';
import { useRef, useContext, useState, useEffect } from 'react';
import { CrewContext } from '../contexts/CrewContext.js';

const apiUrl = process.env.REACT_APP_API_URL;

function SignUp(){

  const { onCreateUser } = useContext(CrewContext);
  const navigate = useNavigate();

  const [signUpSection, setSignUpSection] = useState(true);
  const [profileSection, setProfileSection] = useState(false);
  const [nextProfileSection, setNextProfileSection] = useState(false); //다음 프로필 설정 페이지로 가기 위한 state


  const [imagePreview, setImagePreview] = useState(null); // 이미지 미리보기를 위한 state
  const [imageFile, setImageFile] = useState(null); // 이미지 파일을 저장할 state

  // 필수 입력 항목 저장
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');
  const [regionID, setRegionID] = useState(0);
  const [sportTypeID, setSportTypeID] = useState(0);

  // 프로필 항목 저장
  const [job, setJob] = useState('');
  const [birthdate, setBirthdate] = useState('');
  const [experience, setExperience] = useState('');
  const [introduction, setIntroduction] = useState('');


  // 유효성 검사
  const [isName, setIsName] = useState(false);
  const [isPassword, setIsPassword] = useState(false);
  const [isEmail, setIsEmail] = useState(false);
  const [isRegionID, setIsRegionID] = useState(false);
  const [isSportTypeID, setIsSportTypeID] = useState(false);

  const sportTypeMapping = {
    'running': 1,
    'climbing': 2,
    'fitness': 3,
  };


  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);  // 미리보기용 이미지
      };
    }
  };

  const handleImageUpload = async (e) => {

    e.preventDefault();

    const formData = new FormData();
    formData.append('image', imageFile);