Merge pull request #204 from themoment-team/feature/postContentImage

[Client] Update postDetail image size
themoment-team · Aug 20, 2023 · d08c238 · d08c238 · vercel · Aug 20, 2023
2 parents fd8d232 + db25830
commit d08c238
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/apps/client/src/components/PostPage/AssembledPost/index.tsx b/apps/client/src/components/PostPage/AssembledPost/index.tsx
@@ -36,7 +36,7 @@ const AssembledPost: React.FC<AssembledPostProps> = ({ postSeq, post }) => {
           }
         >
           <PostDetailHead postSeq={postSeq} />
-          {data.postContent && (
+          {(data.postContent || data.fileInfo.length > 0) && (
             <S.ContentWrapper>
               <PostContent postSeq={postSeq} />
               {data.fileInfo.length > 0 && (

diff --git a/apps/client/src/components/PostPage/PostContent/index.tsx b/apps/client/src/components/PostPage/PostContent/index.tsx
@@ -1,7 +1,5 @@
 'use client';
 
-import Image from 'next/image';
-
 import { useGetPostDetail } from 'api/client';
 
 import { filterImages } from 'common';
@@ -23,7 +21,7 @@ const PostContent: React.FC<PostContentProps> = ({ postSeq }) => {
         <S.ContentWrapper>
           {imageFiles.map((file, index) => (
             <S.ImageWrapper key={index}>
-              <Image src={file.fileUrl} alt={file.fileName} fill />
+              <S.ContentImage src={file.fileUrl} alt={file.fileName} fill />
             </S.ImageWrapper>
           ))}
           <S.ContentText>{data?.postContent}</S.ContentText>

diff --git a/apps/client/src/components/PostPage/PostContent/style.ts b/apps/client/src/components/PostPage/PostContent/style.ts
@@ -1,3 +1,5 @@
+import Image from 'next/image';
+
 import styled from '@emotion/styled';
 
 export const ContentWrapper = styled.div`
@@ -11,9 +13,12 @@ export const ContentWrapper = styled.div`
   }
 `;
 
+export const ContentImage = styled(Image)`
+  position: relative !important;
+`;
+
 export const ImageWrapper = styled.div`
   width: 50rem;
-  height: 30.375rem;
   overflow: hidden;
   position: relative;
   img {