From 6b97f9f5134ecbe90a7ebf6e36a4e9b93bd14e78 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Wed, 14 Aug 2024 15:55:48 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=20=EC=9D=B4=EB=A6=84=20=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=20=EB=B0=8F=20=EC=86=8C=EC=8A=A4=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Roof2.jsx            | 4 ++--
 src/components/ui/ThumbnailLIst.jsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 9b7030a1..cb37a4e6 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -18,7 +18,7 @@ import { QLine } from '@/components/fabric/QLine'
 import { getCanvasState, insertCanvasState } from '@/lib/canvas'
 import { calculateIntersection } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
-import ThumbnailLIst from './ui/ThumbnailLIst'
+import ThumbnailList from './ui/ThumbnailLIst'
 
 export default function Roof2() {
   const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas')
@@ -691,7 +691,7 @@ export default function Roof2() {
           </div>
         </>
       )}
-      <ThumbnailLIst />
+      <ThumbnailList />
       <div className="flex justify-start my-8 mx-2 w-full">
         <canvas id="canvas" style={{ border: '1px solid black' }} />
       </div>
diff --git a/src/components/ui/ThumbnailLIst.jsx b/src/components/ui/ThumbnailLIst.jsx
index 69be84d9..a7b2392f 100644
--- a/src/components/ui/ThumbnailLIst.jsx
+++ b/src/components/ui/ThumbnailLIst.jsx
@@ -1,3 +1,3 @@
-export default function ThumbnailLIst() {
+export default function ThumbnailList() {
   return <div className="flex justify-center m-4 w-full">thumbnails</div>
 }

From 5c7d89310bd9098362bcea31b1450f59054acea5 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Wed, 14 Aug 2024 16:13:48 +0900
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20Add=20canvas=20=EC=8D=B8?=
 =?UTF-8?q?=EB=84=A4=EC=9D=BC=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Roof2.jsx            |  8 +++++++-
 src/components/ui/ThumbnailLIst.jsx | 21 +++++++++++++++++++--
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index b5d27724..5e5fbb6c 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -51,6 +51,12 @@ export default function Roof2() {
 
   const wall = useRecoilValue(wallState)
 
+  //canvas 썸네일
+  const [thumbnails, setThumbnails] = useState([])
+  const thumbnailProps = {
+    thumbnails,
+  }
+
   const {
     mode,
     setMode,
@@ -692,7 +698,7 @@ export default function Roof2() {
           </div>
         </>
       )}
-      <ThumbnailList />
+      <ThumbnailList {...thumbnailProps} />
       <div className="flex justify-start my-8 mx-2 w-full">
         <canvas id="canvas" style={{ border: '1px solid black' }} />
       </div>
diff --git a/src/components/ui/ThumbnailLIst.jsx b/src/components/ui/ThumbnailLIst.jsx
index a7b2392f..a36aa16d 100644
--- a/src/components/ui/ThumbnailLIst.jsx
+++ b/src/components/ui/ThumbnailLIst.jsx
@@ -1,3 +1,20 @@
-export default function ThumbnailList() {
-  return <div className="flex justify-center m-4 w-full">thumbnails</div>
+import { Card, Image } from '@nextui-org/react'
+
+export default function ThumbnailList(props) {
+  const { thumbnails } = props
+  console.log(props)
+  console.log(thumbnails)
+
+  return (
+    <>
+      <div className="flex justify-center m-4 w-full">
+        {thumbnails.length > 0 &&
+          thumbnails.map((thumbnail, index) => (
+            <Card isFooterBlurred radius="lg" className="border-none m-2">
+              <Image alt="Woman listing to music" className="object-cover" height={200} src="https://nextui.org/images/hero-card.jpeg" width={200} />
+            </Card>
+          ))}
+      </div>
+    </>
+  )
 }