From e339244e3043e2ac6044e52b18025fe4fe75ea31 Mon Sep 17 00:00:00 2001
From: dbwhdtjr0457 <dbwhdtjr0457@gmail.com>
Date: Tue, 5 Dec 2023 19:56:15 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20=ED=83=80=EC=9D=B4=ED=8B=80=20=EC=95=84=EB=9E=98=20?=
 =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=B6=9C?=
 =?UTF-8?q?=EB=A0=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DiaryModal/DiaryListModal.js   | 51 +++++++++++++++----
 1 file changed, 42 insertions(+), 9 deletions(-)

diff --git a/FE/src/components/DiaryModal/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js
index 4d60344..123efca 100644
--- a/FE/src/components/DiaryModal/DiaryListModal.js
+++ b/FE/src/components/DiaryModal/DiaryListModal.js
@@ -299,12 +299,24 @@ function DiaryListModal() {
                 <DiaryTitleListItemShape>
                   <div
                     id={diary.uuid}
+                    style={{
+                      width: "6rem",
+                      height: "6rem",
+                      marginRight: "1rem",
+                    }}
                     dangerouslySetInnerHTML={{
                       __html: shapeHTML,
                     }}
                   />
                 </DiaryTitleListItemShape>
-                {diary.title}
+                <DiarytitleListContent>
+                  {diary.title}
+                  <DiaryTitleTagList>
+                    {diary.tags.map((tag) => (
+                      <DiaryTitleTagItem key={tag}>#{tag}</DiaryTitleTagItem>
+                    ))}
+                  </DiaryTitleTagList>
+                </DiarytitleListContent>
               </DiaryTitleListItem>
             );
           })}
@@ -586,11 +598,12 @@ const DiaryTitleListItemWrapper = styled.div`
 
 const DiaryTitleListItem = styled.div`
   width: 100%;
-  height: 6rem;
+  height: 7rem;
   border-top: 0.5px solid #ffffff;
 
   display: flex;
   align-items: center;
+  justify-content: center;
 
   padding: 0 1rem;
   box-sizing: border-box;
@@ -609,19 +622,39 @@ const DiaryTitleListItem = styled.div`
 `;
 
 const DiaryTitleListItemShape = styled.div`
-  width: 5rem;
-  height: 5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
 
+const DiarytitleListContent = styled.div`
+  width: 100%;
+  height: 100%;
   display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   justify-content: center;
+  gap: 0.5rem;
+
+  font-size: 1.5rem;
+
+  overflow: hidden;
+`;
+
+const DiaryTitleTagList = styled.div`
+  width: 100%;
+  display: flex;
   align-items: center;
+  gap: 0.5rem;
+`;
 
-  margin-right: 1rem;
+const DiaryTitleTagItem = styled.div`
+  height: 1.5rem;
 
-  & > div {
-    width: 100%;
-    height: 100%;
-  }
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 const DiaryTitle = styled.div`