From b6a3265800ae3960e4412e7d06676dda1891ad39 Mon Sep 17 00:00:00 2001 From: chaeseungyun Date: Fri, 10 May 2024 13:47:56 +0900 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20pc=20=EB=B0=8F=20=EB=AA=A8=EB=B0=94?= =?UTF-8?q?=EC=9D=BC=20=ED=99=98=EA=B2=BD=20=EB=A9=94=EB=89=B4=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EC=A0=95=EC=83=81=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/AddMenuImgModal/index.tsx | 33 +++++++++++-------- .../AddMenu/components/MenuImage/index.tsx | 25 +++++++++----- src/store/addMenu.ts | 4 +-- 3 files changed, 37 insertions(+), 25 deletions(-) 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/store/addMenu.ts b/src/store/addMenu.ts index 98cae8c3..f166b53e 100644 --- a/src/store/addMenu.ts +++ b/src/store/addMenu.ts @@ -46,8 +46,8 @@ const useAddMenuStore = create((set) => ({ setImageUrl: (newImageUrl) => set((state) => ({ imageUrl: [...state.imageUrl, newImageUrl], })), - setImageUrls: (newImageUrl) => set((state) => ({ - imageUrl: [...state.imageUrl, ...newImageUrl], + setImageUrls: (newImageUrl) => set(() => ({ + imageUrl: newImageUrl, })), removeImageUrl: (imageUrlToRemove) => set((state) => ({ imageUrl: state.imageUrl.filter((img) => img !== imageUrlToRemove), From 14532952cede763a6cd976f4da24feb331c16a2e Mon Sep 17 00:00:00 2001 From: chaeseungyun Date: Fri, 10 May 2024 13:48:08 +0900 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=ED=8C=8C=EC=9D=BC=EC=9D=84=203?= =?UTF-8?q?=EA=B0=9C=20=EC=9D=B4=EC=83=81=20=EC=97=85=EB=A1=9C=EB=93=9C=20?= =?UTF-8?q?=EB=AA=BB=ED=95=98=EB=8F=84=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 --- src/utils/hooks/useImagesUpload.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/utils/hooks/useImagesUpload.ts b/src/utils/hooks/useImagesUpload.ts index d5b62e6c..9eed66ac 100644 --- a/src/utils/hooks/useImagesUpload.ts +++ b/src/utils/hooks/useImagesUpload.ts @@ -3,7 +3,7 @@ import { useRef, useState } from 'react'; import showToast from 'utils/ts/showToast'; // 정의할 수 있는 에러 타입 -type UploadError = '413' | '415' | '404' | '422' | 'networkError' | '401' | ''; +export type UploadError = '413' | '415' | '404' | '422' | 'networkError' | '401' | ''; const MAXSIZE = 1024 * 1024 * 10; @@ -15,8 +15,9 @@ export default function useImagesUpload() { const saveImgFile = async () => { const files = imgRef.current?.files; - - if (files && (files.length > 3 || imageFile.length >= 3)) { + console.log(files?.length) + // imageFile.length + files.length을 통해 저장된 이미지 + 새로 추가할 이미지의 개수를 파악함 + if (files && (files.length > 3 || imageFile.length >= 3 || imageFile.length + files.length > 3)) { showToast('error', '파일은 3개까지 등록할 수 있습니다.') return; } From f2c2cadda00af12fba09fba6e8f10a2bdbad3f6b Mon Sep 17 00:00:00 2001 From: chaeseungyun Date: Fri, 10 May 2024 14:09:18 +0900 Subject: [PATCH 3/5] =?UTF-8?q?style:=20textarea=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/ManageEvent/index.module.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/page/ManageEvent/index.module.scss b/src/page/ManageEvent/index.module.scss index f88fd0c6..1b973139 100644 --- a/src/page/ManageEvent/index.module.scss +++ b/src/page/ManageEvent/index.module.scss @@ -87,6 +87,15 @@ height: 40px; padding: 5px 10px; } + + &__content { + border: 1px solid #e1e1e1; + border-radius: 5px; + width: 100%; + height: 100px; + padding: 5px 10px; + box-sizing: border-box; + } } .event-day { From bdccc63a59426cc163bc06c5f96c7fe540a006fa Mon Sep 17 00:00:00 2001 From: chaeseungyun Date: Fri, 10 May 2024 14:09:41 +0900 Subject: [PATCH 4/5] =?UTF-8?q?refactor:=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80/=EC=88=98=EC=A0=95=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=9D=BC=EB=B0=98=20text=EB=A5=BC=20=EC=9E=91=EC=84=B1?= =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/ManageEvent/AddingEvent/index.tsx | 44 ++++++++++------ src/page/ManageEvent/ModifyEvent/index.tsx | 60 +++++++++++++++------- 2 files changed, 69 insertions(+), 35 deletions(-) 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="이벤트/공지 내용을 입력해 주세요." +