동선이동.형올림낼미 모달 추가(작업중)

지붕형상 수동 설정 모달 추가(작업중)

src/components/floor-plan/FloorPlan.jsx

@@ -19,6 +19,8 @@ import PlacementShapeDrawing from '@/components/floor-plan/modal/placementShape/
 import Slope from '@/components/floor-plan/modal/Slope'
 import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting'
 import AuxiliaryDrawing from '@/components/floor-plan/modal/auxiliary/AuxiliaryDrawing'
+import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableEdit'
+import Movement from '@/components/floor-plan/modal/movement/Movement'
 
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
@@ -30,6 +32,7 @@ export default function FloorPlan() {
   const [showAuxiliaryModal, setShowAuxiliaryModal] = useState(false)
   const [showSlopeSettingModal, setShowSlopeSettingModal] = useState(false)
   const [showPlaceShapeDrawingModal, setShowPlaceShapeDrawingModal] = useState(false)
+  const [showEavesGableEditModal, setShowEavesGableEditModal] = useState(false)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
 
@@ -62,6 +65,7 @@ export default function FloorPlan() {
     setShowRoofShapeSettingModal,
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
+    setShowEavesGableEditModal,
   }
 
   useEffect(() => {
@@ -128,6 +132,8 @@ export default function FloorPlan() {
           {showAuxiliaryModal && <AuxiliaryDrawing setShowAuxiliaryModal={setShowAuxiliaryModal} />}
           {showSlopeSettingModal && <Slope setShowSlopeSettingModal={setShowSlopeSettingModal} />}
           {showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
+          {showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />}
+          <Movement />
         </div>
       </div>
     </>

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

@@ -0,0 +1,40 @@
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useState } from 'react'
+
+export default function Movement({}) {
+  const { getMessage } = useMessage()
+  const [buttonAct, setButtonAct] = useState(1)
+  const buttonMenu = [
+    { id: 1, name: '銅線の移動軒' },
+    { id: 2, name: '型上げ・降り' },
+  ]
+
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">軒・ケラバ変更</h1>
+          <button className="modal-close">닫기</button>
+        </div>
+        <div className="modal-body">
+          <div className="modal-btn-wrap">
+            {buttonMenu.map((item) => (
+              <button key={item.id} className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} onClick={() => setButtonAct(item.id)}>
+                {item.name}
+              </button>
+            ))}
+          </div>
+          <div className="properties-setting-wrap outer">
+            <div className="setting-tit">設定</div>
+            {/*{buttonAct === 1 && <MovingTab01 />}*/}
+            {/*{buttonAct === 2 && <MovingTab02 />}*/}
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">保存</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx

@@ -0,0 +1,50 @@
+import { useState } from 'react'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import Eaves from '@/components/floor-plan/modal/roofShape/passivity/eaves'
+import Gable from '@/components/floor-plan/modal/roofShape/passivity/gable'
+import Shed from '@/components/floor-plan/modal/roofShape/passivity/shed'
+
+export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySettingModal }) {
+  const [buttonAct, setButtonAct] = useState(1)
+  const buttons = [
+    { id: 1, name: '軒' },
+    { id: 2, name: 'ケラバ' },
+    { id: 3, name: '漂流' },
+  ]
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+      <div className={`modal-pop-wrap xxm`}>
+        <div className="modal-head">
+          <h1 className="title">屋根形状の設定</h1>
+          <button className="modal-close" onClick={() => setShowRoofShapePassivitySettingModal(false)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="modal-btn-wrap">
+            {buttons.map((button) => (
+              <button className={`btn-frame modal ${buttonAct === button.id ? 'act' : ''}`} onClick={() => setButtonAct(button.id)}>
+                {button.name}
+              </button>
+            ))}
+          </div>
+          <div className="modal-bottom-border-bx">
+            <div className="setting-tit">設定</div>
+            <div className="discrimination-box">
+              {buttonAct === 1 && <Eaves />}
+              {buttonAct === 2 && <Gable />}
+              {buttonAct === 3 && <Shed />}
+            </div>
+            <div className="grid-btn-wrap">
+              <button className="btn-frame sub-tab mr5">一変戦に戻る</button>
+              <button className="btn-frame sub-tab act">適用</button>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">設定完了</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/roofShape/passivity/eaves.jsx

@@ -0,0 +1,42 @@
+export default function Eaves() {
+  return (
+    <>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          傾斜
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">寸法</span>
+      </div>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          軒の
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">mm</span>
+      </div>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          ケラバ 出幅
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">mm</span>
+      </div>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          片流幅
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">mm</span>
+      </div>
+    </>
+  )
+}

src/components/floor-plan/modal/roofShape/passivity/gable.jsx

@@ -0,0 +1,42 @@
+export default function Gable() {
+  return (
+    <>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          傾斜
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">寸法</span>
+      </div>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          軒の
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">mm</span>
+      </div>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          ケラバ 出幅
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">mm</span>
+      </div>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          片流幅
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">mm</span>
+      </div>
+    </>
+  )
+}

src/components/floor-plan/modal/roofShape/passivity/shed.js

@@ -0,0 +1,42 @@
+export default function Shed() {
+  return (
+    <>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          傾斜
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">寸法</span>
+      </div>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          軒の
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">mm</span>
+      </div>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          ケラバ 出幅
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">mm</span>
+      </div>
+      <div className="outline-form mb10">
+        <span className="mr10" style={{ width: '63px' }}>
+          片流幅
+        </span>
+        <div className="input-grid mr5">
+          <input type="text" className="input-origin block" defaultValue={100} />
+        </div>
+        <span className="thin">mm</span>
+      </div>
+    </>
+  )
+}