From e852eab844734780ac5a0f21748d7f0519c9558e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A7=84=ED=98=B8?= Date: Thu, 10 Oct 2024 17:03:20 +0900 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20post=EB=A5=BC=20=EA=B8=B0=EB=8B=A4?= =?UTF-8?q?=EB=A6=B0=20=ED=9B=84=20navigate=EC=8B=9C=EC=BC=9C=EC=84=9C=20?= =?UTF-8?q?=EC=BA=90=EC=8B=9C=20=EB=8D=B0=EC=9D=B4=ED=84=B0=EA=B0=80=20rem?= =?UTF-8?q?ove=20=EB=90=A8=EC=9D=84=20=EB=B3=B4=EC=9E=A5=EB=B0=9B=EB=8F=84?= =?UTF-8?q?=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/hooks/queries/images/useRequestPostImages.ts | 6 +++--- client/src/hooks/useAddImagesPage.ts | 10 +++------- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/client/src/hooks/queries/images/useRequestPostImages.ts b/client/src/hooks/queries/images/useRequestPostImages.ts index 619989694..fa49463e7 100644 --- a/client/src/hooks/queries/images/useRequestPostImages.ts +++ b/client/src/hooks/queries/images/useRequestPostImages.ts @@ -10,14 +10,14 @@ const useRequestPostImages = () => { const eventId = getEventIdByUrl(); const queryClient = useQueryClient(); - const {mutate, ...rest} = useMutation({ + const {mutateAsync, ...rest} = useMutation({ mutationFn: ({formData}: RequestPostImages) => requestPostImages({eventId, formData}), onSuccess: () => { - queryClient.invalidateQueries({queryKey: [QUERY_KEYS.images]}); + queryClient.removeQueries({queryKey: [QUERY_KEYS.images]}); }, }); - return {postImages: mutate, ...rest}; + return {postImages: mutateAsync, ...rest}; }; export default useRequestPostImages; diff --git a/client/src/hooks/useAddImagesPage.ts b/client/src/hooks/useAddImagesPage.ts index 0bd45f490..962adae57 100644 --- a/client/src/hooks/useAddImagesPage.ts +++ b/client/src/hooks/useAddImagesPage.ts @@ -65,7 +65,7 @@ const useAddImagesPage = () => { const canSubmit = !!addedImages || isPrevImageDeleted; - const submitImages = () => { + const submitImages = async () => { const formData = new FormData(); if (!addedImages) return; @@ -74,7 +74,8 @@ const useAddImagesPage = () => { formData.append('images', addedImages[i], addedImages[i].name); } - postImages({formData}); + await postImages({formData}); + navigate(`/event/${eventId}/admin`); }; useEffect(() => { @@ -85,11 +86,6 @@ const useAddImagesPage = () => { }; }, []); - useEffect(() => { - if (!isSuccessPostImage) return; - navigate(`/event/${eventId}/admin`); - }, [isSuccessPostImage]); - return {fileInputRef, handleChangeImages, urls, handleDeleteImage, isPending, canSubmit, submitImages}; }; From 1a38a1fa203859d6bc386a6230c08777b2bd5ab9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=90=E1=85=A2=E1=84=92=E1=85=AE?= =?UTF-8?q?=E1=86=AB?= Date: Thu, 10 Oct 2024 17:19:27 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EC=9E=98=EB=AA=BB=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=EB=90=9C=20canSubmit,=20setIsPrevImageDeleted=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/apis/request/images.ts | 22 +++++++++++++--------- client/src/hooks/useAddImagesPage.ts | 6 +++--- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/client/src/apis/request/images.ts b/client/src/apis/request/images.ts index b881ee3ac..88551e734 100644 --- a/client/src/apis/request/images.ts +++ b/client/src/apis/request/images.ts @@ -14,7 +14,7 @@ export const requestPostImages = async ({eventId, formData}: WithEventId { diff --git a/client/src/hooks/useAddImagesPage.ts b/client/src/hooks/useAddImagesPage.ts index 962adae57..2fd10ae08 100644 --- a/client/src/hooks/useAddImagesPage.ts +++ b/client/src/hooks/useAddImagesPage.ts @@ -29,7 +29,7 @@ const useAddImagesPage = () => { const navigate = useNavigate(); const eventId = getEventIdByUrl(); - const {postImages, isPending, isSuccess: isSuccessPostImage} = useRequestPostImages(); + const {postImages, isPending} = useRequestPostImages(); const {deleteImage} = useRequestDeleteImage(); useEffect(() => { @@ -57,13 +57,13 @@ const useAddImagesPage = () => { deleteImage({ imageId: images[index].id, }); - setIsPrevImageDeleted(false); + setIsPrevImageDeleted(true); } else { setImages(prev => prev.filter((_, idx) => idx !== index)); } }; - const canSubmit = !!addedImages || isPrevImageDeleted; + const canSubmit = addedImages.length !== 0 || isPrevImageDeleted; const submitImages = async () => { const formData = new FormData(); From 1e60730102359d5281055df717d87107958780a2 Mon Sep 17 00:00:00 2001 From: pakxe Date: Thu, 10 Oct 2024 17:40:56 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20body=20=ED=83=80=EC=9E=85=EC=9D=B4?= =?UTF-8?q?=20FormData=EC=9D=B8=20=EA=B2=BD=EC=9A=B0=20header=EB=A5=BC=20?= =?UTF-8?q?=EC=82=BD=EC=9E=85=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=ED=95=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/apis/fetcher.ts | 31 +++++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/client/src/apis/fetcher.ts b/client/src/apis/fetcher.ts index a1c205739..35671b167 100644 --- a/client/src/apis/fetcher.ts +++ b/client/src/apis/fetcher.ts @@ -21,7 +21,7 @@ type RequestInitWithMethod = Omit & {method: Method}; type HeadersType = [string, string][] | Record | Headers; -export type Body = BodyInit | object | null; +export type Body = BodyInit | object | null; //init안에 FormDATA있음. type RequestProps = { baseUrl?: string; @@ -32,6 +32,12 @@ type RequestProps = { method: Method; }; +type CreateRequestInitProps = { + body?: Body; + method: Method; + headers?: HeadersType; +}; + type RequestMethodProps = Omit; type FetchType = { @@ -85,17 +91,26 @@ const prepareRequest = ({baseUrl = API_BASE_URL, method, endpoint, headers, body if (queryParams) url += `?${objectToQueryString(queryParams)}`; + const requestInit = createRequestInit({method, headers, body}); + + return {url, requestInit}; +}; + +const createRequestInit = ({method, headers, body}: CreateRequestInitProps) => { const requestInit: RequestInitWithMethod = { credentials: 'include', - headers: { - 'Content-Type': 'application/json', - ...headers, - }, method, - body: body ? JSON.stringify(body) : null, }; - return {url, requestInit}; + if (body instanceof FormData) { + return {...requestInit, body}; + } else { + return { + ...requestInit, + headers: {...headers, 'Content-Type': 'application/json'}, + body: body ? JSON.stringify(body) : null, + }; + } }; const executeRequest = async ({url, requestInit, errorHandlingStrategy}: WithErrorHandlingStrategy) => { @@ -114,7 +129,7 @@ const executeRequest = async ({url, requestInit, errorHandlingStrategy}: WithErr return response; } catch (error) { if (error instanceof Error) { - throw error; // 그대로 RequestError 또는 Error 인스턴스를 던집니다. + throw error; } throw error; From 2bc156948035820c082f6a031592aba34901a6a1 Mon Sep 17 00:00:00 2001 From: pakxe Date: Thu, 10 Oct 2024 17:41:26 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20images=20POST=20=EC=9A=94=EC=B2=AD?= =?UTF-8?q?=EC=9D=84=20requestPostWithoutResponse=20=ED=95=A8=EC=88=98?= =?UTF-8?q?=EB=A5=BC=20=EC=9D=B4=EC=9A=A9=ED=95=98=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=ED=95=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/apis/request/images.ts | 25 +------------------------ 1 file changed, 1 insertion(+), 24 deletions(-) diff --git a/client/src/apis/request/images.ts b/client/src/apis/request/images.ts index 88551e734..e17061c3c 100644 --- a/client/src/apis/request/images.ts +++ b/client/src/apis/request/images.ts @@ -10,30 +10,7 @@ export interface RequestPostImages { } export const requestPostImages = async ({eventId, formData}: WithEventId) => { - // return await requestPostWithoutResponse({ - // baseUrl: BASE_URL.HD, - // endpoint: `${ADMIN_API_PREFIX}/${eventId}/images`, - // headers: { - // 'Content-Type': '', - // }, - // body: formData, - // }); - - // TODO: (@todari): 기존의 request 방식들은 기본적으로 - // header를 Content-Type : application/json 으로 보내주고 있음 - // multipart/form-data 요청을 보내기 위해선 header Content-Type을 빈 객체로 전달해야 함 - try { - await fetch(`${BASE_URL.HD}${ADMIN_API_PREFIX}/${eventId}/image`, { - credentials: 'include', - // headers: { - // 'Content-Type': 'multipart/form-data', - // }, - method: 'POST', - body: formData, - }); - } catch (error) { - throw error; - } + await requestPostWithoutResponse({endpoint: `${ADMIN_API_PREFIX}/${eventId}/images`, body: formData}); }; export const requestGetImages = async ({eventId}: WithEventId) => { From 93656490384c2f6e82463d806f429fdebb791f38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=90=E1=85=A2=E1=84=92=E1=85=AE?= =?UTF-8?q?=E1=86=AB?= Date: Thu, 10 Oct 2024 18:06:15 +0900 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20get=20=EB=A9=94=EC=86=8C=EB=93=9C?= =?UTF-8?q?=EA=B0=80=20=EC=98=A4=EB=A5=98=EB=82=A0=20=EB=95=8C,=20?= =?UTF-8?q?=EB=AC=B4=ED=95=9C=20=EB=A0=8C=EB=8D=94=EB=A7=81=EC=9D=B4=20?= =?UTF-8?q?=EC=9D=BC=EC=96=B4=EB=82=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/hooks/useAddImagesPage.ts | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/client/src/hooks/useAddImagesPage.ts b/client/src/hooks/useAddImagesPage.ts index 2fd10ae08..917a109a3 100644 --- a/client/src/hooks/useAddImagesPage.ts +++ b/client/src/hooks/useAddImagesPage.ts @@ -16,7 +16,7 @@ const useAddImagesPage = () => { const [images, setImages] = useState>([]); const [isPrevImageDeleted, setIsPrevImageDeleted] = useState(false); const addedImages = images.filter(image => image instanceof File); - const {images: prevImages} = useRequestGetImages(); + const {images: prevImages, isSuccess} = useRequestGetImages(); const urls = images.map(image => { if (image instanceof File) { return URL.createObjectURL(image); @@ -33,11 +33,18 @@ const useAddImagesPage = () => { const {deleteImage} = useRequestDeleteImage(); useEffect(() => { - if (!prevImages) return; + if (!isSuccess) return; setImages([...prevImages]); - }, [prevImages]); + }, [prevImages, isSuccess]); + + useEffect(() => { + console.log(images); + }, [images]); const handleChangeImages = (event: React.ChangeEvent) => { + //TODO: (@Todari): 현재 A 이미지 추가 -> A 이미지 x 버튼 눌러 취소 -> 다시 A 이미지 추가 시 업로드 되지 않음 + // event.target.files가 변경되지 않기 때문에 onChange에 넣은 + // handleChangeImages가 실행되지 않아 일어나는 문제로 추정 if (event.target.files) { const dataTransfer = new DataTransfer(); @@ -66,15 +73,16 @@ const useAddImagesPage = () => { const canSubmit = addedImages.length !== 0 || isPrevImageDeleted; const submitImages = async () => { - const formData = new FormData(); + if (addedImages.length !== 0) { + const formData = new FormData(); - if (!addedImages) return; + for (let i = 0; i < addedImages.length; i++) { + formData.append('images', addedImages[i], addedImages[i].name); + } - for (let i = 0; i < addedImages.length; i++) { - formData.append('images', addedImages[i], addedImages[i].name); + await postImages({formData}); } - await postImages({formData}); navigate(`/event/${eventId}/admin`); };