diff --git a/src/components/survey-sale/detail/RoofForm.tsx b/src/components/survey-sale/detail/RoofForm.tsx index 33aded8..37b84eb 100644 --- a/src/components/survey-sale/detail/RoofForm.tsx +++ b/src/components/survey-sale/detail/RoofForm.tsx @@ -309,7 +309,6 @@ const SelectedBox = ({ const handleSelectChange = (e: React.ChangeEvent) => { const value = e.target.value const isEtc = value === 'etc' - const isSpecialEtc = isSpecialCase && value === 'O' const updatedData = { ...detailInfoData, @@ -317,11 +316,7 @@ const SelectedBox = ({ [`${column}Etc`]: isEtc ? '' : null, } - if (isSpecialEtc) { - updatedData[column] = value - } - - setIsEtcSelected(isEtc || isSpecialEtc) + setIsEtcSelected(isEtc) setRoofInfo(updatedData) } @@ -333,13 +328,13 @@ const SelectedBox = ({ /** Input box 비활성화 처리 * - 읽기 모드 : 비활성화 * - 설치 가능 여부 : 기타 입력 창 항상 활성화 - * - 건축 연수 : 신축(1) 체크 시 비활성화 + * - 건축 연수 : 新築 신축 (N) 체크 시 비활성화 * */ const isInputDisabled = () => { if (mode === 'READ') return true if (column === 'installationAvailability') return false if (column === 'constructionYear') { - return detailInfoData.constructionYear === 'N' || detailInfoData.constructionYear === null + return detailInfoData.constructionYear === selectBoxOptions.constructionYear[0].code || detailInfoData.constructionYear === null } return !isEtcSelected && !etcValue } @@ -401,8 +396,10 @@ const RadioSelected = ({ const [etcChecked, setEtcChecked] = useState(Boolean(etcValue)) const selectedId = - /** 누수 흔적 boolean 타입이므로 number 타입으로 변환 - 값이 없을 경우 2(없음) 으로 초기화*/ - column === 'leakTrace' ? Number(detailInfoData?.[column as keyof SurveyDetailInfo]) || 2 : detailInfoData?.[column as keyof SurveyDetailInfo] + /** 누수 흔적 boolean 타입이므로 number 타입으로 변환 - 값이 없을 경우 2(없음) 으로 초기화*/ + column === 'leakTrace' + ? Number(detailInfoData?.[column as keyof SurveyDetailInfo]) || radioEtcData.leakTrace[1].id + : detailInfoData?.[column as keyof SurveyDetailInfo] const isSpecialColumn = column === 'rafterDirection' || column === 'leakTrace' || column === 'insulationPresence' const showEtcOption = !isSpecialColumn @@ -413,7 +410,7 @@ const RadioSelected = ({ /** 누수 흔적 처리 - boolean 타입이므로 별도 처리 */ if (column === 'leakTrace') { - setRoofInfo({ ...detailInfoData, leakTrace: value === '1' }) + setRoofInfo({ ...detailInfoData, leakTrace: value === String(radioEtcData.leakTrace[0].id) }) return } @@ -430,7 +427,7 @@ const RadioSelected = ({ const isInsulationPresence = column === 'insulationPresence' const isRafterDirection = column === 'rafterDirection' - setEtcChecked(isInsulationPresence && value === '2') + setEtcChecked(isInsulationPresence && value === String(radioEtcData.insulationPresence[1].id)) setRoofInfo({ ...detailInfoData, @@ -451,7 +448,7 @@ const RadioSelected = ({ const isInputDisabled = () => { if (mode === 'READ') return true if (column === 'insulationPresence') { - return detailInfoData.insulationPresence !== '2' + return detailInfoData.insulationPresence === String(radioEtcData.insulationPresence[0].id) } return !etcChecked && !etcValue } @@ -518,8 +515,11 @@ const MultiCheck = ({ const { showErrorAlert } = useAlertMsg() const { roofMaterial, initialized, loading, loadOptions } = useSurveyOptionStore() const multiCheckData = column === 'supplementaryFacilities' ? supplementaryFacilities : roofMaterial - const etcValue = roofInfo?.[`${column}Etc` as keyof SurveyDetailInfo] - const [isOtherCheck, setIsOtherCheck] = useState(Boolean(etcValue)) + const [etcValue, setEtcValue] = useState(roofInfo?.[`${column}Etc` as keyof SurveyDetailInfo]?.toString() ?? null) + useEffect(() => { + const newValue = roofInfo?.[`${column}Etc` as keyof SurveyDetailInfo]?.toString() ?? null + setEtcValue(newValue) + }, [roofInfo, column]) useEffect(() => { if (!initialized && !loading) loadOptions() @@ -538,7 +538,7 @@ const MultiCheck = ({ } else { /** 지붕 재료 처리 - 최대 2개 선택 처리 */ if (isRoofMaterial) { - const totalSelected = selectedValues.length + (isOtherSelected || isOtherCheck ? 1 : 0) + const totalSelected = selectedValues.length + (isOtherSelected ? 1 : 0) if (totalSelected >= 2) { showErrorAlert(WARNING_MESSAGE.ROOF_MATERIAL_MAX_SELECT) return @@ -551,21 +551,22 @@ const MultiCheck = ({ /** 기타 선택 처리 */ const handleOtherCheckbox = () => { + setEtcValue(etcValue !== null ? null : '') + const isOtherSelected = etcValue !== null + if (isRoofMaterial) { - const currentSelected = selectedValues.length - if (!isOtherCheck && currentSelected >= 2) { + /** 지붕 재료 기타 선택 포함 최대 2개 선택 처리 */ + if (selectedValues.length >= 2) { showErrorAlert(WARNING_MESSAGE.ROOF_MATERIAL_MAX_SELECT) + setEtcValue(null) return } } - const newIsOtherCheck = !isOtherCheck - setIsOtherCheck(newIsOtherCheck) - /** 기타 선택 해제 시 값도 null로 설정 */ setRoofInfo({ ...roofInfo, - [`${column}Etc`]: newIsOtherCheck ? '' : null, + [`${column}Etc`]: isOtherSelected ? null : '', }) } @@ -576,7 +577,7 @@ const MultiCheck = ({ /** Input box 비활성화 처리 */ const isInputDisabled = () => { - return mode === 'READ' || (!isOtherCheck && !etcValue) + return mode === 'READ' || etcValue === null } return ( @@ -595,13 +596,7 @@ const MultiCheck = ({ ))}
- +