Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into feature/outer-lines

src/components/floor-plan/CanvasMenu.jsx

@@ -47,6 +47,7 @@ export default function CanvasMenu(props) {
     setShowMovementModal,
     setShowWallLineOffsetSettingModal,
     setShowRoofAllocationSettingModal,
+    setShowBasicSettingModal,
   } = props
 
   const [menuNumber, setMenuNumber] = useState(null)
@@ -102,6 +103,7 @@ export default function CanvasMenu(props) {
     setShowWallLineOffsetSettingModal,
     setShowRoofAllocationSettingModal,
     setShowObjectSettingModal,
+    setShowBasicSettingModal,
     type,
   }
 

src/components/floor-plan/FloorPlan.jsx

@@ -26,6 +26,7 @@ import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurf
 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'
+import BasicSetting from '@/components/floor-plan/modal/basic/BasicSetting'
 
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
@@ -43,6 +44,7 @@ export default function FloorPlan() {
   const [showMovementModal, setShowMovementModal] = useState(false)
   const [showWallLineOffsetSettingModal, setShowWallLineOffsetSettingModal] = useState(false)
   const [showRoofAllocationSettingModal, setShowRoofAllocationSettingModal] = useState(false)
+  const [showBasicSettingModal, setShowBasicSettingModal] = useState(false)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const { get } = useAxios(globalLocaleState)
 
@@ -81,6 +83,7 @@ export default function FloorPlan() {
     setShowMovementModal,
     setShowWallLineOffsetSettingModal,
     setShowRoofAllocationSettingModal,
+    setShowBasicSettingModal,
   }
 
   useEffect(() => {
@@ -154,6 +157,7 @@ export default function FloorPlan() {
           {showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
           {showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
           {showPlacementSurfaceSettingModal && <PlacementSurfaceSetting setShowPlacementSurfaceSettingModal={setShowPlacementSurfaceSettingModal} />}
+          {showBasicSettingModal && <BasicSetting setShowBasicSettingModal={setShowBasicSettingModal} />}
         </div>
       </div>
     </>

src/components/floor-plan/MenuDepth01.jsx

@@ -22,6 +22,7 @@ export default function MenuDepth01(props) {
     setShowWallLineOffsetSettingModal,
     setShowRoofAllocationSettingModal,
     setShowObjectSettingModal,
+    setShowBasicSettingModal,
   } = props
   const { getMessage } = useMessage()
   const [activeMenu, setActiveMenu] = useState()
@@ -58,6 +59,18 @@ export default function MenuDepth01(props) {
       setShowPlacementSurfaceSettingModal(id === 2)
       setShowObjectSettingModal(id === 3)
     }
+
+    if (type === 'module') {
+      setShowOutlineModal(false)
+      setShowRoofShapeSettingModal(false)
+      setShowRoofShapePassivitySettingModal(false)
+      setShowAuxiliaryModal(false)
+      setShowEavesGableEditModal(false)
+      setShowMovementModal(false)
+      setShowWallLineOffsetSettingModal(false)
+      setShowRoofAllocationSettingModal(false)
+      setShowBasicSettingModal(id === 0)
+    }
   }
 
   useEffect(() => {

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

@@ -0,0 +1,56 @@
+import { useMessage } from '@/hooks/useMessage'
+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 Placement from '@/components/floor-plan/modal/basic/step/Placement'
+
+export default function BasicSetting({ setShowBasicSettingModal }) {
+  const { getMessage } = useMessage()
+  const [tabNum, setTabNum] = useState(1)
+
+  return (
+    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
+      <div className={`modal-pop-wrap lx-2`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('plan.menu.module.circuit.setting.default')}</h1>
+          <button className="modal-close" onClick={() => setShowBasicSettingModal(false)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="roof-module-tab">
+            <div className={`module-tab-bx act`}>{getMessage('modal.module.basic.setting.orientation.setting')}</div>
+            <span className={`tab-arr ${tabNum !== 1 ? 'act' : ''}`}></span>
+            <div className={`module-tab-bx ${tabNum !== 1 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.setting')}</div>
+            <span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
+            <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} />}
+
+          <div className="grid-btn-wrap">
+            {tabNum !== 1 && (
+              <button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
+                {getMessage('modal.module.basic.setting.prev')}
+              </button>
+            )}
+            {tabNum !== 3 && <button className="btn-frame modal act mr5">{getMessage('modal.common.save')}</button>}
+            {tabNum !== 3 && (
+              <button className="btn-frame modal" onClick={() => setTabNum(tabNum + 1)}>
+                Next
+              </button>
+            )}
+            {tabNum === 3 && (
+              <>
+                <button className="btn-frame modal mr5">{getMessage('modal.module.basic.setting.passivity.placement')}</button>
+                <button className="btn-frame modal act">{getMessage('modal.module.basic.setting.auto.placement')}</button>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

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

@@ -0,0 +1,185 @@
+import QSelectBox from '@/components/common/select/QSelectBox'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function Module({}) {
+  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-flex-wrap mb10">
+        <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>
+                    </>
+                  ))}
+                  <tr>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <div className="module-table-box">
+          <div className="module-box-tab">
+            <button className="module-btn act">スレート</button>
+            <button className="module-btn">平板瓦</button>
+            <button className="module-btn">53A</button>
+            <button className="module-btn">53A</button>
+          </div>
+          <div className="module-table-inner">
+            <div className="module-table-tit">{getMessage('modal.module.basic.setting.module.roof.material')}: スレーツ（4寸)</div>
+            <div className="eaves-keraba-table">
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.trestle.maker')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="grid-select">
+                    <QSelectBox title={'屋根技術研究所'} option={SelectOption01} />
+                  </div>
+                </div>
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.construction.method')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="grid-select">
+                    <QSelectBox title={'スレート金具4'} option={SelectOption01} />
+                  </div>
+                </div>
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.under.roof')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="grid-select">
+                    <QSelectBox title={'構造溶合板 12mm以上'} option={SelectOption01} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="module-table-box mb10">
+        <div className="module-table-inner">
+          <div className="module-table-flex-wrap">
+            <div className="outline-form">
+              <span className="mr10">{getMessage('modal.module.basic.setting.module.cotton.classification')}</span>
+              <div className="grid-select">
+                <QSelectBox title={'Ⅲ ∙ Ⅳ'} option={SelectOption01} />
+              </div>
+            </div>
+            <div className="outline-form">
+              <span className="mr10">{getMessage('modal.module.basic.setting.module.fitting.height')}</span>
+              <div className="grid-select">
+                <QSelectBox title={'13'} option={SelectOption01} />
+              </div>
+            </div>
+            <div className="outline-form">
+              <span className="mr10">{getMessage('modal.module.basic.setting.module.standard.wind.speed')}</span>
+              <div className="grid-select">
+                <QSelectBox title={'32'} option={SelectOption01} />
+              </div>
+            </div>
+            <div className="outline-form">
+              <span className="mr10">{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}</span>
+              <div className="grid-select">
+                <QSelectBox title={'15'} option={SelectOption01} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="module-table-box mb15">
+        <div className="warning-guide">
+          <div className="warning">
+            {getMessage('modal.module.basic.setting.module.setting.info1')}
+            <br />
+            {getMessage('modal.module.basic.setting.module.setting.info2')}
+            <br />
+          </div>
+        </div>
+      </div>
+      <div className="modal-btn-wrap mb15">
+        <button className="btn-frame roof blue">{getMessage('modal.module.basic.setting.module.standard.construction')}(1)</button>
+        <button className="btn-frame roof white">{getMessage('modal.module.basic.setting.module.standard.construction')}</button>
+        <button className="btn-frame roof">{getMessage('modal.module.basic.setting.module.enforce.construction')}</button>
+        <button className="btn-frame roof">{getMessage('modal.module.basic.setting.module.multiple.construction')}</button>
+        <button className="btn-frame roof blue">{getMessage('modal.module.basic.setting.module.multiple.construction')}（II）</button>
+      </div>
+      <div className="grid-check-form border">
+        <div className="d-check-box pop">
+          <input type="checkbox" id="ch01" />
+          <label htmlFor="ch01">{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
+        </div>
+        <div className="d-check-box pop">
+          <input type="checkbox" id="ch02" />
+          <label htmlFor="ch02">{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,62 @@
+import { useState } from 'react'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function Orientation({ setTabNum }) {
+  const { getMessage } = useMessage()
+  const [compasDeg, setCompasDeg] = useState(0)
+  const [hasAnglePassivity, setHasAnglePassivity] = useState(false)
+
+  return (
+    <>
+      <div className="properties-setting-wrap">
+        <div className="setting-tit">{getMessage('modal.module.basic.setting.orientation.setting')}</div>
+        <div className="outline-wrap">
+          <div className="guide">{getMessage('modal.module.basic.setting.orientation.setting.info')}</div>
+          <div className="roof-module-compas">
+            <div className="compas-box">
+              <div className="compas-box-inner">
+                {Array.from({ length: 180 / 15 }).map((dot, index) => (
+                  <div
+                    key={index}
+                    className={`circle ${compasDeg === 15 * (12 + index) ? 'act' : ''}`}
+                    onClick={() => setCompasDeg(15 * (12 + index))}
+                  >
+                    {index === 0 && <i>180°</i>}
+                    {index === 6 && <i>270°</i>}
+                  </div>
+                ))}
+                {Array.from({ length: 180 / 15 }).map((dot, index) => (
+                  <div key={index} className={`circle ${compasDeg === 15 * index ? 'act' : ''}`} onClick={() => setCompasDeg(15 * index)}>
+                    {index === 0 && <i>0°</i>}
+                    {index === 6 && <i>90°</i>}
+                  </div>
+                ))}
+                <div className="compas">
+                  <div className="compas-arr" style={{ transform: `rotate(${compasDeg}deg)` }}></div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="center-wrap">
+            <div className="d-check-box pop">
+              <input type="checkbox" id="ch99" checked={!hasAnglePassivity} onChange={() => setHasAnglePassivity(!hasAnglePassivity)} />
+              <label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}（0〜360）</label>
+            </div>
+            <div className="outline-form">
+              <div className="input-grid mr10" style={{ width: '160px' }}>
+                <input
+                  type="text"
+                  className="input-origin block"
+                  value={compasDeg}
+                  readOnly={hasAnglePassivity}
+                  onChange={(e) => setCompasDeg(e.target.value !== '' ? Number.parseInt(e.target.value) : 0)}
+                />
+              </div>
+              <span className="thin">°</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,140 @@
+import { useMessage } from '@/hooks/useMessage'
+
+export default function Placement() {
+  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-flex-wrap mb10">
+        <div className="module-table-box">
+          <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>
+                    </>
+                  ))}
+                  <tr>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <div className="module-table-box">
+          <div className="module-table-inner">
+            <div className="self-table-tit">{getMessage('modal.module.basic.setting.module.placement.select.fitting.type')}</div>
+            <div className="module-self-table">
+              <div className="self-table-item">
+                <div className="self-item-th">{getMessage('modal.module.basic.setting.module.placement.waterfowl.arrangement')}</div>
+                <div className="self-item-td">
+                  <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.module.placement.do')}</label>
+                    </div>
+                    <div className="d-check-radio pop">
+                      <input type="radio" name="radio01" id="ra02" />
+                      <label htmlFor="ra01">{getMessage('modal.module.basic.setting.module.placement.do.not')}</label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="self-table-item">
+                <div className="self-item-th">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard')}</div>
+                <div className="self-item-td">
+                  <div className="pop-form-radio">
+                    <div className="d-check-radio pop">
+                      <input type="radio" name="radio02" id="ra03" />
+                      <label htmlFor="ra03">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.center')}</label>
+                    </div>
+                    <div className="d-check-radio pop">
+                      <input type="radio" name="radio02" id="ra04" />
+                      <label htmlFor="ra04">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.eaves')}</label>
+                    </div>
+                    <div className="d-check-radio pop">
+                      <input type="radio" name="radio02" id="ra05" />
+                      <label htmlFor="ra05">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.ridge')}</label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="self-table-flx">
+              <div className="d-check-box pop">
+                <input type="checkbox" id="ch04" />
+                <label htmlFor="ch04">{getMessage('modal.module.basic.setting.module.placement.maximum')}</label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -1,14 +1,163 @@
 import SizeGuide from '@/components/floor-plan/modal/placementShape/SizeGuide'
 import MaterialGuide from '@/components/floor-plan/modal/placementShape/MaterialGuide'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { Fragment, useState } from 'react'
+import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input, Select, SelectItem } from '@nextui-org/react'
+import { useRecoilState } from 'recoil'
+import { Fragment, useEffect, useState } from 'react'
+import { canvasSettingState } from '@/store/canvasAtom'
 import { useMessage } from '@/hooks/useMessage'
+import { useAxios } from '@/hooks/useAxios'
+import { useSwal } from '@/hooks/useSwal'
 
 export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
+  const [objectNo, setObjectNo] = useState('test123241008001') // 후에 삭제 필요
   const [showSizeGuideModal, setShowSizeGuidModal] = useState(false)
   const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false)
-  const [selectedRoofMaterial, setSelectedRoofMaterial] = useState('A')
+  const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(1)
+  const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
+  const [basicSetting, setBasicSettings] = useState({
+    roofSizeSet: 1,
+    roofAngleSet: 'slope',
+    roofs: [{ roofApply: true, roofSeq: 1, roofType: 1, roofWidth: 200, roofHeight: 200, roofHajebichi: 200, roofGap: 0, roofLayout: 'parallel' }],
+  })
+
   const { getMessage } = useMessage()
+  const { get, post } = useAxios()
+  const { swalFire } = useSwal()
+
+  // 데이터를 최초 한 번만 조회
+  useEffect(() => {
+    console.log('PlacementShapeSetting useEffect 실행')
+
+    fetchSettings()
+  }, [objectNo])
+
+  // PlacementShapeSetting 조회 및 초기화
+  const fetchSettings = async () => {
+    try {
+      await get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${objectNo}` }).then((res) => {
+        if (res.length == 0) return
+
+        // 'roofs' 배열을 생성하여 각 항목을 추가
+        const roofsRow = res.map((item) => {
+          return {
+            roofSizeSet: item.roofSizeSet,
+            roofAngleSet: item.roofAngleSet,
+          }
+        })
+
+        const roofsArray = res.some((item) => !item.roofSeq)
+          ? //최초 지붕재 추가 정보의 경우 roofsArray를 초기화 설정
+            res.map(() => ({
+              roofApply: true,
+              roofSeq: 1,
+              roofType: 1,
+              roofWidth: 200,
+              roofHeight: 200,
+              roofHajebichi: 200,
+              roofGap: 0,
+              roofLayout: 'parallel',
+            }))
+          : res.map((item) => ({
+              roofApply: item.roofApply === '' || item.roofApply === false ? false : true,
+              roofSeq: item.roofSeq,
+              roofType: item.roofType,
+              roofWidth: item.roofWidth,
+              roofHeight: item.roofHeight,
+              roofHajebichi: item.roofHajebichi,
+              roofGap: item.roofGap,
+              roofLayout: item.roofLayout,
+            }))
+        console.log('roofsArray ', roofsArray)
+        // 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
+        const patternData = {
+          roofSizeSet: roofsRow[0].roofSizeSet, // 첫 번째 항목의 값을 사용
+          roofAngleSet: roofsRow[0].roofAngleSet, // 첫 번째 항목의 값을 사용
+          roofs: roofsArray, // 만들어진 roofs 배열
+        }
+
+        // 데이터 설정
+        setBasicSettings({ ...patternData })
+      })
+    } catch (error) {
+      console.error('Data fetching error:', error)
+    }
+
+    if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
+      setBasicSettings({ ...canvasSetting })
+    }
+  }
+
+  const submitCanvasConfig = async () => {
+    try {
+      const patternData = {
+        objectNo,
+        roofSizeSet: basicSetting.roofSizeSet,
+        roofAngleSet: basicSetting.roofAngleSet,
+        roofMaterialsAddList: basicSetting.roofs,
+      }
+
+      await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => {
+        swalFire({ text: getMessage(res.returnMessage) })
+      })
+
+      //Recoil 설정
+      setCanvasSetting({ ...basicSetting })
+    } catch (error) {
+      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+    }
+  }
+
+  // Function to update the roofType and corresponding values
+  const handleRoofTypeChange = (index, value) => {
+    const updatedRoofs = [...basicSetting.roofs]
+    const roofType = parseInt(value, 10)
+
+    // Reset other values based on the selected roofType
+    if (roofType === 1) {
+      updatedRoofs[index] = {
+        ...updatedRoofs[index],
+        roofType: 1,
+        roofWidth: 265,
+        roofHeight: 235,
+        roofGap: 455,
+        hajebichi: 0,
+      }
+    } else if (roofType === 2) {
+      updatedRoofs[index] = {
+        ...updatedRoofs[index],
+        roofType: 2,
+        roofGap: 265,
+        roofHajebichi: 265,
+        roofWidth: 0,
+        roofHeight: 0,
+      }
+    } else if (roofType === 3) {
+      updatedRoofs[index] = {
+        ...updatedRoofs[index],
+        roofType: 3,
+        roofHajebichi: 265,
+        roofGap: 0,
+        roofWidth: 0,
+        roofHeight: 0,
+      }
+    } else if (roofType === 4) {
+      updatedRoofs[index] = {
+        ...updatedRoofs[index],
+        roofType: 4,
+        roofHeight: 265,
+        roofGap: 265,
+        roofHajebichi: 0,
+        roofWidth: 0,
+      }
+    }
+
+    setBasicSettings({
+      ...basicSetting,
+      roofs: updatedRoofs,
+    })
+  }
+
   return (
     <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
       <div className={`modal-pop-wrap l mount`}>
@@ -38,15 +187,36 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
                   <td>
                     <div className="pop-form-radio">
                       <div className="d-check-radio pop">
-                        <input type="radio" name="radio01" id="ra01" />
+                        <input
+                          type="radio"
+                          name="roofSizeSet"
+                          id="ra01"
+                          value="1" // roofSizeSet 값이 '1'인 경우
+                          checked={basicSetting.roofSizeSet == '1'} // 선택 여부 확인
+                          onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
+                        />
                         <label htmlFor="ra01">{getMessage('modal.placement.initial.setting.size.roof')}</label>
                       </div>
                       <div className="d-check-radio pop">
-                        <input type="radio" name="radio01" id="ra02" />
+                        <input
+                          type="radio"
+                          name="roofSizeSet"
+                          id="ra02"
+                          value="2" // roofSizeSet 값이 '2'인 경우
+                          checked={basicSetting.roofSizeSet == '2'} // 선택 여부 확인
+                          onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
+                        />
                         <label htmlFor="ra02">{getMessage('modal.placement.initial.setting.size.actual')}</label>
                       </div>
                       <div className="d-check-radio pop">
-                        <input type="radio" name="radio01" id="ra03" />
+                        <input
+                          type="radio"
+                          name="roofSizeSet"
+                          id="ra03"
+                          value="3" // roofSizeSet 값이 '3'인 경우
+                          checked={basicSetting.roofSizeSet == '3'} // 선택 여부 확인
+                          onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
+                        />
                         <label htmlFor="ra03">{getMessage('modal.placement.initial.setting.size.none.pitch')}</label>
                       </div>
                     </div>
@@ -57,11 +227,25 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
                   <td>
                     <div className="pop-form-radio">
                       <div className="d-check-radio pop">
-                        <input type="radio" name="radio02" id="ra04" />
+                        <input
+                          type="radio"
+                          name="roofAngleSet"
+                          id="ra04"
+                          value="slope" // 첫 번째 라디오 버튼의 값
+                          checked={basicSetting.roofAngleSet == 'slope'} // 현재 선택된 값인지 확인
+                          onChange={(e) => setBasicSettings({ ...basicSetting, roofAngleSet: e.target.value })} // 상태 업데이트
+                        />
                         <label htmlFor="ra04">{getMessage('modal.placement.initial.setting.roof.pitch')}</label>
                       </div>
                       <div className="d-check-radio pop">
-                        <input type="radio" name="radio02" id="ra05" />
+                        <input
+                          type="radio"
+                          name="roofAngleSet"
+                          id="ra05"
+                          value="flat" // 두 번째 라디오 버튼의 값
+                          checked={basicSetting.roofAngleSet == 'flat'} // 현재 선택된 값인지 확인
+                          onChange={(e) => setBasicSettings({ ...basicSetting, roofAngleSet: e.target.value })} // 상태 업데이트
+                        />
                         <label htmlFor="ra05">{getMessage('modal.placement.initial.setting.roof.angle')}</label>
                       </div>
                     </div>
@@ -75,19 +259,40 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
                   <td>
                     <div className="placement-option">
                       <div className="select-wrap" style={{ width: '171px' }}>
-                        <select className="select-light dark" name="" id="" onChange={(e) => setSelectedRoofMaterial(e.target.value)}>
+                        <select
-                          <option value={'A'}>瓦 type A</option>
+                          className="select-light dark"
-                          <option value={'B'}>瓦 type B</option>
+                          name="roofType"
-                          <option value={'C'}>瓦 type C</option>
+                          value={basicSetting.roofs[0].roofType}
-                          <option value={'D'}>瓦 type D</option>
+                          onChange={(e) => handleRoofTypeChange(0, e.target.value)}
+                        >
+                          <option value="1">瓦 type A</option>
+                          <option value="2">瓦 type B</option>
+                          <option value="3">瓦 type C</option>
+                          <option value="4">瓦 type D</option>
                         </select>
                       </div>
-                      {selectedRoofMaterial === 'A' ? (
+                      {basicSetting.roofs[0].roofType === 1 ? (
                         <>
                           <div className="flex-ment">
                             <span>W</span>
                             <div className="select-wrap" style={{ width: '84px' }}>
-                              <select className="select-light dark" name="" id="">
+                              <select
+                                className="select-light dark"
+                                name="roofWidth"
+                                value={basicSetting.roofs[0].roofWidth}
+                                onChange={(e) => {
+                                  // 상태 업데이트 함수 호출
+                                  setBasicSettings({
+                                    ...basicSetting,
+                                    roofs: [
+                                      {
+                                        ...basicSetting.roofs[0],
+                                        roofWidth: e.target.value,
+                                      },
+                                    ],
+                                  })
+                                }}
+                              >
                                 <option>265</option>
                               </select>
                             </div>
@@ -95,7 +300,23 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
                           <div className="flex-ment">
                             <span>L</span>
                             <div className="select-wrap" style={{ width: '84px' }}>
-                              <select className="select-light dark" name="" id="">
+                              <select
+                                className="select-light dark"
+                                name="roofHeight"
+                                value={basicSetting.roofs[0].roofHeight}
+                                onChange={(e) => {
+                                  // 상태 업데이트 함수 호출
+                                  setBasicSettings({
+                                    ...basicSetting,
+                                    roofs: [
+                                      {
+                                        ...basicSetting.roofs[0],
+                                        roofHeight: e.target.value,
+                                      },
+                                    ],
+                                  })
+                                }}
+                              >
                                 <option>235</option>
                               </select>
                             </div>
@@ -103,18 +324,50 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
                           <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="">
+                              <select
+                                className="select-light dark"
+                                name="roofGap"
+                                value={basicSetting.roofs[0].roofGap}
+                                onChange={(e) => {
+                                  // 상태 업데이트 함수 호출
+                                  setBasicSettings({
+                                    ...basicSetting,
+                                    roofs: [
+                                      {
+                                        ...basicSetting.roofs[0],
+                                        roofGap: e.target.value,
+                                      },
+                                    ],
+                                  })
+                                }}
+                              >
                                 <option>455</option>
                               </select>
                             </div>
                           </div>
                         </>
-                      ) : selectedRoofMaterial === 'B' ? (
+                      ) : basicSetting.roofs[0].roofType === 2 ? (
                         <>
                           <div className="flex-ment">
                             <span>{getMessage('hajebichi')}</span>
                             <div className="grid-select no-flx" style={{ width: '84px' }}>
-                              <select className="select-light dark" name="" id="">
+                              <select
+                                className="select-light dark"
+                                name="roofHajebichi"
+                                value={basicSetting.roofs[0].roofHajebichi}
+                                onChange={(e) => {
+                                  // 상태 업데이트 함수 호출
+                                  setBasicSettings({
+                                    ...basicSetting,
+                                    roofs: [
+                                      {
+                                        ...basicSetting.roofs[0],
+                                        roofHajebichi: e.target.value,
+                                      },
+                                    ],
+                                  })
+                                }}
+                              >
                                 <option>265</option>
                               </select>
                             </div>
@@ -122,29 +375,77 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
                           <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="">
+                              <select
+                                className="select-light dark"
+                                name="roofGap"
+                                value={basicSetting.roofs[0].roofGap}
+                                onChange={(e) => {
+                                  // 상태 업데이트 함수 호출
+                                  setBasicSettings({
+                                    ...basicSetting,
+                                    roofs: [
+                                      {
+                                        ...basicSetting.roofs[0],
+                                        roofGap: e.target.value,
+                                      },
+                                    ],
+                                  })
+                                }}
+                              >
                                 <option>265</option>
                               </select>
                             </div>
                           </div>
                         </>
-                      ) : selectedRoofMaterial === 'C' ? (
+                      ) : basicSetting.roofs[0].roofType === 3 ? (
                         <>
                           <div className="flex-ment">
                             <span>{getMessage('hajebichi')}</span>
                             <div className="grid-select no-flx" style={{ width: '84px' }}>
-                              <select className="select-light dark" name="" id="">
+                              <select
+                                className="select-light dark"
+                                name="roofHajebichi"
+                                value={basicSetting.roofs[0].roofHajebichi}
+                                onChange={(e) => {
+                                  // 상태 업데이트 함수 호출
+                                  setBasicSettings({
+                                    ...basicSetting,
+                                    roofs: [
+                                      {
+                                        ...basicSetting.roofs[0],
+                                        roofHajebichi: e.target.value,
+                                      },
+                                    ],
+                                  })
+                                }}
+                              >
                                 <option>265</option>
                               </select>
                             </div>
                           </div>
                         </>
-                      ) : selectedRoofMaterial === 'D' ? (
+                      ) : basicSetting.roofs[0].roofType === 4 ? (
                         <>
                           <div className="flex-ment">
                             <span>L</span>
                             <div className="grid-select no-flx" style={{ width: '84px' }}>
-                              <select className="select-light dark" name="" id="">
+                              <select
+                                className="select-light dark"
+                                name="roofHeight"
+                                value={basicSetting.roofs[0].roofHeight}
+                                onChange={(e) => {
+                                  // 상태 업데이트 함수 호출
+                                  setBasicSettings({
+                                    ...basicSetting,
+                                    roofs: [
+                                      {
+                                        ...basicSetting.roofs[0],
+                                        roofHeight: e.target.value,
+                                      },
+                                    ],
+                                  })
+                                }}
+                              >
                                 <option>265</option>
                               </select>
                             </div>
@@ -152,7 +453,23 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
                           <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="">
+                              <select
+                                className="select-light dark"
+                                name="roofGap"
+                                value={basicSetting.roofs[0].roofGap}
+                                onChange={(e) => {
+                                  // 상태 업데이트 함수 호출
+                                  setBasicSettings({
+                                    ...basicSetting,
+                                    roofs: [
+                                      {
+                                        ...basicSetting.roofs[0],
+                                        roofGap: e.target.value,
+                                      },
+                                    ],
+                                  })
+                                }}
+                              >
                                 <option>265</option>
                               </select>
                             </div>
@@ -168,7 +485,9 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
             </table>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
+            <button className="btn-frame modal act" onClick={() => submitCanvasConfig()}>
+              {getMessage('modal.common.save')}
+            </button>
           </div>
         </div>
         {showSizeGuideModal && <SizeGuide setShowSizeGuidModal={setShowSizeGuidModal} />}

src/locales/ja.json

@@ -80,6 +80,38 @@
   "plan.menu.placement.surface.all.remove": "配置面全体を削除",
   "plan.menu.module.circuit.setting": "モジュール回路構成",
   "plan.menu.module.circuit.setting.default": "基本設定",
+  "modal.module.basic.setting.orientation.setting": "方位設定",
+  "modal.module.basic.setting.orientation.setting.info": "※シミュレーション計算用方位を指定します。南の方位を設定してください。",
+  "modal.module.basic.setting.orientation.setting.angle.passivity": "角度を直接入力",
+  "modal.module.basic.setting.module.roof.material": "屋根材",
+  "modal.module.basic.setting.module.trestle.maker": "架台メーカー",
+  "modal.module.basic.setting.module.construction.method": "工法",
+  "modal.module.basic.setting.module.under.roof": "屋根の下",
+  "modal.module.basic.setting.module.setting": "モジュールの選択",
+  "modal.module.basic.setting.module.setting.info1": "※勾配の 範囲には制限があります。屋根傾斜が2.5値未満、10値を超える場合には施工が可能か 施工マニュアルを確認してください。",
+  "modal.module.basic.setting.module.setting.info2": "モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ず確認してください",
+  "modal.module.basic.setting.module.cotton.classification": "綿調道区分",
+  "modal.module.basic.setting.module.fitting.height": "設置高さ",
+  "modal.module.basic.setting.module.standard.wind.speed": "基準風速",
+  "modal.module.basic.setting.module.standard.snowfall.amount": "基準積雪量",
+  "modal.module.basic.setting.module.standard.construction": "標準施工",
+  "modal.module.basic.setting.module.enforce.construction": "強化施工",
+  "modal.module.basic.setting.module.multiple.construction": "多設施工",
+  "modal.module.basic.setting.module.eaves.bar.fitting": "庇力バーの設置",
+  "modal.module.basic.setting.module.blind.metal.fitting": "目幕金具の設置",
+  "modal.module.basic.setting.module.placement": "モジュールの配置",
+  "modal.module.basic.setting.module.placement.select.fitting.type": "設置形態を選択してくださ",
+  "modal.module.basic.setting.module.placement.waterfowl.arrangement": "水鳥の配置",
+  "modal.module.basic.setting.module.placement.do": "する",
+  "modal.module.basic.setting.module.placement.do.not": "しない。",
+  "modal.module.basic.setting.module.placement.arrangement.standard": "配置基準",
+  "modal.module.basic.setting.module.placement.arrangement.standard.center": "中央配置",
+  "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.prev": "以前",
+  "modal.module.basic.setting.passivity.placement": "手動配置",
+  "modal.module.basic.setting.auto.placement": "設定値に自動配置",
   "plan.menu.module.circuit.setting.circuit.trestle.setting": "回路と架台の設定",
   "plan.menu.module.circuit.setting.plan.orientation": "図面方位の適用",
   "plan.menu.estimate": "見積",
@@ -341,6 +373,8 @@
   "stuff.gridHeader.createDatetime": "登録日",
   "stuff.message.periodError": "最大1年間閲覧可能.",
   "length": "長さ",
+  "height": "高さ",
+  "output": "出力",
   "slope": "傾斜",
   "eaves.offset": "軒の",
   "gable.offset": "ケラバ出幅",
@@ -363,6 +397,7 @@
   "jerkinhead": "半折",
   "shed": "片側の流れ",
   "apply": "適用",
+  "module": "モジュール",
   "has.sleeve": "袖あり",
   "has.not.sleeve": "袖なし",
   "jerkinhead.width": "半折先幅",

src/locales/ko.json

@@ -83,6 +83,39 @@
   "plan.menu.placement.surface.all.remove": "배치면 전체 삭제",
   "plan.menu.module.circuit.setting": "모듈,회로 구성",
   "plan.menu.module.circuit.setting.default": "기본 설정",
+  "modal.module.basic.setting.orientation.setting": "방위 설정",
+  "modal.module.basic.setting.orientation.setting.info": "※시뮬레이션 계산용 방위를 지정합니다. 남쪽의 방위를 설정해주세요.",
+  "modal.module.basic.setting.orientation.setting.angle.passivity": "각도를 직접 입력",
+  "modal.module.basic.setting.module.roof.material": "지붕재",
+  "modal.module.basic.setting.module.trestle.maker": "가대메이거",
+  "modal.module.basic.setting.module.construction.method": "공법",
+  "modal.module.basic.setting.module.under.roof": "지붕밑바탕",
+  "modal.module.basic.setting.module.setting": "모듈 설정",
+  "modal.module.basic.setting.module.setting.info1": "※ 구배의 범위에는 제한이 있습니다. 지붕경사가 2.5치 미만, 10치를 초과하는 경우에는 시공이 가능한지 시공 매뉴얼을 확인해주십시오.",
+  "modal.module.basic.setting.module.setting.info2": "※ 모듈 배치 시에는 시공 매뉴얼에 기재된 <모듈 배치 조건>을 반드시 확인해주십시오.",
+  "modal.module.basic.setting.module.cotton.classification": "면조도구분",
+  "modal.module.basic.setting.module.fitting.height": "설치높이",
+  "modal.module.basic.setting.module.standard.wind.speed": "기준 풍속",
+  "modal.module.basic.setting.module.standard.snowfall.amount": "기준 적설량",
+  "modal.module.basic.setting.module.standard.construction": "표준시공",
+  "modal.module.basic.setting.module.enforce.construction": "강화시공",
+  "modal.module.basic.setting.module.multiple.construction": "다설시공",
+  "modal.module.basic.setting.module.eaves.bar.fitting": "처마력 바의 설치",
+  "modal.module.basic.setting.module.blind.metal.fitting": "눈막이 금구 설치",
+  "modal.module.basic.setting.module.select": "모듈 선택",
+  "modal.module.basic.setting.module.placement": "모듈 배치",
+  "modal.module.basic.setting.module.placement.select.fitting.type": "설치형태를 선택해주세요.",
+  "modal.module.basic.setting.module.placement.waterfowl.arrangement": "물떼새 배치",
+  "modal.module.basic.setting.module.placement.do": "한다",
+  "modal.module.basic.setting.module.placement.do.not": "하지 않는다",
+  "modal.module.basic.setting.module.placement.arrangement.standard": "배치 기준",
+  "modal.module.basic.setting.module.placement.arrangement.standard.center": "중앙배치",
+  "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.prev": "이전",
+  "modal.module.basic.setting.passivity.placement": "수동 배치",
+  "modal.module.basic.setting.auto.placement": "설정값으로 자동 배치",
   "plan.menu.module.circuit.setting.circuit.trestle.setting": "회로 및 가대 설정",
   "plan.menu.module.circuit.setting.plan.orientation": "도면 방위 적용",
   "plan.menu.estimate": "견적서",
@@ -344,6 +377,8 @@
   "stuff.gridHeader.createDatetime": "등록일",
   "stuff.message.periodError": "최대1년 조회 가능합니다.",
   "length": "길이",
+  "height": "높이",
+  "output": "출력",
   "slope": "경사",
   "eaves.offset": "처마 출폭",
   "gable.offset": "케라바 출폭",
@@ -366,6 +401,7 @@
   "jerkinhead": "반절처",
   "shed": "한쪽흐름",
   "apply": "적용",
+  "module": "모듈",
   "has.sleeve": "소매 있음",
   "has.not.sleeve": "소매 없음",
   "jerkinhead.width": "반절처 폭",