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