[view] 상단 branch명 길이 관련 suffix 추가 (#721)

* style: edit author bar chart width (200 to 250)

* style: edit select-box styling

* feat: change select box from select tag to mui select

* style: edit style branch select dropdown (add marginTop)

* feat: edit branch-list fake-assets for branch name length test

* feat: add BranchSelector.const file for branch name slice length

* feat: add suffix (...) to branch name

* refactor(view): edit branch-list fake-assets

packages/view/src/components/BranchSelector/BranchSelector.const.ts

@@ -0,0 +1 @@
+export const SLICE_LENGTH = 15;

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

@@ -8,6 +8,8 @@ import { sendFetchAnalyzedDataCommand } from "services";
 import "./BranchSelector.scss";
 import { useLoadingStore } from "store";
 
+import { SLICE_LENGTH } from "./BranchSelector.const";
+
 const BranchSelector = () => {
   const { branchList, selectedBranch, setSelectedBranch } = useGlobalData();
   const { setLoading } = useLoadingStore((state) => state);
@@ -53,8 +55,9 @@ const BranchSelector = () => {
             <MenuItem
               key={option}
               value={option}
+              title={option}
             >
-              {option}
+              {option.length <= SLICE_LENGTH ? option : `${option.slice(0, SLICE_LENGTH)}...`}
             </MenuItem>
           ))}
         </Select>

packages/view/src/fake-assets/branch-list.json

@@ -1,4 +1,4 @@
 {
-  "branchList": ["main", "develop", "release", "origin/HEAD"],
+  "branchList": ["main", "develop", "release", "origin/HEAD", "feature/SelectedClusterGroup"],
   "head": "main"
 }