refactor: Add canvas 썸네일 리스트 ui

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>

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>
+    </>
+  )
 }