Merge branch 'dev' into feat/#731

woowacourse-teams · Oct 24, 2024 · 69954df · 69954df
2 parents 922f9bf + b042303
commit 69954df
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 2 deletions.
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/Card/Card.styled.ts b/frontend/src/components/common/Card/Card.styled.ts
@@ -30,6 +30,6 @@ export const Content = styled.div`
   justify-content: space-between;
 
   ${media.medium`
-    min-height: 15rem;
+    min-height: 15.3rem;
     `}
 `;
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`

diff --git a/frontend/src/pages/MainPage/MainPage.styled.tsx b/frontend/src/pages/MainPage/MainPage.styled.tsx
@@ -13,6 +13,7 @@ export const MissionListWrapper = styled.div`
   margin: 0 auto;
   padding: 0 1.5rem;
   max-width: 100rem;
+  width: 100%;
 `;
 
 export const MissionListTitle = styled.h2`