동선이동 형 올림내림 작업 초기세팅

src/common/common.js

@@ -155,10 +155,4 @@ export const SAVE_KEY = [
   'originText',
 ]
 
-export const OBJECT_PROTOTYPE = [
+export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype]
-  fabric.Line.prototype,
-  fabric.Polygon.prototype,
-  // fabric.Text.prototype,
-  // fabric.IText.prototype,
-  fabric.Triangle.prototype,
-]

src/components/floor-plan/modal/movement/MovementSetting.jsx

@@ -4,15 +4,18 @@ import { useState } from 'react'
 import FlowLine from '@/components/floor-plan/modal/movement/type/FlowLine'
 import Updown from '@/components/floor-plan/modal/movement/type/Updown'
 import { usePopup } from '@/hooks/usePopup'
+import { useMovementSetting } from '@/hooks/roofcover/useMovementSetting'
 
 export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
-  const { closePopup } = usePopup()
+  const { TYPE, closePopup, buttonType, type, setType, FLOW_LINE_REF, UP_DOWN_REF, handleSave } = useMovementSetting(id)
-  const [buttonAct, setButtonAct] = useState(1)
+
-  const buttonMenu = [
+  const flowLineProps = {
-    { id: 1, name: getMessage('modal.movement.flow.line.move') },
+    FLOW_LINE_REF,
-    { id: 2, name: getMessage('modal.movement.flow.line.updown') },
+  }
-  ]
+  const updownProps = {
+    UP_DOWN_REF,
+  }
 
   return (
     <WithDraggable isShow={true} pos={pos}>
@@ -25,19 +28,21 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
         </div>
         <div className="modal-body">
           <div className="modal-btn-wrap">
-            {buttonMenu.map((item) => (
+            {buttonType.map((item) => (
-              <button key={item.id} className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} onClick={() => setButtonAct(item.id)}>
+              <button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
                 {item.name}
               </button>
             ))}
           </div>
           <div className="properties-setting-wrap outer">
             <div className="setting-tit">{getMessage('setting')}</div>
-            {buttonAct === 1 && <FlowLine />}
+            {type === TYPE.FLOW_LINE && <FlowLine {...flowLineProps} />}
-            {buttonAct === 2 && <Updown />}
+            {type === TYPE.UP_DOWN && <Updown {...updownProps} />}
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
+            <button className="btn-frame modal act" onClick={handleSave}>
+              {getMessage('modal.common.save')}
+            </button>
           </div>
         </div>
       </div>

src/components/floor-plan/modal/movement/type/FlowLine.jsx

@@ -1,7 +1,24 @@
 import { useMessage } from '@/hooks/useMessage'
+import { useEffect, useState } from 'react'
 
-export default function FlowLine({}) {
+const FLOW_LINE_TYPE = {
+  DOWN_LEFT: 'downLeft',
+  UP_RIGHT: 'upRight',
+}
+
+export default function FlowLine({ FLOW_LINE_REF }) {
   const { getMessage } = useMessage()
+  const [type, setType] = useState(FLOW_LINE_TYPE.DOWN_LEFT)
+
+  useEffect(() => {
+    if (type === FLOW_LINE_TYPE.DOWN_LEFT) {
+      FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''
+      FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.focus()
+    } else {
+      FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''
+      FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.focus()
+    }
+  }, [type])
 
   return (
     <>
@@ -11,14 +28,28 @@ export default function FlowLine({}) {
           <div className="eaves-keraba-item">
             <div className="eaves-keraba-th">
               <div className="d-check-radio pop">
-                <input type="radio" name="radio01" id="ra01" />
+                <input
+                  type="radio"
+                  name="radio01"
+                  id="ra01"
+                  defaultChecked={true}
+                  ref={FLOW_LINE_REF.DOWN_LEFT_RADIO_REF}
+                  onChange={() => {
+                    setType(FLOW_LINE_TYPE.DOWN_LEFT)
+                  }}
+                />
                 <label htmlFor="ra01">{getMessage('modal.movement.flow.line.bottom.left')}</label>
               </div>
             </div>
             <div className="eaves-keraba-td">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" defaultValue={100} />
+                  <input
+                    type="text"
+                    className="input-origin block"
+                    readOnly={type !== FLOW_LINE_TYPE.DOWN_LEFT}
+                    ref={FLOW_LINE_REF.DOWN_LEFT_INPUT_REF}
+                  />
                 </div>
               </div>
             </div>
@@ -26,14 +57,27 @@ export default function FlowLine({}) {
           <div className="eaves-keraba-item">
             <div className="eaves-keraba-th">
               <div className="d-check-radio pop">
-                <input type="radio" name="radio01" id="ra02" />
+                <input
+                  type="radio"
+                  name="radio01"
+                  id="ra02"
+                  ref={FLOW_LINE_REF.UP_RIGHT_RADIO_REF}
+                  onChange={() => {
+                    setType(FLOW_LINE_TYPE.UP_RIGHT)
+                  }}
+                />
                 <label htmlFor="ra02">{getMessage('modal.movement.flow.line.top.right')}</label>
               </div>
             </div>
             <div className="eaves-keraba-td">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" defaultValue={100} />
+                  <input
+                    type="text"
+                    className="input-origin block"
+                    readOnly={type !== FLOW_LINE_TYPE.UP_RIGHT}
+                    ref={FLOW_LINE_REF.UP_RIGHT_INPUT_REF}
+                  />
                 </div>
                 <span className="thin">mm</span>
               </div>

src/components/floor-plan/modal/movement/type/Updown.jsx

@@ -1,7 +1,24 @@
 import { useMessage } from '@/hooks/useMessage'
+import { useEffect, useState } from 'react'
 
-export default function Updown({}) {
+const UP_DOWN_TYPE = {
+  UP: 'up',
+  DOWN: 'down',
+}
+
+export default function Updown({ UP_DOWN_REF }) {
   const { getMessage } = useMessage()
+  const [type, setType] = useState(UP_DOWN_TYPE.UP)
+
+  useEffect(() => {
+    if (type === UP_DOWN_TYPE.UP) {
+      UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
+      UP_DOWN_REF.UP_INPUT_REF.current.focus()
+    } else {
+      UP_DOWN_REF.UP_INPUT_REF.current.value = ''
+      UP_DOWN_REF.DOWN_INPUT_REF.current.focus()
+    }
+  }, [type])
 
   return (
     <>
@@ -11,14 +28,23 @@ export default function Updown({}) {
           <div className="eaves-keraba-item">
             <div className="eaves-keraba-th">
               <div className="d-check-radio pop">
-                <input type="radio" name="radio01" id="ra01" />
+                <input
+                  type="radio"
+                  name="radio01"
+                  id="ra01"
+                  ref={UP_DOWN_REF.UP_RADIO_REF}
+                  defaultChecked={true}
+                  onChange={() => {
+                    setType(UP_DOWN_TYPE.UP)
+                  }}
+                />
                 <label htmlFor="ra01">{getMessage('modal.movement.flow.line.updown.up')}</label>
               </div>
             </div>
             <div className="eaves-keraba-td">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" defaultValue={100} />
+                  <input type="text" className="input-origin block" readOnly={type !== UP_DOWN_TYPE.UP} ref={UP_DOWN_REF.UP_INPUT_REF} />
                 </div>
               </div>
             </div>
@@ -26,14 +52,22 @@ export default function Updown({}) {
           <div className="eaves-keraba-item">
             <div className="eaves-keraba-th">
               <div className="d-check-radio pop">
-                <input type="radio" name="radio01" id="ra02" />
+                <input
+                  type="radio"
+                  name="radio01"
+                  id="ra02"
+                  ref={UP_DOWN_REF.DOWN_RADIO_REF}
+                  onChange={() => {
+                    setType(UP_DOWN_TYPE.DOWN)
+                  }}
+                />
                 <label htmlFor="ra02">{getMessage('modal.movement.flow.line.updown.down')}</label>
               </div>
             </div>
             <div className="eaves-keraba-td">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" defaultValue={100} />
+                  <input type="text" className="input-origin block" readOnly={type !== UP_DOWN_TYPE.DOWN} ref={UP_DOWN_REF.DOWN_INPUT_REF} />
                 </div>
                 <span className="thin">mm</span>
               </div>

src/hooks/roofcover/useMovementSetting.js

@@ -0,0 +1,48 @@
+import { useRecoilValue } from 'recoil'
+import { canvasState } from '@/store/canvasAtom'
+import { usePopup } from '@/hooks/usePopup'
+import { useMessage } from '@/hooks/useMessage'
+import { useRef, useState } from 'react'
+
+//동선이동 형 올림 내림
+export function useMovementSetting(id) {
+  const TYPE = {
+    FLOW_LINE: 'flowLine', // 동선이동
+    UP_DOWN: 'updown', //형 올림내림
+  }
+  const canvas = useRecoilValue(canvasState)
+  const { closePopup } = usePopup()
+  const { getMessage } = useMessage()
+  const buttonType = [
+    { id: 1, name: getMessage('modal.movement.flow.line.move'), type: TYPE.FLOW_LINE },
+    { id: 2, name: getMessage('modal.movement.flow.line.updown'), type: TYPE.UP_DOWN },
+  ]
+  const [type, setType] = useState(TYPE.FLOW_LINE)
+
+  const FLOW_LINE_REF = {
+    DOWN_LEFT_INPUT_REF: useRef(null),
+    UP_RIGHT_INPUT_REF: useRef(null),
+    DOWN_LEFT_RADIO_REF: useRef(null),
+    UP_RIGHT_RADIO_REF: useRef(null),
+  }
+
+  const UP_DOWN_REF = {
+    UP_INPUT_REF: useRef(null),
+    DOWN_INPUT_REF: useRef(null),
+    UP_RADIO_REF: useRef(null),
+    DOWN_RADIO_REF: useRef(null),
+  }
+
+  const handleSave = () => {}
+
+  return {
+    TYPE,
+    closePopup,
+    buttonType,
+    type,
+    setType,
+    FLOW_LINE_REF,
+    UP_DOWN_REF,
+    handleSave,
+  }
+}