From 622c38cacac7bcc283390f630bf86bedceaf59e0 Mon Sep 17 00:00:00 2001
From: YuHyun <puh0128@gmail.com>
Date: Thu, 7 Dec 2023 21:56:46 +0900
Subject: [PATCH] =?UTF-8?q?style:=20Graph=20>=20=EC=95=A0=EB=8B=88?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=8B=9C=EA=B0=84=20200ms?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#249]
---
 .../frontend/src/components/graph/Graph.tsx     | 17 +++++++++++------
 .../frontend/src/pages/quizzes/[id].page.tsx    | 15 +++------------
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/packages/frontend/src/components/graph/Graph.tsx b/packages/frontend/src/components/graph/Graph.tsx
index 97518714..121fd749 100644
--- 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,7 +99,8 @@ 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)
@@ -103,7 +108,7 @@ function renderD3(svgRef: RefObject<SVGGElement>, data: InitialDataProps[]) {
     .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
index a5e69654..ec978707 100644
--- 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)) {