fix: galaxy memory error

app/(public)/visit/_components/_make/DecoDrawer.tsx

@@ -1,6 +1,6 @@
 import mongoose from 'mongoose';
 
-import { useState, useEffect } from 'react';
+import { useState, useCallback } from 'react';
 import { ArrowLeftRight } from 'lucide-react';
 
 import {
@@ -12,11 +12,11 @@ import {
   DrawerTrigger,
 } from '@/components/ui/drawer';
 
-import DecorationSelect from '@/app/(public)/visit/_components/_make/DecorationSelect';
 import ColorButton from '@/app/(public)/visit/_components/_make/ColorButton';
 import MessageForm from '@/app/(public)/visit/_components/_make/MessageForm';
 import { STEP } from '@/app/(public)/visit/[userId]/_constants/step';
 import { DECO } from '@/shared/constants/3dModel';
+import DecorationsViewer from './DecorationViewer';
 
 const DecoDrawer = ({
   step,
@@ -29,14 +29,12 @@ const DecoDrawer = ({
   uuid: string;
   crystalId: string | mongoose.Schema.Types.ObjectId;
 }) => {
-  const [isMounted, setIsMounted] = useState(false);
+  const [isOpened, setIsOpened] = useState(false);
 
-  useEffect(() => {
-    setIsMounted(true);
+  const drawerClose = useCallback(() => {
+    setIsOpened(false);
   }, []);
 
-  if (!isMounted) return null;
-
   if (
     step === STEP.MESSAGE_DECORATION_COLOR ||
     step === STEP.MESSAGE_NOTE_COLOR
@@ -54,10 +52,9 @@ const DecoDrawer = ({
     );
 
   const decorationArray = Object.values(DECO);
-  const decorationPath = decorationArray.map((deco) => deco.fileName);
 
   return (
-    <Drawer>
+    <Drawer open={isOpened} onOpenChange={setIsOpened}>
       <DrawerTrigger className="pointer-events-auto transform rounded-lg bg-white p-2 px-4 transition duration-200 hover:bg-gray-300">
         장식 선택하기
       </DrawerTrigger>
@@ -71,11 +68,10 @@ const DecoDrawer = ({
           </DrawerDescription>
         </DrawerHeader>
 
-        <div className="flex w-full overflow-auto">
-          {decorationPath.map((deco, index) => (
-            <DecorationSelect key={index} path={deco} />
-          ))}
-        </div>
+        <DecorationsViewer
+          onClose={drawerClose}
+          decorations={decorationArray}
+        />
       </DrawerContent>
     </Drawer>
   );

app/(public)/visit/_components/_make/DecorationViewer.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useLayoutEffect, useCallback, useState } from 'react';
+import { Canvas } from '@react-three/fiber';
+import { Scroll, ScrollControls } from '@react-three/drei';
+import { Suspense } from 'react';
+
+import InitializeDecoration from '@/app/(public)/visit/_components/_make/InitializeDecoration';
+import { use3DModel } from '@/app/(public)/visit/[userId]/store/modelStore';
+import Loading from '@/app/loading';
+
+const DecorationsViewer = ({
+  onClose,
+  decorations,
+}: {
+  onClose: () => void;
+  decorations: Array<{ id: number; fileName: string; name: string }>;
+}) => {
+  const { setModel } = use3DModel();
+  const [pages, setPages] = useState(1);
+
+  const ITEM_WIDTH = 200;
+  const ITEM_GAP = 100;
+
+  const handleModel = useCallback(
+    (path: string) => {
+      setModel({ model: path });
+      onClose();
+    },
+    [onClose, setModel]
+  );
+
+  useLayoutEffect(() => {
+    const handleScrollSize = () => {
+      const screenWidth = window.innerWidth;
+      const minWidth =
+        decorations.length * ITEM_WIDTH + ITEM_GAP + screenWidth / 2;
+      const newPages = Math.ceil(minWidth / screenWidth);
+      setPages(newPages);
+    };
+
+    handleScrollSize();
+    window.addEventListener('resize', handleScrollSize);
+
+    return () => {
+      window.removeEventListener('resize', handleScrollSize);
+    };
+  }, [decorations]);
+
+  return (
+    <div style={{ width: '100%', height: '400px' }}>
+      <Suspense fallback={Loading()}>
+        <Canvas style={{ width: '100%', height: '100%' }}>
+          <ambientLight intensity={1} color={'#ffffff'} />
+          <directionalLight
+            position={[10, 20, 10]}
+            intensity={0.7}
+            color={'#ffffff'}
+          />
+          <ScrollControls horizontal damping={0.3} pages={pages}>
+            <Scroll>
+              {/* 장식들을 렌더링 */}
+              {decorations.map((deco, index) => (
+                <group
+                  key={index}
+                  onClick={() => handleModel(deco.fileName)}
+                  position={[index * 4.5, 0, 0]} // 장식 간격 조정
+                >
+                  <InitializeDecoration path={deco.fileName} />
+                </group>
+              ))}
+            </Scroll>
+          </ScrollControls>
+        </Canvas>
+      </Suspense>
+    </div>
+  );
+};
+
+export default DecorationsViewer;