add object select!!

app/unity/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 import Image from "next/image";
 import { useSearchParams } from "next/navigation";
-import { Suspense } from "react";
+import { Suspense, useCallback, useState } from "react";
 import { Unity, UnityConfig, useUnityContext } from "react-unity-webgl";
 const unityConfigBuilder: (path: string) => UnityConfig = (path) => ({
   loaderUrl: `${path}.loader.js`,
@@ -33,10 +33,21 @@ const option = [
   },
 ];
 
+const objOption = [
+  {
+    value: 0,
+    label: "frame1",
+  },
+  {
+    value: 1,
+    label: "frame2",
+  },
+];
+
 function UnityComponent() {
   const params = useSearchParams();
   const p = params.get("p");
-  console.log(p);
+  const [selectedIndex, setSelectedIndex] = useState(0);
   if (!p || isNaN(Number(p))) location.href = "/unity?p=0";
 
   const {
@@ -49,6 +60,19 @@ 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),
+      );
+    },
+    [UNSAFE__unityInstance],
+  );
+
   return (
     <>
       <div className="mb-5 mt-5">
@@ -77,6 +101,19 @@ function UnityComponent() {
               </option>
             ))}
           </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>
+          )}
           <Image
             src={"/unity/3d-test/TemplateData/fullscreen-button.png"}
             alt="전체 화면 버튼"