- 지붕면 할당 모달 추가

src/components/floor-plan/CanvasMenu.jsx

@@ -46,6 +46,7 @@ export default function CanvasMenu(props) {
     setShowEavesGableEditModal,
     setShowMovementModal,
     setShowWallLineOffsetSettingModal,
+    setShowRoofAllocationSettingModal,
   } = props
 
   const [menuNumber, setMenuNumber] = useState(null)
@@ -99,6 +100,7 @@ export default function CanvasMenu(props) {
     setShowPlacementSurfaceSettingModal,
     setShowPlaceShapeDrawingModal,
     setShowWallLineOffsetSettingModal,
+    setShowRoofAllocationSettingModal,
     setShowObjectSettingModal,
     type,
   }

src/components/floor-plan/FloorPlan.jsx

@@ -25,6 +25,7 @@ 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'
+import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
 
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
@@ -41,6 +42,7 @@ export default function FloorPlan() {
   const [showEavesGableEditModal, setShowEavesGableEditModal] = useState(false)
   const [showMovementModal, setShowMovementModal] = useState(false)
   const [showWallLineOffsetSettingModal, setShowWallLineOffsetSettingModal] = useState(false)
+  const [showRoofAllocationSettingModal, setShowRoofAllocationSettingModal] = useState(false)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
 
@@ -78,6 +80,7 @@ export default function FloorPlan() {
     setShowEavesGableEditModal,
     setShowMovementModal,
     setShowWallLineOffsetSettingModal,
+    setShowRoofAllocationSettingModal,
   }
 
   useEffect(() => {
@@ -147,6 +150,7 @@ export default function FloorPlan() {
           {showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
           {showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />}
           {showMovementModal && <MovementSetting setShowMovementModal={setShowMovementModal} />}
+          {showRoofAllocationSettingModal && <RoofAllocationSetting setShowRoofAllocationSettingModal={setShowRoofAllocationSettingModal} />}
           {showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
           {showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
           {showPlacementSurfaceSettingModal && <PlacementSurfaceSetting setShowPlacementSurfaceSettingModal={setShowPlacementSurfaceSettingModal} />}

src/components/floor-plan/MenuDepth01.jsx

@@ -20,6 +20,7 @@ export default function MenuDepth01(props) {
     setShowPlacementSurfaceSettingModal,
     setShowPlaceShapeDrawingModal,
     setShowWallLineOffsetSettingModal,
+    setShowRoofAllocationSettingModal,
     setShowObjectSettingModal,
   } = props
   const { getMessage } = useMessage()
@@ -38,6 +39,7 @@ export default function MenuDepth01(props) {
       setShowEavesGableEditModal(id === 4)
       setShowMovementModal(id === 5)
       setShowWallLineOffsetSettingModal(id === 6)
+      setShowRoofAllocationSettingModal(id === 7)
       setShowPlaceShapeDrawingModal(false)
     }
 
@@ -49,6 +51,7 @@ export default function MenuDepth01(props) {
       setShowEavesGableEditModal(false)
       setShowMovementModal(false)
       setShowWallLineOffsetSettingModal(false)
+      setShowRoofAllocationSettingModal(false)
 
       setShowSlopeSettingModal(id === 0)
       setShowPlaceShapeDrawingModal(id === 1)

src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx

@@ -0,0 +1,222 @@
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useState } from 'react'
+import QSelectBox from '@/components/common/select/QSelectBox'
+
+export default function RoofAllocationSetting({ setShowRoofAllocationSettingModal }) {
+  const { getMessage } = useMessage()
+  const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(null)
+  const [values, setValues] = useState([
+    {
+      id: '1',
+      type: 'A',
+      roofMaterial: { name: '기와1' },
+      width: { name: '200' },
+      length: { name: '250' },
+      rafter: { name: '300' },
+      alignType: 'stairs',
+    },
+  ])
+
+  const roofMaterials = [
+    {
+      id: 'A',
+      name: '기와1',
+      type: 'A',
+      width: '200',
+      length: '200',
+      alignType: 'parallel',
+    },
+    {
+      id: 'B',
+      name: '기와2',
+      type: 'B',
+      rafter: '200',
+      alignType: 'parallel',
+    },
+    {
+      id: 'C',
+      name: '기와3',
+      type: 'C',
+      hajebichi: '200',
+      alignType: 'stairs',
+    },
+    {
+      id: 'D',
+      name: '기와4',
+      type: 'D',
+      length: '200',
+      alignType: 'stairs',
+    },
+  ]
+  const widths = [
+    { name: '200', id: 'q' },
+    { name: '250', id: 'q1' },
+    { name: '300', id: 'q2' },
+  ]
+  const lengths = [
+    { name: '200', id: 'w' },
+    { name: '250', id: 'w1' },
+    { name: '300', id: 'w2' },
+  ]
+  const rafters = [
+    { name: '200', id: 'e' },
+    { name: '250', id: 'e1' },
+    { name: '300', id: 'e2' },
+  ]
+
+  const onAddRoofMaterial = () => {
+    setValues([...values, selectedRoofMaterial])
+  }
+
+  const onDeleteRoofMaterial = (id) => {
+    setValues(values.filter((value) => value.id !== id))
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+      <div className={`modal-pop-wrap ml`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
+          <button className="modal-close" onClick={() => setShowRoofAllocationSettingModal(false)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
+          <div className="allocation-select-wrap">
+            <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
+            <div className="grid-select">
+              <QSelectBox options={roofMaterials} value={selectedRoofMaterial} onChange={(e) => setSelectedRoofMaterial(e)} />
+            </div>
+            <button
+              className="allocation-edit"
+              onClick={() => {
+                onAddRoofMaterial()
+              }}
+            >
+              <i className="edit-ico"></i>
+              {getMessage('modal.common.add')}
+            </button>
+          </div>
+          <div className="grid-option-wrap">
+            {values.map((value, index) => (
+              <div className="grid-option-box" key={index}>
+                <div className="d-check-radio pop no-text">
+                  <input type="radio" name="radio01" id="ra01" />
+                  <label htmlFor="ra01"></label>
+                </div>
+                <div className="grid-option-block-form">
+                  <div className="block-box">
+                    <div className="flex-ment">
+                      <div className="grid-select" style={{ width: '248px' }}>
+                        <QSelectBox options={roofMaterials} value={value} />
+                      </div>
+                      {index === 0 && <span className="dec">基本屋根材</span>}
+                      {index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(value.id)}></button>}
+                    </div>
+                  </div>
+                  <div className="block-box">
+                    {value.type === 'A' ? (
+                      <>
+                        <div className="flex-ment">
+                          <span>W</span>
+                          <div className="select-wrap" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div>
+                        </div>
+                        <div className="flex-ment">
+                          <span>L</span>
+                          <div className="select-wrap" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>235</option>
+                            </select>
+                          </div>
+                        </div>
+                        <div className="flex-ment">
+                          <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                          <div className="select-wrap" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>455</option>
+                            </select>
+                          </div>
+                        </div>
+                      </>
+                    ) : value.type === 'B' ? (
+                      <>
+                        <div className="flex-ment">
+                          <span>{getMessage('hajebichi')}</span>
+                          <div className="grid-select no-flx" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div>
+                        </div>
+                        <div className="flex-ment">
+                          <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                          <div className="grid-select no-flx right" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div>
+                        </div>
+                      </>
+                    ) : value.type === 'C' ? (
+                      <>
+                        <div className="flex-ment">
+                          <span>{getMessage('hajebichi')}</span>
+                          <div className="grid-select no-flx" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div>
+                        </div>
+                      </>
+                    ) : value.type === 'D' ? (
+                      <>
+                        <div className="flex-ment">
+                          <span>L</span>
+                          <div className="grid-select no-flx" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div>
+                        </div>
+                        <div className="flex-ment">
+                          <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                          <div className="grid-select no-flx right" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div>
+                        </div>
+                      </>
+                    ) : (
+                      ''
+                    )}
+                  </div>
+                  <div className="block-box">
+                    <div className="icon-btn-wrap">
+                      <button className={value.alignType === 'parallel' ? 'act' : ''}>
+                        {getMessage('modal.roof.alloc.select.parallel')}
+                        <i className="allocation01"></i>
+                      </button>
+                      <button className={value.alignType === 'stairs' ? 'act' : ''}>
+                        {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act">{getMessage('modal.roof.alloc.apply')}</button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/locales/ja.json

@@ -84,6 +84,11 @@
   "plan.menu.module.circuit.setting.plan.orientation": "図面方位の適用",
   "plan.menu.estimate": "見積",
   "plan.menu.estimate.roof.alloc": "屋根面の割り当て",
+  "modal.roof.alloc.info": "※配置面初期設定で保存した[基本屋根材]を変更したり、屋根材を追加して割り当てることができます。",
+  "modal.roof.alloc.select.roof.material": "屋根材の選択",
+  "modal.roof.alloc.select.parallel": "並列式",
+  "modal.roof.alloc.select.stairs": "カスケード",
+  "modal.roof.alloc.apply": "選択した屋根材として割り当て",
   "plan.menu.estimate.save": "保存",
   "plan.menu.estimate.reset": "初期化",
   "plan.menu.estimate.copy": "コピー",
@@ -120,6 +125,7 @@
   "modal.grid.copy.length": "長さ",
   "modal.grid.copy.save": "保存",
   "modal.common.save": "保存",
+  "modal.common.add": "追加",
   "modal.canvas.setting.font.plan.edit": "フォントとサイズの変更",
   "modal.canvas.setting.font.plan.edit.word": "文字フォントの変更",
   "modal.canvas.setting.font.plan.edit.flow": "フロー方向フォントの変更",

src/locales/ko.json

@@ -87,6 +87,11 @@
   "plan.menu.module.circuit.setting.plan.orientation": "도면 방위 적용",
   "plan.menu.estimate": "견적서",
   "plan.menu.estimate.roof.alloc": "지붕면 할당",
+  "modal.roof.alloc.info": "※ 배치면 초기설정에서 저장한 [기본 지붕재]를 변경하거나,  지붕재를 추가하여 할당할 수 있습니다.",
+  "modal.roof.alloc.select.roof.material": "지붕재 선택",
+  "modal.roof.alloc.select.parallel": "병렬식",
+  "modal.roof.alloc.select.stairs": "계단식",
+  "modal.roof.alloc.apply": "선택한 지붕재로 할당",
   "plan.menu.estimate.save": "저장",
   "plan.menu.estimate.reset": "초기화",
   "plan.menu.estimate.copy": "복사",
@@ -123,6 +128,7 @@
   "modal.grid.copy.length": "길이",
   "modal.grid.copy.save": "저장",
   "modal.common.save": "저장",
+  "modal.common.add": "추가",
   "modal.canvas.setting.font.plan.edit": "글꼴 및 크기 변경",
   "modal.canvas.setting.font.plan.edit.word": "문자 글꼴 변경",
   "modal.canvas.setting.font.plan.edit.flow": "흐름 방향 글꼴 변경",