feat: pxToRem 함수 구현 후 적용

githru · Oct 4, 2024 · 14dc5dd · 14dc5dd
1 parent f00484b
commit 14dc5dd
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
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/VerticalClusterList/ClusterGraph/Draws/drawSubGraph.ts b/packages/view/src/components/VerticalClusterList/ClusterGraph/Draws/drawSubGraph.ts
@@ -1,6 +1,8 @@
 import * as d3 from "d3";
 import type { RefObject } from "react";
 
+import { pxToRem } from "utils";
+
 import type { ClusterGraphElement } from "../ClusterGraph.type";
 import { getStartYEndY } from "../ClusterGraph.util";
 import { GRAPH_WIDTH } from "../ClusterGraph.const";
@@ -62,7 +64,7 @@ export const drawSubGraph = (
       return tooltip.style("visibility", "visible");
     })
     .on("mousemove", (event) => {
-      return tooltip.style("top", `${event.pageY - 10}px`).style("left", `${event.pageX + 10}px`);
+      return tooltip.style("top", pxToRem(event.pageY - 10)).style("left", pxToRem(event.pageX + 10));
     })
     .on("mouseout", () => {
       return tooltip.style("visibility", "hidden");

diff --git a/packages/view/src/utils/index.ts b/packages/view/src/utils/index.ts
@@ -1,2 +1,3 @@
 export * from "./debounce";
 export * from "./throttle";
+export * from "./pxToRem";
diff --git a/packages/view/src/utils/pxToRem.ts b/packages/view/src/utils/pxToRem.ts
@@ -0,0 +1 @@
+export const pxToRem = (px: number) => `${px / 16}rem`;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const pxToRem = (px: number) => `${px / 16}rem`;