소스 간소화 및 불필요 제거
This commit is contained in:
changkyu choi
parent
0dc56e0d7f
commit
8f2b93863f
@ -9,7 +9,8 @@ import { useAxios } from '@/hooks/useAxios'
|
||||
import { get, post } from '@/lib/Axios'
|
||||
|
||||
export default function InitSettingsModal(props) {
|
||||
const [objectNo, setObjectNo] = useState('test123240909001') // 후에 삭제 필요
|
||||
const [objectNo, setObjectNo] = useState('test123240909002') // 후에 삭제 필요
|
||||
const [lastRoofSeq, setLastRoofSeq] = useState(0) // 마지막 roofSeq를 추적
|
||||
const [open, setOpen] = useRecoilState(modalState)
|
||||
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
|
||||
const [roofMaterials, setRoofMaterials] = useState([])
|
||||
@ -36,7 +37,7 @@ export default function InitSettingsModal(props) {
|
||||
})
|
||||
|
||||
get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${objectNo}` }).then((res) => {
|
||||
if (!res) return
|
||||
if (res.length == 0) return
|
||||
|
||||
// 'roofs' 배열을 생성하여 각 항목을 추가
|
||||
const roofsRow = res.map((item) => {
|
||||
@ -47,16 +48,16 @@ export default function InitSettingsModal(props) {
|
||||
}
|
||||
})
|
||||
|
||||
const roofsArray = res.map((item) => {
|
||||
return {
|
||||
roofSeq: String(item.roofSeq),
|
||||
roofType: String(item.roofType),
|
||||
roofWidth: String(item.roofWidth),
|
||||
roofHeight: String(item.roofHeight),
|
||||
roofGap: String(item.roofGap),
|
||||
roofLayout: item.roofLayout,
|
||||
}
|
||||
})
|
||||
const roofsArray = res.some((item) => !item.roofSeq)
|
||||
? null //지붕재 추가 정보가 없다면 roofsArray를 null 처리하여 지붕재 추가 정보가 보이지 않게 한다.
|
||||
: res.map((item) => ({
|
||||
roofSeq: String(item.roofSeq),
|
||||
roofType: String(item.roofType),
|
||||
roofWidth: String(item.roofWidth),
|
||||
roofHeight: String(item.roofHeight),
|
||||
roofGap: String(item.roofGap),
|
||||
roofLayout: item.roofLayout,
|
||||
}))
|
||||
|
||||
// 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
|
||||
const patternData = {
|
||||
@ -68,6 +69,14 @@ export default function InitSettingsModal(props) {
|
||||
|
||||
// 데이터 설정
|
||||
setBasicSettings({ ...patternData })
|
||||
|
||||
// 초기 roofSeq 값을 업데이트
|
||||
if (roofsArray == null) {
|
||||
//roofs(지붕재추가) 값이 없으면 lastRoofSeq는 1 설정
|
||||
setLastRoofSeq(1)
|
||||
} else {
|
||||
setLastRoofSeq(roofsArray.length + 1)
|
||||
}
|
||||
})
|
||||
|
||||
if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
|
||||
@ -83,14 +92,20 @@ export default function InitSettingsModal(props) {
|
||||
|
||||
//배열 추가 함수
|
||||
const addRoofSetting = () => {
|
||||
if (basicSetting.roofs.length === 4) {
|
||||
if (basicSetting.roofs != null && basicSetting.roofs.length === 4) {
|
||||
alert('지붕재는 최대 4종까지 선택할 수 있습니다.')
|
||||
return
|
||||
}
|
||||
|
||||
//roofs가 null인 경우 배열 생성
|
||||
if (basicSetting.roofs == null) {
|
||||
basicSetting.roofs = []
|
||||
}
|
||||
|
||||
//기본값
|
||||
const newRoofSettings = {
|
||||
roofSeq: basicSetting.roofs.length + 1,
|
||||
//roofSeq: basicSetting.roofs.length + 1,
|
||||
roofSeq: lastRoofSeq, // 마지막 roofSeq를 1 증가
|
||||
roofType: '3',
|
||||
roofWidth: '200',
|
||||
roofHeight: '200',
|
||||
@ -102,15 +117,40 @@ export default function InitSettingsModal(props) {
|
||||
...prevState,
|
||||
roofs: [...prevState.roofs, newRoofSettings],
|
||||
}))
|
||||
|
||||
setLastRoofSeq(newRoofSettings.roofSeq + 1) // roofSeq 값을 업데이트
|
||||
}
|
||||
|
||||
//배열 값 변경 함수
|
||||
const handleRoofSettings = (id, event) => {
|
||||
const roof = basicSetting.roofs.map((roof, i) => (id === roof.roofSeq ? { ...roof, [event.target.name]: event.target.value } : roof))
|
||||
setBasicSettings((prevState) => ({
|
||||
...prevState,
|
||||
roofs: [...roof],
|
||||
}))
|
||||
console.log(id)
|
||||
|
||||
// 기본 세팅에서 roofs 배열을 복사
|
||||
const updatedRoofs = [...basicSetting.roofs]
|
||||
|
||||
// roofSeq가 id와 일치하는 항목의 인덱스 찾기
|
||||
const index = updatedRoofs.findIndex((roof) => roof.roofSeq === id)
|
||||
|
||||
if (index !== -1) {
|
||||
// 해당 인덱스의 항목을 수정
|
||||
updatedRoofs[index] = {
|
||||
...updatedRoofs[index],
|
||||
[event.target.name]: event.target.value,
|
||||
}
|
||||
|
||||
// 수정된 배열을 상태에 반영
|
||||
setBasicSettings((prevState) => ({
|
||||
...prevState,
|
||||
roofs: updatedRoofs,
|
||||
}))
|
||||
}
|
||||
|
||||
// const roof = basicSetting.roofs.map((roof, i) => (id === roof.roofSeq ? { ...roof, [event.target.name]: event.target.value } : roof))
|
||||
|
||||
// setBasicSettings((prevState) => ({
|
||||
// ...prevState,
|
||||
// roofs: [...roof],
|
||||
// }))
|
||||
}
|
||||
|
||||
//저장
|
||||
@ -205,9 +245,82 @@ export default function InitSettingsModal(props) {
|
||||
<span className="text-sm text-gray-500">※ 지붕재는 최대 4종까지 선택할 수 있습니다.</span>
|
||||
</div>
|
||||
|
||||
{/* Roofs Array Rendering */}
|
||||
{basicSetting.roofs &&
|
||||
basicSetting.roofs.map((roof, index) => {
|
||||
return <RoofSelectBox roofMaterials={roofMaterials} roof={roof} key={index} onChange={handleRoofSettings} onRemove={onRemove} />
|
||||
return (
|
||||
<div key={index} className="mb-4 flex flex-wrap items-center space-x-4" style={{ border: '1px solid black' }}>
|
||||
<span> 타입 : </span>
|
||||
<Select
|
||||
aria-label="roofMaterial"
|
||||
className={'w-52'}
|
||||
name="roofType"
|
||||
onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
|
||||
items={roofMaterials}
|
||||
defaultSelectedKeys={roof.roofType ? roof.roofType : ''}
|
||||
selectedKeys={roof.roofType}
|
||||
value={roof.roofType}
|
||||
>
|
||||
{(roofMaterial) => (
|
||||
<SelectItem key={roofMaterial.id} value={roofMaterial.id}>
|
||||
{roofMaterial.name}
|
||||
</SelectItem>
|
||||
)}
|
||||
</Select>
|
||||
<span> 너비 : </span>
|
||||
<Input
|
||||
type="text"
|
||||
name="roofWidth"
|
||||
placeholder="너비"
|
||||
value={roof.roofWidth}
|
||||
className="w-24"
|
||||
onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
|
||||
/>
|
||||
mm
|
||||
<span> 높이 : </span>
|
||||
<Input
|
||||
type="text"
|
||||
name="roofHeight"
|
||||
placeholder="높이"
|
||||
value={roof.roofHeight}
|
||||
className="w-24"
|
||||
onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
|
||||
/>
|
||||
mm
|
||||
<span> 서까래 간격 : </span>
|
||||
<Input
|
||||
type="text"
|
||||
name="roofGap"
|
||||
placeholder="간격"
|
||||
value={roof.roofGap}
|
||||
className="w-24"
|
||||
onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
|
||||
/>
|
||||
mm
|
||||
<div className="flex space-x-4">
|
||||
<RadioGroup
|
||||
orientation="horizontal"
|
||||
name="roofLayout"
|
||||
value={roof.roofLayout}
|
||||
defaultValue="parallel"
|
||||
onChange={(e) => handleRoofSettings(roof.roofSeq, e)}
|
||||
>
|
||||
<Radio value="parallel">병렬식</Radio>
|
||||
<Radio value="cascade">계단식</Radio>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div className="flex space-x-4">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
onRemove(roof.roofSeq)
|
||||
}}
|
||||
>
|
||||
삭제
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
<div className="flex gap-4 items-right">
|
||||
@ -223,79 +336,3 @@ export default function InitSettingsModal(props) {
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const RoofSelectBox = (props) => {
|
||||
return (
|
||||
<div className="mb-4 flex flex-wrap items-center space-x-4" style={{ border: '1px solid black' }}>
|
||||
<span> 타입 : </span>
|
||||
<Select
|
||||
aria-label="roofMaterial"
|
||||
className={'w-52'}
|
||||
name="roofType"
|
||||
onChange={(e) => props.onChange(props.roof.roofSeq, e)}
|
||||
items={props.roofMaterials}
|
||||
defaultSelectedKeys={props.roof.roofType ? props.roof.roofType : ''}
|
||||
selectedKeys={props.roof.roofType}
|
||||
value={props.roof.roofType}
|
||||
>
|
||||
{(roofMaterial) => (
|
||||
<SelectItem key={roofMaterial.id} value={roofMaterial.id}>
|
||||
{roofMaterial.name}
|
||||
</SelectItem>
|
||||
)}
|
||||
</Select>
|
||||
<span> 너비 : </span>
|
||||
<Input
|
||||
type="text"
|
||||
name="roofWidth"
|
||||
placeholder="너비"
|
||||
value={props.roof.roofWidth}
|
||||
className="w-24"
|
||||
onChange={(e) => props.onChange(props.roof.roofSeq, e)}
|
||||
/>
|
||||
mm
|
||||
<span> 높이 : </span>
|
||||
<Input
|
||||
type="text"
|
||||
name="roofHeight"
|
||||
placeholder="높이"
|
||||
value={props.roof.roofHeight}
|
||||
className="w-24"
|
||||
onChange={(e) => props.onChange(props.roof.roofSeq, e)}
|
||||
/>
|
||||
mm
|
||||
<span> 서까래 간격 : </span>
|
||||
<Input
|
||||
type="text"
|
||||
name="roofGap"
|
||||
placeholder="간격"
|
||||
value={props.roof.roofGap}
|
||||
className="w-24"
|
||||
onChange={(e) => props.onChange(props.roof.roofSeq, e)}
|
||||
/>
|
||||
mm
|
||||
<div className="flex space-x-4">
|
||||
<RadioGroup
|
||||
orientation="horizontal"
|
||||
name="roofLayout"
|
||||
value={props.roof.roofLayout}
|
||||
defaultValue="parallel"
|
||||
onChange={(e) => props.onChange(props.roof.roofSeq, e)}
|
||||
>
|
||||
<Radio value="parallel">병렬식</Radio>
|
||||
<Radio value="cascade">계단식</Radio>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div className="flex space-x-4">
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
props.onRemove(props.roof.roofSeq)
|
||||
}}
|
||||
>
|
||||
삭제
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user