From ad5e62039c5ca72ce7c8be327b3aa4383e2fbc5f Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Thu, 22 Aug 2024 18:12:32 +0900
Subject: [PATCH] refactor: Pass individual props to Roof2 component for better
 readability and maintainability

---
 src/app/[locale]/roof2/page.jsx     | 8 +++++++-
 src/components/Roof2.jsx            | 5 +++--
 src/components/ui/ThumbnailLIst.jsx | 1 -
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/[locale]/roof2/page.jsx b/src/app/[locale]/roof2/page.jsx
index 6b1b8cb0..72881d11 100644
--- a/src/app/[locale]/roof2/page.jsx
+++ b/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>
     </>
   )
diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 0f02aad9..472d5452 100644
--- a/src/components/Roof2.jsx
+++ b/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}>
diff --git a/src/components/ui/ThumbnailLIst.jsx b/src/components/ui/ThumbnailLIst.jsx
index f8eae026..b50f506f 100644
--- a/src/components/ui/ThumbnailLIst.jsx
+++ b/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)