From 071fa6620acdc5590c06467427afebf701f27ed5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= <wjdrldud98@gmail.com>
Date: Mon, 12 Aug 2024 13:27:34 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=EC=97=90=20=EB=8C=80=ED=95=9C=20=EC=9E=98=EB=AA=BB?=
 =?UTF-8?q?=EB=90=9C=20=EC=9E=85=EB=A0=A5=20=EC=B2=98=EB=A6=AC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/LectureForm/LectureForm.jsx   | 16 +++++++++++++---
 frontend/src/components/QuizForm/QuizCard.jsx    |  7 ++++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/LectureForm/LectureForm.jsx b/frontend/src/components/LectureForm/LectureForm.jsx
index 6475c33..63792cf 100644
--- a/frontend/src/components/LectureForm/LectureForm.jsx
+++ b/frontend/src/components/LectureForm/LectureForm.jsx
@@ -5,7 +5,7 @@ import EditIcon from '/src/assets/icons/edit.svg?react';
 import BackIcon from '/src/assets/icons/back.svg?react';
 
 export default function LectureForm({ title, topic, to = '..', initialValues = {}, onSubmit, onCreate = false }) {
-  // TODO: 디자인 필요, 필요시 useState로 수정하고 버튼 비활성화 기능 추가
+  // TODO: 디자인 필요, 필요시 useState로 수정하고 버튼 비활성화 기능 추가 및 이미지 파일 입력 처리
   const titleRef = useRef('');
   const descriptionRef = useRef('');
   const planRef = useRef('');
@@ -24,6 +24,11 @@ export default function LectureForm({ title, topic, to = '..', initialValues = {
     if (initialValues.time) timeRef.current.value = initialValues.time;
   }, [initialValues]);
 
+  useEffect(() => {
+    console.log(imageFileRef.current.value);
+    console.log(imageFileRef.current && imageFileRef.current.files[0]);
+  }, [imageFileRef]);
+
   const handleSubmit = async (e) => {
     e.preventDefault();
 
@@ -41,7 +46,12 @@ export default function LectureForm({ title, topic, to = '..', initialValues = {
 
     const imageFile = (imageFileRef.current && imageFileRef.current.files[0]) ?? null;
     if (imageFile) {
-      formData.append('image', imageFile);
+      const fileType = imageFile.type;
+      if (fileType === 'image/jpeg' || fileType === 'image/png') {
+        formData.append('image', imageFile);
+      } else {
+        window.alert(`${fileType}은 지원되는 파일 타입이 아닙니다. jpg / png / jpeg 이미지 파일을 첨부해 주세요`);
+      }
     }
 
     onSubmit(lectureObject, imageFile);
@@ -126,7 +136,7 @@ export default function LectureForm({ title, topic, to = '..', initialValues = {
             <input
               type="file"
               ref={imageFileRef}
-              accept=".png, .jpg, .jpeg"
+              accept="image/*"
               className={styles.input}
             />
           </div>
diff --git a/frontend/src/components/QuizForm/QuizCard.jsx b/frontend/src/components/QuizForm/QuizCard.jsx
index a7dcabe..76549d5 100644
--- a/frontend/src/components/QuizForm/QuizCard.jsx
+++ b/frontend/src/components/QuizForm/QuizCard.jsx
@@ -37,6 +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 이미지 파일을 넣어 주세요.`);
+      return;
+    }
     setImage(file);
     updateQuiz(quiz.id, { ...quiz, question, answer, choices, image: file });
     if (file) {
@@ -78,7 +83,7 @@ export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
       <input
         id={`file-input-${quiz.id}`}
         type="file"
-        accept=".png, .jpg, .jpeg"
+        accept="image/*"
         onChange={handleFileChange}
         className={styles.hiddenInput}
       />