diff --git a/src/page/AddMenu/components/AddMenuImgModal/index.tsx b/src/page/AddMenu/components/AddMenuImgModal/index.tsx index 0de66a5d..463313b1 100644 --- a/src/page/AddMenu/components/AddMenuImgModal/index.tsx +++ b/src/page/AddMenu/components/AddMenuImgModal/index.tsx @@ -3,36 +3,40 @@ import { createPortal } from 'react-dom'; import { ReactComponent as CancelIcon } from 'assets/svg/addmenu/mobile-cancle-icon.svg'; import useAddMenuStore from 'store/addMenu'; import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage'; -import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage'; import useImagesUpload from 'utils/hooks/useImagesUpload'; +import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage'; +import { UploadError } from 'utils/hooks/useImagesUpload'; import styles from './AddMenuImgModal.module.scss'; interface AddMenuImgModalProps { isOpen: boolean; closeModal: (event?: React.MouseEvent | React.KeyboardEvent) => void; + imageObject: { + imageFile: string[]; + imgRef: React.RefObject; + saveImgFile: () => Promise; + uploadError: UploadError; + setImageFile: React.Dispatch>; + } } -export default function AddMenuImgModal({ isOpen, closeModal }: AddMenuImgModalProps) { +export default function AddMenuImgModal({ isOpen, closeModal, imageObject }: AddMenuImgModalProps) { const { setImageUrls } = useAddMenuStore(); - const { - imageFile, imgRef, saveImgFile, uploadError, - } = useImagesUpload(); - const triggerFileInput = () => { - imgRef.current?.click(); + imageObject.imgRef.current?.click(); }; const handleImageChange = async () => { - await saveImgFile(); + await imageObject.saveImgFile(); }; const triggerCameraInput = () => { - imgRef.current?.click(); + imageObject.imgRef.current?.click(); }; useEffect(() => { - if (imageFile && !uploadError) { - setImageUrls(imageFile); + if (imageObject.imageFile && !imageObject.uploadError) { + setImageUrls(imageObject.imageFile); closeModal(); } - }, [imageFile, uploadError, setImageUrls, closeModal]); + }, [imageObject.imageFile, imageObject.uploadError, setImageUrls, closeModal]); if (!isOpen) return null; @@ -45,12 +49,13 @@ export default function AddMenuImgModal({ isOpen, closeModal }: AddMenuImgModalP 이미지 추가 메뉴 사진을 추가할 수 있습니다.
- +
- {uploadError && } + {imageObject.uploadError + && }
, diff --git a/src/page/AddMenu/components/MenuImage/index.tsx b/src/page/AddMenu/components/MenuImage/index.tsx index 19f4e36f..238e597e 100644 --- a/src/page/AddMenu/components/MenuImage/index.tsx +++ b/src/page/AddMenu/components/MenuImage/index.tsx @@ -24,17 +24,23 @@ export default function MenuImage({ isComplete }: MenuImageProps) { } = useBooleanState(false); const { - imageFile, imgRef, saveImgFile, uploadError, + imageFile, imgRef, saveImgFile, uploadError, setImageFile, } = useImagesUpload(); + const imageObject = { + imageFile, imgRef, saveImgFile, uploadError, setImageFile, + }; // AddMenuImgModal에 넘길 props const handleAddImage = () => { imgRef.current?.click(); }; const handleDeleteImage = (image: string) => { removeImageUrl(image); + setImageFile(imageFile.filter((img) => img !== image)); // pc 버전 이미지 동기화 }; + const handleImageChange = async () => { await saveImgFile(); }; + useEffect(() => { if (imageFile) { setImageUrls(imageFile); @@ -50,14 +56,14 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
{!isComplete && ( - + )} {imageUrl.map((image, index) => (
@@ -78,6 +84,7 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
) : ( diff --git a/src/page/ManageEvent/AddingEvent/index.tsx b/src/page/ManageEvent/AddingEvent/index.tsx index 16430599..c7b46b61 100644 --- a/src/page/ManageEvent/AddingEvent/index.tsx +++ b/src/page/ManageEvent/AddingEvent/index.tsx @@ -1,5 +1,4 @@ import React, { useState } from 'react'; -import ReactQuill from 'react-quill'; import 'react-quill/dist/quill.snow.css'; import { useAddEvent } from 'query/event'; import { useNavigate, useParams } from 'react-router-dom'; @@ -97,17 +96,25 @@ export const initialError = { export default function AddingEvent() { const [eventInfo, setEventInfo] = useState(initialState); const [error, setError] = useState(initialError); - const [editor, setEditor] = useState(''); const [isAlertModalOpen, setIsAlertModalOpen] = useState(false); const param = useParams(); const { mutate: addEvent, isPending } = useAddEvent(param.id!); const navigate = useNavigate(); - const changeInput = (e: React.ChangeEvent, type: 'title' | 'start' | 'end', change?: Change) => { + const changeInput = ( + e: React.ChangeEvent | React.ChangeEvent, + type: 'title' | 'start' | 'end' | 'content', + change?: Change, + ) => { const value = e.target.value.replaceAll(/[\D]/gi, ''); if (type === 'title' && e.target.value.length <= 25) { setEventInfo({ ...eventInfo, title: e.target.value }); + setError({ ...error, title: false }); + } + if (type === 'content' && e.target.value.length <= 500) { + setEventInfo({ ...eventInfo, content: e.target.value }); + setError({ ...error, content: false }); } if (type === 'start') { if (change === 'year' && e.target.value.length <= 4) { @@ -116,6 +123,7 @@ export default function AddingEvent() { if (change !== 'year' && e.target.value.length <= 2) { setEventInfo({ ...eventInfo, start_date: { ...eventInfo.start_date, [change!]: value } }); } + setError({ ...error, date: false }); } if (type === 'end') { if (change === 'year' && e.target.value.length <= 4) { @@ -124,8 +132,8 @@ export default function AddingEvent() { if (change !== 'year' && e.target.value.length <= 2) { setEventInfo({ ...eventInfo, end_date: { ...eventInfo.end_date, [change!]: value } }); } + setError({ ...error, date: false }); } - setError({ ...error, title: false }); }; const validation = () => { @@ -134,7 +142,7 @@ export default function AddingEvent() { setError((prevError) => ({ ...prevError, title: true })); flag = true; } - if (editor.length === 0) { + if (eventInfo.content.length === 0) { setError((prevError) => ({ ...prevError, content: true })); flag = true; } @@ -185,7 +193,7 @@ export default function AddingEvent() { const requestData = { title: eventInfo.title, - content: editor, + content: eventInfo.content, start_date: startDate, end_date: endDate, thumbnail_images: eventInfo.thumbnail_image, @@ -292,21 +300,25 @@ export default function AddingEvent() {

이벤트/공지 내용

- + + {`${eventInfo.content.length} / 500`} +
- { - setError({ ...error, content: false }); - return setEditor(e); - }} - modules={modules} - placeholder="이벤트/공지 내용을 입력해 주세요." +