[React] 동영상 파일 첨부 기능 추가하기 (feat. FormData)

return(
        <>
            <h1>게시글 등록</h1>
            <Text type="text" name="name" onChange={onChangeName} placeholder={"*이름"}/>
            <Text type="text" name="title" onChange={onChangeTitle} placeholder={"*제목"}/>
            <Contents type="text" name="content" onChange={onChangeContent} placeholder={"*내용"}/>
            <FileWrap>
                <Text type="file" id="attachFile" name="attachFile" onChange={onChangeAttach} accept="video/*" placeholder={"첨부파일"} />
                <div className="text">{attachFilename === '' ? '파일을 선택해주세요' : attachFilename}</div>
                <div className="btn"><span>파일선택</span></div>
            </FileWrap>
            {(attach !== '' && isAttach)|| attachFilename !== '' ? <Close onClick={onReset}/>: <></>}
            <ConsentDescription className={"description"}>파일은 최대 1개, 300MB 까지 가능 합니다.</ConsentDescription><br/>
            <Submit onClick={() => onSubmit()}>
                <SubmitText>등록</SubmitText>
            </Submit>
        </>
    )

const [name, setName] = useState<string>('');                        // 이름
const [title, setTitle] = useState<string>('');                      // 제목
const [content, setContent] = useState<string>('');                  // 내용
const [attach, setAttach] = useState<string>('');                    // 파일 첨부
const [attachFilename, setAttachFilename] = useState<string>('');    // 첨부한 파일 제목

const [isName, setIsName] = useState<boolean>(false);                // 이름 유효성 체크 
const [isKor, setIsKor] = useState<boolean>(false);                  // 한글 유효성 체크
const [isTitle, setIsTitle] = useState<boolean>(false);              // 제목 유효성 체크 & 작성 여부
const [isContent, setIsContent] = useState<boolean>(false);          // 내용 유효성 체크 & 작성 여부
const [isAttach, setIsAttach] = useState<boolean>(false);            // 파일 첨부 여부

const onChangeTitle = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     if(e.target.value.length > 1 && e.target.value.length <= 100){
         setTitle(e.target.value);
         setIsTitle(true);
     } else {
         setIsTitle(false);
     }
 }, [])

const onChangeContent = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     if(e.target.value.length > 1 && e.target.value.length <= 1000){
         setContent(e.target.value);
         setIsContent(true);
     } else {
         setIsContent(false);
     }
 }, [])

const onChangeAttach = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const maxSize = 300 * 1024 * 1024;

     if(e.target.value.length > 1){
         if(e.target.files[0].size > maxSize){
             alert('파일 용량을 초과 하였습니다.')
             document.getElementById('attachFile').value = "";
             setIsAttach(false);
         }else{
             setAttach(e.target.files[0]);
             setIsAttach(true);

             // 파일이름
             const iOS = /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
             if(iOS) {
                 setAttachFilename("1개의 비디오");
             } else {
                 setAttachFilename(e.target.files[0].name);
             }
         }
     } else {
         setIsAttach(false);
     }
 }, [])

 const onSubmit = async () => {
     const formData = new FormData();
     formData.append('name', name);
     formData.append('title', title);
     formData.append('content', content);
     formData.append('file', attach);

     const config = {
         headers: {
             "content-type": "multipart/form-data",
         },
     };

     if(!isName) return alert("이름을 입력해주세요.");
     if(!isKor) return alert("이름을 한글로 입력해 주세요.");
     if(!isTitle) return alert("제목을 입력해주세요.");
     if(!isContent) return alert("내용을 입력해주세요.");

     if(isName && isTitle && isContent){
         try {
             await axios
                 .post(API 주소 입력, formData, config)
                 .then((res) => {
                     if (res.data.result === "success") {
                         location.href = "/submit";
                     }
                 })
         } catch (err) {
             console.error(err)
         }
     }
 }