Merge branch 'develop' into feat/#210_change-post-status

price-offer · Jan 21, 2024 · d773739 · d773739
2 parents b059b8f + 3f3fd53
commit d773739
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 16 deletions.
diff --git a/src/apis/post/queries.ts b/src/apis/post/queries.ts
@@ -53,7 +53,17 @@ export const useGetPostQuery = (id: number) =>
         title: data.title,
         description: data.description,
         location: data.location
-      }
+      },
+      postImages: [
+        {
+          id: 0,
+          src: data.thumbnailImageUrl || ''
+        },
+        ...(data.imageUrls.map((url, idx) => ({
+          id: idx + 1,
+          src: url
+        })) || [])
+      ]
     })
   })
 

diff --git a/src/pages/post/[postId]/index.tsx b/src/pages/post/[postId]/index.tsx
@@ -7,7 +7,8 @@ import {
   Text,
   IconButton,
   SelectBox,
-  Button
+  Button,
+  ImageModal
 } from '@offer-ui/react'
 import type { GetServerSideProps } from 'next'
 import Link from 'next/link'
@@ -51,17 +52,10 @@ const PostDetailPage = ({ postId }: Props): ReactElement => {
   const tradeStatusDialog = useModal()
   const deleteModal = useModal()
   const { user } = useAuth()
+  const imageModal = useModal()
 
   const isSeller = user.id === getPostQuery.data?.seller.id
-  const totalImages = [
-    getPostQuery.data?.thumbnailImageUrl || '',
-    ...(getPostQuery.data?.imageUrls || [])
-  ]
-
-  const postImages = totalImages.map((url, idx) => ({
-    id: idx,
-    src: url
-  }))
+  const postImages = getPostQuery.data?.postImages || []
 
   const handleChangeTradeStatus = async (status: TradeStatusType) => {
     const nextStatusCode = status.code
@@ -84,7 +78,7 @@ const PostDetailPage = ({ postId }: Props): ReactElement => {
     <>
       <Layout>
         <Main>
-          <div>
+          <div onClick={imageModal.openModal}>
             <Carousel images={postImages || []} isArrow name="post-carousel" />
           </div>
           <Content>
@@ -170,6 +164,12 @@ const PostDetailPage = ({ postId }: Props): ReactElement => {
         <MainDivider size="bold" />
         <PriceOfferCard isSeller={isSeller} postId={postId} />
       </Layout>
+      <ImageModal
+        images={postImages}
+        isOpen={imageModal.isOpen}
+        name="post-detail"
+        onClose={imageModal.closeModal}
+      />
       <CommonModal
         buttons={[
           <Button key="delete" size="large" onClick={handleClickDelete}>
@@ -242,6 +242,8 @@ const MainDivider = styled(Divider)`
   `}
 `
 const Main = styled.div`
+  width: 100%;
+
   ${({ theme }): SerializedStyles => css`
     ${theme.mediaQuery.tablet} {
       margin: 0;
@@ -294,14 +296,11 @@ const ProductConditionSelectBox = styled(SelectBox)`
     ${theme.mediaQuery.tablet} {
       margin: 20px 0;
     }
-    ${theme.mediaQuery.mobile} {
-      margin: 20px 0;
-    }
   `}
 `
 
 const ProductConditionBadge = styled.div`
-  margin-bottom: 20px;
+  margin: 33px 0 16px;
   padding: 4px 8px 3px;
 
   ${({ theme }) => css`
@@ -312,6 +311,13 @@ const ProductConditionBadge = styled.div`
     color: ${theme.colors.white};
 
     ${theme.fonts.body02B}
+
+    ${theme.mediaQuery.tablet} {
+      margin: 20px 0;
+    }
+    ${theme.mediaQuery.mobile} {
+      margin: 20px 0;
+    }
   `}
 `