From 9a135bde8dd980341ae588d50152aafa3ea5b4fb Mon Sep 17 00:00:00 2001
From: Sohyun Park <124856726+ParkSohyunee@users.noreply.github.com>
Date: Fri, 25 Oct 2024 10:21:45 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20(=EC=BD=94=EB=93=9C=EB=A6=AC=EB=B7=B0?=
 =?UTF-8?q?=20=EB=B0=98=EC=98=81)=20=EC=BD=9C=EB=A0=89=EC=85=98=20?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=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

---
 .../collection/[folderId]/_components/Collections.css.ts   | 3 +++
 src/app/collection/[folderId]/_components/Collections.tsx  | 7 +++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/app/collection/[folderId]/_components/Collections.css.ts b/src/app/collection/[folderId]/_components/Collections.css.ts
index 8388e63b..1ad25384 100644
--- a/src/app/collection/[folderId]/_components/Collections.css.ts
+++ b/src/app/collection/[folderId]/_components/Collections.css.ts
@@ -84,6 +84,9 @@ export const items = style({
 const item = style({
   padding: '0.45rem 0.62rem',
   borderRadius: 18,
+  display: 'flex',
+  gap: 2,
+  alignItems: 'center',
 });
 
 export const itemVariant = styleVariants({
diff --git a/src/app/collection/[folderId]/_components/Collections.tsx b/src/app/collection/[folderId]/_components/Collections.tsx
index 5c9f4a43..43e42375 100644
--- a/src/app/collection/[folderId]/_components/Collections.tsx
+++ b/src/app/collection/[folderId]/_components/Collections.tsx
@@ -40,12 +40,15 @@ export default function Collections({ folderId }: CollectionsProps) {
             <div className={styles.category}>{list.category}</div>
             <div className={styles.info}>
               <h3 className={styles.title[hasImage ? 'white' : 'black']}>{list.title}</h3>
-              <p className={styles.owner[hasImage ? 'white' : 'black']}>Sehui Park</p>
+              <p className={styles.owner[hasImage ? 'white' : 'black']}>{list.ownerNickname}</p>
             </div>
             <ul className={styles.items}>
               {list.listItems.map((item) => (
                 <li key={item.id} className={styles.itemVariant[hasImage ? 'blue' : 'white']}>
-                  <span>{item.rank}</span>
+                  <span>
+                    {item.rank}
+                    {`.`}
+                  </span>
                   <span>{item.title}</span>
                 </li>
               ))}