From b5aeed7874a0232e5439a4392fe76f58a1b13547 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 11 Dec 2024 14:33:59 +0900
Subject: [PATCH] =?UTF-8?q?=ED=9D=90=EB=A6=84=EB=B0=A9=ED=96=A5=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/common.js                          |  1 +
 .../flowDirection/FlowDirectionSetting.jsx    | 41 +++++++++++++++----
 .../contextpopup/useFlowDirectionSetting.js   | 30 --------------
 3 files changed, 33 insertions(+), 39 deletions(-)
 delete mode 100644 src/hooks/contextpopup/useFlowDirectionSetting.js

diff --git a/src/common/common.js b/src/common/common.js
index 9bf6d367..e2e31889 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -159,6 +159,7 @@ export const SAVE_KEY = [
   'offset',
   'arrow',
   'surfaceCompass',
+  'surfaceCompassType',
   'moduleCompass',
   'isFixed',
   'modules',
diff --git a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
index da49b07c..8e072e18 100644
--- a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
+++ b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
@@ -5,9 +5,14 @@ import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
-import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
-import { FLOW_DIRECTION_TYPE, useFlowDirectionSetting } from '@/hooks/contextpopup/useFlowDirectionSetting'
 import { canvasState } from '@/store/canvasAtom'
+import { usePolygon } from '@/hooks/usePolygon'
+
+const FLOW_DIRECTION_TYPE = {
+  EIGHT_AZIMUTH: 'eightAzimuth',
+  TWENTY_FOUR_AZIMUTH: 'twentyFourAzimuth',
+}
+
 export default function FlowDirectionSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition, target } = props
@@ -20,10 +25,9 @@ export default function FlowDirectionSetting(props) {
     }
   }, [])
 
-  const [compasDeg, setCompasDeg] = useState(null)
+  const [compasDeg, setCompasDeg] = useState(target.surfaceCompass ?? null)
   const [flowDirection, setFlowDirection] = useState(target.direction)
   const { closePopup } = usePopup()
-  const { changeSurfaceFlowDirection, type, setType } = useFlowDirectionSetting(id)
 
   const orientations = [
     { name: `${getMessage('commons.none')}`, value: 0 },
@@ -36,7 +40,27 @@ export default function FlowDirectionSetting(props) {
     { name: `${getMessage('commons.north')}${getMessage('commons.west')}`, value: 135 },
     { name: `${getMessage('commons.north')}`, value: 180 },
   ]
-  const [selectedOrientation, setSelectedOrientation] = useState(orientations[0])
+
+  const { drawDirectionArrow } = usePolygon()
+
+  const [type, setType] = useState(target.surfaceCompassType ?? FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
+
+  const changeSurfaceFlowDirection = (roof, direction, orientation) => {
+    roof.set({
+      direction: direction,
+      surfaceCompass: orientation,
+      surfaceCompassType: type,
+    })
+    drawDirectionArrow(roof)
+    canvas?.renderAll()
+    closePopup(id)
+  }
+
+  const [selectedOrientation, setSelectedOrientation] = useState(
+    target.surfaceCompassType !== null && target.surfaceCompassType === FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH
+      ? orientations.find((item) => item.value === target.surfaceCompass)
+      : orientations[0],
+  )
 
   return (
     <WithDraggable isShow={true} pos={pos}>
@@ -84,9 +108,8 @@ export default function FlowDirectionSetting(props) {
                 </div>
                 <div className="grid-select ">
                   <QSelectBox
-                    title={''}
+                    title={selectedOrientation.name}
                     options={orientations}
-                    value={selectedOrientation}
                     onChange={(e) => {
                       setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
                       setSelectedOrientation(e)
@@ -116,7 +139,7 @@ export default function FlowDirectionSetting(props) {
                     {Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
                       <div
                         key={index}
-                        className={`circle ${compasDeg === 15 * (12 + index) ? 'act' : ''}`}
+                        className={`circle ${compasDeg === 15 * (12 + index) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
                         onClick={() => {
                           setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
                           setCompasDeg(15 * (12 + index))
@@ -126,7 +149,7 @@ export default function FlowDirectionSetting(props) {
                     {Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
                       <div
                         key={index}
-                        className={`circle ${compasDeg === 15 * (index + 1) ? 'act' : ''}`}
+                        className={`circle ${compasDeg === 15 * (index + 1) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
                         onClick={() => {
                           setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
                           setCompasDeg(15 * (index + 1))
diff --git a/src/hooks/contextpopup/useFlowDirectionSetting.js b/src/hooks/contextpopup/useFlowDirectionSetting.js
deleted file mode 100644
index 9e77aa4a..00000000
--- a/src/hooks/contextpopup/useFlowDirectionSetting.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { canvasState } from '@/store/canvasAtom'
-import { useRecoilValue } from 'recoil'
-import { usePolygon } from '@/hooks/usePolygon'
-import { useState } from 'react'
-import { usePopup } from '@/hooks/usePopup'
-
-export const FLOW_DIRECTION_TYPE = {
-  EIGHT_AZIMUTH: 'eightAzimuth',
-  TWENTY_FOUR_AZIMUTH: 'twentyFourAzimuth',
-}
-
-export function useFlowDirectionSetting(id) {
-  const canvas = useRecoilValue(canvasState)
-  const { drawDirectionArrow } = usePolygon()
-  const { closePopup } = usePopup()
-
-  const [type, setType] = useState(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
-
-  const changeSurfaceFlowDirection = (roof, direction, orientation) => {
-    roof.set({
-      direction: direction,
-      surfaceCompass: orientation,
-    })
-    drawDirectionArrow(roof)
-    canvas?.renderAll()
-    closePopup(id)
-  }
-
-  return { changeSurfaceFlowDirection, type, setType }
-}