diff --git a/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx b/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx index 288fcae7..5c094bf8 100644 --- a/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx +++ b/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx @@ -10,25 +10,35 @@ const FilteredAuthors = () => { const authSrcMap = usePreLoadAuthorImg(); const selectedClusters = getInitData(selectedData); const filteredSelectedData = selectedClusters.reverse().slice(0, 9); - const selectedClustersLength = selectedClusters.slice(9); + + const selectedClustersLength = selectedClusters.length - filteredSelectedData.length; + + // 이미 선택된 사용자를 관리 + const addedAuthors = new Set(); return (
{authSrcMap && filteredSelectedData.reverse().map((selectedCluster) => { return selectedCluster.summary.authorNames.map((authorArray: string[]) => { - return authorArray.map((authorName: string) => ( - - )); + return authorArray.map((authorName: string) => { + // 이미 추가된 사용자인지 확인 후 추가되지 않은 경우에만 추가하고 Set에 이름을 저장 + if (!addedAuthors.has(authorName)) { + addedAuthors.add(authorName); + return ( + + ); + } + // 이미 추가된 사용자인 경우 null 반환 + return null; + }); }); })} -
- {selectedClusters.length > 9 ? `+ ${selectedClustersLength.length} more` : null} -
+
{selectedClusters.length > 9 ? `+ ${selectedClustersLength} more` : null}
); };