refactor(view): ThemeSelector 리팩토링 및 공통 MUI 컴포넌트 정의

packages/view/src/App.tsx

@@ -10,10 +10,9 @@ import { useAnalayzedData } from "hooks";
 import { RefreshButton } from "components/RefreshButton";
 import type { IDESentEvents } from "types/IDESentEvents";
 import { useBranchStore, useDataStore, useGithubInfo, useLoadingStore, useThemeStore } from "store";
-import { THEME_INFO } from "components/ThemeSelector/ThemeSelector.const";
 import { initializeIDEConnection, sendFetchAnalyzedDataCommand } from "services";
 import { COMMIT_COUNT_PER_PAGE } from "constants/constants";
-import { createMuiTheme } from "theme";
+import { createMuiTheme, THEME_CONFIG } from "theme";
 
 const App = () => {
   const initRef = useRef<boolean>(false);
@@ -57,7 +56,7 @@ const App = () => {
   if (loading) {
     return (
       <BounceLoader
-        color={THEME_INFO[theme as keyof typeof THEME_INFO].colors.primary}
+        color={THEME_CONFIG[theme].colors.primary.main}
         loading={loading}
         cssOverride={{
           position: "fixed",

packages/view/src/components/BranchSelector/BranchSelector.scss

@@ -6,18 +6,4 @@
   gap: 1rem;
   align-items: center;
   font-weight: $font-weight-semibold;
-
-  & &__select-box {
-    border: 0.0625rem solid var(--color-white);
-    color: var(--color-white);
-    height: 1.875rem;
-
-    & .MuiSvgIcon-root {
-      color: var(--color-white);
-    }
-
-    &.Mui-focused .MuiOutlinedInput-notchedOutline {
-      border: none;
-    }
-  }
 }

packages/view/src/components/BranchSelector/BranchSelector.tsx

@@ -6,9 +6,9 @@ import Select from "@mui/material/Select";
 import { sendFetchAnalyzedDataCommand } from "services";
 import "./BranchSelector.scss";
 import { useBranchStore, useLoadingStore } from "store";
+import { COMMIT_COUNT_PER_PAGE } from "constants/constants";
 
 import { SLICE_LENGTH } from "./BranchSelector.const";
-import { COMMIT_COUNT_PER_PAGE } from "constants/constants";
 
 const BranchSelector = () => {
   const { branchList, selectedBranch, setSelectedBranch } = useBranchStore();
@@ -23,33 +23,12 @@ const BranchSelector = () => {
   return (
     <div className="branch-selector">
       <p>Branches: </p>
-      <FormControl
-        sx={{ m: 1, minWidth: 120 }}
-        size="small"
-      >
+      <FormControl>
         <Select
           value={selectedBranch}
           onChange={handleChangeSelect}
           className="branch-selector__select-box"
           inputProps={{ "aria-label": "Without label" }}
-          MenuProps={{
-            PaperProps: {
-              sx: {
-                backgroundColor: "#212121",
-                color: "white",
-                marginTop: "0.0625rem",
-                "& .MuiMenuItem-root": {
-                  backgroundColor: "#212121 !important ",
-                  "&:hover": {
-                    backgroundColor: "#333333 !important",
-                  },
-                },
-                "& .MuiMenuItem-root.Mui-selected": {
-                  backgroundColor: "#333333 !important",
-                },
-              },
-            },
-          }}
         >
           {branchList?.map((option) => (
             <MenuItem

packages/view/src/components/Common/Author/Author.const.ts

@@ -4,9 +4,3 @@ export const AVATAR_STYLE = {
   minWidth: 30,
   minHeight: 30,
 } as const;
-
-export const TOOLTIP_STYLE = {
-  ".MuiTooltip-tooltip": {
-    bgcolor: "#3c4048",
-  },
-} as const;

packages/view/src/components/Common/Author/Author.tsx

@@ -1,10 +1,9 @@
 import { Tooltip, Avatar } from "@mui/material";
 
 import type { AuthorInfo } from "types";
-
 import { GITHUB_URL } from "constants/constants";
 
-import { AVATAR_STYLE, TOOLTIP_STYLE } from "./Author.const";
+import { AVATAR_STYLE } from "./Author.const";
 
 const isGitHubUser = (src: string): boolean => {
   return src.startsWith(GITHUB_URL);
@@ -60,7 +59,6 @@ const Author = ({ name, src }: AuthorInfo) => {
     <Tooltip
       title={name}
       placement="top-start"
-      PopperProps={{ sx: TOOLTIP_STYLE }}
     >
       <AvatarComponent
         name={name}

packages/view/src/components/Detail/Detail.tsx

@@ -187,10 +187,8 @@ function CommitItem({
                     className="commit-id__link"
                   >
                     <Tooltip
-                      className="commit-id__tooltip"
                       placement="right"
                       title={id}
-                      PopperProps={{ sx: { ".MuiTooltip-tooltip": { bgcolor: "#3c4048" } } }}
                     >
                       <p>{id.slice(0, 6)}</p>
                     </Tooltip>

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

@@ -23,7 +23,6 @@ const RefreshButton = () => {
       className={cn("refresh-button")}
       onClick={refreshHandler}
       disabled={loading}
-      sx={{ color: "white" }}
     >
       <ReplayCircleFilledRoundedIcon
         className={cn("refresh-button__icon", { "refresh-button__icon--loading": loading })}

packages/view/src/components/SelectedClusterGroup/SelectedClusterGroup.scss

@@ -18,14 +18,18 @@
   }
 
   &__list {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
     position: absolute;
     top: 2rem;
     right: -0.625rem;
     max-height: 15rem;
     overflow-y: auto;
-    padding: 0.3125rem;
+    padding: $spacing-xs;
     background-color: var(--color-grey-100);
-    border-radius: 0.5rem;
+    border: 1px solid var(--color-grey-300);
+    border-radius: $radius-xs;
     box-shadow: 0rem 0rem 0.625rem $color-background;
     z-index: 10;
 
@@ -36,10 +40,6 @@
     .selected-clusters__item {
       width: 12.5rem;
       text-overflow: ellipsis;
-      justify-content: space-between;
-      margin: 0.3125rem;
-      color: var(--color-white);
-      background-color: var(--color-grey-300);
     }
   }
 }

packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss

@@ -12,29 +12,16 @@
   }
 
   &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     width: 100%;
     text-align: right;
   }
 
-  & &__select-box {
-    border: 0.0625rem solid var(--color-white);
-    color: var(--color-white);
-    height: 1.5625rem;
-    width: 6.25rem;
-    font-size: $font-size-caption;
-
-    & .MuiSvgIcon-root {
-      color: var(--color-white);
-    }
-
-    &.Mui-focused .MuiOutlinedInput-notchedOutline {
-      border: none;
-    }
-  }
-
   &__chart {
     overflow: visible;
-    margin: 1.25rem 2.5rem 2.5rem;
+    margin: $spacing-2xl $spacing-3xl $spacing-3xl;
   }
 
   &__axis {
@@ -78,8 +65,8 @@
   &__tooltip {
     display: none;
     position: absolute;
-    padding: 0.5rem 1rem;
-    border-radius: 0.3125rem;
+    padding: $spacing-sm $spacing-lg;
+    border-radius: $radius-xs;
     font-size: $font-size-caption;
     text-align: center;
     line-height: 1.5;

packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx

@@ -269,36 +269,13 @@ const AuthorBarChart = () => {
 
   return (
     <div className="author-bar-chart">
-      <p className="author-bar-chart__title">Author Bar Chart</p>
       <div className="author-bar-chart__header">
-        <FormControl
-          sx={{ m: 1, minWidth: 120 }}
-          size="small"
-        >
+        <p className="author-bar-chart__title">Author Bar Chart</p>
+        <FormControl>
           <Select
-            className="author-bar-chart__select-box"
             value={metric}
             onChange={handleChangeMetric}
             inputProps={{ "aria-label": "Without label" }}
-            MenuProps={{
-              PaperProps: {
-                sx: {
-                  marginTop: "0.0625rem",
-                  backgroundColor: "#212121",
-                  color: "white",
-                  "& .MuiMenuItem-root": {
-                    fontSize: "0.75rem",
-                    backgroundColor: "#212121 !important ",
-                    "&:hover": {
-                      backgroundColor: "#333333 !important",
-                    },
-                  },
-                  "& .MuiMenuItem-root.Mui-selected": {
-                    backgroundColor: "#333333 !important",
-                  },
-                },
-              },
-            }}
           >
             {METRIC_TYPE.map((option) => (
               <MenuItem

packages/view/src/components/ThemeSelector/ThemeSelector.scss

@@ -11,20 +11,21 @@
     position: absolute;
     top: 2.5rem;
     left: 0;
-    padding: 1.25rem;
+    padding: $spacing-xl;
     background-color: var(--color-grey-100);
-    border-radius: 0.3rem 1.5rem 1.5rem 1.5rem;
+    border-radius: $radius-xs $radius-md $radius-md $radius-md;
     z-index: 10;
 
     display: flex;
     flex-direction: column;
-    gap: 0.625rem;
+    gap: $spacing-md;
   }
 
   &__list {
     display: flex;
     justify-content: space-between;
-    gap: 0.125rem;
+    align-items: center;
+    gap: $spacing-sm;
   }
 
   &__header {
@@ -39,15 +40,16 @@
   flex-direction: column;
   align-items: center;
   justify-items: center;
-  gap: 1rem;
-  padding: 0.625rem;
+  gap: $spacing-lg;
+  min-width: 6.75rem;
+  padding: $spacing-md;
   box-sizing: border-box;
 
   &:hover,
   &--selected {
     @extend .theme-icon;
-    background-color: #4f5662;
-    border-radius: 0.625rem;
+    background-color: var(--color-grey-300);
+    border-radius: $radius-md;
     cursor: pointer;
   }
 
@@ -73,5 +75,6 @@
   &__title {
     font-size: $font-size-body;
     font-weight: $font-weight-regular;
+    white-space: nowrap;
   }
 }