From 34402e2540fd26436b0f87ac5c99945c357e54e7 Mon Sep 17 00:00:00 2001 From: chaeseungyun Date: Thu, 28 Mar 2024 22:21:13 +0900 Subject: [PATCH 1/6] =?UTF-8?q?refactor:=20=EA=B5=AC=EA=B8=80=20=EC=9E=90?= =?UTF-8?q?=EB=8F=99=EB=B2=88=EC=97=AD=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/public/index.html b/public/index.html index 35a5fcbc..70a9baed 100644 --- a/public/index.html +++ b/public/index.html @@ -8,6 +8,7 @@ name="description" content="backoffice for koin's store owner" /> + From b25474ba779ff1f12c1f7b15bc7c0c3238f9e0f8 Mon Sep 17 00:00:00 2001 From: chaeseungyun Date: Fri, 29 Mar 2024 00:35:01 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=EB=8B=A4=EC=A4=91=20=EC=97=85?= =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=9B=85=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/hooks/useImagesUpload.ts | 75 ++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 src/utils/hooks/useImagesUpload.ts diff --git a/src/utils/hooks/useImagesUpload.ts b/src/utils/hooks/useImagesUpload.ts new file mode 100644 index 00000000..2bce11f4 --- /dev/null +++ b/src/utils/hooks/useImagesUpload.ts @@ -0,0 +1,75 @@ +import { uploadFile } from 'api/uploadFile/Uploadfile'; +import { useRef, useState } from 'react'; +import showToast from 'utils/ts/showToast'; + +// 정의할 수 있는 에러 타입 +type UploadError = '413' | '415' | '404' | '422' | 'networkError' | '401' | ''; + +/* eslint-disable */ +export default function useImagesUpload() { + const [imageFile, setImageFile] = useState([]); + const [uploadError, setUploadError] = useState(''); + const imgRef = useRef(null); + + const saveImgFile = async () => { + const files = imgRef.current?.files; + + if (files && files.length > 3) { + showToast('error', '파일은 3개까지 등록할 수 있습니다.') + return; + } + if (files && files.length) { + const uploadedFiles: string[] = []; + const maxSize = 1024 * 1024 * 10; // 10 MB limit for each file + const correctForm = new RegExp('(.*?)\\.(jpg|jpeg|gif|bmp|png)$'); + + for (let i = 0; i < files.length; i++) { + const file = files[i]; + + if (file.size > maxSize) { + setUploadError('413'); // File size too large + setImageFile([]); + return; + } + + if (!correctForm.test(file.name)) { + setUploadError('415'); // Unsupported file type + setImageFile([]); + return; + } + + const formData = new FormData(); + formData.append('multipartFile', file); + + try { + const data = await uploadFile(formData); + if (data?.data?.file_url) { + uploadedFiles.push(data.data.file_url); + } + } catch (error: any) { + setImageFile([]); + const errorMessage = error.toString(); + if (errorMessage.includes('415')) { + setUploadError('415'); + } else if (errorMessage.includes('404')) { + setUploadError('404'); + } else if (errorMessage.includes('422')) { + setUploadError('422'); + } else if (errorMessage.includes('Network Error')) { + setUploadError('networkError'); + } else { + setUploadError('401'); + } + return; + } + } + + setImageFile(uploadedFiles); + setUploadError(''); + } + }; + + return { + imageFile, imgRef, saveImgFile, uploadError, + }; +} From 175e15f4b29a1d98a356cf4cb07a695026005142 Mon Sep 17 00:00:00 2001 From: chaeseungyun Date: Fri, 29 Mar 2024 00:35:24 +0900 Subject: [PATCH 3/6] =?UTF-8?q?refactor:=20pc=20=EB=B0=8F=20=EB=AA=A8?= =?UTF-8?q?=EB=B0=94=EC=9D=BC=20=EB=B2=84=EC=A0=84=20=EB=A9=94=EB=89=B4=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=EC=97=90=20=EB=8B=A4=EC=A4=91=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=97=85=EB=A1=9C=EB=93=9C=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/AddMenuImgModal/index.tsx | 15 ++++--- .../AddMenu/components/MenuImage/index.tsx | 44 ++++++++++--------- src/store/addMenu.ts | 4 ++ 3 files changed, 35 insertions(+), 28 deletions(-) diff --git a/src/page/AddMenu/components/AddMenuImgModal/index.tsx b/src/page/AddMenu/components/AddMenuImgModal/index.tsx index 31b5bb1c..0de66a5d 100644 --- a/src/page/AddMenu/components/AddMenuImgModal/index.tsx +++ b/src/page/AddMenu/components/AddMenuImgModal/index.tsx @@ -2,9 +2,9 @@ import React, { useEffect } from 'react'; import { createPortal } from 'react-dom'; import { ReactComponent as CancelIcon } from 'assets/svg/addmenu/mobile-cancle-icon.svg'; import useAddMenuStore from 'store/addMenu'; -import useImageUpload from 'utils/hooks/useImageUpload'; import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage'; -import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage'; import styles from './AddMenuImgModal.module.scss'; +import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage'; import useImagesUpload from 'utils/hooks/useImagesUpload'; +import styles from './AddMenuImgModal.module.scss'; interface AddMenuImgModalProps { isOpen: boolean; @@ -12,10 +12,11 @@ interface AddMenuImgModalProps { } export default function AddMenuImgModal({ isOpen, closeModal }: AddMenuImgModalProps) { - const { setImageUrl } = useAddMenuStore(); + const { setImageUrls } = useAddMenuStore(); + const { imageFile, imgRef, saveImgFile, uploadError, - } = useImageUpload(); + } = useImagesUpload(); const triggerFileInput = () => { imgRef.current?.click(); @@ -28,10 +29,10 @@ export default function AddMenuImgModal({ isOpen, closeModal }: AddMenuImgModalP }; useEffect(() => { if (imageFile && !uploadError) { - setImageUrl(imageFile); + setImageUrls(imageFile); closeModal(); } - }, [imageFile, uploadError, setImageUrl, closeModal]); + }, [imageFile, uploadError, setImageUrls, closeModal]); if (!isOpen) return null; @@ -44,7 +45,7 @@ export default function AddMenuImgModal({ isOpen, closeModal }: AddMenuImgModalP 이미지 추가 메뉴 사진을 추가할 수 있습니다.
- +
diff --git a/src/page/AddMenu/components/MenuImage/index.tsx b/src/page/AddMenu/components/MenuImage/index.tsx index 91a83cf3..b4129da7 100644 --- a/src/page/AddMenu/components/MenuImage/index.tsx +++ b/src/page/AddMenu/components/MenuImage/index.tsx @@ -5,9 +5,9 @@ import useMediaQuery from 'utils/hooks/useMediaQuery'; import useBooleanState from 'utils/hooks/useBooleanState'; import AddMenuImgModal from 'page/AddMenu/components/AddMenuImgModal'; import useAddMenuStore from 'store/addMenu'; -import useImageUpload from 'utils/hooks/useImageUpload'; import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage'; import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage'; +import useImagesUpload from 'utils/hooks/useImagesUpload'; import styles from './MenuImage.module.scss'; interface MenuImageProps { @@ -16,15 +16,16 @@ interface MenuImageProps { export default function MenuImage({ isComplete }: MenuImageProps) { const { isMobile } = useMediaQuery(); - const { imageUrl, setImageUrl, removeImageUrl } = useAddMenuStore(); + const { imageUrl, setImageUrls, removeImageUrl } = useAddMenuStore(); const { value: isAddMenuImgModal, setTrue: openAddMenuImgModal, setFalse: closeAddMenuImgModal, } = useBooleanState(false); + const { imageFile, imgRef, saveImgFile, uploadError, - } = useImageUpload(); + } = useImagesUpload(); const handleAddImage = () => { imgRef.current?.click(); }; @@ -36,9 +37,9 @@ export default function MenuImage({ isComplete }: MenuImageProps) { }; useEffect(() => { if (imageFile) { - setImageUrl(imageFile); + setImageUrls(imageFile); } - }, [imageFile, setImageUrl]); + }, [imageFile, setImageUrls]); return (
{isMobile ? ( @@ -52,14 +53,14 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
{`Selected {!isComplete && ( - + )}
))} @@ -88,14 +89,14 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
{`Selected {!isComplete && ( - + )}
))} @@ -114,6 +115,7 @@ export default function MenuImage({ isComplete }: MenuImageProps) { style={{ display: 'none' }} onChange={handleImageChange} ref={imgRef} + multiple />
diff --git a/src/store/addMenu.ts b/src/store/addMenu.ts index eefc8e79..f064a97e 100644 --- a/src/store/addMenu.ts +++ b/src/store/addMenu.ts @@ -19,6 +19,7 @@ interface AddMenuStore { setCategoryIds: (categoryIds: number[]) => void; setDescription: (description: string) => void; setImageUrl: (newImageUrl: string) => void; + setImageUrls: (newImageUrls: string[]) => void, removeImageUrl: (imageUrlToRemove: string) => void; setIsSingle: (isSingle: boolean) => void; setName: (name: string) => void; @@ -45,6 +46,9 @@ const useAddMenuStore = create((set) => ({ setImageUrl: (newImageUrl) => set((state) => ({ imageUrl: [...state.imageUrl, newImageUrl], })), + setImageUrls: (newImageUrl) => set((state) => ({ + imageUrl: [...state.imageUrl, ...newImageUrl], + })), removeImageUrl: (imageUrlToRemove) => set((state) => ({ imageUrl: state.imageUrl.filter((img) => img !== imageUrlToRemove), })), From 10f055dd6c4826e9c42d90c9c1b003fb5d6590ce Mon Sep 17 00:00:00 2001 From: chaeseungyun Date: Fri, 29 Mar 2024 00:39:14 +0900 Subject: [PATCH 4/6] =?UTF-8?q?refactor:=203=EA=B0=9C=EC=9D=98=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=97=85=EB=A1=9C=EB=93=9C=20=ED=9B=84=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=97=85=EB=A1=9C=EB=93=9C=20?= =?UTF-8?q?=EC=8B=9C=20=EC=97=90=EB=9F=AC=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/hooks/useImagesUpload.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/utils/hooks/useImagesUpload.ts b/src/utils/hooks/useImagesUpload.ts index 2bce11f4..2088060c 100644 --- a/src/utils/hooks/useImagesUpload.ts +++ b/src/utils/hooks/useImagesUpload.ts @@ -14,10 +14,11 @@ export default function useImagesUpload() { const saveImgFile = async () => { const files = imgRef.current?.files; - if (files && files.length > 3) { + if (files && (files.length > 3 || imageFile.length >= 3)) { showToast('error', '파일은 3개까지 등록할 수 있습니다.') return; } + if (files && files.length) { const uploadedFiles: string[] = []; const maxSize = 1024 * 1024 * 10; // 10 MB limit for each file From bf60291e68705b4216249341853e711a4b8a222d Mon Sep 17 00:00:00 2001 From: chaeseungyun Date: Fri, 29 Mar 2024 15:43:17 +0900 Subject: [PATCH 5/6] =?UTF-8?q?fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C=20=EC=8B=9C=20=EC=98=A4=EB=A5=98?= =?UTF-8?q?=EA=B0=80=20=EB=B0=9C=EC=83=9D=ED=96=88=EC=9D=84=EB=95=8C=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=20=EC=97=85=EB=A1=9C=EB=93=9C=ED=95=9C=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EC=9D=B4=20=EC=82=AC=EB=9D=BC=EC=A7=80?= =?UTF-8?q?=EB=8A=94=20=ED=98=84=EC=83=81=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 | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/utils/hooks/useImagesUpload.ts b/src/utils/hooks/useImagesUpload.ts index 2088060c..8b48c105 100644 --- a/src/utils/hooks/useImagesUpload.ts +++ b/src/utils/hooks/useImagesUpload.ts @@ -24,18 +24,16 @@ export default function useImagesUpload() { const maxSize = 1024 * 1024 * 10; // 10 MB limit for each file const correctForm = new RegExp('(.*?)\\.(jpg|jpeg|gif|bmp|png)$'); - for (let i = 0; i < files.length; i++) { + for (let i = 0; i < files.length; i += 1) { const file = files[i]; if (file.size > maxSize) { - setUploadError('413'); // File size too large - setImageFile([]); + setUploadError('413'); // 파일 사이즈가 너무 큰 경우 return; } if (!correctForm.test(file.name)) { - setUploadError('415'); // Unsupported file type - setImageFile([]); + setUploadError('415'); // 지원하지 않는 타입 에러 return; } From ebabfe901648c73c6d8dd66377a983ff525fd314 Mon Sep 17 00:00:00 2001 From: chaeseungyun Date: Fri, 29 Mar 2024 15:53:38 +0900 Subject: [PATCH 6/6] =?UTF-8?q?refactor:=20=ED=8C=8C=EC=9D=BC=ED=81=AC?= =?UTF-8?q?=EA=B8=B0=20=EB=B3=80=EC=88=98=EB=AA=85=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 | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/utils/hooks/useImagesUpload.ts b/src/utils/hooks/useImagesUpload.ts index 8b48c105..bb332c3b 100644 --- a/src/utils/hooks/useImagesUpload.ts +++ b/src/utils/hooks/useImagesUpload.ts @@ -5,6 +5,8 @@ import showToast from 'utils/ts/showToast'; // 정의할 수 있는 에러 타입 type UploadError = '413' | '415' | '404' | '422' | 'networkError' | '401' | ''; +const MAXSIZE = 1024 * 1024 * 10; + /* eslint-disable */ export default function useImagesUpload() { const [imageFile, setImageFile] = useState([]); @@ -21,13 +23,12 @@ export default function useImagesUpload() { if (files && files.length) { const uploadedFiles: string[] = []; - const maxSize = 1024 * 1024 * 10; // 10 MB limit for each file const correctForm = new RegExp('(.*?)\\.(jpg|jpeg|gif|bmp|png)$'); for (let i = 0; i < files.length; i += 1) { const file = files[i]; - if (file.size > maxSize) { + if (file.size > MAXSIZE) { setUploadError('413'); // 파일 사이즈가 너무 큰 경우 return; }