Design: 콜렉션 심플 리스트 배경 투명도 적용, text 줄임 적용

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',
   },
 ]);