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

배치면 초기 설정 수정

Browse Source
This commit is contained in:
김민식 2025-01-13 22:35:16 +09:00
parent aab9e654ed
commit 1cc569a917
3 changed files with 87 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -296,7 +296,8 @@ export default function CanvasMenu(props) {
}, [type, globalLocale]) }, [type, globalLocale])
useEffect(() => { useEffect(() => {
setMenuNumber(1) if (Object.keys(basicSetting).length === 0) return
// setMenuNumber(1)
// if ([2, 3].some((num) => num === canvasSetting?.roofSizeSet)) { // if ([2, 3].some((num) => num === canvasSetting?.roofSizeSet)) {
// setMenuNumber(3) // setMenuNumber(3)
// setType('surface') // setType('surface')
@ -306,7 +307,7 @@ export default function CanvasMenu(props) {
// setType('outline') // setType('outline')
// setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE) // setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
// } // }
}, [canvasSetting]) }, [basicSetting])
const checkMenuState = (menu) => { const checkMenuState = (menu) => {
return (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.index === 2) || (menuNumber === 4 && menu.index === 2) return (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.index === 2) || (menuNumber === 4 && menu.index === 2)

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

@ -43,56 +43,59 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
// 데이터를 최초 한 번만 조회 // 데이터를 최초 한 번만 조회
useEffect(() => { useEffect(() => {
if (!basicSetting || !currentRoof || Object.keys(currentRoof).length === 0 || Object.keys(basicSetting).length === 0) return
const raftCodeList = findCommonCode('203800') const raftCodeList = findCommonCode('203800')
setRaftCodes(raftCodeList) setRaftCodes(raftCodeList)
setCurrentRoof({...currentRoof, roofSizeSet: basicSetting.roofMaterials.roofSizeSet, roofAngleSet: basicSetting.roofMaterials.roofAngleSet}) // setCurrentRoof({ ...currentRoof, roofSizeSet: basicSetting.roofMaterials.roofSizeSet, roofAngleSet: basicSetting.roofMaterials.roofAngleSet })
}, []) }, [])
useEffect(() => { useEffect(() => {
setBasicSettings({ if (!currentRoof || Object.keys(currentRoof).length === 0) return
...basicSetting, console.log(basicSetting)
roofSizeSet: String(currentRoof.roofSizeSet), setBasicSettings({
roofAngleSet: currentRoof.roofAngleSet, ...basicSetting,
roofsData: { roofSizeSet: String(currentRoof.roofSizeSet),
roofApply: true, roofAngleSet: currentRoof.roofAngleSet,
roofSeq: 0, roofsData: {
roofMatlCd: currentRoof.roofMatlCd, roofApply: true,
roofWidth: currentRoof.width, roofSeq: 0,
roofHeight: currentRoof.length, roofMatlCd: currentRoof.roofMatlCd,
roofHajebichi: currentRoof.hajebichi, roofWidth: currentRoof.width,
roofGap: currentRoof.raft, roofHeight: currentRoof.length,
roofLayout: currentRoof.layout, roofHajebichi: currentRoof.hajebichi,
roofPitch: currentRoof.pitch, roofGap: currentRoof.raft,
roofAngle: currentRoof.angle, roofLayout: currentRoof.layout,
}, roofPitch: currentRoof.pitch,
}) roofAngle: currentRoof.angle,
},
})
}, [currentRoof]) }, [currentRoof])
const handleRoofSizeSetChange = (value) => { const handleRoofSizeSetChange = (value) => {
setCurrentRoof({...currentRoof, roofSizeSet: value}) setCurrentRoof({ ...currentRoof, roofSizeSet: value })
} }
const handleRoofAngleSetChange = (value) => { const handleRoofAngleSetChange = (value) => {
setCurrentRoof({...currentRoof, roofAngleSet: value}) setCurrentRoof({ ...currentRoof, roofAngleSet: value })
} }
// Function to update the roofType and corresponding values // Function to update the roofType and corresponding values
const handleRoofTypeChange = (value) => { const handleRoofTypeChange = (value) => {
const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value) const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value)
setCurrentRoof({...selectedRoofMaterial, index: 0, roofSizeSet: String(currentRoof.roofSizeSet), roofAngleSet: currentRoof.roofAngleSet}) setCurrentRoof({ ...selectedRoofMaterial, index: 0, roofSizeSet: String(currentRoof.roofSizeSet), roofAngleSet: currentRoof.roofAngleSet })
} }
const changeInput = (value, e) => { const changeInput = (value, e) => {
const { name } = e.target const { name } = e.target
setCurrentRoof({...currentRoof, [name]: Number(value)}) setCurrentRoof({ ...currentRoof, [name]: Number(value) })
} }
const handleRafterChange = (value) => { const handleRafterChange = (value) => {
setCurrentRoof({...currentRoof, raft: value}) setCurrentRoof({ ...currentRoof, raft: value })
} }
const handleRoofLayoutChange = (value) => { const handleRoofLayoutChange = (value) => {
setCurrentRoof({...currentRoof, layout: value}) setCurrentRoof({ ...currentRoof, layout: value })
} }
const handleSaveBtn = () => { const handleSaveBtn = () => {
@ -119,7 +122,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
selectedRoofMaterial: { selectedRoofMaterial: {
// 선택된 지붕재 정보 // 선택된 지붕재 정보
roofInfo, roofInfo,
} },
}) })
setBasicSettings({ setBasicSettings({
@ -184,7 +187,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
name="roofSizeSet" name="roofSizeSet"
id="ra01" id="ra01"
value="1" // roofSizeSet 값이 '1'인 경우 value="1" // roofSizeSet 값이 '1'인 경우
checked={currentRoof.roofSizeSet === '1'} // 선택 여부 확인 checked={currentRoof?.roofSizeSet === '1'} // 선택 여부 확인
//onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트 //onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
onClick={() => handleRoofSizeSetChange('1')} onClick={() => handleRoofSizeSetChange('1')}
/> />
@ -196,7 +199,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
name="roofSizeSet" name="roofSizeSet"
id="ra02" id="ra02"
value="2" // roofSizeSet 값이 '2'인 경우 value="2" // roofSizeSet 값이 '2'인 경우
checked={currentRoof.roofSizeSet === '2'} // 선택 여부 확인 checked={currentRoof?.roofSizeSet === '2'} // 선택 여부 확인
//onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트 //onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
onClick={() => handleRoofSizeSetChange('2')} onClick={() => handleRoofSizeSetChange('2')}
/> />
@ -208,7 +211,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
name="roofSizeSet" name="roofSizeSet"
id="ra03" id="ra03"
value="3" // roofSizeSet 값이 '3'인 경우 value="3" // roofSizeSet 값이 '3'인 경우
checked={currentRoof.roofSizeSet === '3'} // 선택 여부 확인 checked={currentRoof?.roofSizeSet === '3'} // 선택 여부 확인
//onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트 //onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
onClick={() => handleRoofSizeSetChange('3')} onClick={() => handleRoofSizeSetChange('3')}
/> />
@ -227,7 +230,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
name="roofAngleSet" name="roofAngleSet"
id="ra04" id="ra04"
value="slope" // 첫 번째 라디오 버튼의 값 value="slope" // 첫 번째 라디오 버튼의 값
checked={currentRoof.roofAngleSet === 'slope'} // 현재 선택된 값인지 확인 checked={currentRoof?.roofAngleSet === 'slope'} // 현재 선택된 값인지 확인
//onChange={(e) => setBasicSettings({ ...basicSetting, roofAngleSet: e.target.value })} // 상태 업데이트 //onChange={(e) => setBasicSettings({ ...basicSetting, roofAngleSet: e.target.value })} // 상태 업데이트
onClick={() => handleRoofAngleSetChange('slope')} onClick={() => handleRoofAngleSetChange('slope')}
/> />
@ -239,7 +242,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
name="roofAngleSet" name="roofAngleSet"
id="ra05" id="ra05"
value="flat" // 두 번째 라디오 버튼의 값 value="flat" // 두 번째 라디오 버튼의 값
checked={currentRoof.roofAngleSet === 'flat'} // 현재 선택된 값인지 확인 checked={currentRoof?.roofAngleSet === 'flat'} // 현재 선택된 값인지 확인
//onChange={(e) => setBasicSettings({ ...basicSetting, roofAngleSet: e.target.value })} // 상태 업데이트 //onChange={(e) => setBasicSettings({ ...basicSetting, roofAngleSet: e.target.value })} // 상태 업데이트
onClick={() => handleRoofAngleSetChange('flat')} onClick={() => handleRoofAngleSetChange('flat')}
/> />
@ -259,17 +262,19 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
<div className="placement-option"> <div className="placement-option">
<div className="grid-select no-flx" style={{ width: '171px' }}> <div className="grid-select no-flx" style={{ width: '171px' }}>
<QSelectBox <QSelectBox
title={currentRoof.roofSizeSet === '3' ? getMessage('modal.placement.initial.setting.size.none.pitch') : currentRoof.roofMatlNm} title={
currentRoof?.roofSizeSet === '3' ? getMessage('modal.placement.initial.setting.size.none.pitch') : currentRoof?.roofMatlNm
}
ref={roofRef.roofCd} ref={roofRef.roofCd}
options={roofMaterials.map((roof, index) => { options={roofMaterials.map((roof, index) => {
return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp } return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp }
})} })}
value={currentRoof.roofSizeSet === '3' ? null : currentRoof.roofMatlCd} value={currentRoof?.roofSizeSet === '3' ? null : currentRoof?.roofMatlCd}
onChange={(e) => handleRoofTypeChange(e.roofMatlCd)} onChange={(e) => handleRoofTypeChange(e.roofMatlCd)}
sourceKey="id" sourceKey="id"
targetKey="id" targetKey="id"
showKey="name" showKey="name"
disabled={currentRoof.roofSizeSet === '3'} disabled={currentRoof?.roofSizeSet === '3'}
/> />
{/* <select {/* <select
className="select-light dark" className="select-light dark"
@ -298,10 +303,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
className="input-origin block" className="input-origin block"
name={`width`} name={`width`}
ref={roofRef.width} ref={roofRef.width}
value={parseInt(currentRoof.width)} value={parseInt(currentRoof?.width)}
onChange={(e) => onlyNumberInputChange(e, changeInput)} onChange={(e) => onlyNumberInputChange(e, changeInput)}
readOnly={currentRoof.widAuth === 'R'} readOnly={currentRoof?.widAuth === 'R'}
disabled={currentRoof.roofSizeSet === '3'} disabled={currentRoof?.roofSizeSet === '3'}
/> />
</div> </div>
{/* <div className="input-grid" style={{ width: '63px' }}> {/* <div className="input-grid" style={{ width: '63px' }}>
@ -323,10 +328,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
className="input-origin block" className="input-origin block"
name={`length`} name={`length`}
ref={roofRef.length} ref={roofRef.length}
value={parseInt(currentRoof.length)} value={parseInt(currentRoof?.length)}
onChange={(e) => onlyNumberInputChange(e, changeInput)} onChange={(e) => onlyNumberInputChange(e, changeInput)}
readOnly={currentRoof.lenAuth === 'R'} readOnly={currentRoof?.lenAuth === 'R'}
disabled={currentRoof.roofSizeSet === '3'} disabled={currentRoof?.roofSizeSet === '3'}
/> />
</div> </div>
{/* <div className="input-grid" style={{ width: '63px' }}> {/* <div className="input-grid" style={{ width: '63px' }}>
@ -343,19 +348,22 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
<div className="flex-ment"> <div className="flex-ment">
<span>{getMessage('modal.placement.initial.setting.rafter')}</span> <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
{raftCodes.length > 0 && ( {raftCodes.length > 0 && (
<div className="select-wrap" style={{ width: '160px' }}> <div className="select-wrap" style={{ width: '160px' }}>
<QSelectBox <QSelectBox
options={raftCodes} options={raftCodes}
ref={roofRef.rafter} ref={roofRef.rafter}
title={raftCodes.find((r) => r.clCode === (currentRoof.raft === undefined ? currentRoof.raftBaseCd : currentRoof.raft)).clCodeNm} title={
value={currentRoof.raft === undefined ? currentRoof.raftBaseCd : currentRoof.raft} raftCodes.find((r) => r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft))
onChange={(e) => handleRafterChange(e.clCode)} .clCodeNm
sourceKey="clCode" }
targetKey={currentRoof.raft ? 'raft' : 'raftBaseCd'} value={currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft}
showKey="clCodeNm" onChange={(e) => handleRafterChange(e.clCode)}
disabled={currentRoof.roofSizeSet === '3'} sourceKey="clCode"
/> targetKey={currentRoof?.raft ? 'raft' : 'raftBaseCd'}
{/* <select className="select-light dark" name="roofGap" ref={roofRef.rafter}> showKey="clCodeNm"
disabled={currentRoof?.roofSizeSet === '3'}
/>
{/* <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
{raftCodes.map((raft, index) => { {raftCodes.map((raft, index) => {
return ( return (
<option key={index} value={raft.clCode} selected={currentRoofMaterial.raft === raft.clCode}> <option key={index} value={raft.clCode} selected={currentRoofMaterial.raft === raft.clCode}>
@ -364,7 +372,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
) )
})} })}
</select> */} </select> */}
</div> </div>
)} )}
</div> </div>
)} )}
@ -386,25 +394,27 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
</div> </div>
)} )}
</div> </div>
<div className="placement-roof-btn-wrap"> {currentRoof && (
<div className="icon-btn-wrap mt10"> <div className="placement-roof-btn-wrap">
<button <div className="icon-btn-wrap mt10">
className={`${currentRoof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL && 'act'}`} <button
value={ROOF_MATERIAL_LAYOUT.PARALLEL} className={`${currentRoof?.layout === ROOF_MATERIAL_LAYOUT.PARALLEL && 'act'}`}
onClick={() => handleRoofLayoutChange(ROOF_MATERIAL_LAYOUT.PARALLEL)} value={ROOF_MATERIAL_LAYOUT.PARALLEL}
> onClick={() => handleRoofLayoutChange(ROOF_MATERIAL_LAYOUT.PARALLEL)}
{getMessage('modal.roof.alloc.select.parallel')} >
<i className="allocation01"></i> {getMessage('modal.roof.alloc.select.parallel')}
</button> <i className="allocation01"></i>
<button </button>
className={`${currentRoof.layout === ROOF_MATERIAL_LAYOUT.STAIRS && 'act'}`} <button
value={ROOF_MATERIAL_LAYOUT.STAIRS} className={`${currentRoof.layout === ROOF_MATERIAL_LAYOUT.STAIRS && 'act'}`}
onClick={() => handleRoofLayoutChange(ROOF_MATERIAL_LAYOUT.STAIRS)} value={ROOF_MATERIAL_LAYOUT.STAIRS}
> onClick={() => handleRoofLayoutChange(ROOF_MATERIAL_LAYOUT.STAIRS)}
{getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i> >
</button> {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
</button>
</div>
</div> </div>
</div> )}
</td> </td>
</tr> </tr>
</tbody> </tbody>

3
src/hooks/option/useCanvasSetting.js
View File

@ -412,7 +412,7 @@ export function useCanvasSetting() {
//Recoil 설정 //Recoil 설정
//setCanvasSetting({ ...basicSetting })\ //setCanvasSetting({ ...basicSetting })\
console.log(basicSetting) console.log(basicSetting)
fetchBasicSettings()
if (['2', '3'].includes(basicSetting?.roofSizeSet)) { if (['2', '3'].includes(basicSetting?.roofSizeSet)) {
setMenuNumber(3) setMenuNumber(3)
setType('surface') setType('surface')
@ -422,7 +422,6 @@ export function useCanvasSetting() {
setType('outline') setType('outline')
setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE) setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
} }
fetchBasicSettings()
} catch (error) { } catch (error) {
swalFire({ text: error.message, icon: 'error' }) swalFire({ text: error.message, icon: 'error' })
} }