From 4286e20807d9bc079b786df426b4f6800336b719 Mon Sep 17 00:00:00 2001 From: keyy1315 Date: Wed, 6 Aug 2025 13:24:40 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EC=A1=B0=EC=82=AC=EB=A7=A4=EB=AC=BC=20?= =?UTF-8?q?=EC=A7=80=EB=B6=95=20=EC=A0=95=EB=B3=B4=20=EB=8B=A4=EC=A4=91=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EB=9E=9C=EB=8D=94=EB=A7=81=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 다중 선택의 기타 체크박스 선택 시 랜더링 오류로 체크 선택/해제 두 번 눌러야 하는 오류 해결 --- .../survey-sale/detail/RoofForm.tsx | 55 +++++++++---------- 1 file changed, 25 insertions(+), 30 deletions(-) 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 = ({ ))}
- +