refactor: focusRef 유틸함수 분리

[#281]
boostcampwm2023 · Dec 13, 2023 · 79dbec2 · 79dbec2
1 parent 3759802
commit 79dbec2
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/packages/frontend/src/components/editor/Editor.tsx b/packages/frontend/src/components/editor/Editor.tsx
@@ -7,6 +7,7 @@ import {
 
 import { ENTER_KEY, ESC_KEY } from "../../constants/event";
 import { createClassManipulator } from "../../utils/classList";
+import { focusRef } from "../../utils/refObject";
 
 import * as styles from "./Editor.css";
 import { useTextareaCursor } from "./useTextareaCursor";
@@ -46,7 +47,7 @@ export function Editor({ initialFile, onSubmit }: EditorProps) {
     setMode("command");
     setInputValue(nextInputValue);
     setInputReadonly(true);
-    textareaRef.current?.focus();
+    focusRef(textareaRef);
   };
 
   const handleTextareaOnChange: ChangeEventHandler<HTMLTextAreaElement> = (
@@ -71,7 +72,7 @@ export function Editor({ initialFile, onSubmit }: EditorProps) {
 
         setInputValue(key);
         setInputReadonly(false);
-        inputRef.current?.focus();
+        focusRef(inputRef);
         return;
       }
 

diff --git a/packages/frontend/src/pages/quizzes/[id].page.tsx b/packages/frontend/src/pages/quizzes/[id].page.tsx
@@ -21,6 +21,7 @@ import {
 } from "../../reducers/terminalReducer";
 import { Categories, Quiz, QuizGitGraphCommit } from "../../types/quiz";
 import { TerminalContentType } from "../../types/terminalType";
+import { focusRef } from "../../utils/refObject";
 import { scrollIntoView } from "../../utils/scroll";
 import { isString } from "../../utils/typeGuard";
 
@@ -112,7 +113,7 @@ export default function QuizPage({ quiz }: { quiz: Quiz }) {
       fetchGitGraphDataRef?.current(numId);
       terminalDispatch({ type: TerminalActionTypes.reset });
       clearTextContent(terminalInputRef);
-      terminalInputRef.current?.focus();
+      focusRef(terminalInputRef);
       toast.success("문제가 성공적으로 초기화되었습니다!");
     } catch (error) {
       toast.error(
@@ -127,13 +128,13 @@ export default function QuizPage({ quiz }: { quiz: Quiz }) {
     }
     terminalDispatch({ type: TerminalActionTypes.reset });
     clearTextContent(terminalInputRef);
-    terminalInputRef.current?.focus();
+    focusRef(terminalInputRef);
   }, [id]);
 
   useEffect(() => {
     scrollIntoView(terminalInputRef);
     clearTextContent(terminalInputRef);
-    terminalInputRef.current?.focus();
+    focusRef(terminalInputRef);
   }, [contentArray]);
 
   const { barRef, topRef, handleBarHover } = useResizableSplitView();

diff --git a/packages/frontend/src/utils/refObject.ts b/packages/frontend/src/utils/refObject.ts
@@ -0,0 +1,5 @@
+import { RefObject } from "react";
+
+export function focusRef<T extends HTMLOrSVGElement>(ref: RefObject<T>) {
+  ref.current?.focus();
+}