feat(view): 스토리라인 차트 표시 버튼에 MUI 적용 (#951)

* feat(view): convert button to mui icon button (#907)

* feat(view): change to Insights icon and apply new badge (#907)

Author: Jxxunnn

packages/view/src/App.scss

@@ -47,16 +47,6 @@ body {
   }
 }
 
-.folder-activity-flow-button {
-  padding: 0.5rem 1rem;
-  background: #007bff;
-  color: white;
-  border: none;
-  border-radius: 0.25rem;
-  cursor: pointer;
-  font-size: 0.875rem;
-}
-
 .folder-activity-flow-modal {
   position: fixed;
   top: 0;

packages/view/src/App.tsx

@@ -20,6 +20,7 @@ import type { IDESentEvents } from "types/IDESentEvents";
 import { useBranchStore, useDataStore, useGithubInfo, useLoadingStore, useThemeStore } from "store";
 import { THEME_INFO } from "components/ThemeSelector/ThemeSelector.const";
 import { NetworkGraph } from "components/NetworkGraph";
+import { InsightsButton } from "components/InsightsButton";
 
 const App = () => {
   const initRef = useRef<boolean>(false);
@@ -78,13 +79,15 @@ const App = () => {
         <BranchSelector />
         <div>
           <RefreshButton />
-          <button
-            type="button"
-            className="folder-activity-flow-button"
+          <InsightsButton
+            isNew
+            sx={{
+              width: "1.875rem",
+              height: "1.875rem",
+              color: "white",
+            }}
             onClick={handleOpenFolderActivityFlowModal}
-          >
-            Folder Activity Flow
-          </button>
+          />
         </div>
       </div>
       <div className="top-container">

packages/view/src/components/InsightsButton/InsightsButton.tsx

@@ -0,0 +1,26 @@
+import { Badge, IconButton, IconButtonProps } from "@mui/material";
+import InsightsIcon from "@mui/icons-material/Insights";
+
+type InsightsButtonProps = {
+  isNew?: boolean;
+} & IconButtonProps;
+
+const InsightsButton = ({ isNew = false, ...props }: InsightsButtonProps) => {
+  return (
+    <IconButton {...props}>
+      <Badge
+        badgeContent="NEW"
+        invisible={!isNew}
+        sx={{
+          "& .MuiBadge-badge": {
+            fontSize: "0.625rem",
+          },
+        }}
+      >
+        <InsightsIcon />
+      </Badge>
+    </IconButton>
+  );
+};
+
+export default InsightsButton;

packages/view/src/components/InsightsButton/index.ts

@@ -0,0 +1 @@
+export { default as InsightsButton } from "./InsightsButton";