Fix #50: 다른 유저가 렌더링 되면서 team spot 충돌시에, 본인 로컬 정보가 변경 요청 들어오는 현상 수정

frontend/app/(page)/(needProtection)/game/component/CharacterController.tsx

@@ -32,11 +32,14 @@ const CharacterController = () => {
   const { letRespawn, setRespawnButton } = useRespawnButtonStore()
 
   // 플레이어 상태
-  const { playerMoveState, setPlayerMoveState, playerTeamState } = usePlayerStore((state) => ({
-    playerMoveState: state.playerMoveState,
-    setPlayerMoveState: state.setPlayerMoveState,
-    playerTeamState: state.playerTeamState,
-  }))
+  const { playerMoveState, setPlayerMoveState, playerTeamState, setPlayerHandle } = usePlayerStore(
+    (state) => ({
+      playerMoveState: state.playerMoveState,
+      setPlayerMoveState: state.setPlayerMoveState,
+      playerTeamState: state.playerTeamState,
+      setPlayerHandle: state.setPlayerHandle,
+    })
+  )
 
   const { characterIndex } = useCharacterSelectStore()
 
@@ -62,6 +65,14 @@ const CharacterController = () => {
     }
   }
 
+  // 초기 렌더링시 내 캐릭터 uuid 저장
+  useEffect(() => {
+    if (rigidbody.current) {
+      console.log('내 캐릭터 정보 얻어보자', rigidbody.current)
+      setPlayerHandle(rigidbody.current.handle)
+    }
+  }, [])
+
   useEffect(() => {
     const updateState = () => {
       if (rigidbody.current) {

frontend/app/(page)/(needProtection)/game/component/TeamSpot.tsx

@@ -8,8 +8,9 @@ import { useGame } from '@/app/hooks/useSocket'
 const TeamSpot = () => {
   const { selectTeam } = useGame()
 
-  const { setPlayerTeamState } = usePlayerStore((state) => ({
+  const { setPlayerTeamState, playerHandle } = usePlayerStore((state) => ({
     setPlayerTeamState: state.setPlayerTeamState,
+    playerHandle: state.playerHandle,
   }))
 
   const handleEnterTeamSpot = (teamColor: teamEnum) => {
@@ -27,7 +28,13 @@ const TeamSpot = () => {
         <RigidBody
           colliders={false}
           type="fixed"
-          onCollisionEnter={() => handleEnterTeamSpot(teamColor)}
+          onCollisionEnter={(event) => {
+            // collision 내 객체인지 확인
+            console.log('collision test start', event)
+            if (event.collider.handle !== playerHandle) return
+            console.log('collision test 통과')
+            handleEnterTeamSpot(teamColor)
+          }}
         >
           <CylinderCollider args={[2 / 2, 3]} />
           <Cylinder scale={[3, 2, 3]}>

frontend/app/(page)/(needProtection)/game/lib/store-type.ts

@@ -1,3 +1,4 @@
+import { UUID } from 'crypto'
 import { IRoomInfo } from '../../lobby/lib/type'
 import { IGameResult, IGameScore, IQuiz, IUserInfo, IUserRoundResult } from './type'
 
@@ -62,6 +63,8 @@ export interface IPlayerState {
   setPlayerMoveState: (state: playerMoveStateEnum) => void
   playerTeamState: teamEnum
   setPlayerTeamState: (state: teamEnum) => void
+  playerHandle: number | null
+  setPlayerHandle: (playerHandle: number) => void
 }
 
 // :: 모달 상태

frontend/app/(page)/(needProtection)/game/lib/store.ts

@@ -85,6 +85,11 @@ export const usePlayerStore = create<IPlayerState>()(
         set({
           playerTeamState,
         }),
+      playerHandle: null,
+      setPlayerHandle: (playerHandle: number) =>
+        set({
+          playerHandle,
+        }),
     })),
     { name: 'PlayerStore' }
   )
@@ -227,4 +232,4 @@ export const useRespawnButtonStore = create<IRespawnButtonState>()(
     })),
     { name: 'RespawnButtonStore' }
   )
-)
+)