style/#521 : 썸네일 박스 하단 한줄로 수정

Mile-Writings · Jan 5, 2025 · 9ebcf64 · 9ebcf64
1 parent 7812d19
commit 9ebcf64
Showing 1 changed file with 28 additions and 4 deletions.
diff --git a/src/pages/groupFeed/carousel/EachArticle.tsx b/src/pages/groupFeed/carousel/EachArticle.tsx
@@ -112,15 +112,15 @@ const EachArticle = (props: EachProfilePropTypes) => {
                           <DividingLine />
                         </ArticleDetail>
                         <ArticleDetail>
-                          <GroupCuriousIc />
+                          <GroupCuriousIcon />
                         </ArticleDetail>
                         <ArticleDetailBold>{list.curiousCount}</ArticleDetailBold>
                         <ArticleDetail>
-                          <GroupViewIc />
+                          <GroupViewIcon />
                         </ArticleDetail>
                         <ArticleDetailBold>{list.hitsCount}</ArticleDetailBold>
                         <ArticleDetail>
-                          <GroupChatIc />
+                          <GroupChatIcon />
                         </ArticleDetail>
                         <ArticleDetailBold>{list.commentCount}</ArticleDetailBold>
                       </ArticleInfo>
@@ -148,6 +148,25 @@ const GroupListProfileIcon = styled(GroupListProfileIc)`
   }
 `;
 
+const GroupCuriousIcon = styled(GroupCuriousIc)`
+  @media ${MOBILE_MEDIA_QUERY} {
+    width: 1.4rem;
+    height: 1.4rem;
+  }
+`;
+const GroupViewIcon = styled(GroupViewIc)`
+  @media ${MOBILE_MEDIA_QUERY} {
+    width: 1.4rem;
+    height: 1.4rem;
+  }
+`;
+const GroupChatIcon = styled(GroupChatIc)`
+  @media ${MOBILE_MEDIA_QUERY} {
+    width: 1.4rem;
+    height: 1.4rem;
+  }
+`;
+
 const MobileListWrapper = styled.div`
   display: flex;
   gap: 1.2rem;
@@ -207,7 +226,7 @@ const ArticleWrapper = styled.button`
   display: flex;
   gap: 3.2rem;
   justify-content: space-between;
-  width: 100%;
+  width: 72rem;
   padding: 3.2rem;
 
   text-align: left;
@@ -281,6 +300,11 @@ const ArticleDetailBold = styled.div`
   color: ${({ theme }) => theme.colors.gray70};
 
   ${({ theme }) => theme.fonts.body5};
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    margin-right: 0.4rem;
+    ${({ theme }) => theme.fonts.mSubtitle1};
+  }
 `;
 
 const ProfileName = styled.div`