From 3298770d69e373f4053e941dd58e4c7ae570c195 Mon Sep 17 00:00:00 2001
From: bishoe01 <bishoe01@gmail.com>
Date: Fri, 2 Aug 2024 14:31:11 +0900
Subject: [PATCH] =?UTF-8?q?[=F0=9F=9B=A0=EF=B8=8F=20REFACTOR]=20fetchRoomP?=
 =?UTF-8?q?layers=20=ED=95=A8=EC=88=98=20=EB=AA=A8=EB=93=88=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 handtris/src/components/TetrisPlay.tsx | 26 ++++++-----------------
 handtris/src/hook/fetchRoomPlayers.ts  | 29 ++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 20 deletions(-)
 create mode 100644 handtris/src/hook/fetchRoomPlayers.ts

diff --git a/handtris/src/components/TetrisPlay.tsx b/handtris/src/components/TetrisPlay.tsx
index dab3d58..4ab74fb 100644
--- a/handtris/src/components/TetrisPlay.tsx
+++ b/handtris/src/components/TetrisPlay.tsx
@@ -9,11 +9,10 @@ import { getRoomCode } from "@/util/getRoomCode";
 import { AnimatePresence, motion } from "framer-motion";
 import { useToast } from "@/components/ui/use-toast";
 import { HandLandmarkResults, TetrisBoard } from "@/types";
-import WaitingModal, { Player } from "@/components/WaitingModal";
+import WaitingModal from "@/components/WaitingModal";
 import LeftJoystickModel from "@/components/LeftJoystickModel";
 import RightJoystickModel from "@/components/RightJoystickModel";
 import GameResultModal from "@/components/GameResultModal";
-import { searchRoomPlayer, updateStatus } from "@/services/gameService";
 import { useMusic } from "./MusicProvider";
 import ConfettiExplosion from "react-confetti-explosion";
 import { ArrowUpNarrowWide, Donut, FlipVertical2 } from "lucide-react";
@@ -21,6 +20,8 @@ import { LandmarkList } from "@mediapipe/hands";
 import { drawNextBlock } from "./drawNextBlock";
 import { showCountdown } from "./showCountdown";
 import { useHandleGesture } from "@/hook/useHandleGesture";
+import { updateStatus } from "@/services/gameService";
+import useFetchRoomPlayers from "@/hook/fetchRoomPlayers";
 
 const TETRIS_CANVAS = `flex items-center justify-between w-full border-2 border-t-0`;
 
@@ -59,8 +60,6 @@ const Home: React.FC = () => {
   const lastGestureRef = useRef<string | null>(null);
   const previousLinesClearedRef = useRef(0);
   const [showResultModal, setShowResultModal] = useState(false);
-  const [roomPlayers, setRoomPlayers] = useState<Player[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
   const isSub = useRef(false);
   const isSubTemp = useRef(false);
   const [isDangerous, setIsDangerous] = useState(false);
@@ -71,22 +70,9 @@ const Home: React.FC = () => {
   const [isFlipping, setIsFlipping] = useState(false);
   const [isNextBlockDonut, setIsNextBlockDonut] = useState(false);
   const [showDonutWarning, setShowDonutWarning] = useState(false);
-  const fetchRoomPlayers = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      const roomCode = getRoomCode();
-      if (roomCode) {
-        const response = await searchRoomPlayer(roomCode);
-        if (response.data) {
-          setRoomPlayers(response.data);
-        }
-      }
-    } catch (error) {
-      console.error("Failed to fetch room players:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
+
+  const { roomPlayers, isLoading, fetchRoomPlayers } = useFetchRoomPlayers();
+
   useEffect(() => {
     const checkDangerousState = () => {
       if (tetrisGameRef.current) {
diff --git a/handtris/src/hook/fetchRoomPlayers.ts b/handtris/src/hook/fetchRoomPlayers.ts
new file mode 100644
index 0000000..02f620d
--- /dev/null
+++ b/handtris/src/hook/fetchRoomPlayers.ts
@@ -0,0 +1,29 @@
+import { useState, useCallback } from "react";
+import { getRoomCode } from "@/util/getRoomCode";
+import { searchRoomPlayer } from "@/services/gameService";
+
+const useFetchRoomPlayers = () => {
+  const [roomPlayers, setRoomPlayers] = useState<Player[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const fetchRoomPlayers = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const roomCode = getRoomCode();
+      if (roomCode) {
+        const response = await searchRoomPlayer(roomCode);
+        if (response.data) {
+          setRoomPlayers(response.data);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch room players:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  return { roomPlayers, isLoading, fetchRoomPlayers };
+};
+
+export default useFetchRoomPlayers;