refactor: clean architecture and remove unused code

src/world/GameMap.tsx

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
-import { Component, useEffect, useMemo, useRef, useState } from "react";
+import { Component, useEffect, useRef, useState } from "react";
 import { useGLTF } from "@react-three/drei";
 import * as THREE from "three";
+import { useClonedObject } from "@/hooks/three/useClonedObject";
 import { useOctreeGraphNode } from "@/hooks/three/useOctreeGraphNode";
 import { loadMapSceneData } from "@/utils/map/loadMapSceneData";
 import type { MapNode } from "@/types/editor/editor";
@@ -14,7 +15,6 @@ interface LoadedMapNode {
 
 interface ErrorBoundaryProps {
   children: ReactNode;
-  fallback?: ReactNode;
 }
 
 interface ErrorBoundaryState {
@@ -40,7 +40,7 @@ class ModelErrorBoundary extends Component<
 
   render(): ReactNode {
     if (this.state.hasError) {
-      return this.props.fallback ?? null;
+      return null;
     }
 
     return this.props.children;
@@ -53,7 +53,6 @@ interface GameMapProps {
 
 export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
   const [mapNodes, setMapNodes] = useState<LoadedMapNode[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
   const groupRef = useRef<THREE.Group>(null);
 
   useOctreeGraphNode(groupRef, onOctreeReady, mapNodes.length);
@@ -64,7 +63,6 @@ export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
         const sceneData = await loadMapSceneData();
         if (!sceneData) {
           console.warn("map.json not found");
-          setIsLoading(false);
           return;
         }
 
@@ -84,8 +82,6 @@ export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
         setMapNodes(loadedMapNodes);
       } catch (error) {
         console.error("Error loading map:", error);
-      } finally {
-        setIsLoading(false);
       }
     };
 
@@ -94,12 +90,11 @@ export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
 
   return (
     <group ref={groupRef}>
-      {!isLoading &&
-        mapNodes.map((mapNode, index) => (
-          <ModelErrorBoundary key={index}>
-            <ModelInstance node={mapNode.node} modelUrl={mapNode.modelUrl} />
-          </ModelErrorBoundary>
-        ))}
+      {mapNodes.map((mapNode, index) => (
+        <ModelErrorBoundary key={index}>
+          <ModelInstance node={mapNode.node} modelUrl={mapNode.modelUrl} />
+        </ModelErrorBoundary>
+      ))}
     </group>
   );
 }
@@ -111,22 +106,12 @@ function ModelInstance({
   node: MapNode;
   modelUrl: string;
 }): React.JSX.Element {
-  const groupRef = useRef<THREE.Group>(null);
   const { scene } = useGLTF(modelUrl);
-  const sceneInstance = useMemo(() => scene.clone(true), [scene]);
+  const sceneInstance = useClonedObject(scene);
   const { position, rotation, scale } = node;
 
-  useEffect(() => {
-    if (groupRef.current) {
-      groupRef.current.position.set(...position);
-      groupRef.current.rotation.set(...rotation);
-      groupRef.current.scale.set(...scale);
-    }
-  }, [position, rotation, scale]);
-
   return (
     <primitive
-      ref={groupRef}
       object={sceneInstance}
       position={position}
       rotation={rotation}