From 7d0789a6aec9a8ff24f755be794dcd6d560db4e9 Mon Sep 17 00:00:00 2001
From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com>
Date: Tue, 29 Oct 2024 12:19:02 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20=EC=BD=9C=EB=A0=89=EC=85=98=20?=
 =?UTF-8?q?=EC=8B=AC=ED=94=8C=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=B0=B0?=
 =?UTF-8?q?=EA=B2=BD=20=ED=88=AC=EB=AA=85=EB=8F=84=20=EC=A0=81=EC=9A=A9,?=
 =?UTF-8?q?=20text=20=EC=A4=84=EC=9E=84=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ShapeSimpleList/ShapeSimpleList.css.ts    | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/ShapeSimpleList/ShapeSimpleList.css.ts b/src/components/ShapeSimpleList/ShapeSimpleList.css.ts
index 1ad25384..d8dda0e4 100644
--- a/src/components/ShapeSimpleList/ShapeSimpleList.css.ts
+++ b/src/components/ShapeSimpleList/ShapeSimpleList.css.ts
@@ -23,13 +23,19 @@ const content = style({
   justifyContent: 'center',
   alignItems: 'center',
 
-  backgroundImage: imageUrl,
-  backgroundPosition: 'center',
   backgroundColor: vars.color.white,
 });
 
 export const contentVariant = styleVariants({
-  round: [content, { borderRadius: '100%' }],
+  round: [
+    content,
+    {
+      borderRadius: '100%',
+      background: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), ${imageUrl}`,
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+    },
+  ],
   square: [content, { borderRadius: 20 }],
 });
 
@@ -44,6 +50,7 @@ export const category = style([
 ]);
 
 export const info = style({
+  width: '70%',
   paddingTop: '0.6rem',
   paddingBottom: '0.5rem',
   display: 'flex',
@@ -63,6 +70,12 @@ export const title = styleVariants(fontColor, (color) => [
   {
     color,
     fontWeight: 600,
+    textAlign: 'center',
+
+    width: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
   },
 ]);