refactor unity.tsx

app/unity/unity.tsx

@@ -4,7 +4,7 @@ import { useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 import { Unity, UnityConfig, useUnityContext } from "react-unity-webgl";
 import { ObjectType } from "../types";
-const unityConfigBuilder: (path: string) => UnityConfig = (path) => ({
+const unityConfigBuilder = (path: string): UnityConfig => ({
   loaderUrl: `${path}.loader.js`,
   dataUrl: `${path}.data`,
   frameworkUrl: `${path}.framework.js`,
@@ -31,6 +31,7 @@ export default function UnityComponent({
   const params = useSearchParams();
   const p = params.get("p");
   const [selectedIndex, setSelectedIndex] = useState({ ohg: 0, frame: 0 });
+  type SelectedIndexType = typeof selectedIndex;
   const [match, setMatch] = useState(100);
   if (!p || isNaN(Number(p))) location.href = "/unity?p=0";
 
@@ -39,34 +40,11 @@ export default function UnityComponent({
 
   const loadingPercentage = Math.round(loadingProgression * 100);
 
-  const handleSelectIndex = useCallback(
-    // objectName: ohg | frame, newValue: "0", "1", ...
-    (objectName: keyof typeof selectedIndex, newValue: string) => {
-      const newIndex = Number(newValue);
-      // 화면상의 select 컴포넌트 업데이트
-      setSelectedIndex((prev) => {
-        if (objectName === "ohg") {
-          return {
-            ...prev,
-            ohg: newIndex,
-          };
-        } else {
-          return {
-            ...prev,
-            frame: newIndex,
-          };
-        }
-      });
-      // 유니티 스크립트 호출 - objectName 및 함수 이름은 유니티의 것과 동일해야 함
-      UNSAFE__unityInstance?.SendMessage(objectName, "HandleSelect", newIndex);
-    },
-    [UNSAFE__unityInstance],
-  );
-
-  useEffect(() => {
-    (async () => {
+  // 매치율 조회 및 업데이트
+  const handleMatchUpdate = useCallback(
+    async (newSelectedIndex: SelectedIndexType) => {
       const res = await fetch(
-        `/fit?o=${selectedIndex.ohg}&f=${selectedIndex.frame}`,
+        `/fit?o=${newSelectedIndex.ohg}&f=${newSelectedIndex.frame}`,
         {
           method: "GET",
         },
@@ -74,8 +52,46 @@ export default function UnityComponent({
       console.log(res);
       const json = (await res.json()) as { match: number };
       if (isNaN(Number(json.match)) === false) setMatch(json.match);
-    })();
-  }, [selectedIndex.frame, selectedIndex.ohg]);
+      return json.match;
+    },
+    [],
+  );
+
+  // 최초 1회 조회
+  useEffect(() => {
+    handleMatchUpdate({ ohg: 0, frame: 0 });
+  }, [handleMatchUpdate]);
+
+  // ohg나 frame이 바뀔 때마다 호출
+  const handleSelectIndex = useCallback(
+    // objectName: ohg | frame, newValue: "0", "1", ...
+    (
+      currentSelectedIndex: SelectedIndexType,
+      objectName: keyof SelectedIndexType,
+      newValue: string,
+    ) => {
+      // 화면상의 select 컴포넌트 업데이트
+      const newIndex = Number(newValue);
+      const newSelectedIndex = {
+        ...currentSelectedIndex,
+        [objectName]: newIndex,
+      };
+      setSelectedIndex(newSelectedIndex);
+
+      // 유니티 스크립트 호출 - objectName 및 함수 이름은 유니티의 것과 동일해야 함
+      UNSAFE__unityInstance?.SendMessage(objectName, "HandleSelect", newIndex);
+
+      handleMatchUpdate(newSelectedIndex)
+        // 매치율 이용하여 컴포넌트 업데이트
+        .then((match) => {
+          //
+        })
+        .catch((err) => {
+          // 에러처리
+        });
+    },
+    [UNSAFE__unityInstance, handleMatchUpdate],
+  );
 
   return (
     <>
@@ -109,7 +125,9 @@ export default function UnityComponent({
             <>
               <select
                 value={selectedIndex.ohg}
-                onChange={(e) => handleSelectIndex("ohg", e.target.value)}
+                onChange={(e) =>
+                  handleSelectIndex(selectedIndex, "ohg", e.target.value)
+                }
                 className="ml-5 mt-5"
               >
                 {ohg?.map((o, i) => (
@@ -120,7 +138,9 @@ export default function UnityComponent({
               </select>
               <select
                 value={selectedIndex.frame}
-                onChange={(e) => handleSelectIndex("frame", e.target.value)}
+                onChange={(e) =>
+                  handleSelectIndex(selectedIndex, "frame", e.target.value)
+                }
                 className="ml-5 mt-5"
               >
                 {frame.map((o, i) => (