From 9cc3a8a87aa66335f150c3e7ad19191088afca6d Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Mon, 12 Aug 2024 13:56:21 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20input?=
 =?UTF-8?q?=EC=97=90=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EB=A7=8C=20=EC=97=85?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EA=B0=80=EB=8A=A5=ED=95=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/LectureForm/LectureForm.jsx    | 28 ++++++++++++-------
 frontend/src/components/QuizForm/QuizCard.jsx |  8 ++++--
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/LectureForm/LectureForm.jsx b/frontend/src/components/LectureForm/LectureForm.jsx
index 3c7d2f7..ef26d99 100644
--- a/frontend/src/components/LectureForm/LectureForm.jsx
+++ b/frontend/src/components/LectureForm/LectureForm.jsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import styles from './LectureForm.module.css';
 import EditIcon from '/src/assets/icons/edit.svg?react';
@@ -12,7 +12,21 @@ export default function LectureForm({ title, topic, to = '..', initialValues = {
   const startDateRef = useRef('');
   const endDateRef = useRef('');
   const timeRef = useRef('');
-  const imageFileRef = useRef(null);
+  const [imageFile, setImageFile] = useState(null);
+
+  const handleImageChange = (event) => {
+    const file = event.target.files[0];
+
+    if (!file) {
+      return;
+    }
+    if (file.type.startsWith('image/')) {
+      setImageFile(file);
+      return;
+    }
+    alert('이미지 파일만 업로드 해주세요');
+    event.target.value = null;
+  };
 
   useEffect(() => {
     if (initialValues.title) titleRef.current.value = initialValues.title;
@@ -39,14 +53,8 @@ export default function LectureForm({ title, topic, to = '..', initialValues = {
     const formData = new FormData();
     formData.append('lectureCreateRequest', new Blob([JSON.stringify(lectureObject)], { type: 'application/json' }));
 
-    const imageFile = (imageFileRef.current && imageFileRef.current.files[0]) ?? null;
     if (imageFile) {
-      const fileType = imageFile.type;
-      if (fileType === 'image/jpeg' || fileType === 'image/png') {
-        formData.append('image', imageFile);
-      } else {
-        window.alert(`${fileType}은 지원되는 파일 타입이 아닙니다. jpg / png / jpeg 이미지 파일을 첨부해 주세요`);
-      }
+      formData.append('image', imageFile);
     }
 
     onSubmit(lectureObject, imageFile);
@@ -130,9 +138,9 @@ export default function LectureForm({ title, topic, to = '..', initialValues = {
             <label className={styles.label}>수업 이미지</label>
             <input
               type="file"
-              ref={imageFileRef}
               accept="image/*"
               className={styles.input}
+              onChange={handleImageChange}
             />
           </div>
         )}
diff --git a/frontend/src/components/QuizForm/QuizCard.jsx b/frontend/src/components/QuizForm/QuizCard.jsx
index 76549d5..0799ca1 100644
--- a/frontend/src/components/QuizForm/QuizCard.jsx
+++ b/frontend/src/components/QuizForm/QuizCard.jsx
@@ -37,9 +37,11 @@ export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
 
   const handleFileChange = (e) => {
     const file = e.target.files[0] ?? null;
-    const fileType = file && file.type;
-    if (file && fileType !== 'image/jpeg' && fileType !== 'image/png') {
-      window.alert(`${fileType}은 지원되는 이미지 형식이 아닙니다. jpg / png / jpeg 이미지 파일을 넣어 주세요.`);
+    if (!file || !file.type.startsWith('image/')) {
+      alert('이미지 파일만 업로드 해주세요');
+      e.target.value = null;
+      setImage(null);
+      setImagePreview(null);
       return;
     }
     setImage(file);