[Refactor]: useFocusInput 다른 input에서도 쓸 수 있도록 변경

package.json

@@ -75,5 +75,6 @@
   },
   "lint-staged": {
     "./src/**/*.{js,jsx,ts,tsx}": "eslint --cache --fix"
-  }
+  },
+  "packageManager": "[email protected]"
 }

src/pages/GamePage/GameCode/CodeForm.tsx

@@ -18,6 +18,7 @@ interface CodeFormProps {
   handleUpdateProblem: () => void;
   handleRoundFinish: () => void;
   handleUpdateCodeItem: () => void;
+  isRoundWaiting: boolean;
 }
 
 const CHAR_STATE = {
@@ -38,13 +39,14 @@ const CodeForm = ({
   handleUpdateProblem,
   handleRoundFinish,
   handleUpdateCodeItem,
+  isRoundWaiting,
 }: CodeFormProps) => {
   const { register, handleSubmit, setValue, getValues } = useForm<{
     ['code']: string;
   }>();
   const { ref } = register('code');
 
-  const { focusInput } = useFocusInput();
+  const { focusInput } = useFocusInput(isRoundWaiting);
 
   const currentPublishIndex = useRef(0);
 

src/pages/GamePage/GameCode/CodeFormContainer.tsx

@@ -18,6 +18,7 @@ interface CodeFormContainerProps {
   ) => void;
   onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
   initializeTyping: () => void;
+  isRoundWaiting: boolean;
 }
 
 const CodeFormContainer = ({
@@ -31,6 +32,7 @@ const CodeFormContainer = ({
   onInputChange,
   onKeyDown,
   initializeTyping,
+  isRoundWaiting,
 }: CodeFormContainerProps) => {
   const [currentProblemIndex, setCurrentProblemIndex] = useState(0);
   const [currentCodeItemIndex, setCurrentCodeItemIndex] = useState(0);
@@ -68,6 +70,7 @@ const CodeFormContainer = ({
         handleUpdateProblem={handleUpdateProblem}
         handleRoundFinish={handleRoundFinish}
         handleUpdateCodeItem={handleUpdateCodeItem}
+        isRoundWaiting={isRoundWaiting}
       />
     </div>
   );

src/pages/GamePage/GameCode/GameCode.tsx

@@ -16,7 +16,7 @@ interface GameCodeProps {
 }
 
 const GameCode = ({ publishIngame, userId }: GameCodeProps) => {
-  const { ingameRoomRes } = useIngameStore();
+  const { ingameRoomRes, isRoundWaiting } = useIngameStore();
   const codeList = useRef<I_Question[]>(ingameRoomRes.questions!);
 
   const convertedCodeList = codeList.current.map(({ question }) =>
@@ -121,7 +121,8 @@ const GameCode = ({ publishIngame, userId }: GameCodeProps) => {
             accurate={accurate}
             onInputChange={onInputChange}
             onKeyDown={onKeyDown}
-            initializeTyping={initializeTyping}>
+            initializeTyping={initializeTyping}
+            isRoundWaiting={isRoundWaiting}>
             <CodeContainer codeItem={codeList.current[0].question} />
           </CodeFormContainer>
         </div>

src/pages/GamePage/GameSentence/GameForm.tsx

@@ -17,6 +17,7 @@ interface GameFormProps {
   handleLineEnd: () => void;
   handleRoundFinish: () => void;
   isLastSentence: boolean;
+  isRoundWaiting: boolean;
 }
 
 type TypoMarkListType = '' | 'typo' | 'correct';
@@ -29,6 +30,7 @@ const GameForm = ({
   handleUpdateScore,
   handleRoundFinish,
   isLastSentence,
+  isRoundWaiting,
 }: GameFormProps) => {
   const {
     register,
@@ -43,7 +45,7 @@ const GameForm = ({
 
   const { ref } = register('sentence');
 
-  const { focusInput } = useFocusInput();
+  const { focusInput } = useFocusInput(isRoundWaiting);
 
   const [typoMarkList, setTypoMarkList] = useState<TypoMarkListType[]>(
     Array(sample.length).fill('')

src/pages/GamePage/GameSentence/GameSentence.tsx

@@ -26,7 +26,7 @@ export interface I_RankInfoList {
 }
 
 const GameSentence = ({ publishIngame, userId }: GameSentenceProps) => {
-  const { ingameRoomRes } = useIngameStore();
+  const { ingameRoomRes, isRoundWaiting } = useIngameStore();
 
   const currentScore = ingameRoomRes.allMembers.find(
     ({ memberId }) => memberId === userId
@@ -123,6 +123,7 @@ const GameSentence = ({ publishIngame, userId }: GameSentenceProps) => {
               }}
               isLastSentence={sentenceList.current.length - 1 === sentenceIdx}
               handleRoundFinish={handleRoundFinish}
+              isRoundWaiting={isRoundWaiting}
             />
             <SentenceNext
               text={sentenceList.current[sentenceIdx + 1]?.question ?? ''}

src/pages/GamePage/GameWord/GameWord.tsx

@@ -15,7 +15,7 @@ interface GameWordProps {
 const SECONDS_FOR_ALL_WORDS = 120;
 
 const GameWord = ({ publishIngame, userId }: GameWordProps) => {
-  const { ingameRoomRes } = useIngameStore();
+  const { ingameRoomRes, isRoundWaiting } = useIngameStore();
   const {
     cpm,
     averageCpm,
@@ -62,6 +62,7 @@ const GameWord = ({ publishIngame, userId }: GameWordProps) => {
               initializeTyping={initializeTyping}
               cpm={cpm}
               setAverageAccurate={setAverageAccurate}
+              isRoundWaiting={isRoundWaiting}
             />
           )}
         </div>

src/pages/GamePage/GameWord/WordGameLayout.tsx

@@ -22,6 +22,7 @@ interface GameWordProps {
   initializeTyping: () => void;
   cpm: number;
   setAverageAccurate: React.Dispatch<React.SetStateAction<number>>;
+  isRoundWaiting: boolean;
 }
 
 const WordGameLayout = ({
@@ -33,14 +34,15 @@ const WordGameLayout = ({
   initializeTyping,
   cpm,
   setAverageAccurate,
+  isRoundWaiting,
 }: GameWordProps) => {
   const { register, handleSubmit, setValue, getValues } = useForm<{
     ['wordInput']: string;
   }>();
 
   const { ref } = register('wordInput');
 
-  const { focusInput } = useFocusInput();
+  const { focusInput } = useFocusInput(isRoundWaiting);
 
   const submitCount = useRef(0);
   const currentScore =

src/pages/GamePage/hooks/useFocusInput.ts

@@ -1,20 +1,17 @@
 import { useEffect, useRef } from 'react';
-import useIngameStore from '@/store/useIngameStore';
 
-const useFocusInput = () => {
+const useFocusInput = (isFocus: boolean) => {
   const focusInput = useRef<HTMLInputElement | null>(null);
 
-  const { isRoundWaiting } = useIngameStore();
-
   useEffect(() => {
-    if (isRoundWaiting || !focusInput.current) {
+    if (isFocus || !focusInput.current) {
       return;
     }
     focusInput.current.focus();
     return () => {
       focusInput.current = null;
     };
-  }, [isRoundWaiting]);
+  }, [isFocus]);
 
   return { focusInput };
 };