처마.캐라바 변경 모달 추가

src/components/floor-plan/CanvasMenu.jsx

@@ -41,6 +41,7 @@ export default function CanvasMenu(props) {
     setShowRoofShapeSettingModal,
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
+    setShowEavesGableEditModal,
   } = props
 
   const [menuNumber, setMenuNumber] = useState(null)
@@ -88,6 +89,7 @@ export default function CanvasMenu(props) {
     setShowRoofShapeSettingModal,
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
+    setShowEavesGableEditModal,
     setShowSlopeSettingModal,
     setShowPlaceShapeDrawingModal,
     type,
@@ -116,6 +118,7 @@ export default function CanvasMenu(props) {
   const onClickPlacementInitialMenu = () => {
     setShowOutlineModal(false)
     setShowCanvasSettingModal(false)
+    setShowEavesGableEditModal(false)
     setShowPlaceShapeModal(true)
   }
 

src/components/floor-plan/MenuDepth01.jsx

@@ -14,6 +14,7 @@ export default function MenuDepth01(props) {
     setShowRoofShapeSettingModal,
     setShowRoofShapePassivitySettingModal,
     setShowAuxiliaryModal,
+    setShowEavesGableEditModal,
     setShowSlopeSettingModal,
     setShowPlaceShapeDrawingModal,
   } = props
@@ -31,6 +32,7 @@ export default function MenuDepth01(props) {
       setShowRoofShapeSettingModal(id === 1)
       setShowRoofShapePassivitySettingModal(id === 2)
       setShowAuxiliaryModal(id === 3)
+      setShowEavesGableEditModal(id === 4)
       setShowPlaceShapeDrawingModal(false)
     }
 

src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx

@@ -0,0 +1,46 @@
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useState } from 'react'
+import Eaves from '@/components/floor-plan/modal/eavesGable/type/Eaves'
+import Gable from '@/components/floor-plan/modal/eavesGable/type/Gable'
+import WallMerge from '@/components/floor-plan/modal/eavesGable/type/WallMerge'
+import Shed from '@/components/floor-plan/modal/eavesGable/type/Shed'
+
+export default function EavesGableEdit({ setShowEavesGableEditModal }) {
+  const { getMessage } = useMessage()
+  const [buttonAct, setButtonAct] = useState(1)
+  const buttonMenu = [
+    { id: 1, name: getMessage('eaves') },
+    { id: 2, name: getMessage('gable') },
+    { id: 3, name: getMessage('wall.merge') },
+    { id: 4, name: getMessage('shed') },
+  ]
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+      <div className={`modal-pop-wrap r`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.eaves.gable.edit')}</h1>
+          <button className="modal-close" onClick={() => setShowEavesGableEditModal(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 && <Eaves />}
+            {buttonAct === 2 && <Gable />}
+            {buttonAct === 3 && <WallMerge />}
+            {buttonAct === 4 && <Shed />}
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/eavesGable/type/Eaves.jsx

@@ -0,0 +1,81 @@
+import { useMessage } from '@/hooks/useMessage'
+import Image from 'next/image'
+import { useState } from 'react'
+
+export default function Eaves() {
+  const { getMessage } = useMessage()
+  const [type, setType] = useState()
+  const onChange = (e) => {
+    console.log(e)
+    setType(e.target.value)
+  }
+  return (
+    <>
+      <div className="outline-wrap">
+        <div className="outline-form mb15">
+          <span className="mr10" style={{ width: '24px' }}>
+            {getMessage('slope')}
+          </span>
+          <div className="input-grid mr5" style={{ width: '100px' }}>
+            <input type="text" className="input-origin block" defaultValue={100} />
+          </div>
+          <span className="thin">寸</span>
+        </div>
+        <div className="outline-form">
+          <span className="mr10" style={{ width: '24px' }}>
+            {getMessage('offset')}
+          </span>
+          <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 className="outline-wrap">
+        <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" value="1" checked={type === '1'} onChange={(e) => onChange(e)} />
+                <label htmlFor="ra01">{getMessage('modal.eaves.gable.edit.basic')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className={`eaves-keraba-ico ${type === '1' ? 'act' : ''}`}>
+                <Image src="/static/images/canvas/eaves_icon01.svg" alt="react" width={30} height={30} />
+              </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" value="2" checked={type === '2'} onChange={(e) => onChange(e)} />
+                <label htmlFor="ra02">{getMessage('hipandgable')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className={`eaves-keraba-ico ${type === '2' ? 'act' : ''}`}>
+                <Image src="/static/images/canvas/eaves_icon02.svg" alt="react" width={30} height={30} />
+              </div>
+            </div>
+          </div>
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="outline-form">
+                <div className="input-grid mr5" style={{ width: '100px' }}>
+                  <input type="text" className="input-origin block" defaultValue={100} readOnly={type === '1'} />
+                </div>
+                <span className="thin">mm</span>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="eaves-keraba-ico ">
+                <Image src="/static/images/canvas/eaves_icon03.svg" alt="react" width={30} height={30} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/floor-plan/modal/eavesGable/type/Gable.jsx

@@ -0,0 +1,87 @@
+import { useMessage } from '@/hooks/useMessage'
+import Image from 'next/image'
+
+export default function Gable() {
+  const { getMessage } = useMessage()
+  return (
+    <>
+      <div className="outline-wrap">
+        <div className="outline-form ">
+          <span className="mr10" style={{ width: '24px' }}>
+            {getMessage('offset')}
+          </span>
+          <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 className="outline-wrap">
+        <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.eaves.gable.edit.basic')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="eaves-keraba-ico act">
+                <Image src="/static/images/canvas/eaves_icon04.svg" alt="react" width={30} height={30} />
+              </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('jerkinhead')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="eaves-keraba-ico">
+                <Image src="/static/images/canvas/eaves_icon09.svg" alt="react" width={30} height={30} />
+              </div>
+            </div>
+          </div>
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="outline-form">
+                <span className="mr10" style={{ width: '24px' }}>
+                  {getMessage('slope')}
+                </span>
+                <div className="input-grid mr5" style={{ width: '100px' }}>
+                  <input type="text" className="input-origin block" defaultValue={100} />
+                </div>
+                <span className="thin">寸</span>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="eaves-keraba-ico ">
+                <Image src="/static/images/canvas/eaves_icon05.svg" alt="react" width={30} height={30} />
+              </div>
+            </div>
+          </div>
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="outline-form">
+                <span className="mr10" style={{ width: '24px' }}>
+                  {getMessage('offset')}
+                </span>
+                <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 className="eaves-keraba-td">
+              <div className="eaves-keraba-ico ">
+                <Image src="/static/images/canvas/eaves_icon10.svg" alt="react" width={30} height={30} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/floor-plan/modal/eavesGable/type/Shed.jsx

@@ -0,0 +1,20 @@
+import { useMessage } from '@/hooks/useMessage'
+
+export default function Shed() {
+  const { getMessage } = useMessage()
+  return (
+    <>
+      <div className="outline-wrap">
+        <div className="outline-form">
+          <span className="mr10" style={{ width: '24px' }}>
+            {getMessage('offset')}
+          </span>
+          <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>
+    </>
+  )
+}

src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx

@@ -0,0 +1,59 @@
+import { useMessage } from '@/hooks/useMessage'
+import Image from 'next/image'
+
+export default function WallMerge() {
+  const { getMessage } = useMessage()
+  return (
+    <>
+      <div className="outline-wrap">
+        <div className="guide">{getMessage('modal.eaves.gable.edit.wall.merge.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('has.sleeve')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="eaves-keraba-ico act">
+                <Image src="/static/images/canvas/eaves_icon06.svg" alt="react" width={30} height={30} />
+              </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('has.not.sleeve')}</label>
+              </div>
+            </div>
+            <div className="eaves-keraba-td">
+              <div className="eaves-keraba-ico">
+                <Image src="/static/images/canvas/eaves_icon07.svg" alt="react" width={30} height={30} />
+              </div>
+            </div>
+          </div>
+          <div className="eaves-keraba-item">
+            <div className="eaves-keraba-th">
+              <div className="outline-form">
+                <span className="mr10" style={{ width: '24px' }}>
+                  {getMessage('offset')}
+                </span>
+                <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 className="eaves-keraba-td">
+              <div className="eaves-keraba-ico ">
+                <Image src="/static/images/canvas/eaves_icon08.svg" alt="react" width={30} height={30} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/locales/ja.json

@@ -144,6 +144,9 @@
   "modal.canvas.setting.wallline.properties.setting.info": "※属性を変更する外壁線を選択し、軒で設定またはケラバで設定 ボタンをクリックして設定値を適用します。",
   "modal.canvas.setting.wallline.properties.setting.eaves": "軒で設定",
   "modal.canvas.setting.wallline.properties.setting.edge": "ケラバに設定",
+  "modal.eaves.gable.edit": "軒・ケラバ変更",
+  "modal.eaves.gable.edit.basic": "通常",
+  "modal.eaves.gable.edit.wall.merge.info": "家屋などの壁に面する屋根を作成します。",
   "setting": "設定",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "ダウンロードするデータがありません",
@@ -300,11 +303,13 @@
   "slope": "傾斜",
   "eaves.offset": "軒の",
   "gable.offset": "ケラバ出幅",
+  "offset": "出幅",
   "size": "寸",
   "size.angle": "寸(度)",
   "eaves": "軒",
   "gable": "ケラバ",
   "wall": "壁",
+  "wall.merge": "壁取り",
   "hajebichi": "ハゼビーチ",
   "straight.line": "直線",
   "right.angle": "直角",

src/locales/ko.json

@@ -151,6 +151,9 @@
   "modal.canvas.setting.wallline.properties.setting.info": "※ 속성을 변경할 외벽선을 선택하고, 처마로 설정 또는 케라바로 설정\n    버튼을 클릭하여 설정값을 적용하십시오.\n",
   "modal.canvas.setting.wallline.properties.setting.eaves": "처마로 설정",
   "modal.canvas.setting.wallline.properties.setting.edge": "케라바로 설정",
+  "modal.eaves.gable.edit": "처마・케라바 변경",
+  "modal.eaves.gable.edit.basic": "통상",
+  "modal.eaves.gable.edit.wall.merge.info": "하옥 등 벽에 접하는 지붕을 작성합니다.",
   "setting": "설정",
   "common.message.no.data": "No data",
   "common.message.no.dataDown": "No data to download",
@@ -307,11 +310,13 @@
   "slope": "경사",
   "eaves.offset": "처마 출폭",
   "gable.offset": "케라바 출폭",
+  "offset": "출폭",
   "size": "치수",
   "size.angle": "寸(度)",
   "eaves": "처마",
   "gable": "케라바",
   "wall": "벽",
+  "wall.merge": "벽취합",
   "hajebichi": "하제비치",
   "straight.line": "직선",
   "right.angle": "직각",