simulator Floors 컴포넌트 수정

front/src/components/home/simulator/Floors.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import * as THREE from "three";
+import { MaxBlockList } from "types/simulator";
+
+const Floor = ({
+	width,
+	height,
+	position,
+}: {
+	width: number;
+	height: number;
+	position: THREE.Vector3;
+}) => {
+	return (
+		<mesh
+			rotation={[-((Math.PI / 180) * 90), 0, 0]}
+			position={position}
+			receiveShadow
+		>
+			<planeGeometry args={[width, height]} />
+			<meshStandardMaterial color="#7c9c60" />
+		</mesh>
+	);
+};
+
+const Floors = ({
+	maxBlockList,
+}: {
+	maxBlockList: React.MutableRefObject<MaxBlockList>;
+}) => {
+	if (Object.values(maxBlockList.current).length === 0) return null;
+
+	return (
+		<>
+			{Object.values(maxBlockList.current).map(
+				({ position, width, height }, idx) => (
+					<Floor
+						key={idx}
+						position={
+							new THREE.Vector3(
+								position.x + width - 3,
+								0,
+								position.z + height / 2
+							)
+						}
+						width={width * 2 + 5}
+						height={height + 8}
+					/>
+				)
+			)}
+		</>
+	);
+};
+
+export default Floors;

front/src/components/home/simulator/Simulator.tsx

@@ -2,11 +2,15 @@ import React, { useEffect, useRef, useState } from "react";
 import { CurrentContainerWorkData } from "types/api";
 import * as THREE from "three";
 import apiService from "api";
-import { ContainerPosition, CranePosition } from "types/simulator";
+import {
+	ContainerPosition,
+	CranePosition,
+	MaxBlockList,
+} from "types/simulator";
 import ContainerBoxes from "./ContainerBoxes";
 import Block from "./Block";
 import ATCCranes from "./ATCCranes";
-import Floor from "./Floor";
+import Floors from "./Floors";
 import Controls from "./Controls";
 import SocketAnimation from "./SocketAnimation";
 
@@ -17,9 +21,7 @@ const Simulator = () => {
 	const [count, setCount] = useState<number>(0);
 	const containers = useRef<ContainerPosition[]>([]);
 	const cranes = useRef<CranePosition>({});
-	const maxBlockList = useRef<{
-		[block: string]: { position: Block; width: number; height: number };
-	}>({});
+	const maxBlockList = useRef<MaxBlockList>({});
 
 	useEffect(() => {
 		const fetchMaxBlockData = async () => {
@@ -97,22 +99,7 @@ const Simulator = () => {
 				setCount={setCount}
 			/>
 			<ContainerBoxes count={count} containers={containers} />
-			{Object.values(maxBlockList.current).map(
-				({ position, width, height }, idx) => (
-					<Floor
-						key={idx}
-						position={
-							new THREE.Vector3(
-								position.x + width - 3,
-								0,
-								position.z + height / 2
-							)
-						}
-						width={width * 2 + 5}
-						height={height + 8}
-					/>
-				)
-			)}
+			<Floors maxBlockList={maxBlockList} />
 			<ATCCranes cranes={cranes.current} />
 			<ambientLight args={["#ffffff", 0.5]} />
 			<directionalLight

front/src/types/simulator.ts

@@ -1,3 +1,5 @@
+import Block from "components/home/simulator/Block";
+
 export interface ContainerPosition {
 	position: THREE.Vector3;
 }
@@ -10,3 +12,7 @@ export interface ContainerBoxesProps {
 export interface CranePosition {
 	[crane: string]: THREE.Vector3;
 }
+
+export interface MaxBlockList {
+	[block: string]: { position: Block; width: number; height: number };
+}