diff --git a/src/app/[locale]/community/archive/page.jsx b/src/app/[locale]/community/archive/page.jsx
index 06971385..4c0cbdb0 100644
--- a/src/app/[locale]/community/archive/page.jsx
+++ b/src/app/[locale]/community/archive/page.jsx
@@ -1,14 +1,12 @@
-'use client'
-
 import Hero from '@/components/Hero'
 import Archive from '@/components/community/Archive'
 
 export default function CommunityArchivePage() {
   return (
     <>
-      <Hero title="자료 다운로드"/>
+      <Hero title="자료 다운로드" />
       <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
-        <Archive/>
+        <Archive />
       </div>
     </>
   )
diff --git a/src/app/[locale]/community/faq/page.jsx b/src/app/[locale]/community/faq/page.jsx
index 63992da8..3f764566 100644
--- a/src/app/[locale]/community/faq/page.jsx
+++ b/src/app/[locale]/community/faq/page.jsx
@@ -1,14 +1,12 @@
-'use client'
-
 import Hero from '@/components/Hero'
 import Faq from '@/components/community/Faq'
 
 export default function CommunityFaqPage() {
   return (
     <>
-      <Hero title="FAQ"/>
+      <Hero title="FAQ" />
       <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
-        <Faq/>
+        <Faq />
       </div>
     </>
   )
diff --git a/src/app/[locale]/community/notice/page.jsx b/src/app/[locale]/community/notice/page.jsx
index 5c5d0559..5372112e 100644
--- a/src/app/[locale]/community/notice/page.jsx
+++ b/src/app/[locale]/community/notice/page.jsx
@@ -1,14 +1,12 @@
-'use client'
-
 import Hero from '@/components/Hero'
 import Notice from '@/components/community/Notice'
 
 export default function CommunityNoticePage() {
   return (
     <>
-      <Hero title="공지사항"/>
+      <Hero title="공지사항" />
       <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
-        <Notice/>
+        <Notice />
       </div>
     </>
   )
diff --git a/src/app/[locale]/management/plan/page.jsx b/src/app/[locale]/management/plan/page.jsx
index 45afb7fa..61937238 100644
--- a/src/app/[locale]/management/plan/page.jsx
+++ b/src/app/[locale]/management/plan/page.jsx
@@ -1,14 +1,12 @@
-'use client'
-
 import Hero from '@/components/Hero'
 import Plan from '@/components/management/Plan'
 
 export default function ManagementPlanPage() {
   return (
     <>
-      <Hero title="도면관리"/>
+      <Hero title="도면관리" />
       <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
-        <Plan/>
+        <Plan />
       </div>
     </>
   )
diff --git a/src/app/[locale]/management/stuff/page.jsx b/src/app/[locale]/management/stuff/page.jsx
index a548be92..15131ba6 100644
--- a/src/app/[locale]/management/stuff/page.jsx
+++ b/src/app/[locale]/management/stuff/page.jsx
@@ -1,5 +1,3 @@
-'use client'
-
 import Hero from '@/components/Hero'
 import Stuff from '@/components/management/Stuff'
 
@@ -8,7 +6,7 @@ export default function ManagementStuffPage() {
     <>
       <Hero title="물건관리" />
       <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
-        <Stuff/>
+        <Stuff />
       </div>
     </>
   )
diff --git a/src/app/[locale]/master/company/page.jsx b/src/app/[locale]/master/company/page.jsx
index 18be29e2..6ee60f0e 100644
--- a/src/app/[locale]/master/company/page.jsx
+++ b/src/app/[locale]/master/company/page.jsx
@@ -1,14 +1,12 @@
-'use client'
-
 import Hero from '@/components/Hero'
 import Company from '@/components/master/Company'
 
 export default function MasterCompanyPage() {
   return (
     <>
-      <Hero title="회사정보 조회"/>
+      <Hero title="회사정보 조회" />
       <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
-        <Company/>
+        <Company />
       </div>
     </>
   )
diff --git a/src/app/[locale]/master/price/page.jsx b/src/app/[locale]/master/price/page.jsx
index e60210fb..c0e5a40d 100644
--- a/src/app/[locale]/master/price/page.jsx
+++ b/src/app/[locale]/master/price/page.jsx
@@ -1,5 +1,3 @@
-'use client'
-
 import Hero from '@/components/Hero'
 import Price from '@/components/master/Price'
 
diff --git a/src/app/[locale]/roof/page.jsx b/src/app/[locale]/roof/page.jsx
index 756199c3..4d9703f3 100644
--- a/src/app/[locale]/roof/page.jsx
+++ b/src/app/[locale]/roof/page.jsx
@@ -1,5 +1,3 @@
-'use client'
-
 import Hero from '@/components/Hero'
 import Roof from '@/components/Roof'
 
diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 2a962254..7a560541 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -19,6 +19,7 @@ import { getCanvasState, insertCanvasState } from '@/lib/canvas'
 import { calculateIntersection } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { useAxios } from '@/hooks/useAxios'
+import ThumbnailLIst from './ui/ThumbnailLIst'
 
 export default function Roof2() {
   const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas')
@@ -691,6 +692,7 @@ export default function Roof2() {
           </div>
         </>
       )}
+      <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
new file mode 100644
index 00000000..69be84d9
--- /dev/null
+++ b/src/components/ui/ThumbnailLIst.jsx
@@ -0,0 +1,3 @@
+export default function ThumbnailLIst() {
+  return <div className="flex justify-center m-4 w-full">thumbnails</div>
+}