fix:Vertical Cluster List에서 여러 아이템 클릭 시, 열린 아이템의 authors 이미지들이 List 최…

…상단에 제한없이 추가되는 현상(#524)
githru · Jul 29, 2024 · f8f5c4d · f8f5c4d
1 parent 4caf8da
commit f8f5c4d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git 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
@@ -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>
   );
 };