[view] 선택된 클러스터 컴포넌트 수정 (#676)

#664 refactoring * fix(view): 선택된 클러스터 목록 컴포넌트 naming 수정 * fix(view): 불필요한 return 제거
githru · Aug 29, 2024 · eab73b2 · eab73b2
1 parent 48065ce
commit eab73b2
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 30 deletions.
diff --git a/packages/view/src/components/FilteredClusters/index.ts b/packages/view/src/components/FilteredClusters/index.ts
diff --git a/...ts/FilteredClusters/FilteredClusters.scss → ...tedClusterGroup/SelectedClusterGroup.scss b/...ts/FilteredClusters/FilteredClusters.scss → ...tedClusterGroup/SelectedClusterGroup.scss
diff --git a/...nts/FilteredClusters/FilteredClusters.tsx → ...ctedClusterGroup/SelectedClusterGroup.tsx b/...nts/FilteredClusters/FilteredClusters.tsx → ...ctedClusterGroup/SelectedClusterGroup.tsx
@@ -9,21 +9,21 @@ import { selectedDataUpdater } from "components/VerticalClusterList/VerticalClus
 import { getInitData, getClusterById } from "components/VerticalClusterList/Summary/Summary.util";
 import { useGlobalData } from "hooks";
 
-import "./FilteredClusters.scss";
+import "./SelectedClusterGroup.scss";
 
-const FilteredClusters = () => {
+const SelectedClusterGroup = () => {
   const { selectedData, setSelectedData } = useGlobalData();
   const selectedClusters = getInitData(selectedData);
 
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const isOpen = Boolean(anchorEl);
+  const [menuAnchorElement, setMenuAnchorElement] = useState<null | HTMLElement>(null);
+  const isOpen = Boolean(menuAnchorElement);
 
-  const openSelectedList = (event: MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
+  const openClusterGroup = (event: MouseEvent<HTMLButtonElement>) => {
+    setMenuAnchorElement(event.currentTarget);
   };
 
-  const closeSelectedList = () => {
-    setAnchorEl(null);
+  const closeClusterGroup = () => {
+    setMenuAnchorElement(null);
   };
 
   const deselectCluster = (clusterId: number) => () => {
@@ -34,39 +34,37 @@ const FilteredClusters = () => {
   return (
     <div className="selected__content">
       <Button
-        id="selected-list-button"
-        aria-controls={isOpen ? "selected-list" : undefined}
+        id="cluster-group-button"
+        aria-controls={isOpen ? "cluster-group-box" : undefined}
         aria-expanded={isOpen ? "true" : undefined}
         aria-haspopup="true"
         sx={{ color: "inherit", padding: 0, textTransform: "none" }}
-        onClick={openSelectedList}
+        onClick={openClusterGroup}
       >
-        <p>Clusters</p>
+        <p>Selected Nodes</p>
         <ArrowDropDownRoundedIcon />
       </Button>
       <Menu
         className="selected__cluster"
-        id="selected-list"
-        anchorEl={anchorEl}
+        id="cluster-group-box"
+        anchorEl={menuAnchorElement}
         open={isOpen}
         MenuListProps={{
-          "aria-labelledby": "selected-list-button",
+          "aria-labelledby": "cluster-group-button",
         }}
-        onClose={closeSelectedList}
+        onClose={closeClusterGroup}
       >
-        {selectedClusters.map((selectedCluster) => {
-          return (
-            <li key={selectedCluster.clusterId}>
-              <Chip
-                label={selectedCluster.summary.content.message}
-                onDelete={deselectCluster(selectedCluster.clusterId)}
-              />
-            </li>
-          );
-        })}
+        {selectedClusters.map((selectedCluster) => (
+          <li key={selectedCluster.clusterId}>
+            <Chip
+              label={selectedCluster.summary.content.message}
+              onDelete={deselectCluster(selectedCluster.clusterId)}
+            />
+          </li>
+        ))}
       </Menu>
     </div>
   );
 };
 
-export default FilteredClusters;
+export default SelectedClusterGroup;
diff --git a/packages/view/src/components/SelectedClusterGroup/index.ts b/packages/view/src/components/SelectedClusterGroup/index.ts
@@ -0,0 +1 @@
+export { default as SelectedClusterGroup } from "./SelectedClusterGroup";
diff --git a/packages/view/src/components/VerticalClusterList/VerticalClusterList.tsx b/packages/view/src/components/VerticalClusterList/VerticalClusterList.tsx
@@ -1,6 +1,6 @@
 import { useGlobalData } from "hooks";
 import { FilteredAuthors } from "components/FilteredAuthors";
-import { FilteredClusters } from "components/FilteredClusters";
+import { SelectedClusterGroup } from "components/SelectedClusterGroup";
 
 import { Summary } from "./Summary";
 
@@ -14,7 +14,7 @@ const VerticalClusterList = () => {
       {selectedData.length > 0 && (
         <div className="selected__container">
           <FilteredAuthors />
-          <FilteredClusters />
+          <SelectedClusterGroup />
         </div>
       )}
       <Summary />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as SelectedClusterGroup } from "./SelectedClusterGroup";