From e34f3c002a2f0cd459036c66ca5a208eda0e5e9c Mon Sep 17 00:00:00 2001
From: yjnoh <lelalela@daum.net>
Date: Mon, 22 Jul 2024 16:17:35 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A7=80=EB=B6=95=EB=AA=A8=EC=96=91=20?=
 =?UTF-8?q?=EC=A7=80=EA=B7=B8=EC=9E=AC=EA=B7=B8=ED=8C=A8=ED=84=B4=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Roof2.jsx | 30 ++++++++++++++++++++++--------
 src/hooks/useMode.js     | 33 +++++++++++++++++++--------------
 2 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index cefdec64..d5e511aa 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -29,8 +29,19 @@ export default function Roof2() {
 
   const [showControl, setShowControl] = useState(false)
 
-  const { mode, changeMode, handleClear, fillCellInPolygon, zoomIn, zoomOut, zoom, togglePolygonLine, handleOuterlinesTest2, applyTemplateB } =
-    useMode()
+  const {
+    mode,
+    changeMode,
+    handleClear,
+    fillCellInPolygon,
+    zoomIn,
+    zoomOut,
+    zoom,
+    togglePolygonLine,
+    handleOuterlinesTest2,
+    applyTemplateB,
+    makeRoofPatternPolygon,
+  } = useMode()
 
   useEffect(() => {
     if (!canvas) {
@@ -240,6 +251,10 @@ export default function Roof2() {
     setShowControl(!showControl)
   }
 
+  const drawRoofPatterns = (roofStyle) => {
+    makeRoofPatternPolygon(roofStyle)
+  }
+
   return (
     <>
       {canvas && (
@@ -267,12 +282,11 @@ export default function Roof2() {
             <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.PATTERNB)}>
               템플릿(B 패턴)
             </Button>
-            <Button
-              className="m-1 p-2"
-              color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
-              onClick={() => changeMode(canvas, Mode.ROOF_PATTERN)}
-            >
-              지붕패턴
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => drawRoofPatterns(1)}>
+              지붕패턴1
+            </Button>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => drawRoofPatterns(2)}>
+              지붕패턴2
             </Button>
             <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.TEXTBOX)}>
               텍스트박스 모드
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index a2931e93..e7c84a6d 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -2140,7 +2140,7 @@ export function useMode() {
     canvas.renderAll()
   }
 
-  const makeRoofPatternPolygon = () => {
+  const makeRoofPatternPolygon = (roofStyle) => {
     if (Object.keys(roofPolygonPattern).length === 0 && roofPolygonPattern.constructor === Object) {
       alert('객체가 비어있습니다.')
       return
@@ -2157,22 +2157,26 @@ export function useMode() {
 
     // 패턴 소스를 위한 임시 캔버스 생성
     const patternSourceCanvas = document.createElement('canvas')
-    patternSourceCanvas.width = 20 * ratio
-    patternSourceCanvas.height = 15 * ratio
+    patternSourceCanvas.width = 30 * ratio
+    patternSourceCanvas.height = 30 * ratio
     const ctx = patternSourceCanvas.getContext('2d')
 
     // 벽돌 패턴 그리기
     ctx.scale(ratio, ratio)
     ctx.strokeStyle = 'green'
-    ctx.lineWidth = 0.1
+    ctx.lineWidth = 0.2
 
     // 첫 번째 행 벽돌
-    ctx.strokeRect(0, 0, 20, 15)
-    // ctx.strokeRect(30, 20, 30, 20)
-
-    // // 두 번째 행 벽돌
-    // ctx.strokeRect(-30, 20, 60, 20)
-    // ctx.strokeRect(0, 40, 60, 20)
+    if (roofStyle === 2) {
+      //지그재그
+      // // 두 번째 행 벽돌
+      ctx.strokeRect(0, 0, 30, 15)
+      ctx.strokeRect(30, 15, 30, 15)
+      ctx.strokeRect(-15, 15, 30, 15)
+      ctx.strokeRect(0, 30, 30, 15)
+    } else {
+      ctx.strokeRect(0, 0, 30, 30) // 원패턴일때랑 지그재그일때랑은 다르게 들어가야함
+    }
 
     // 패턴 생성
     const pattern = new fabric.Pattern({
@@ -2190,14 +2194,14 @@ export function useMode() {
     const middleRoof = new QPolygon(roofPolygonPattern.middleRoofPolygon, commonOption)
     const smallRoof = new QPolygon(roofPolygonPattern.smallRoofPolygon, commonOption)
 
-    bigRoof.sendToBack() //객체를 가장 뒤로
-    middleRoof.sendToBack()
-    smallRoof.sendToBack()
-
     bigRoof.setViewLengthText(false) //치수 필요없음
     middleRoof.setViewLengthText(false)
     smallRoof.setViewLengthText(false)
 
+    bigRoof.sendToBack() //객체를 가장 뒤로
+    middleRoof.sendToBack()
+    smallRoof.sendToBack()
+
     canvas.add(bigRoof) //캔버스 객체 추가
     canvas.add(middleRoof)
     canvas.add(smallRoof)
@@ -2214,5 +2218,6 @@ export function useMode() {
     zoom,
     togglePolygonLine,
     handleOuterlinesTest2,
+    makeRoofPatternPolygon,
   }
 }