From 08f377e9eb8d841d9f578023e2e25eae6ff4a099 Mon Sep 17 00:00:00 2001
From: ww8007 <wshmin1234@gmail.com>
Date: Sat, 30 Sep 2023 01:12:07 +0900
Subject: [PATCH] =?UTF-8?q?design:=20category=20min,=20max=20width=20?=
 =?UTF-8?q?=EC=A7=80=EC=A0=95=20=EB=B0=8F=20ellipsis=20=EC=B2=98=EB=A6=AC?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/bookmarks/ui/BookmarkArticle.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/bookmarks/ui/BookmarkArticle.tsx b/src/bookmarks/ui/BookmarkArticle.tsx
index 3c8fe199..dd3ba463 100644
--- a/src/bookmarks/ui/BookmarkArticle.tsx
+++ b/src/bookmarks/ui/BookmarkArticle.tsx
@@ -109,9 +109,9 @@ const BookMarkArticle = () => {
         <CategoryAndIconsWrapper>
           <CategoryButtonWrapper>
             <CategoryButton height={2.5} buttonColor="lightPrimary">
-              <Text.Span color="grey900" weight="bold">
+              <CategoryText color="grey900" weight="bold">
                 {bookmarkDetail?.categoryName ?? ''}
-              </Text.Span>
+              </CategoryText>
             </CategoryButton>
           </CategoryButtonWrapper>
           <LikeAndMessageIconWrapper>
@@ -199,11 +199,19 @@ const CategoryAndIconsWrapper = styled.div`
 `;
 
 const CategoryButtonWrapper = styled.div`
-  width: ${getRem(154)};
+  max-width: ${getRem(220)};
+  min-width: ${getRem(150)};
 `;
 
 const CategoryButton = styled(Button)`
   color: ${theme.colors.black};
+  padding: 1rem;
+`;
+
+const CategoryText = styled(Text.Span)`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 const IconWrapper = styled.div`