design: 디스커션 리스트 레이아웃 조정

woowacourse-teams · Oct 23, 2024 · 9fa7e43 · 9fa7e43
1 parent ce151b8
commit 9fa7e43
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/frontend/src/components/DiscussionList/DiscussionList.styled.ts b/frontend/src/components/DiscussionList/DiscussionList.styled.ts
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import CommentCount from '@/assets/images/comment-count.svg';
+import media from '@/styles/mediaQueries';
 
 // Content
 
@@ -26,20 +27,28 @@ export const ItemContainer = styled.div`
   &:hover {
     transform: scale(1.01);
   }
+
+  ${media.small`
+      padding: 1.4rem 2rem;
+    `}
 `;
 
 export const BadgeWrapper = styled.div`
   display: flex;
   gap: 0.7rem;
+  flex-wrap: wrap;
 `;
 
 export const ContentWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  flex: 1;
 `;
 
 export const Title = styled.p`
+  width: 100%;
+  word-break: break-all;
   color: ${(props) => props.theme.colors.black};
   ${(props) => props.theme.font.body}
 `;

diff --git a/frontend/src/components/common/Badge/Badge.styled.ts b/frontend/src/components/common/Badge/Badge.styled.ts
@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components';
 import type { BadgeVariant } from '.';
 import type { DefaultTheme } from 'styled-components/dist/types';
+import media from '@/styles/mediaQueries';
 
 interface BadgeContainerProps {
   $variant: BadgeVariant;
@@ -32,5 +33,12 @@ export const BadgeContainer = styled.div<BadgeContainerProps>`
   width: fit-content;
   padding: 0.4rem 0.8rem;
   border-radius: 0.4rem;
-  white-space: wrap;
+  white-space: nowrap;
+  -webkit-line-clamp: 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  ${media.small`
+      max-width: 10rem;
+    `}
 `;
diff --git a/frontend/src/components/common/TagList/TagList.styled.ts b/frontend/src/components/common/TagList/TagList.styled.ts
@@ -4,6 +4,7 @@ export const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.7rem;
+  flex-wrap: wrap;
 `;
 
 export const Label = styled.p`