fix: 조사매물 지붕 정보 다중 선택 랜더링 오류 해결

- 다중 선택의 기타 체크박스 선택 시 랜더링 오류로 체크 선택/해제 두 번 눌러야 하는 오류 해결

src/components/survey-sale/detail/RoofForm.tsx

@@ -309,7 +309,6 @@ const SelectedBox = ({
   const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     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>(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>(Boolean(etcValue))
+  const [etcValue, setEtcValue] = useState<string | null>(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 = ({
           </div>
         ))}
         <div className="check-form-box">
-          <input
-            type="checkbox"
-            id={`${column}Etc`}
-            checked={isOtherCheck || Boolean(etcValue)}
-            disabled={mode === 'READ'}
-            onChange={handleOtherCheckbox}
-          />
+          <input type="checkbox" id={`${column}Etc`} checked={etcValue !== null} disabled={mode === 'READ'} onChange={handleOtherCheckbox} />
           <label htmlFor={`${column}Etc`}>その他 (直接入力)</label>
         </div>
       </div>