style: Graph > 애니메이션 시간 200ms로 변경

[#249]
boostcampwm2023 · Dec 7, 2023 · 622c38c · 622c38c
1 parent 97c63fc
commit 622c38c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 18 deletions.
diff --git a/packages/frontend/src/components/graph/Graph.tsx b/packages/frontend/src/components/graph/Graph.tsx
@@ -9,6 +9,8 @@ import { InitialDataProps, parsingMultipleParents } from "./parsing";
 
 const { grey500 } = color.$scale;
 
+const DURATION = 200;
+
 type AddedLineType = {
   source: d3.HierarchyPointNode<InitialDataProps>;
   target: d3.HierarchyPointNode<InitialDataProps>;
@@ -47,13 +49,14 @@ function renderD3(svgRef: RefObject<SVGGElement>, data: InitialDataProps[]) {
     .join(
       (enter) => enter.append("text").style("opacity", 0),
       (update) => update,
-      (exit) => exit.transition().duration(1000).style("opacity", 0).remove(),
+      (exit) =>
+        exit.transition().duration(DURATION).style("opacity", 0).remove(),
     )
     .text((d) => d.data.message)
     .attr("x", (d) => d.x + 20)
     .attr("y", (d) => d.y + 5)
     .transition()
-    .duration(1000)
+    .duration(DURATION)
     .style("opacity", 1);
 
   additionalLinks.forEach(({ id, parentId }) => {
@@ -76,7 +79,8 @@ function renderD3(svgRef: RefObject<SVGGElement>, data: InitialDataProps[]) {
     .join(
       (enter) => enter.append("line").style("opacity", 0),
       (update) => update,
-      (exit) => exit.transition().duration(1000).style("opacity", 0).remove(),
+      (exit) =>
+        exit.transition().duration(DURATION).style("opacity", 0).remove(),
     )
     .attr("x1", (d) => d.source.x)
     .attr("y1", (d) => d.source.y)
@@ -85,7 +89,7 @@ function renderD3(svgRef: RefObject<SVGGElement>, data: InitialDataProps[]) {
     .attr("stroke", grey500)
     .attr("stroke-width", 1)
     .transition()
-    .duration(1000)
+    .duration(DURATION)
     .style("opacity", 1);
 
   svg
@@ -95,15 +99,16 @@ function renderD3(svgRef: RefObject<SVGGElement>, data: InitialDataProps[]) {
     .join(
       (enter) => enter.append("circle").style("opacity", 0),
       (update) => update,
-      (exit) => exit.transition().duration(1000).style("opacity", 0).remove(),
+      (exit) =>
+        exit.transition().duration(DURATION).style("opacity", 0).remove(),
     )
     .attr("cx", (d) => d.x)
     .attr("cy", (d) => d.y)
     .attr("r", 13)
     .attr("stroke", grey500)
     .attr("stroke-width", 1)
     .transition()
-    .duration(1000)
+    .duration(DURATION)
     .style("opacity", 1)
     .attr(
       "fill",

diff --git a/packages/frontend/src/pages/quizzes/[id].page.tsx b/packages/frontend/src/pages/quizzes/[id].page.tsx
@@ -1,14 +1,7 @@
 import axios, { isAxiosError } from "axios";
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from "next";
 import { useRouter } from "next/router";
-import {
-  RefObject,
-  useCallback,
-  useEffect,
-  useReducer,
-  useRef,
-  useState,
-} from "react";
+import { RefObject, useEffect, useReducer, useRef, useState } from "react";
 
 import { quizAPI } from "../../apis/quiz";
 import { Editor } from "../../components/editor";
@@ -46,16 +39,14 @@ export default function QuizPage({ quiz }: { quiz: Quiz }) {
 
   const terminalInputRef = useRef<HTMLSpanElement>(null);
 
-  const fetchGitGraphData = useCallback(async (curId: number) => {
+  const fetchGitGraphDataRef = useRef(async (curId: number) => {
     try {
       const { graph: nextGraph } = await quizAPI.getGraph(curId);
       setGitGraphData(nextGraph);
     } catch (error) {
       handleResponseError(error);
     }
-  }, []);
-
-  const fetchGitGraphDataRef = useRef(fetchGitGraphData);
+  });
 
   const handleTerminal = async (input: string) => {
     if (!isString(id)) {