From e3bff53c09334c8d0202bd542704d14082fe803c Mon Sep 17 00:00:00 2001
From: yjnoh <yjnoh@interplug.co.kr>
Date: Mon, 8 Jul 2024 10:41:35 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A0=95=EB=A0=AC=20=EB=B0=B0=EC=97=B4=20?=
 =?UTF-8?q?=EB=A6=AC=EC=BD=94=EC=9D=BC=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Roof2.jsx | 9 +++++++--
 src/hooks/useMode.js     | 9 ++++++---
 src/store/canvasAtom.js  | 6 ++++++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 07c5b86c..fb08313f 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -6,8 +6,8 @@ import QLine from '@/components/fabric/QLine'
 import QPolygon from '@/components/fabric/QPolygon'
 
 import RangeSlider from './ui/RangeSlider'
-import { useRecoilState } from 'recoil'
-import { canvasSizeState, fontSizeState } from '@/store/canvasAtom'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom'
 
 export default function Roof2() {
   const {
@@ -28,6 +28,8 @@ export default function Roof2() {
   // 글자크기
   const [fontSize, setFontSize] = useRecoilState(fontSizeState)
 
+  const [sortedArray] = useRecoilState(sortedPolygonArray)
+
   const [angle, setAngle] = useState(0)
 
   const {
@@ -121,6 +123,9 @@ export default function Roof2() {
    */
   useEffect(() => {
     canvasSizeMode()
+
+    console.log('sortedArray', sortedArray)
+
   }, [verticalSize, horizontalSize])
 
   const makeQPolygon = () => {
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index 63b4333b..4b791ce6 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -4,7 +4,7 @@ import QRect from '@/components/fabric/QRect'
 import QPolygon from '@/components/fabric/QPolygon'
 import { getStartIndex, rearrangeArray, findTopTwoIndexesByDistance } from '@/util/canvas-util'
 import { useRecoilState } from 'recoil'
-import { fontSizeState } from '@/store/canvasAtom'
+import { fontSizeState, sortedPolygonArray } from '@/store/canvasAtom'
 
 export const Mode = {
   DRAW_LINE: 'drawLine', // 기준선 긋기모드
@@ -24,6 +24,7 @@ export function useMode() {
   const [zoom, setZoom] = useState(100)
   const [fontSize] = useRecoilState(fontSizeState)
   const [shape, setShape] = useState(0)
+  const [sortedArray, setSortedArray] = useRecoilState(sortedPolygonArray)
 
   const addEvent = (mode) => {
     switch (mode) {
@@ -388,10 +389,12 @@ export function useMode() {
       
       if(tmpArraySorted[0].direction === 'right') { //시계방향
         tmpArraySorted = tmpArraySorted.reverse() //그럼 배열을 거꾸로 만들어서 무조건 반시계방향으로 배열 보정
+        
       }
 
+      setSortedArray(tmpArraySorted) //recoil에 넣음
       const topIndex = findTopTwoIndexesByDistance(tmpArraySorted) //배열중에 큰 2값을 가져옴 TODO: 나중에는 인자로 받아서 다각으로 수정 해야됨
-      
+
       //일단 배열 6개 짜리 기준의 선 번호
       if (topIndex[0] === 4) { 
         if (topIndex[1] === 5){ //1번
@@ -448,7 +451,7 @@ export function useMode() {
       setMode(Mode.DEFAULT)
     }
   }
-  
+
   /**
    * 해당 캔버스를 비운다.
    */
diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js
index 4c66c5ff..c4b5dd19 100644
--- a/src/store/canvasAtom.js
+++ b/src/store/canvasAtom.js
@@ -17,3 +17,9 @@ export const canvasSizeState = atom({
     horizontal: 1000,
   },
 })
+
+export const sortedPolygonArray = atom({
+  key: 'sortedArray',
+  default : [],
+  dangerouslyAllowMutability: true,
+})