From 1bbf0bc77ece2d56baeb43a293f32765adbc7657 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= Date: Fri, 4 Oct 2024 05:01:10 +0900 Subject: [PATCH] =?UTF-8?q?Refactor:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=ED=98=B8=EC=B6=9C=20=ED=95=A8=EC=88=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/api/imageApi.ts | 6 ++---- frontend/src/hooks/useImage.ts | 10 ++++++++++ frontend/src/queries/images/useImageQuery.ts | 6 +++--- 3 files changed, 15 insertions(+), 7 deletions(-) create mode 100644 frontend/src/hooks/useImage.ts diff --git a/frontend/src/api/imageApi.ts b/frontend/src/api/imageApi.ts index cb8eaea..ffae226 100644 --- a/frontend/src/api/imageApi.ts +++ b/frontend/src/api/imageApi.ts @@ -2,10 +2,8 @@ import api from '@/api/axiosConfig'; import { ImageMoveRequest, ImageStatusChangeRequest, ImagePresignedUrlResponse } from '@/types'; import axios from 'axios'; -export async function getImage(imageId: number, memberId: number) { - return api.get(`/images/${imageId}`, { - params: { memberId }, - }); +export async function getImage(projectId: number, folderId: number, imageId: number) { + return api.get(`/api/projects/${projectId}/folders/${folderId}/images/${imageId}`); } export async function moveImage(projectId: number, folderId: number, imageId: number, moveRequest: ImageMoveRequest) { diff --git a/frontend/src/hooks/useImage.ts b/frontend/src/hooks/useImage.ts new file mode 100644 index 0000000..45e6759 --- /dev/null +++ b/frontend/src/hooks/useImage.ts @@ -0,0 +1,10 @@ +import { getImage } from '@/api/imageApi'; +import { useQuery } from '@tanstack/react-query'; + +export default function useImage(projectId: number, folderId: number, imageId: number) { + return useQuery({ + queryKey: ['image', projectId, folderId, imageId], + queryFn: () => getImage(projectId, folderId, imageId), + enabled: Boolean(projectId && folderId && imageId), + }); +} diff --git a/frontend/src/queries/images/useImageQuery.ts b/frontend/src/queries/images/useImageQuery.ts index e4ed924..d1acddf 100644 --- a/frontend/src/queries/images/useImageQuery.ts +++ b/frontend/src/queries/images/useImageQuery.ts @@ -1,9 +1,9 @@ import { getImage } from '@/api/imageApi'; import { useSuspenseQuery } from '@tanstack/react-query'; -export default function useImageQuery(imageId: number, memberId: number) { +export default function useImageQuery(projectId: number, folderId: number, imageId: number) { return useSuspenseQuery({ - queryKey: ['image', imageId, memberId], - queryFn: () => getImage(imageId, memberId), + queryKey: ['image', projectId, folderId, imageId], + queryFn: () => getImage(projectId, folderId, imageId), }); }