Design: 리스트 비공개 디자인 수정

8-Sprinters · Feb 1, 2024 · d6a5b3f · d6a5b3f
1 parent aa420f3
commit d6a5b3f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/public/icons/lock_alt.svg b/public/icons/lock_alt.svg
diff --git a/src/app/[userNickname]/_components/Card.css.ts b/src/app/[userNickname]/_components/Card.css.ts
@@ -35,6 +35,17 @@ export const list = style({
 });
 
 export const lockIcon = style({
+  padding: '0 1rem',
+
   display: 'flex',
   justifyContent: 'flex-end',
+  alignItems: 'center',
+  gap: '2px',
+});
+
+export const lockText = style({
+  fontSize: '1.1rem',
+  fontWeight: '400',
+  letterSpacing: '-0.33px',
+  color: '#AFB1B6',
 });
diff --git a/src/app/[userNickname]/_components/Card.tsx b/src/app/[userNickname]/_components/Card.tsx
@@ -26,17 +26,18 @@ export default function Card({ list, isOwner }: CardProps) {
         [styles.listColor]: `${list.backgroundColor}`,
       })}
     >
+      {isVisibleLockIcon && (
+        <div className={styles.lockIcon}>
+          <span className={styles.lockText}>비공개</span>
+          <LockIcon alt="비공개 리스트 표시" />
+        </div>
+      )}
       <h2 className={styles.title}>{list.title}</h2>
       <ul className={styles.list}>
         {list.items.map((item) => (
           <CardItem key={item.id} item={item} />
         ))}
       </ul>
-      {isVisibleLockIcon && (
-        <div className={styles.lockIcon}>
-          <LockIcon alt="비공개 리스트 표시" />
-        </div>
-      )}
     </ul>
   );
 }