- 육지붕 기본 설정 모달 추가

src/components/floor-plan/CanvasMenu.jsx

@@ -48,6 +48,7 @@ export default function CanvasMenu(props) {
     setShowWallLineOffsetSettingModal,
     setShowRoofAllocationSettingModal,
     setShowBasicSettingModal,
+    setShowPropertiesSettingModal,
   } = props
 
   const [menuNumber, setMenuNumber] = useState(null)
@@ -104,6 +105,7 @@ export default function CanvasMenu(props) {
     setShowRoofAllocationSettingModal,
     setShowObjectSettingModal,
     setShowBasicSettingModal,
+    setShowPropertiesSettingModal,
     type,
   }
 

src/components/floor-plan/FloorPlan.jsx

@@ -84,6 +84,7 @@ export default function FloorPlan() {
     setShowWallLineOffsetSettingModal,
     setShowRoofAllocationSettingModal,
     setShowBasicSettingModal,
+    setShowPropertiesSettingModal,
   }
 
   useEffect(() => {

src/components/floor-plan/MenuDepth01.jsx

@@ -23,6 +23,7 @@ export default function MenuDepth01(props) {
     setShowRoofAllocationSettingModal,
     setShowObjectSettingModal,
     setShowBasicSettingModal,
+    setShowPropertiesSettingModal,
   } = props
   const { getMessage } = useMessage()
   const [activeMenu, setActiveMenu] = useState()
@@ -42,6 +43,7 @@ export default function MenuDepth01(props) {
       setShowWallLineOffsetSettingModal(id === 6)
       setShowRoofAllocationSettingModal(id === 7)
       setShowPlaceShapeDrawingModal(false)
+      setShowPropertiesSettingModal(false)
     }
 
     if (type === 'surface') {
@@ -53,7 +55,7 @@ export default function MenuDepth01(props) {
       setShowMovementModal(false)
       setShowWallLineOffsetSettingModal(false)
       setShowRoofAllocationSettingModal(false)
-
+      setShowPropertiesSettingModal(false)
       setShowSlopeSettingModal(id === 0)
       setShowPlaceShapeDrawingModal(id === 1)
       setShowPlacementSurfaceSettingModal(id === 2)
@@ -69,6 +71,7 @@ export default function MenuDepth01(props) {
       setShowMovementModal(false)
       setShowWallLineOffsetSettingModal(false)
       setShowRoofAllocationSettingModal(false)
+      setShowPropertiesSettingModal(false)
       setShowBasicSettingModal(id === 0)
     }
   }

src/components/floor-plan/modal/basic/BasicSetting.jsx

@@ -3,12 +3,16 @@ import WithDraggable from '@/components/common/draggable/withDraggable'
 import { useState } from 'react'
 import Orientation from '@/components/floor-plan/modal/basic/step/Orientation'
 import Module from '@/components/floor-plan/modal/basic/step/Module'
+import PitchModule from '@/components/floor-plan/modal/basic/step/pitch/PitchModule'
+import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement'
 import Placement from '@/components/floor-plan/modal/basic/step/Placement'
+import { useRecoilState } from 'recoil'
+import { canvasSettingState } from '@/store/canvasAtom'
 
 export default function BasicSetting({ setShowBasicSettingModal }) {
   const { getMessage } = useMessage()
   const [tabNum, setTabNum] = useState(1)
-
+  const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
   return (
     <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
       <div className={`modal-pop-wrap lx-2`}>
@@ -27,8 +31,13 @@ export default function BasicSetting({ setShowBasicSettingModal }) {
             <div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
           </div>
           {tabNum === 1 && <Orientation setTabNum={setTabNum} />}
-          {tabNum === 2 && <Module setTabNum={setTabNum} />}
+          {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
-          {tabNum === 3 && <Placement setTabNum={setTabNum} />}
+          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 2 && <Module setTabNum={setTabNum} />}
+          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 3 && <Placement setTabNum={setTabNum} />}
+
+          {/*배치면 초기설정 - 입력방법: 육지붕*/}
+          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
+          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 3 && <PitchPlacement setTabNum={setTabNum} />}
 
           <div className="grid-btn-wrap">
             {tabNum !== 1 && (

src/components/floor-plan/modal/basic/step/Module.jsx

@@ -74,12 +74,15 @@ export default function Module({}) {
                       </tr>
                     </>
                   ))}
-                  <tr>
+
-                    <td></td>
+                  {Array.from({ length: 3 - moduleData.rows.length }).map((_, i) => (
-                    <td></td>
+                    <tr key={i}>
-                    <td></td>
+                      <td></td>
-                    <td></td>
+                      <td></td>
-                  </tr>
+                      <td></td>
+                      <td></td>
+                    </tr>
+                  ))}
                 </tbody>
               </table>
             </div>

src/components/floor-plan/modal/basic/step/pitch/PitchModule.jsx

@@ -0,0 +1,91 @@
+import { useMessage } from '@/hooks/useMessage'
+import QSelectBox from '@/components/common/select/QSelectBox'
+
+export default function PitchModule({}) {
+  const { getMessage } = useMessage()
+  const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
+  const moduleData = {
+    header: [
+      { name: getMessage('module'), width: 150, prop: 'module', type: 'color-box' },
+      {
+        name: `${getMessage('높이')}  (mm)`,
+        prop: 'height',
+      },
+      { name: `${getMessage('width')} (mm)`, prop: 'width' },
+      { name: `${getMessage('output')} (W)`, prop: 'output' },
+    ],
+    rows: [
+      {
+        module: { name: 'Re.RISE-G3 440', color: '#AA6768' },
+        height: { name: '1134' },
+        width: { name: '1722' },
+        output: { name: '440' },
+      },
+      {
+        module: {
+          name: 'Re.RISE MS-G3 290',
+          color: '#67A2AA',
+        },
+        height: { name: '1134' },
+        width: { name: '1722' },
+        output: { name: '240' },
+      },
+    ],
+  }
+  return (
+    <>
+      <div className="module-table-box">
+        <div className="module-table-inner">
+          <div className="outline-form mb10">
+            <span className="mr10">{getMessage('modal.module.basic.setting.module.setting')}</span>
+            <div className="grid-select">
+              <QSelectBox title={'Search'} option={SelectOption01} />
+            </div>
+          </div>
+          <div className="roof-module-table">
+            <table>
+              <thead>
+                <tr>
+                  {moduleData.header.map((data) => (
+                    <th key={data.prop} style={{ width: data.width ? data.width : '' }}>
+                      {data.name}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {moduleData.rows.map((row) => (
+                  <>
+                    <tr>
+                      {moduleData.header.map((header) => (
+                        <>
+                          {header.type === 'color-box' && (
+                            <td>
+                              <div className="color-wrap">
+                                <span className="color-box" style={{ backgroundColor: row[header.prop].color }}></span>
+                                <span className="name">{row[header.prop].name}</span>
+                              </div>
+                            </td>
+                          )}
+                          {!header.type && header.type !== 'color-box' && <td className="al-r">{row[header.prop].name}</td>}
+                        </>
+                      ))}
+                    </tr>
+                  </>
+                ))}
+                {Array.from({ length: 3 - moduleData.rows.length }).map((_, i) => (
+                  <tr key={i}>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx

@@ -0,0 +1,159 @@
+import { useMessage } from '@/hooks/useMessage'
+
+export default function PitchPlacement() {
+  const { getMessage } = useMessage()
+  const moduleData = {
+    header: [
+      { type: 'check', name: '', prop: 'check', width: 70 },
+      { type: 'color-box', name: getMessage('module'), prop: 'module' },
+      { type: 'text', name: `${getMessage('output')} (W)`, prop: 'output', width: 70 },
+    ],
+    rows: [
+      {
+        check: false,
+        module: { name: 'Re.RISE-G3 440', color: '#AA6768' },
+        output: { name: '440' },
+      },
+      {
+        check: false,
+        module: {
+          name: 'Re.RISE MS-G3 290',
+          color: '#67A2AA',
+        },
+        output: { name: '240' },
+      },
+    ],
+  }
+  return (
+    <>
+      <div className="module-table-box mb10">
+        <div className="module-table-inner">
+          <div className="roof-module-table">
+            <table>
+              <thead>
+                <tr>
+                  {moduleData.header.map((data) => (
+                    <th key={data.prop} style={{ width: data.width ? data.width : '' }}>
+                      {data.type === 'check' ? (
+                        <div className="d-check-box no-text pop">
+                          <input type="checkbox" id="ch01" disabled />
+                          <label htmlFor="ch01"></label>
+                        </div>
+                      ) : (
+                        data.name
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {moduleData.rows.map((row) => (
+                  <>
+                    <tr>
+                      {moduleData.header.map((header) => (
+                        <>
+                          {header.type === 'color-box' && (
+                            <td>
+                              <div className="color-wrap">
+                                <span className="color-box" style={{ backgroundColor: row[header.prop].color }}></span>
+                                <span className="name">{row[header.prop].name}</span>
+                              </div>
+                            </td>
+                          )}
+                          {header.type === 'check' && (
+                            <td className="al-c">
+                              <div className="d-check-box no-text pop">
+                                <input type="checkbox" id="ch02" />
+                                <label htmlFor="ch02"></label>
+                              </div>
+                            </td>
+                          )}
+                          {header.type && header.type !== 'color-box' && header.type !== 'check' && <td className="al-r">{row[header.prop].name}</td>}
+                        </>
+                      ))}
+                    </tr>
+                  </>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <div className="module-table-box mb10">
+        <div className="module-table-inner">
+          <div className="hexagonal-wrap">
+            <div className="hexagonal-item">
+              <div className="bold-font">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting')}</div>
+            </div>
+            <div className="hexagonal-item">
+              <div className="pop-form-radio">
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra01" />
+                  <label htmlFor="ra01">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.south')}</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra02" />
+                  <label htmlFor="ra02">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.select')}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="module-table-box">
+        <div className="module-table-inner">
+          <div className="hexagonal-wrap">
+            <div className="hexagonal-item">
+              <div className="bold-font">割り当て設定</div>
+            </div>
+            <div className="hexagonal-item">
+              <div className="hexagonal-flx-auto">
+                <div className="outline-form">
+                  <span className="mr10" style={{ width: 'auto' }}>
+                    {getMessage('modal.module.basic.setting.pitch.module.row.amount')}
+                  </span>
+                  <div className="input-grid mr5" style={{ width: '70px' }}>
+                    <input type="text" className="input-origin block" defaultValue={1} />
+                  </div>
+                  <span className="thin">mm</span>
+                </div>
+                <div className="outline-form">
+                  <span className="mr10" style={{ width: 'auto' }}>
+                    {getMessage('modal.module.basic.setting.pitch.module.row.margin')}
+                  </span>
+                  <div className="input-grid mr5" style={{ width: '70px' }}>
+                    <input type="text" className="input-origin block" defaultValue={1} />
+                  </div>
+                  <span className="thin">mm</span>
+                </div>
+                <div className="outline-form">
+                  <span className="mr10" style={{ width: 'auto' }}>
+                    {getMessage('modal.module.basic.setting.pitch.module.column.amount')}
+                  </span>
+                  <div className="input-grid mr5" style={{ width: '70px' }}>
+                    <input type="text" className="input-origin block" defaultValue={1} />
+                  </div>
+                  <span className="thin">mm</span>
+                </div>
+                <div className="outline-form">
+                  <span className="mr10" style={{ width: 'auto' }}>
+                    {getMessage('modal.module.basic.setting.pitch.module.column.margin')}
+                  </span>
+                  <div className="input-grid mr5" style={{ width: '70px' }}>
+                    <input type="text" className="input-origin block" defaultValue={300} />
+                  </div>
+                  <span className="thin">mm</span>
+                </div>
+              </div>
+            </div>
+            <div className="hexagonal-item">
+              <div className="hexagonal-flx">
+                <div className="normal-font">{getMessage('modal.module.basic.setting.pitch.module.allocation.setting.info')}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/locales/ja.json

@@ -109,6 +109,15 @@
   "modal.module.basic.setting.module.placement.arrangement.standard.eaves": "軒側",
   "modal.module.basic.setting.module.placement.arrangement.standard.ridge": "龍丸側",
   "modal.module.basic.setting.module.placement.maximum": "最大配置する。",
+  "modal.module.basic.setting.pitch.module.placement.standard.setting": "配置基準の設定",
+  "modal.module.basic.setting.pitch.module.placement.standard.setting.south": "南向きに設置す",
+  "modal.module.basic.setting.pitch.module.placement.standard.setting.select": "指定した辺を基準に設置する",
+  "modal.module.basic.setting.pitch.module.allocation.setting": "割り当て設定",
+  "modal.module.basic.setting.pitch.module.allocation.setting.info": "※バッチパネルの種類が1種類の場合にのみ使用できます。",
+  "modal.module.basic.setting.pitch.module.row.amount": "単数",
+  "modal.module.basic.setting.pitch.module.row.margin": "上下間隔",
+  "modal.module.basic.setting.pitch.module.column.amount": "熱数",
+  "modal.module.basic.setting.pitch.module.column.margin": "左右間隔",
   "modal.module.basic.setting.prev": "以前",
   "modal.module.basic.setting.passivity.placement": "手動配置",
   "modal.module.basic.setting.auto.placement": "設定値に自動配置",

src/locales/ko.json

@@ -113,6 +113,15 @@
   "modal.module.basic.setting.module.placement.arrangement.standard.eaves": "처마쪽",
   "modal.module.basic.setting.module.placement.arrangement.standard.ridge": "용마루쪽",
   "modal.module.basic.setting.module.placement.maximum": "최대배치 실시한다.",
+  "modal.module.basic.setting.pitch.module.placement.standard.setting": "배치 기준 설정",
+  "modal.module.basic.setting.pitch.module.placement.standard.setting.south": "남향으로 설치한다",
+  "modal.module.basic.setting.pitch.module.placement.standard.setting.select": "지정한 변을 기준으로 설치한다",
+  "modal.module.basic.setting.pitch.module.allocation.setting": "할당 설정",
+  "modal.module.basic.setting.pitch.module.allocation.setting.info": "※배치 패널 종류가 1종류일 경우에만 사용할 수 있습니다.",
+  "modal.module.basic.setting.pitch.module.row.amount": "단수",
+  "modal.module.basic.setting.pitch.module.row.margin": "상하간격",
+  "modal.module.basic.setting.pitch.module.column.amount": "열수",
+  "modal.module.basic.setting.pitch.module.column.margin": "좌우간격",
   "modal.module.basic.setting.prev": "이전",
   "modal.module.basic.setting.passivity.placement": "수동 배치",
   "modal.module.basic.setting.auto.placement": "설정값으로 자동 배치",