refactor: Pass individual props to Roof2 component for better readability and maintainability

src/app/[locale]/roof2/page.jsx

@@ -4,6 +4,12 @@ import { initCheck } from '@/util/session-util'
 
 export default async function Roof2Page() {
   const session = await initCheck()
+  const roof2Props = {
+    name: session.name || '',
+    userId: session.userId || '',
+    email: session.email || '',
+    isLoggedIn: session.isLoggedIn,
+  }
 
   return (
     <>
@@ -13,7 +19,7 @@ export default async function Roof2Page() {
         </div>
       </div>
       <div className="flex flex-col justify-center my-8 pt-20">
-        <Roof2 session={session} />
+        <Roof2 {...roof2Props} />
       </div>
     </>
   )

src/components/Roof2.jsx

@@ -26,7 +26,8 @@ import CanvasWithContextMenu from '@/util/context-util'
 import { Mode } from '@/common/common'
 import { get } from '@/lib/Axios'
 
-export default function Roof2({ session }) {
+export default function Roof2(props) {
+  const { name, userId, email, isLoggedIn } = props
   const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas')
 
   const canvasRef = useRef(null)
@@ -652,7 +653,7 @@ export default function Roof2({ session }) {
                 </Button>
               </>
             )}
-            <Button className="m-1 p-2" onClick={() => saveImage(uuidv4(), session.userId, setThumbnails)}>
+            <Button className="m-1 p-2" onClick={() => saveImage(uuidv4(), userId, setThumbnails)}>
               저장
             </Button>
             {/*<Button className="m-1 p-2" onClick={rotateShape}>

src/components/ui/ThumbnailLIst.jsx

@@ -5,7 +5,6 @@ import { Card, Image } from '@nextui-org/react'
 
 function ThumbnailList(props) {
   const { thumbnails, canvas } = props
-  console.log('thumbnails', thumbnails)
 
   const handleSelectThumb = (canvasStatus) => {
     console.log('canvasStatus', canvasStatus.length)