정렬 배열 리코일 적용

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 { useRecoilState, useRecoilValue } from 'recoil'
-import { canvasSizeState, fontSizeState } from '@/store/canvasAtom'
+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 = () => {

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)
     }
   }
-  
+
   /**
    * 해당 캔버스를 비운다.
    */

src/store/canvasAtom.js

@@ -17,3 +17,9 @@ export const canvasSizeState = atom({
     horizontal: 1000,
   },
 })
+
+export const sortedPolygonArray = atom({
+  key: 'sortedArray',
+  default : [],
+  dangerouslyAllowMutability: true,
+})