qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
hyojun.choi 2024-10-14 16:16:40 +09:00
commit 205288088e
10 changed files with 877 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/floor-plan/CanvasMenu.jsx
View File

@ -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,
}

4
src/components/floor-plan/FloorPlan.jsx
View File

@ -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>
</>

13
src/components/floor-plan/MenuDepth01.jsx
View File

@ -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(() => {

56
src/components/floor-plan/modal/basic/BasicSetting.jsx Normal file
View File

@ -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>
)
}

185
src/components/floor-plan/modal/basic/step/Module.jsx Normal file
View File

@ -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>
</>
)
}

62
src/components/floor-plan/modal/basic/step/Orientation.jsx Normal file
View File

@ -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>
</>
)
}

140
src/components/floor-plan/modal/basic/step/Placement.jsx Normal file
View File

@ -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>
</>
)
}

369
src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
View File

@ -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)}>
<option value={'A'}>瓦 type A</option>
<option value={'B'}>瓦 type B</option>
<option value={'C'}>瓦 type C</option>
<option value={'D'}>瓦 type D</option>
<select
className="select-light dark"
name="roofType"
value={basicSetting.roofs[0].roofType}
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} />}

35
src/locales/ja.json
View File

@ -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": "半折先幅",

36
src/locales/ko.json
View File

@ -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": "반절처 폭",