fix: 메인룸 미리 렌더링되는 이슈 해결

components/Main/MainCanvas.tsx

@@ -0,0 +1,19 @@
+import { OrbitControls } from '@react-three/drei'
+import { Canvas } from '@react-three/fiber'
+import dynamic from 'next/dynamic'
+
+const MainRoom = dynamic(() => import('../../components/Main/MainRoom'), {
+  ssr: false,
+})
+
+const MainCanvas = () => {
+  return (
+    <Canvas camera={{ position: [1, 1.7, 1] }} style={{ height: '100vh' }}>
+      <directionalLight position={[7, 7, 10]} />
+      <MainRoom position={[0, 0.75, 0]} scale={[0.22, 0.22, 0.22]} />
+      <OrbitControls target={[0, 1.4, 0]} />
+    </Canvas>
+  )
+}
+
+export default MainCanvas

pages/main/index.tsx

@@ -1,12 +1,12 @@
-import { OrbitControls } from '@react-three/drei'
-import { Canvas } from '@react-three/fiber'
 import styled from '@emotion/styled'
 import dynamic from 'next/dynamic'
 
 import CubeLoader from '@/components/common/Loader/CubeLoader'
 import CustomSuspense from '@/components/common/Suspense/CustomSuspense'
 
-const MainRoom = dynamic(() => import('../../components/Main/MainRoom'))
+const MainCanvas = dynamic(() => import('../../components/Main/MainCanvas'), {
+  ssr: false,
+})
 
 export default function Main() {
   return (
@@ -18,11 +18,7 @@ export default function Main() {
       }
       maxDuration={5500}
     >
-      <Canvas camera={{ position: [1, 1.7, 1] }} style={{ height: '100vh' }}>
-        <directionalLight position={[7, 7, 10]} />
-        <MainRoom position={[0, 0.75, 0]} scale={[0.22, 0.22, 0.22]} />
-        <OrbitControls target={[0, 1.4, 0]} />
-      </Canvas>
+      <MainCanvas />
     </CustomSuspense>
   )
 }