[view] px단위 rem으로 수정 (#751)

* refactor: px to rem * fix: px -> rem * feat: pxToRem 함수 구현 후 적용 * fix: px to rem
githru · Oct 6, 2024 · ef89f96 · ef89f96
1 parent 63eed01
commit ef89f96
Show file tree

Hide file tree

Showing 21 changed files with 93 additions and 88 deletions.
diff --git a/packages/view/src/App.scss b/packages/view/src/App.scss
@@ -8,30 +8,30 @@ body {
 .header-container {
   position: relative;
   display: flex;
-  height: 60px;
+  height: 3.75rem;
   justify-content: space-between;
   align-items: center;
-  padding: 0 12px 0 20px;
+  padding: 0 0.75rem 0 1.25rem;
 }
 
 .top-container {
-  height: 220px;
+  height: 13.75rem;
 }
 
 .middle-container {
   display: flex;
-  height: calc(100vh - 200px);
-  padding: 20px;
+  height: calc(100vh - 12.5rem);
+  padding: 1.25rem;
 }
 
 .no-commits-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: calc(100vh - 350px);
+  height: calc(100vh - 21.875rem);
 
   h1 {
-    margin: 40px 0 0 0;
+    margin: 2.5rem 0 0 0;
   }
 }
diff --git a/packages/view/src/components/BranchSelector/BranchSelector.scss b/packages/view/src/components/BranchSelector/BranchSelector.scss
@@ -8,9 +8,9 @@
   font-weight: $font-weight-semibold;
 
   & &__select-box {
-    border: 1px solid $color-white;
+    border: 0.0625rem solid $color-white;
     color: $color-white;
-    height: 30px;
+    height: 1.875rem;
 
     & .MuiSvgIcon-root {
       color: $color-white;

diff --git a/packages/view/src/components/BranchSelector/BranchSelector.tsx b/packages/view/src/components/BranchSelector/BranchSelector.tsx
@@ -37,7 +37,7 @@ const BranchSelector = () => {
               sx: {
                 backgroundColor: "#212121",
                 color: "white",
-                marginTop: "1px",
+                marginTop: "0.0625rem",
                 "& .MuiMenuItem-root": {
                   backgroundColor: "#212121 !important ",
                   "&:hover": {

diff --git a/packages/view/src/components/Detail/Detail.scss b/packages/view/src/components/Detail/Detail.scss
@@ -10,7 +10,7 @@
     margin-right: 1rem;
     flex-grow: 10;
     height: 0;
-    border: 1px solid $color-white;
+    border: 0.0625rem solid $color-white;
   }
 
   .detail__summary-list {
@@ -19,10 +19,10 @@
 
     .detail__summary-item {
       position: relative;
-      margin-right: 10px;
+      margin-right: 0.625rem;
       display: inline-flex;
       align-items: center;
-      gap: 4px;
+      gap: 0.25rem;
 
       &:last-child {
         margin-right: 0;
@@ -48,8 +48,8 @@
 .detail__commit-list {
   display: flex;
   flex-direction: column;
-  row-gap: 7px;
-  padding: 20px;
+  row-gap: 0.4375rem;
+  padding: 1.25rem;
   font-size: $font-size-body;
 
   .detail__commit-item {
@@ -64,7 +64,7 @@
       justify-content: space-between;
       align-items: center;
       width: 100%;
-      padding-left: 5px;
+      padding-left: 0.3125rem;
 
       .commit-item__avatar-message {
         display: flex;
@@ -75,7 +75,7 @@
           position: relative;
           overflow: visible;
           flex-grow: 1;
-          padding-right: 50px;
+          padding-right: 3.125rem;
           width: auto;
 
           .commit-item__message {
@@ -84,7 +84,7 @@
             -webkit-line-clamp: 1;
             overflow: hidden;
             color: $color-white;
-            margin: 0 4px 0 15px;
+            margin: 0 0.25rem 0 0.9375rem;
 
             &:hover {
               display: block;
@@ -93,8 +93,8 @@
               position: absolute;
               z-index: 10;
               background-color: $color-dark-gray;
-              padding-bottom: 5px;
-              top: -7px;
+              padding-bottom: 0.3125rem;
+              top: -0.4375rem;
             }
           }
         }
@@ -142,4 +142,3 @@
     color: $color-light-gray;
   }
 }
-
diff --git a/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss b/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss
@@ -3,7 +3,7 @@
 .filtered-authors {
   display: flex;
   align-items: center;
-  column-gap: 10px;
+  column-gap: 0.625rem;
 
   .filtered-authors__label {
     font-size: $font-size-title;
@@ -14,6 +14,6 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 5px;
+    gap: 0.3125rem;
   }
 }
diff --git a/packages/view/src/components/RefreshButton/RefreshButton.scss b/packages/view/src/components/RefreshButton/RefreshButton.scss
@@ -1,6 +1,6 @@
 .refresh-button {
-  width: 30px;
-  height: 30px;
+  width: 1.875rem;
+  height: 1.875rem;
 }
 
 .refresh-button__icon {

diff --git a/packages/view/src/components/SelectedClusterGroup/SelectedClusterGroup.scss b/packages/view/src/components/SelectedClusterGroup/SelectedClusterGroup.scss
@@ -4,7 +4,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  column-gap: 10px;
+  column-gap: 0.625rem;
 
   &__label {
     display: flex;
@@ -16,28 +16,28 @@
     font-weight: $font-weight-semibold;
     cursor: pointer;
   }
-  
+
   &__list {
     position: absolute;
     top: 2rem;
-    right: -10px;
-    max-height: 240px;
+    right: -0.625rem;
+    max-height: 15rem;
     overflow-y: auto;
-    padding: 5px;
+    padding: 0.3125rem;
     background-color: $color-dark-gray;
     border-radius: 0.5rem;
-    box-shadow: 0px 0px 10px $color-background;
+    box-shadow: 0rem 0rem 0.625rem $color-background;
     z-index: 10;
 
     &::-webkit-scrollbar {
       width: 0;
     }
 
     .selected-clusters__item {
-      width: 200px;
+      width: 12.5rem;
       text-overflow: ellipsis;
       justify-content: space-between;
-      margin: 5px;
+      margin: 0.3125rem;
       color: $color-white;
       background-color: #4f5662;
     }

diff --git a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss
@@ -17,10 +17,10 @@
   }
 
   & &__select-box {
-    border: 1px solid $color-white;
+    border: 0.0625rem solid $color-white;
     color: $color-white;
-    height: 25px;
-    width: 100px;
+    height: 1.5625rem;
+    width: 6.25rem;
     font-size: $font-size-caption;
 
     & .MuiSvgIcon-root {
@@ -34,7 +34,7 @@
 
   &__chart {
     overflow: visible;
-    margin: 20px 40px 40px;
+    margin: 1.25rem 2.5rem 2.5rem;
   }
 
   &__axis {
@@ -44,7 +44,7 @@
       .tick {
         display: none;
       }
-      
+
       .x-axis__label {
         fill: $color-white;
       }
@@ -78,8 +78,8 @@
   &__tooltip {
     display: none;
     position: absolute;
-    padding: 8px 16px;
-    border-radius: 5px;
+    padding: 0.5rem 1rem;
+    border-radius: 0.3125rem;
     font-size: $font-size-caption;
     text-align: center;
     line-height: 1.5;

diff --git a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx
@@ -7,6 +7,7 @@ import { FormControl, MenuItem, Select } from "@mui/material";
 import type { ClusterNode, AuthorInfo } from "types";
 import { useGlobalData } from "hooks";
 import { getAuthorProfileImgSrc } from "utils/author";
+import { pxToRem } from "utils/pxToRem";
 
 import { useGetSelectedData } from "../Statistics.hook";
 
@@ -60,7 +61,7 @@ const AuthorBarChart = () => {
     const xAxisGroup = svg
       .append("g")
       .attr("class", "author-bar-chart__axis x-axis")
-      .style("transform", `translateY(${DIMENSIONS.height}px)`);
+      .style("transform", `translateY(${pxToRem(DIMENSIONS.height)})`);
     const yAxisGroup = svg.append("g").attr("class", "author-bar-chart__axis y-axis");
     const barGroup = svg.append("g").attr("class", "author-bar-chart__container");
 
@@ -88,15 +89,15 @@ const AuthorBarChart = () => {
     xAxisGroup
       .append("text")
       .attr("class", "x-axis__label")
-      .style("transform", `translate(${DIMENSIONS.width / 2}px, ${DIMENSIONS.margins - 10}px)`)
+      .style("transform", `translate(${pxToRem(DIMENSIONS.width / 2)}, ${pxToRem(DIMENSIONS.margins - 10)})`)
       .text(`${metric} # / Total ${metric} # (%)`);
 
     // Event handler
     const handleMouseOver = (e: MouseEvent<SVGRectElement | SVGTextElement>, d: AuthorDataType) => {
       tooltip
         .style("display", "inline-block")
-        .style("left", `${e.pageX - 70}px`)
-        .style("top", `${e.pageY - 120}px`)
+        .style("left", pxToRem(e.pageX - 70))
+        .style("top", pxToRem(e.pageY - 120))
         .html(
           `
           <p class="author-bar-chart__name">${d.name}</p>
@@ -112,7 +113,7 @@ const AuthorBarChart = () => {
     };
 
     const handleMouseMove = (e: MouseEvent<SVGRectElement | SVGTextElement>) => {
-      tooltip.style("left", `${e.pageX - 70}px`).style("top", `${e.pageY - 120}px`);
+      tooltip.style("left", pxToRem(e.pageX - 70)).style("top", pxToRem(e.pageY - 120));
     };
     const handleMouseOut = () => {
       tooltip.style("display", "none");
@@ -231,11 +232,11 @@ const AuthorBarChart = () => {
             MenuProps={{
               PaperProps: {
                 sx: {
-                  marginTop: "1px",
+                  marginTop: "0.0625rem",
                   backgroundColor: "#212121",
                   color: "white",
                   "& .MuiMenuItem-root": {
-                    fontSize: "12px",
+                    fontSize: "0.75rem",
                     backgroundColor: "#212121 !important ",
                     "&:hover": {
                       backgroundColor: "#333333 !important",

diff --git a/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.tsx b/packages/view/src/components/Statistics/FileIcicleSummary/FileIcicleSummary.tsx
@@ -3,6 +3,8 @@ import type { HierarchyRectangularNode } from "d3";
 import type { RefObject } from "react";
 import { useEffect, useRef } from "react";
 
+import { pxToRem } from "utils";
+
 import { PRIMARY_COLOR_VARIABLE_NAME } from "../../../constants/constants";
 import { useGetSelectedData } from "../Statistics.hook";
 
@@ -44,7 +46,7 @@ const drawIcicleTree = async ($target: RefObject<SVGSVGElement>, data: FileChang
   const svg = d3
     .select($target.current)
     .attr("viewBox", [0, 0, WIDTH, HEIGHT])
-    .style("font", `${FONT_SIZE}px sans-serif`);
+    .style("font", `${pxToRem(FONT_SIZE)} sans-serif`);
 
   // Position each partitions
   const cell = svg

diff --git a/packages/view/src/components/Statistics/Statistics.scss b/packages/view/src/components/Statistics/Statistics.scss
@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: center;
   gap: 5vh;
-  padding: 0 20px 20px;
+  padding: 0 1.25rem 1.25rem;
   overflow-y: scroll;
 }
 

diff --git a/packages/view/src/components/TemporalFilter/LineChart.scss b/packages/view/src/components/TemporalFilter/LineChart.scss
@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  font-size: 20px;
+  font-size: 1.25rem;
   margin: auto 0;
 
   &__chart {

diff --git a/packages/view/src/components/TemporalFilter/TemporalFilter.scss b/packages/view/src/components/TemporalFilter/TemporalFilter.scss
@@ -45,10 +45,10 @@
 
   .date-from,
   .date-to {
-    margin: 0 12px 0 8px;
-    padding: 2px;
-    border: solid 1px rgba(255, 255, 255, 0.22);
-    border-radius: 3px;
+    margin: 0 0.75rem 0 0.5rem;
+    padding: 0.125rem;
+    border: solid 0.0625rem rgba(255, 255, 255, 0.22);
+    border-radius: 0.1875rem;
     color: $color-white;
     background: rgba(255, 255, 255, 0.09);
     font-weight: $font-weight-light;