feat: 데이터 가공 query쪽에서 하도록

price-offer · Jan 12, 2024 · c60ab55 · c60ab55
1 parent 76e1d11
commit c60ab55
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/src/apis/post/queries.ts b/src/apis/post/queries.ts
@@ -10,7 +10,15 @@ export const useCreatePostMutation = () =>
 export const useGetPostQuery = (id: number) =>
   useQuery({
     queryKey: ['getPost', id],
-    queryFn: () => getPost(id)
+    queryFn: () => getPost(id),
+    select: data => ({
+      ...data,
+      postImages:
+        data.imageUrls.map((url, idx) => ({
+          id: idx,
+          src: url
+        })) || []
+    })
   })
 
 export const useGetCategoriesQuery = () =>

diff --git a/src/pages/post/[postId]/index.tsx b/src/pages/post/[postId]/index.tsx
@@ -32,18 +32,14 @@ const PostDetailPage = ({ postId }: Props): ReactElement => {
   const imageModal = useModal()
 
   const isSeller = user.id === postQuery.data?.seller.id
-  const postImages =
-    postQuery.data?.imageUrls.map((url, idx) => ({
-      id: idx,
-      src: url
-    })) || []
+  const postImages = postQuery.data?.postImages || []
 
   return (
     <>
       <Layout>
         <Main>
           <div onClick={imageModal.openModal}>
-            <Carousel images={postImages || []} isArrow name="post-carousel" />
+            <Carousel images={postImages} isArrow name="post-carousel" />
           </div>
           <Content>
             <div>