외벽선 편집 및 오프셋 모달 추가

src/components/floor-plan/CanvasMenu.jsx

@@ -42,6 +42,7 @@ export default function CanvasMenu(props) {
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
     setShowEavesGableEditModal,
+    setShowWallLineOffsetSettingModal,
   } = props
 
   const [menuNumber, setMenuNumber] = useState(null)
@@ -92,6 +93,7 @@ export default function CanvasMenu(props) {
     setShowEavesGableEditModal,
     setShowSlopeSettingModal,
     setShowPlaceShapeDrawingModal,
+    setShowWallLineOffsetSettingModal,
     type,
   }
 

src/components/floor-plan/FloorPlan.jsx

@@ -20,6 +20,7 @@ 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 WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting'
 
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
@@ -32,6 +33,7 @@ export default function FloorPlan() {
   const [showSlopeSettingModal, setShowSlopeSettingModal] = useState(false)
   const [showPlaceShapeDrawingModal, setShowPlaceShapeDrawingModal] = useState(false)
   const [showEavesGableEditModal, setShowEavesGableEditModal] = useState(false)
+  const [showWallLineOffsetSettingModal, setShowWallLineOffsetSettingModal] = useState(false)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
 
@@ -65,6 +67,7 @@ export default function FloorPlan() {
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
     setShowEavesGableEditModal,
+    setShowWallLineOffsetSettingModal,
   }
 
   useEffect(() => {
@@ -133,6 +136,7 @@ export default function FloorPlan() {
           {showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
           {showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />}
           {/*<Movement />*/}
+          {showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
         </div>
       </div>
     </>

src/components/floor-plan/MenuDepth01.jsx

@@ -17,6 +17,7 @@ export default function MenuDepth01(props) {
     setShowEavesGableEditModal,
     setShowSlopeSettingModal,
     setShowPlaceShapeDrawingModal,
+    setShowWallLineOffsetSettingModal,
   } = props
   const { getMessage } = useMessage()
   const [activeMenu, setActiveMenu] = useState()
@@ -33,6 +34,7 @@ export default function MenuDepth01(props) {
       setShowRoofShapePassivitySettingModal(id === 2)
       setShowAuxiliaryModal(id === 3)
       setShowEavesGableEditModal(id === 4)
+      setShowWallLineOffsetSettingModal(id === 6)
       setShowPlaceShapeDrawingModal(false)
     }
 

src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx

@@ -0,0 +1,43 @@
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useState } from 'react'
+import WallLine from '@/components/floor-plan/modal/wallLineOffset/type/WallLine'
+import Offset from '@/components/floor-plan/modal/wallLineOffset/type/Offset'
+
+export default function WallLineOffsetSetting({ setShowWallLineOffsetSettingModal }) {
+  const { getMessage } = useMessage()
+  const [buttonAct, setButtonAct] = useState(1)
+  const buttonMenu = [
+    { id: 1, name: getMessage('modal.wallline.offset.setting.wallline.edit') },
+    { id: 2, name: getMessage('modal.wallline.offset.setting.offset') },
+  ]
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.wallline.offset.setting')}</h1>
+          <button className="modal-close" onClick={() => setShowWallLineOffsetSettingModal(false)}>
+            닫기
+          </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">{getMessage('setting')}</div>
+            {buttonAct === 1 && <WallLine />}
+            {buttonAct === 2 && <Offset />}
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx

@@ -0,0 +1,42 @@
+import { useMessage } from '@/hooks/useMessage'
+
+export default function Offset({ setShowSlopeSettingModal }) {
+  const { getMessage } = useMessage()
+  return (
+    <>
+      <div className="outline-wrap">
+        <div className="guide sm">{getMessage('modal.wallline.offset.setting.offset.info')}</div>
+        <div className="discrimination-box mb10">
+          <div className="padding-form">
+            <div className="eaves-keraba-table">
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('length')}</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 className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.cover.outline.arrow')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="grid-direction">
+                      <button className="direction up"></button>
+                      <button className="direction down act"></button>
+                      <button className="direction left"></button>
+                      <button className="direction right"></button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/floor-plan/modal/wallLineOffset/type/WallLine.jsx

@@ -0,0 +1,83 @@
+import { useMessage } from '@/hooks/useMessage'
+import { useState } from 'react'
+
+export default function WallLine({ setShowSlopeSettingModal }) {
+  const { getMessage } = useMessage()
+  const [position1, setPosition1] = useState()
+  const [position2, setPosition2] = useState()
+  return (
+    <>
+      <div className="outline-wrap">
+        <div className="guide sm">{getMessage('modal.wallline.offset.setting.wallline.edit.info')}</div>
+        <div className="discrimination-box mb10">
+          <div className="d-check-radio pop mb10">
+            <input type="radio" name="radio01" id="ra01" />
+            <label htmlFor="ra01">1{getMessage('modal.wallline.offset.setting.wallline.edit.position')}</label>
+          </div>
+          <div className="padding-form">
+            <div className="eaves-keraba-table">
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('length')}</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 className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.cover.outline.arrow')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="grid-direction">
+                      <button className="direction up"></button>
+                      <button className="direction down act"></button>
+                      <button className="direction left"></button>
+                      <button className="direction right"></button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="discrimination-box">
+          <div className="d-check-radio pop mb10">
+            <input type="radio" name="radio01" id="ra02" />
+            <label htmlFor="ra02">2{getMessage('modal.wallline.offset.setting.wallline.edit.position')}</label>
+          </div>
+          <div className="padding-form">
+            <div className="eaves-keraba-table">
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('length')}</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 className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.cover.outline.arrow')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="outline-form">
+                    <div className="grid-direction">
+                      <button className="direction up"></button>
+                      <button className="direction down act"></button>
+                      <button className="direction left"></button>
+                      <button className="direction right"></button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/locales/ja.json

@@ -147,6 +147,12 @@
   "modal.eaves.gable.edit": "軒・ケラバ変更",
   "modal.eaves.gable.edit.basic": "通常",
   "modal.eaves.gable.edit.wall.merge.info": "家屋などの壁に面する屋根を作成します。",
+  "modal.wallline.offset.setting": "外壁の編集とオフセット",
+  "modal.wallline.offset.setting.wallline.edit": "外壁の編集",
+  "modal.wallline.offset.setting.wallline.edit.info": "辺と始点を選択して長さと方向を指定してください。",
+  "modal.wallline.offset.setting.wallline.edit.position": "支店",
+  "modal.wallline.offset.setting.offset": "オフセット",
+  "modal.wallline.offset.setting.offset.info": "オフセットしたい外壁を選択してください。",
   "setting": "設定",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "ダウンロードするデータがありません",

src/locales/ko.json

@@ -154,6 +154,12 @@
   "modal.eaves.gable.edit": "처마・케라바 변경",
   "modal.eaves.gable.edit.basic": "통상",
   "modal.eaves.gable.edit.wall.merge.info": "하옥 등 벽에 접하는 지붕을 작성합니다.",
+  "modal.wallline.offset.setting": "외벽선 편집 및 오프셋",
+  "modal.wallline.offset.setting.wallline.edit": "외벽선 편집",
+  "modal.wallline.offset.setting.wallline.edit.info": "변과 시작점을 선택하고 길이와 방향을 지정해 주세요.",
+  "modal.wallline.offset.setting.wallline.edit.position": "지점",
+  "modal.wallline.offset.setting.offset": "오프셋",
+  "modal.wallline.offset.setting.offset.info": "오프셋 하고 싶은 외벽선을 선택하세요.",
   "setting": "설정",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "No data to download",