From d6a5b3fd5c6f206c388ffcbea241aca9964b6ab9 Mon Sep 17 00:00:00 2001
From: ParkSohyunee <sohyunee016@gmail.com>
Date: Thu, 1 Feb 2024 20:35:50 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B9=84=EA=B3=B5=EA=B0=9C=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/icons/lock_alt.svg                      |  4 ++--
 src/app/[userNickname]/_components/Card.css.ts | 11 +++++++++++
 src/app/[userNickname]/_components/Card.tsx    | 11 ++++++-----
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/public/icons/lock_alt.svg b/public/icons/lock_alt.svg
index fb49bcad..231ca711 100644
--- a/public/icons/lock_alt.svg
+++ b/public/icons/lock_alt.svg
@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 13C11.7348 13 11.4804 13.1054 11.2929 13.2929C11.1054 13.4804 11 13.7348 11 14V17C11 17.2652 11.1054 17.5196 11.2929 17.7071C11.4804 17.8946 11.7348 18 12 18C12.2652 18 12.5196 17.8946 12.7071 17.7071C12.8946 17.5196 13 17.2652 13 17V14C13 13.7348 12.8946 13.4804 12.7071 13.2929C12.5196 13.1054 12.2652 13 12 13ZM17 9V7C17 5.67392 16.4732 4.40215 15.5355 3.46447C14.5979 2.52678 13.3261 2 12 2C10.6739 2 9.40215 2.52678 8.46447 3.46447C7.52678 4.40215 7 5.67392 7 7V9C6.20435 9 5.44129 9.31607 4.87868 9.87868C4.31607 10.4413 4 11.2044 4 12V19C4 19.7956 4.31607 20.5587 4.87868 21.1213C5.44129 21.6839 6.20435 22 7 22H17C17.7956 22 18.5587 21.6839 19.1213 21.1213C19.6839 20.5587 20 19.7956 20 19V12C20 11.2044 19.6839 10.4413 19.1213 9.87868C18.5587 9.31607 17.7956 9 17 9ZM9 7C9 6.20435 9.31607 5.44129 9.87868 4.87868C10.4413 4.31607 11.2044 4 12 4C12.7956 4 13.5587 4.31607 14.1213 4.87868C14.6839 5.44129 15 6.20435 15 7V9H9V7ZM18 19C18 19.2652 17.8946 19.5196 17.7071 19.7071C17.5196 19.8946 17.2652 20 17 20H7C6.73478 20 6.48043 19.8946 6.29289 19.7071C6.10536 19.5196 6 19.2652 6 19V12C6 11.7348 6.10536 11.4804 6.29289 11.2929C6.48043 11.1054 6.73478 11 7 11H17C17.2652 11 17.5196 11.1054 17.7071 11.2929C17.8946 11.4804 18 11.7348 18 12V19Z" fill="#909090"/>
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.00001 7.58329C6.8453 7.58329 6.69693 7.64475 6.58753 7.75415C6.47814 7.86354 6.41668 8.01192 6.41668 8.16663V9.91663C6.41668 10.0713 6.47814 10.2197 6.58753 10.3291C6.69693 10.4385 6.8453 10.5 7.00001 10.5C7.15472 10.5 7.30309 10.4385 7.41249 10.3291C7.52189 10.2197 7.58334 10.0713 7.58334 9.91663V8.16663C7.58334 8.01192 7.52189 7.86354 7.41249 7.75415C7.30309 7.64475 7.15472 7.58329 7.00001 7.58329ZM9.91668 5.24996V4.08329C9.91668 3.30974 9.60939 2.56788 9.06241 2.0209C8.51542 1.47392 7.77356 1.16663 7.00001 1.16663C6.22646 1.16663 5.4846 1.47392 4.93762 2.0209C4.39063 2.56788 4.08334 3.30974 4.08334 4.08329V5.24996C3.61921 5.24996 3.1741 5.43433 2.84591 5.76252C2.51772 6.09071 2.33334 6.53583 2.33334 6.99996V11.0833C2.33334 11.5474 2.51772 11.9925 2.84591 12.3207C3.1741 12.6489 3.61921 12.8333 4.08334 12.8333H9.91668C10.3808 12.8333 10.8259 12.6489 11.1541 12.3207C11.4823 11.9925 11.6667 11.5474 11.6667 11.0833V6.99996C11.6667 6.53583 11.4823 6.09071 11.1541 5.76252C10.8259 5.43433 10.3808 5.24996 9.91668 5.24996ZM5.25001 4.08329C5.25001 3.61916 5.43438 3.17404 5.76257 2.84586C6.09076 2.51767 6.53588 2.33329 7.00001 2.33329C7.46414 2.33329 7.90926 2.51767 8.23745 2.84586C8.56564 3.17404 8.75001 3.61916 8.75001 4.08329V5.24996H5.25001V4.08329ZM10.5 11.0833C10.5 11.238 10.4386 11.3864 10.3292 11.4958C10.2198 11.6052 10.0714 11.6666 9.91668 11.6666H4.08334C3.92863 11.6666 3.78026 11.6052 3.67086 11.4958C3.56147 11.3864 3.50001 11.238 3.50001 11.0833V6.99996C3.50001 6.84525 3.56147 6.69688 3.67086 6.58748C3.78026 6.47808 3.92863 6.41663 4.08334 6.41663H9.91668C10.0714 6.41663 10.2198 6.47808 10.3292 6.58748C10.4386 6.69688 10.5 6.84525 10.5 6.99996V11.0833Z" fill="#AFB1B6"/>
 </svg>
diff --git a/src/app/[userNickname]/_components/Card.css.ts b/src/app/[userNickname]/_components/Card.css.ts
index 1cadffc5..0c685b9f 100644
--- 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
index 9978bdfa..8869df5d 100644
--- 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>
   );
 }