From f8f5c4d8d6245fe814ff50633f956ecd726bf836 Mon Sep 17 00:00:00 2001
From: MARIO <135943045+HIITMEMARIO@users.noreply.github.com>
Date: Mon, 29 Jul 2024 19:53:44 +0900
Subject: [PATCH] =?UTF-8?q?fix:Vertical=20Cluster=20List=EC=97=90=EC=84=9C?=
 =?UTF-8?q?=20=EC=97=AC=EB=9F=AC=20=EC=95=84=EC=9D=B4=ED=85=9C=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C,=20=EC=97=B4=EB=A6=B0=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=ED=85=9C=EC=9D=98=20authors=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=EB=93=A4=EC=9D=B4=20List=20=EC=B5=9C=EC=83=81?=
 =?UTF-8?q?=EB=8B=A8=EC=97=90=20=EC=A0=9C=ED=95=9C=EC=97=86=EC=9D=B4=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=EB=90=98=EB=8A=94=20=ED=98=84=EC=83=81(#524)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/FilteredAuthors/FilteredAuthors.scss    | 6 ++++++
 .../src/components/FilteredAuthors/FilteredAuthors.tsx     | 7 ++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss b/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss
index c81bd9f9..2ce0bd0e 100644
--- a/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss
+++ b/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss
@@ -6,4 +6,10 @@
   width: 100%;
   padding: 4px 6px;
   box-sizing: border-box;
+  align-items: center;
+}
+
+.selected-length {
+  font-size: 10px;
+  margin-left: 20px;
 }
diff --git a/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx b/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx
index f0b0ea7c..288fcae7 100644
--- a/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx
+++ b/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx
@@ -9,11 +9,13 @@ const FilteredAuthors = () => {
   const { selectedData } = useGlobalData();
   const authSrcMap = usePreLoadAuthorImg();
   const selectedClusters = getInitData(selectedData);
+  const filteredSelectedData = selectedClusters.reverse().slice(0, 9);
+  const selectedClustersLength = selectedClusters.slice(9);
 
   return (
     <div className="selected-container">
       {authSrcMap &&
-        selectedClusters.map((selectedCluster) => {
+        filteredSelectedData.reverse().map((selectedCluster) => {
           return selectedCluster.summary.authorNames.map((authorArray: string[]) => {
             return authorArray.map((authorName: string) => (
               <Author
@@ -24,6 +26,9 @@ const FilteredAuthors = () => {
             ));
           });
         })}
+      <div className="selected-length">
+        {selectedClusters.length > 9 ? `+ ${selectedClustersLength.length} more` : null}
+      </div>
     </div>
   );
 };