split ohg / frame

app/unity/page.tsx

@@ -33,7 +33,22 @@ const option = [
   },
 ];
 
-const objOption = [
+const ohgOption = [
+  {
+    value: 0,
+    label: "ohg1",
+  },
+  {
+    value: 1,
+    label: "ohg2",
+  },
+  {
+    value: 2,
+    label: "ohg3",
+  },
+];
+
+const frameOption = [
   {
     value: 0,
     label: "frame1",
@@ -42,12 +57,16 @@ const objOption = [
     value: 1,
     label: "frame2",
   },
+  {
+    value: 2,
+    label: "frame3",
+  },
 ];
 
 function UnityComponent() {
   const params = useSearchParams();
   const p = params.get("p");
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [selectedIndex, setSelectedIndex] = useState({ ohg: 0, frame: 0 });
   if (!p || isNaN(Number(p))) location.href = "/unity?p=0";
 
   const {
@@ -61,14 +80,25 @@ function UnityComponent() {
   const loadingPercentage = Math.round(loadingProgression * 100);
 
   const handleSelectIndex = useCallback(
-    (newValue: string) => {
-      console.log(newValue);
-      setSelectedIndex(Number(newValue));
-      UNSAFE__unityInstance?.SendMessage(
-        "Cube",
-        "HandleSelect",
-        Number(newValue),
-      );
+    // 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],
   );
@@ -102,17 +132,30 @@ function UnityComponent() {
             ))}
           </select>
           {Number(p) == 0 && (
-            <select
-              value={selectedIndex}
-              onChange={(e) => handleSelectIndex(e.target.value)}
-              className="ml-5 mt-5"
-            >
-              {objOption.map((o, i) => (
-                <option key={`${o.label}-${i}`} value={o.value}>
-                  {o.label}
-                </option>
-              ))}
-            </select>
+            <>
+              <select
+                value={selectedIndex.ohg}
+                onChange={(e) => handleSelectIndex("ohg", e.target.value)}
+                className="ml-5 mt-5"
+              >
+                {ohgOption.map((o, i) => (
+                  <option key={`${o.label}-${i}`} value={o.value}>
+                    {o.label}
+                  </option>
+                ))}
+              </select>
+              <select
+                value={selectedIndex.frame}
+                onChange={(e) => handleSelectIndex("frame", e.target.value)}
+                className="ml-5 mt-5"
+              >
+                {frameOption.map((o, i) => (
+                  <option key={`${o.label}-${i}`} value={o.value}>
+                    {o.label}
+                  </option>
+                ))}
+              </select>
+            </>
           )}
           <Image
             src={"/unity/3d-test/TemplateData/fullscreen-button.png"}