add: repair game inspection sub state

src/components/three/gameplay/RepairGame.tsx

@@ -0,0 +1,45 @@
+import { RepairInspectionObject } from "@/components/three/gameplay/RepairInspectionObject";
+import { RepairMissionCase } from "@/components/three/gameplay/RepairMissionCase";
+import { REPAIR_MISSIONS } from "@/data/gameplay/repairMissions";
+import { useRepairMissionStep } from "@/hooks/gameplay/useRepairMissionStep";
+import type { RepairMissionId } from "@/managers/stores/useGameStore";
+import { useGameStore } from "@/managers/stores/useGameStore";
+import type { ModelTransformProps, Vector3Tuple } from "@/types/three/three";
+import { toVector3Scale } from "@/utils/three/scale";
+
+interface RepairGameProps extends Required<
+  Pick<ModelTransformProps, "position">
+> {
+  mission: RepairMissionId;
+  rotation?: Vector3Tuple;
+  scale?: ModelTransformProps["scale"];
+}
+
+export function RepairGame({
+  mission,
+  position,
+  rotation = [0, 0, 0],
+  scale = 1,
+}: RepairGameProps): React.JSX.Element | null {
+  const config = REPAIR_MISSIONS[mission];
+  const mainState = useGameStore((state) => state.mainState);
+  const setMissionStep = useGameStore((state) => state.setMissionStep);
+  const step = useRepairMissionStep(mission);
+  const parsedScale = toVector3Scale(scale);
+
+  if (mainState !== mission) return null;
+  if (step === "locked") return null;
+
+  return (
+    <group position={position} rotation={rotation} scale={parsedScale}>
+      {step === "waiting" ? (
+        <RepairInspectionObject
+          config={config}
+          worldPosition={position}
+          onInspect={() => setMissionStep(mission, "inspected")}
+        />
+      ) : null}
+      {step !== "waiting" ? <RepairMissionCase config={config} /> : null}
+    </group>
+  );
+}

src/components/three/gameplay/RepairInspectionObject.tsx

@@ -0,0 +1,33 @@
+import { InteractableObject } from "@/components/three/interaction/InteractableObject";
+import { RepairObjectModel } from "@/components/three/gameplay/RepairObjectModel";
+import { RepairPromptVideo } from "@/components/three/gameplay/RepairPromptVideo";
+import type { RepairMissionConfig } from "@/data/gameplay/repairMissions";
+import type { Vector3Tuple } from "@/types/three/three";
+
+interface RepairInspectionObjectProps {
+  config: RepairMissionConfig;
+  worldPosition: Vector3Tuple;
+  onInspect: () => void;
+}
+
+export function RepairInspectionObject({
+  config,
+  worldPosition,
+  onInspect,
+}: RepairInspectionObjectProps): React.JSX.Element {
+  return (
+    <InteractableObject
+      kind="trigger"
+      label={`Inspecter ${config.label}`}
+      position={worldPosition}
+      onPress={onInspect}
+    >
+      <RepairObjectModel
+        label={config.label}
+        modelPath={config.modelPath}
+        scale={0.9}
+      />
+      <RepairPromptVideo src={config.interactUiPath} />
+    </InteractableObject>
+  );
+}

src/components/three/gameplay/RepairMissionCase.tsx

@@ -0,0 +1,21 @@
+import { RepairCaseModel } from "@/components/three/gameplay/RepairCaseModel";
+import { REPAIR_CASE_MODEL_PATH } from "@/data/gameplay/repairCaseConfig";
+import type { RepairMissionConfig } from "@/data/gameplay/repairMissions";
+
+interface RepairMissionCaseProps {
+  config: RepairMissionConfig;
+}
+
+export function RepairMissionCase({
+  config,
+}: RepairMissionCaseProps): React.JSX.Element {
+  return (
+    <RepairCaseModel
+      modelPath={REPAIR_CASE_MODEL_PATH}
+      open={false}
+      position={config.case.position}
+      rotation={config.case.rotation}
+      scale={config.case.scale}
+    />
+  );
+}

src/components/three/gameplay/RepairObjectModel.tsx

@@ -0,0 +1,96 @@
+import type { ReactNode } from "react";
+import { Component } from "react";
+import { SimpleModel } from "@/components/three/models/SimpleModel";
+import type { Vector3Scale, Vector3Tuple } from "@/types/three/three";
+import { logModelLoadError } from "@/utils/three/modelLoadLogger";
+
+interface RepairObjectModelProps {
+  label: string;
+  modelPath: string;
+  position?: Vector3Tuple;
+  rotation?: Vector3Tuple;
+  scale?: Vector3Scale;
+}
+
+interface RepairObjectModelBoundaryProps extends RepairObjectModelProps {
+  children: ReactNode;
+}
+
+interface RepairObjectModelBoundaryState {
+  hasError: boolean;
+}
+
+class RepairObjectModelBoundary extends Component<
+  RepairObjectModelBoundaryProps,
+  RepairObjectModelBoundaryState
+> {
+  constructor(props: RepairObjectModelBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(): RepairObjectModelBoundaryState {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error): void {
+    logModelLoadError(
+      {
+        modelPath: this.props.modelPath,
+        position: this.props.position,
+        rotation: this.props.rotation,
+        scale: this.props.scale,
+        scope: `RepairObjectModel.${this.props.label}`,
+      },
+      error,
+    );
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      return <RepairObjectFallback label={this.props.label} />;
+    }
+
+    return this.props.children;
+  }
+}
+
+export function RepairObjectModel({
+  label,
+  modelPath,
+  position = [0, 0, 0],
+  rotation = [0, 0, 0],
+  scale = 1,
+}: RepairObjectModelProps): React.JSX.Element {
+  return (
+    <RepairObjectModelBoundary
+      label={label}
+      modelPath={modelPath}
+      position={position}
+      rotation={rotation}
+      scale={scale}
+    >
+      <SimpleModel
+        modelPath={modelPath}
+        position={position}
+        rotation={rotation}
+        scale={scale}
+      />
+    </RepairObjectModelBoundary>
+  );
+}
+
+function RepairObjectFallback({ label }: { label: string }): React.JSX.Element {
+  return (
+    <group>
+      <mesh castShadow receiveShadow>
+        <boxGeometry args={[1.4, 1.4, 1.4]} />
+        <meshStandardMaterial color="#facc15" roughness={0.6} wireframe />
+      </mesh>
+      <mesh position={[0, 1.05, 0]}>
+        <sphereGeometry args={[0.08, 16, 16]} />
+        <meshBasicMaterial color={label ? "#f8fafc" : "#facc15"} />
+      </mesh>
+    </group>
+  );
+}

src/components/three/gameplay/RepairPromptVideo.tsx

@@ -0,0 +1,34 @@
+import { Html } from "@react-three/drei";
+import type { Vector3Tuple } from "@/types/three/three";
+
+interface RepairPromptVideoProps {
+  src: string;
+  position?: Vector3Tuple;
+  size?: number;
+}
+
+export function RepairPromptVideo({
+  src,
+  position = [0, 1.8, 0],
+  size = 96,
+}: RepairPromptVideoProps): React.JSX.Element {
+  return (
+    <Html position={position} center transform occlude={false}>
+      <video
+        aria-hidden="true"
+        autoPlay
+        loop
+        muted
+        playsInline
+        src={src}
+        style={{
+          display: "block",
+          height: size,
+          objectFit: "contain",
+          pointerEvents: "none",
+          width: size,
+        }}
+      />
+    </Html>
+  );
+}