- 동선 이동. 형올림내림 모달 추가

src/components/floor-plan/CanvasMenu.jsx

@@ -44,6 +44,7 @@ export default function CanvasMenu(props) {
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
     setShowEavesGableEditModal,
+    setShowMovementModal,
     setShowWallLineOffsetSettingModal,
   } = props
 
@@ -93,6 +94,7 @@ export default function CanvasMenu(props) {
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
     setShowEavesGableEditModal,
+    setShowMovementModal,
     setShowSlopeSettingModal,
     setShowPlacementSurfaceSettingModal,
     setShowPlaceShapeDrawingModal,
@@ -125,6 +127,7 @@ export default function CanvasMenu(props) {
     setShowOutlineModal(false)
     setShowCanvasSettingModal(false)
     setShowEavesGableEditModal(false)
+    setShowMovementModal(false)
     setShowPlaceShapeModal(true)
   }
 

src/components/floor-plan/FloorPlan.jsx

@@ -24,6 +24,7 @@ import WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/
 import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting'
 import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting'
 import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting'
+import MovementSetting from '@/components/floor-plan/modal/movement/MovementSetting'
 
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
@@ -38,6 +39,7 @@ export default function FloorPlan() {
   const [showPlaceShapeDrawingModal, setShowPlaceShapeDrawingModal] = useState(false)
   const [showObjectSettingModal, setShowObjectSettingModal] = useState(false)
   const [showEavesGableEditModal, setShowEavesGableEditModal] = useState(false)
+  const [showMovementModal, setShowMovementModal] = useState(false)
   const [showWallLineOffsetSettingModal, setShowWallLineOffsetSettingModal] = useState(false)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
@@ -74,6 +76,7 @@ export default function FloorPlan() {
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
     setShowEavesGableEditModal,
+    setShowMovementModal,
     setShowWallLineOffsetSettingModal,
   }
 
@@ -143,7 +146,7 @@ export default function FloorPlan() {
           {showSlopeSettingModal && <Slope setShowSlopeSettingModal={setShowSlopeSettingModal} />}
           {showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
           {showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />}
-          {/*<Movement />*/}
+          {showMovementModal && <MovementSetting setShowMovementModal={setShowMovementModal} />}
           {showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
           {showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
           {showPlacementSurfaceSettingModal && <PlacementSurfaceSetting setShowPlacementSurfaceSettingModal={setShowPlacementSurfaceSettingModal} />}

src/components/floor-plan/MenuDepth01.jsx

@@ -15,6 +15,7 @@ export default function MenuDepth01(props) {
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
     setShowEavesGableEditModal,
+    setShowMovementModal,
     setShowSlopeSettingModal,
     setShowPlacementSurfaceSettingModal,
     setShowPlaceShapeDrawingModal,
@@ -28,19 +29,27 @@ export default function MenuDepth01(props) {
     setActiveMenu(menu)
     setShowOutlineModal(menu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
     setCurrentMenu(menu)
-
+    setShowPlaceShapeModal(false)
     if (type === 'outline') {
-      setShowPlaceShapeModal(false)
       setShowOutlineModal(id === 0)
       setShowRoofShapeSettingModal(id === 1)
       setShowRoofShapePassivitySettingModal(id === 2)
       setShowAuxiliaryModal(id === 3)
       setShowEavesGableEditModal(id === 4)
+      setShowMovementModal(id === 5)
       setShowWallLineOffsetSettingModal(id === 6)
       setShowPlaceShapeDrawingModal(false)
     }
 
     if (type === 'surface') {
+      setShowOutlineModal(false)
+      setShowRoofShapeSettingModal(false)
+      setShowRoofShapePassivitySettingModal(false)
+      setShowAuxiliaryModal(false)
+      setShowEavesGableEditModal(false)
+      setShowMovementModal(false)
+      setShowWallLineOffsetSettingModal(false)
+      
       setShowSlopeSettingModal(id === 0)
       setShowPlaceShapeDrawingModal(id === 1)
       setShowPlacementSurfaceSettingModal(id === 2)

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

@@ -1,21 +1,25 @@
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useState } from 'react'
+import FlowLine from '@/components/floor-plan/modal/movement/type/FlowLine'
+import Updown from '@/components/floor-plan/modal/movement/type/Updown'
 
-export default function Movement({}) {
+export default function MovementSetting({ setShowMovementModal }) {
   const { getMessage } = useMessage()
   const [buttonAct, setButtonAct] = useState(1)
   const buttonMenu = [
-    { id: 1, name: '銅線の移動軒' },
-    { id: 2, name: '型上げ・降り' },
+    { id: 1, name: getMessage('modal.movement.flow.line.move') },
+    { id: 2, name: getMessage('modal.movement.flow.line.updown') },
   ]
 
   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>
+          <h1 className="title">{getMessage('plan.menu.roof.cover.movement.shape.updown')}</h1>
+          <button className="modal-close" onClick={() => setShowMovementModal(false)}>
+            닫기
+          </button>
         </div>
         <div className="modal-body">
           <div className="modal-btn-wrap">
@@ -26,12 +30,12 @@ export default function Movement({}) {
             ))}
           </div>
           <div className="properties-setting-wrap outer">
-            <div className="setting-tit">設定</div>
-            {/*{buttonAct === 1 && <MovingTab01 />}*/}
-            {/*{buttonAct === 2 && <MovingTab02 />}*/}
+            <div className="setting-tit">{getMessage('setting')}</div>
+            {buttonAct === 1 && <FlowLine />}
+            {buttonAct === 2 && <Updown />}
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">保存</button>
+            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
           </div>
         </div>
       </div>

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

@@ -0,0 +1,46 @@
+import { useMessage } from '@/hooks/useMessage'
+
+export default function FlowLine({}) {
+  const { getMessage } = useMessage()
+
+  return (
+    <>
+      <div className="outline-wrap">
+        <div className="guide">{getMessage('modal.movement.flow.line.info')}</div>
+        <div className="eaves-keraba-table">
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="d-check-radio pop">
+                <input type="radio" name="radio01" id="ra01" />
+                <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} />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="d-check-radio pop">
+                <input type="radio" name="radio01" id="ra02" />
+                <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} />
+                </div>
+                <span className="thin">mm</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,46 @@
+import { useMessage } from '@/hooks/useMessage'
+
+export default function Updown({}) {
+  const { getMessage } = useMessage()
+
+  return (
+    <>
+      <div className="outline-wrap">
+        <div className="guide">{getMessage('modal.movement.flow.line.updown.info')}</div>
+        <div className="eaves-keraba-table">
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="d-check-radio pop">
+                <input type="radio" name="radio01" id="ra01" />
+                <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} />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="d-check-radio pop">
+                <input type="radio" name="radio01" id="ra02" />
+                <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} />
+                </div>
+                <span className="thin">mm</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/locales/ja.json

@@ -40,9 +40,20 @@
   "plan.menu.roof.cover.outline.drawing": "外壁線を描",
   "plan.menu.roof.cover.roof.shape.setting": "屋根形状設定",
   "plan.menu.roof.cover.roof.shape.passivity.setting": "屋根形状設定",
-  "plan.menu.roof.cover.roof.shape.edit": "지붕형상 편집",
+  "plan.menu.roof.cover.eaves.kerava.edit": "처마·케라바 변경",
+  "plan.menu.roof.cover.movement.shape.updown": "동선이동·형올림내림(JA)",
+  "modal.movement.flow.line.move": "銅線の移動軒",
+  "modal.movement.flow.line.updown": "型上げ・降り",
+  "modal.movement.flow.line.updown.info": "を選択して幅を指定してください桁の異なる辺。",
+  "modal.movement.flow.line.updown.up": "桁を上げる",
+  "modal.movement.flow.line.updown.down": "桁数を下げる",
+  "modal.movement.flow.line.info": "家屋などの壁に面する屋根を作成します。",
+  "modal.movement.flow.line.bottom.left": "高さ変更：下、左",
+  "modal.movement.flow.line.top.right": "高さ変更：上、右",
+  "plan.menu.roof.cover.outline.edit.offset": "외벽선 편집 및 오프셋(JA)",
+  "plan.menu.roof.cover.roof.surface.alloc": "지붕면 할당(JA)",
+  "plan.menu.roof.cover.roof.shape.edit": "지붕형상 편집(JA)",
   "plan.menu.roof.cover.auxiliary.line.drawing": "補助線を描",
-  "plan.menu.roof.cover.roof.surface.alloc": "지붕면 할당",
   "modal.cover.outline.drawing": "外壁線を描",
   "modal.cover.outline": "外壁線",
   "modal.cover.outline.right.angle": "直角",

src/locales/ko.json

@@ -42,6 +42,14 @@
   "plan.menu.roof.cover.roof.shape.passivity.setting": "지붕형상 수동 설정",
   "plan.menu.roof.cover.eaves.kerava.edit": "처마·케라바 변경",
   "plan.menu.roof.cover.movement.shape.updown": "동선이동·형올림내림",
+  "modal.movement.flow.line.move": "동선 이동",
+  "modal.movement.flow.line.updown": "형 올림·내림",
+  "modal.movement.flow.line.updown.info": "자릿수가 다른 변을 선택하고 폭을 지정하십시오.",
+  "modal.movement.flow.line.updown.up": "자릿수를 올리다",
+  "modal.movement.flow.line.updown.down": "자릿수를 낮추다",
+  "modal.movement.flow.line.info": "동선을 선택하고 이동 폭을 지정하십시오",
+  "modal.movement.flow.line.bottom.left": "높이 변경: 아래, 왼쪽",
+  "modal.movement.flow.line.top.right": "높이 변경: 위, 오른쪽",
   "plan.menu.roof.cover.outline.edit.offset": "외벽선 편집 및 오프셋",
   "plan.menu.roof.cover.roof.surface.alloc": "지붕면 할당",
   "plan.menu.roof.cover.roof.shape.edit": "지붕형상 편집",