From 59fc897a3fcbea0b6faf90454d6fe96555dcafb5 Mon Sep 17 00:00:00 2001 From: bmj0053 Date: Wed, 23 Oct 2024 17:10:51 +0900 Subject: [PATCH 1/3] =?UTF-8?q?design:=20=EB=9E=9C=EB=94=A9=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/MainPage/MainPage.styled.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/pages/MainPage/MainPage.styled.tsx b/frontend/src/pages/MainPage/MainPage.styled.tsx index 1a3e7c2a..520464d4 100644 --- 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` From ce151b88b99f4f163881b15ee63af0b86786d47c Mon Sep 17 00:00:00 2001 From: bmj0053 Date: Wed, 23 Oct 2024 17:11:08 +0900 Subject: [PATCH 2/3] =?UTF-8?q?design:=20card=20min-height=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/Card/Card.styled.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/common/Card/Card.styled.ts b/frontend/src/components/common/Card/Card.styled.ts index 524fd1d9..7965ee76 100644 --- 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; `} `; From 9fa7e43b512a064788fbe0348ca2c838272f9b72 Mon Sep 17 00:00:00 2001 From: bmj0053 Date: Wed, 23 Oct 2024 17:32:31 +0900 Subject: [PATCH 3/3] =?UTF-8?q?design:=20=EB=94=94=EC=8A=A4=EC=BB=A4?= =?UTF-8?q?=EC=85=98=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/DiscussionList/DiscussionList.styled.ts | 9 +++++++++ frontend/src/components/common/Badge/Badge.styled.ts | 10 +++++++++- .../src/components/common/TagList/TagList.styled.ts | 1 + 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/DiscussionList/DiscussionList.styled.ts b/frontend/src/components/DiscussionList/DiscussionList.styled.ts index 958d596d..29300653 100644 --- 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 index 2db0edc7..8e80ac67 100644 --- 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` 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 index cd679d3b..0a792545 100644 --- 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`