[ style ] 이미지 유무에 따른 width 조절

nori-dongsan · Jul 21, 2022 · dd7bcd6 · dd7bcd6
1 parent 45a0f7d
commit dd7bcd6
Showing 1 changed file with 28 additions and 9 deletions.
diff --git a/components/community/ContentCard.tsx b/components/community/ContentCard.tsx
@@ -30,12 +30,21 @@ export default function ContentCard(props: ContentInfoProps) {
     <StContentsCardWrapper>
       <StContentInfo>
         <CommunityCategory category={category} />
-        <StMainInfo
-          onClick={() => Router.push({ pathname: `/community/${id}` })}
-        >
-          <h1>{title}</h1>
-          <p>{content}</p>
-        </StMainInfo>
+        {!img ? (
+          <StMainInfo
+            onClick={() => Router.push({ pathname: `/community/${id}` })}
+          >
+            <h1>{title}</h1>
+            <p>{content}</p>
+          </StMainInfo>
+        ) : (
+          <StImgMainInfo
+            onClick={() => Router.push({ pathname: `/community/${id}` })}
+          >
+            <h1>{title}</h1>
+            <p>{content}</p>
+          </StImgMainInfo>
+        )}
         <StWriteInfo>
           <span>{userNickname}</span>
           <IcDot />
@@ -48,7 +57,12 @@ export default function ContentCard(props: ContentInfoProps) {
           <span>{replyCount}</span>
         </StReplyInfo>
       </StContentInfo>
-      {img && <StContentImg src={img} alt="리뷰 사진" />}
+      {img && (
+        <StContentImg
+          src={'https://nori-community.s3.ap-northeast-2.amazonaws.com/' + img}
+          alt="리뷰 사진"
+        />
+      )}
     </StContentsCardWrapper>
   );
 }
@@ -65,7 +79,6 @@ const StContentsCardWrapper = styled.div`
   border-bottom: 0.1rem solid ${({ theme }) => theme.colors.gray005};
 
   h1 {
-    width: 92.3rem;
     margin-top: 1.6rem;
     margin-bottom: 0.7rem;
 
@@ -88,7 +101,13 @@ const StContentsCardWrapper = styled.div`
     cursor: pointer;
   }
 `;
-const StMainInfo = styled.article``;
+const StMainInfo = styled.article`
+  width: 97.6rem;
+`;
+const StImgMainInfo = styled.article`
+  width: 72.5rem;
+  margin-right: 3.3rem;
+`;
 const StContentInfo = styled.section`
   display: flex;
   flex-direction: column;