fix: CommandInput ref 깨짐

[boostcampwm2023#297]
flydog98 · Dec 13, 2023 · 252c643 · 252c643
1 parent 09a513d
commit 252c643
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 23 deletions.
diff --git a/packages/frontend/src/components/terminal/CommandInput.tsx b/packages/frontend/src/components/terminal/CommandInput.tsx
@@ -16,9 +16,13 @@ interface CommandInputProps {
   handleInput: KeyboardEventHandler;
 }
 
-type ForwardRefType = Pick<HTMLSpanElement, "focus" | "scrollIntoView">;
+export type CommandInputForwardRefType = {
+  focus: HTMLSpanElement["focus"];
+  scrollIntoView: HTMLSpanElement["scrollIntoView"];
+  clear: () => void;
+};
 
-const CommandInput = forwardRef<ForwardRefType, CommandInputProps>(
+const CommandInput = forwardRef<CommandInputForwardRefType, CommandInputProps>(
   ({ gitRef, handleInput }, ref) => {
     const inputRef = useRef<HTMLSpanElement>(null);
 
@@ -31,6 +35,14 @@ const CommandInput = forwardRef<ForwardRefType, CommandInputProps>(
         scrollIntoView(arg) {
           scrollIntoViewRef(inputRef, arg);
         },
+        clear() {
+          const $element = inputRef.current;
+          if (!$element) {
+            return;
+          }
+
+          $element.textContent = "";
+        },
       }),
       [],
     );

diff --git a/packages/frontend/src/components/terminal/Terminal.tsx b/packages/frontend/src/components/terminal/Terminal.tsx
@@ -3,7 +3,7 @@ import { type KeyboardEventHandler, forwardRef } from "react";
 import { ENTER_KEY } from "../../constants/event";
 import type { TerminalContentType } from "../../types/terminalType";
 
-import CommandInput from "./CommandInput";
+import CommandInput, { CommandInputForwardRefType } from "./CommandInput";
 import * as styles from "./Terminal.css";
 import TerminalContent from "./TerminalContent";
 
@@ -13,7 +13,7 @@ interface TerminalProps {
   onTerminal: (input: string) => void;
 }
 
-const Terminal = forwardRef<HTMLSpanElement, TerminalProps>(
+const Terminal = forwardRef<CommandInputForwardRefType, TerminalProps>(
   ({ gitRef, contentArray, onTerminal }, ref) => {
     const handleStandardInput: KeyboardEventHandler = async (event) => {
       const {

diff --git a/packages/frontend/src/pages/quizzes/[id].page.tsx b/packages/frontend/src/pages/quizzes/[id].page.tsx
@@ -1,7 +1,7 @@
 import axios, { isAxiosError } from "axios";
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from "next";
 import { useRouter } from "next/router";
-import { RefObject, useEffect, useReducer, useRef, useState } from "react";
+import { useEffect, useReducer, useRef, useState } from "react";
 
 import { quizAPI } from "../../apis/quiz";
 import { Editor } from "../../components/editor";
@@ -10,6 +10,7 @@ import { Graph } from "../../components/graph";
 import { SolvedModal, useSolvedModal } from "../../components/quiz";
 import { QuizGuide } from "../../components/quiz/QuizGuide";
 import { Terminal } from "../../components/terminal";
+import { CommandInputForwardRefType } from "../../components/terminal/CommandInput";
 import { BROWSWER_PATH } from "../../constants/path";
 import {
   UserQuizStatusActionType,
@@ -25,7 +26,6 @@ import {
 } from "../../reducers/terminalReducer";
 import { Categories, Quiz, QuizGitGraphCommit } from "../../types/quiz";
 import { TerminalContentType } from "../../types/terminalType";
-import { focusRef, scrollIntoViewRef } from "../../utils/refObject";
 import { isString } from "../../utils/typeGuard";
 
 import * as styles from "./quiz.css";
@@ -44,7 +44,7 @@ export default function QuizPage({ quiz }: { quiz: Quiz }) {
   const [{ terminalMode, editorFile, contentArray }, terminalDispatch] =
     useReducer(terminalReducer, initialTerminalState);
 
-  const terminalInputRef = useRef<HTMLSpanElement>(null);
+  const terminalInputRef = useRef<CommandInputForwardRefType>(null);
 
   const fetchGitGraphDataRef = useRef(async (curId: number) => {
     try {
@@ -131,8 +131,8 @@ export default function QuizPage({ quiz }: { quiz: Quiz }) {
       await quizAPI.resetQuizById(numId);
       fetchGitGraphDataRef?.current(numId);
       terminalDispatch({ type: TerminalActionTypes.reset });
-      clearTextContent(terminalInputRef);
-      focusRef(terminalInputRef);
+      terminalInputRef.current?.clear();
+      terminalInputRef.current?.focus();
       userQuizStatusDispatcher({
         type: UserQuizStatusActionType.ResetQuizById,
         id: numId,
@@ -150,14 +150,17 @@ export default function QuizPage({ quiz }: { quiz: Quiz }) {
       fetchGitGraphDataRef?.current(+id);
     }
     terminalDispatch({ type: TerminalActionTypes.reset });
-    clearTextContent(terminalInputRef);
-    focusRef(terminalInputRef);
+    terminalInputRef.current?.clear();
+    terminalInputRef.current?.focus();
   }, [id]);
 
   useEffect(() => {
-    scrollIntoViewRef(terminalInputRef);
-    clearTextContent(terminalInputRef);
-    focusRef(terminalInputRef);
+    const $terminalInput = terminalInputRef.current;
+    if (!$terminalInput) return;
+
+    $terminalInput.scrollIntoView();
+    $terminalInput.clear();
+    $terminalInput.focus();
   }, [contentArray]);
 
   const { barRef, topRef, handleBarHover } = useResizableSplitView();
@@ -239,15 +242,6 @@ export const getStaticPaths = (async () => {
   return { paths, fallback: "blocking" };
 }) satisfies GetStaticPaths;
 
-function clearTextContent<T extends Element>(ref: RefObject<T>) {
-  const $element = ref.current;
-  if (!$element) {
-    return;
-  }
-
-  $element.textContent = "";
-}
-
 function isEditorMode(terminalMode: "editor" | "command") {
   return terminalMode === "editor";
 }