Merge branch 'deploy' into feat/#50-multiplay

frontend/Custom-model0.jsx

@@ -0,0 +1,27 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+Command: npx [email protected] public/models/custom/custom-model0.gltf 
+*/
+
+import React, { useRef } from 'react'
+import { useGLTF, useAnimations } from '@react-three/drei'
+
+export function Model(props) {
+  const group = useRef()
+  const { nodes, materials, animations } = useGLTF('/custom-model0.gltf')
+  const { actions } = useAnimations(animations, group)
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <group name="Scene">
+        <group name="MyCharacter" scale={0.64}>
+          <primitive object={nodes.LeftFootCtrl} />
+          <primitive object={nodes.RightFootCtrl} />
+          <primitive object={nodes.HipsCtrl} />
+          <skinnedMesh name="characterMedium" geometry={nodes.characterMedium.geometry} material={materials['skin.001']} skeleton={nodes.characterMedium.skeleton} />
+        </group>
+      </group>
+    </group>
+  )
+}
+
+useGLTF.preload('/custom-model0.gltf')

frontend/Custom-model1.jsx

@@ -0,0 +1,27 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+Command: npx [email protected] public/models/custom/custom-model1.gltf 
+*/
+
+import React, { useRef } from 'react'
+import { useGLTF, useAnimations } from '@react-three/drei'
+
+export function Model(props) {
+  const group = useRef()
+  const { nodes, materials, animations } = useGLTF('/custom-model1.gltf')
+  const { actions } = useAnimations(animations, group)
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <group name="Scene">
+        <group name="MyCharacter" scale={0.64}>
+          <primitive object={nodes.LeftFootCtrl} />
+          <primitive object={nodes.RightFootCtrl} />
+          <primitive object={nodes.HipsCtrl} />
+          <skinnedMesh name="characterMedium" geometry={nodes.characterMedium.geometry} material={materials['skin.001']} skeleton={nodes.characterMedium.skeleton} />
+        </group>
+      </group>
+    </group>
+  )
+}
+
+useGLTF.preload('/custom-model1.gltf')

frontend/Custom-model2.jsx

@@ -0,0 +1,27 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+Command: npx [email protected] public/models/custom/custom-model2.gltf 
+*/
+
+import React, { useRef } from 'react'
+import { useGLTF, useAnimations } from '@react-three/drei'
+
+export function Model(props) {
+  const group = useRef()
+  const { nodes, materials, animations } = useGLTF('/custom-model2.gltf')
+  const { actions } = useAnimations(animations, group)
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <group name="Scene">
+        <group name="MyCharacter">
+          <primitive object={nodes.LeftFootCtrl} />
+          <primitive object={nodes.RightFootCtrl} />
+          <primitive object={nodes.HipsCtrl} />
+          <skinnedMesh name="characterMedium" geometry={nodes.characterMedium.geometry} material={materials['skin.001']} skeleton={nodes.characterMedium.skeleton} />
+        </group>
+      </group>
+    </group>
+  )
+}
+
+useGLTF.preload('/custom-model2.gltf')

frontend/Custom-model3.jsx

@@ -0,0 +1,27 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+Command: npx [email protected] public/models/custom/custom-model3.gltf 
+*/
+
+import React, { useRef } from 'react'
+import { useGLTF, useAnimations } from '@react-three/drei'
+
+export function Model(props) {
+  const group = useRef()
+  const { nodes, materials, animations } = useGLTF('/custom-model3.gltf')
+  const { actions } = useAnimations(animations, group)
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <group name="Scene">
+        <group name="MyCharacter">
+          <primitive object={nodes.LeftFootCtrl} />
+          <primitive object={nodes.RightFootCtrl} />
+          <primitive object={nodes.HipsCtrl} />
+          <skinnedMesh name="characterMedium" geometry={nodes.characterMedium.geometry} material={materials['skin.001']} skeleton={nodes.characterMedium.skeleton} />
+        </group>
+      </group>
+    </group>
+  )
+}
+
+useGLTF.preload('/custom-model3.gltf')

frontend/Custom-model4.jsx

@@ -0,0 +1,27 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+Command: npx [email protected] public/models/custom/custom-model4.gltf 
+*/
+
+import React, { useRef } from 'react'
+import { useGLTF, useAnimations } from '@react-three/drei'
+
+export function Model(props) {
+  const group = useRef()
+  const { nodes, materials, animations } = useGLTF('/custom-model4.gltf')
+  const { actions } = useAnimations(animations, group)
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <group name="Scene">
+        <group name="MyCharacter" scale={0.64}>
+          <primitive object={nodes.LeftFootCtrl} />
+          <primitive object={nodes.RightFootCtrl} />
+          <primitive object={nodes.HipsCtrl} />
+          <skinnedMesh name="characterMedium" geometry={nodes.characterMedium.geometry} material={materials['skin.001']} skeleton={nodes.characterMedium.skeleton} />
+        </group>
+      </group>
+    </group>
+  )
+}
+
+useGLTF.preload('/custom-model4.gltf')

frontend/Custom-model5.jsx

@@ -0,0 +1,27 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+Command: npx [email protected] public/models/character-select/custom-model5.gltf 
+*/
+
+import React, { useRef } from 'react'
+import { useGLTF, useAnimations } from '@react-three/drei'
+
+export function Model(props) {
+  const group = useRef()
+  const { nodes, materials, animations } = useGLTF('/custom-model5.gltf')
+  const { actions } = useAnimations(animations, group)
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <group name="Scene">
+        <group name="Male" scale={0.64}>
+          <primitive object={nodes.LeftFootCtrl} />
+          <primitive object={nodes.RightFootCtrl} />
+          <primitive object={nodes.HipsCtrl} />
+          <skinnedMesh name="characterMedium" geometry={nodes.characterMedium.geometry} material={materials['skin.001']} skeleton={nodes.characterMedium.skeleton} />
+        </group>
+      </group>
+    </group>
+  )
+}
+
+useGLTF.preload('/custom-model5.gltf')

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

@@ -8,12 +8,21 @@ import { teamEnum } from '../lib/store-type'
 import { useAuth } from '@/app/hooks/useAuth'
 import { useFrame, useThree } from '@react-three/fiber'
 
+const modelPaths = [
+  '/models/custom/custom-model0.gltf',
+  '/models/custom/custom-model1.gltf',
+  '/models/custom/custom-model2.gltf',
+  '/models/custom/custom-model3.gltf',
+  '/models/custom/custom-model4.gltf',
+  '/models/custom/custom-model5.gltf',
+]
+
 export default function Character({ pos }) {
   const groupRef = useRef()
   const { userInfo } = useAuth()
   const { characterIndex } = useCharacterSelectStore()
 
-  const { nodes, animations, scene } = useGLTF(`/models/custom/custom-model${characterIndex}.gltf`)
+  const { nodes, animations, scene } = useGLTF(modelPaths[characterIndex])
   const { actions } = useAnimations(animations, scene)
 
   const { playerMoveState, playerTeamState } = usePlayerStore((state) => ({
@@ -61,11 +70,17 @@ export default function Character({ pos }) {
       <primitive object={scene} />
       <Text
         ref={textRef}
-        position={[0, 3, 0]} // 캐릭터의 머리 위 적절한 위치에 닉네임을 배치합니다.
-        fontSize={0.5} // 폰트 크기를 조절합니다.
-        color="black" // 텍스트 색상을 지정합니다.
-        anchorX="center" // 텍스트를 중앙 정렬합니다.
-        anchorY="bottom" // 텍스트의 하단을 기준으로 위치를 조정합니다.
+        position={[0, 3, 0]}
+        fontSize={0.5}
+        color={
+          playerTeamState === teamEnum.RED
+            ? '#ff8080'
+            : playerTeamState === teamEnum.BLUE
+            ? 'skyblue'
+            : '#454545'
+        }
+        anchorX="center"
+        anchorY="bottom"
       >
         {userInfo && userInfo.nickname}
       </Text>

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

@@ -23,7 +23,7 @@ const GameField = () => {
   }))
   const { setSelectAnswer } = useAnswerSelectStore()
   const { userInfo } = useAuth()
-
+  
   // 메인 필드에 닿았을 때 (선택한 팁 or 선택한 답) 초기화
   const handleEnterMainField = () => {
     switch (gameState) {

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

@@ -30,7 +30,7 @@ export const getPosition = (index: number, numItems = 6, radius: number) => {
   return [x, y, z]
 }
 
-// 캐릭터 모델 경로 리스트
+// 캐릭터 변경 모달 model Path
 export const models = [
   '/models/character-select/custom-model0.gltf',
   '/models/character-select/custom-model1.gltf',