[view] 툴팁 교체 및 폴더 구조 그래프 명시성 확보

packages/view/src/App.scss

@@ -1,9 +1,5 @@
 @import "styles/app";
 
-:root {
-  --primary-color: #ff8272;
-}
-
 body {
   background: $color-background;
   color: $color-white;

packages/view/src/components/@common/Author/Author.tsx

@@ -1,12 +1,15 @@
 import { Tooltip, Avatar } from "@mui/material";
-import { GITHUB_URL } from "../../../constants/constants";
+
 import type { AuthorInfo } from "types";
 
+import { GITHUB_URL } from "../../../constants/constants";
+
 const Author = ({ name, src }: AuthorInfo) => {
   return (
     <Tooltip
       title={name}
       placement="top-start"
+      PopperProps={{ sx: { ".MuiTooltip-tooltip": { bgcolor: "#3c4048" } } }}
     >
       <a
         href={`${GITHUB_URL}/${name}`}

packages/view/src/components/Detail/Detail.scss

@@ -100,7 +100,7 @@
         }
       }
 
-      .author-date {
+      .commit-date {
         display: block;
         position: relative;
         white-space: nowrap;
@@ -121,15 +121,8 @@
         }
         &:hover {
           color: var(--color-primary);
-          .commit-id__tooltip {
-            display: inline-block;
-          }
         }
       }
-
-      a:hover {
-        cursor: pointer;
-      }
     }
   }
 }
@@ -147,15 +140,3 @@
   }
 }
 
-.commit-id__tooltip {
-  display: none;
-  position: absolute;
-  background: $color-white;
-  padding: 8px 16px;
-  text-align: center;
-  font-size: $font-size-caption;
-  line-height: 1.5;
-  border-radius: 5px;
-  color: $color-dark-gray;
-  transform: translateY(20%) translateX(-120%);
-}

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

@@ -4,16 +4,17 @@ import RemoveCircleRoundedIcon from "@mui/icons-material/RemoveCircleRounded";
 import PersonRoundedIcon from "@mui/icons-material/PersonRounded";
 import CommitRoundedIcon from "@mui/icons-material/CommitRounded";
 import RestorePageRoundedIcon from "@mui/icons-material/RestorePageRounded";
+import { Tooltip } from "@mui/material";
 
 import { Author } from "components/@common/Author";
+import { useGlobalData } from "hooks";
 
 import { useCommitListHide } from "./Detail.hook";
 import { getCommitListDetail } from "./Detail.util";
 import { FIRST_SHOW_NUM } from "./Detail.const";
 import type { DetailProps, DetailSummaryProps, DetailSummaryItem } from "./Detail.type";
 
 import "./Detail.scss";
-import { useGlobalData } from "hooks";
 
 const DetailSummary = ({ commitNodeListInCluster }: DetailSummaryProps) => {
   const { authorLength, fileLength, commitLength, insertions, deletions } = getCommitListDetail({
@@ -80,7 +81,7 @@ const Detail = ({ selectedData, clusterId, authSrcMap }: DetailProps) => {
                     <span className="message">{message}</span>
                   </div>
                 </div>
-                <span className="author-date">
+                <span className="commit-date">
                   {author.names[0]}, {dayjs(commitDate).format("YY. M. DD. a h:mm")}
                 </span>
               </div>
@@ -91,8 +92,13 @@ const Detail = ({ selectedData, clusterId, authSrcMap }: DetailProps) => {
                   tabIndex={0}
                   onKeyDown={handleCommitIdCopy(id)}
                 >
-                  {id.slice(0, 6)}
-                  <span className="commit-id__tooltip">{id}</span>
+                  <Tooltip
+                    placement="right"
+                    title={id}
+                    PopperProps={{ sx: { ".MuiTooltip-tooltip": { bgcolor: "#3c4048" } } }}
+                  >
+                    <p>{`${id.slice(0, 6)}...`}</p>
+                  </Tooltip>
                 </a>
               </div>
             </li>

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

@@ -5,11 +5,11 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+}
 
-  p {
-    font-size: $font-size-title;
-    font-weight: $font-weight-semibold;
-  }
+.author-bar-chart__title {
+  font-size: $font-size-title;
+  font-weight: $font-weight-semibold;
 }
 
 .author-bar-chart__header {
@@ -39,7 +39,6 @@
 
   .axis {
     color: $color-white;
-    font-weight: $font-weight-semibold;
 
     &.x-axis {
       .tick {
@@ -82,17 +81,17 @@
 .author-bar-chart__tooltip {
   display: none;
   position: absolute;
-  background: $color-white;
   padding: 8px 16px;
-  text-align: center;
+  border-radius: 5px;
   font-size: $font-size-caption;
+  text-align: center;
   line-height: 1.5;
-  border-radius: 5px;
-  color: $color-dark-gray;
+  background-color: rgba($color-dark-gray, 0.9);
+  color: $color-white;
 
   .selected {
-    color: var(--color-primary);
     font-weight: $font-weight-semibold;
+    color: var(--color-primary);
   }
   .name {
     font-weight: $font-weight-semibold;

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

@@ -215,7 +215,7 @@ const AuthorBarChart = () => {
 
   return (
     <div className="author-bar-chart__container">
-      <p>Author Bar Chart</p>
+      <p className="author-bar-chart__title">Author Bar Chart</p>
       <div className="author-bar-chart__header">
         <FormControl
           sx={{ m: 1, minWidth: 120 }}

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

@@ -3,8 +3,8 @@
 .file-icicle-summary {
   width: 16rem;
   text {
-    fill: var(--color-primary);
     filter: invert(100) grayscale(100) contrast(100);
+    font-weight: $font-weight-semibold;
   }
 }
 

packages/view/src/components/TemporalFilter/TemporalFilter.scss

@@ -21,8 +21,8 @@
     }
 
     span {
-      color: var(--primary-color);
       filter: invert(100) grayscale(100) contrast(100);
+      font-weight: $font-weight-semibold;
     }
   }