아이콘을 전부 mui로 수정, react-icon 삭제

Author: pcwadarong

packages/view/package.json

@@ -106,7 +106,6 @@
     "nanoid": "^4.0.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-icons": "^4.4.0",
     "react-spinners": "^0.13.8",
     "reflect-metadata": "^0.1.13",
     "svg-parser": "^2.0.4",

packages/view/src/components/RefreshButton/RefreshButton.tsx

@@ -1,10 +1,9 @@
 import "reflect-metadata";
 import cn from "classnames";
-import { FiRefreshCcw } from "react-icons/fi";
+import ReplayCircleFilledRoundedIcon from "@mui/icons-material/ReplayCircleFilledRounded";
 
 import { throttle } from "utils";
 import { useGlobalData } from "hooks";
-
 import "./RefreshButton.scss";
 import { sendRefreshDataCommand } from "services";
 
@@ -22,9 +21,9 @@ const RefreshButton = () => {
       className={cn("refresh-button")}
       onClick={refreshHandler}
     >
-      <FiRefreshCcw
+      <ReplayCircleFilledRoundedIcon
         className={cn("refresh-button-icon", { "refresh-button-icon--loading": loading })}
-        stroke="white"
+        style={{ color: "white" }}
       />
     </button>
   );

packages/view/src/components/VerticalClusterList/Summary/Content/Content.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { IoIosArrowDropdownCircle, IoIosArrowDropupCircle } from "react-icons/io";
+import ArrowDropDownCircleRoundedIcon from "@mui/icons-material/ArrowDropDownCircleRounded";
 
 import { useGlobalData } from "hooks";
 
@@ -48,9 +48,9 @@ const Content = ({ content, clusterId, selectedClusterId }: ContentProps) => {
       </div>
       <div className="collapsible-icon">
         {selectedClusterId.includes(clusterId) ? (
-          <IoIosArrowDropupCircle className="show" />
+          <ArrowDropDownCircleRoundedIcon className="show" />
         ) : (
-          <IoIosArrowDropdownCircle />
+          <ArrowDropDownCircleRoundedIcon />
         )}
       </div>
     </>

packages/view/src/components/VerticalClusterList/Summary/Summary.scss

@@ -47,6 +47,7 @@
 
       & .show {
         visibility: visible;
+        transform: rotate(180deg);
       }
     }