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 = {
)}
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);