Merge pull request 'feature/survey : 조사매물 PDF 번역 수정 및 컴포넌트 랜더링 이슈 해결' (#124) from feature/survey into dev

Reviewed-on: #124

src/components/pdf/SurveySalePdf.tsx

@@ -137,7 +137,7 @@ export default function SurveySalePdf({ survey }: { survey: SurveyBasicInfo }) {
         <Text style={styles.title}>HWJ 現地調査シート</Text>
         <View style={styles.headerRight}>
           <View style={styles.headerLeft}>
-            <Text style={styles.headerLabel}>現地調査販賣店名</Text>
+            <Text style={styles.headerLabel}>現地調査会社名</Text>
             <Text style={styles.headerValue}>{survey?.store ?? '-'}</Text>
           </View>
           {survey?.constructionPoint && (
@@ -147,7 +147,7 @@ export default function SurveySalePdf({ survey }: { survey: SurveyBasicInfo }) {
             </View>
           )}
           <View>
-            <Text style={styles.headerLabel}>現地阴買日</Text>
+            <Text style={styles.headerLabel}>現地調査日</Text>
             <Text style={styles.headerValue}>{survey?.investigationDate ?? '-'}</Text>
           </View>
         </View>
@@ -171,16 +171,16 @@ export default function SurveySalePdf({ survey }: { survey: SurveyBasicInfo }) {
 
       {/* Electric Info */}
       <View style={styles.section}>
-        <Text style={styles.sectionTitle}>も気開係</Text>
+        <Text style={styles.sectionTitle}>電気関係</Text>
         <View style={styles.table}>
           <View style={styles.tableRow}>
-            <Text style={[styles.tableHeader, styles.tableHeaderMedium]}>雨気契约容国</Text>
+            <Text style={[styles.tableHeader, styles.tableHeaderMedium]}>電気契約容量</Text>
             <Text style={[styles.tableCell, styles.tableCellFlex1, styles.marginL]}>{survey?.detailInfo?.contractCapacity ?? '-'}</Text>
             <Text style={[styles.tableHeader, styles.tableHeaderMedium, styles.marginL]}>電気契約会社</Text>
             <Text style={[styles.tableCell, styles.tableCellFlex1, styles.marginL]}>{survey?.detailInfo?.retailCompany ?? '-'}</Text>
           </View>
           <View style={styles.tableRow}>
-            <Text style={[styles.tableHeader, styles.tableHeaderMedium, styles.marginT]}>電気付带設備</Text>
+            <Text style={[styles.tableHeader, styles.tableHeaderMedium, styles.marginT]}>電気付帯設備</Text>
             <Text style={[styles.tableCell, styles.tableCellFlex1, styles.marginL, styles.marginT]}>
               {survey?.detailInfo?.supplementaryFacilities
                 ? supplementaryFacilities
@@ -207,7 +207,7 @@ export default function SurveySalePdf({ survey }: { survey: SurveyBasicInfo }) {
 
       {/* Roof Info */}
       <View style={styles.section}>
-        <Text style={styles.sectionTitle}>屋根眀係</Text>
+        <Text style={styles.sectionTitle}>屋根関連</Text>
         <View style={styles.table}>
           <View style={styles.tableRow}>
             <Text style={[styles.tableHeader, styles.tableHeaderMedium]}>築年数</Text>
@@ -218,7 +218,7 @@ export default function SurveySalePdf({ survey }: { survey: SurveyBasicInfo }) {
                 ? `既築 (${survey?.detailInfo?.constructionYear}年)`
                 : '-'}
             </Text>
-            <Text style={[styles.tableHeader, styles.tableHeaderMedium, styles.marginL]}>至根材</Text>
+            <Text style={[styles.tableHeader, styles.tableHeaderMedium, styles.marginL]}>屋根材</Text>
             <Text style={[styles.tableCell, styles.tableCellFlex07, styles.marginL, styles.marginL]}>
               {survey?.detailInfo?.roofMaterial === null && survey?.detailInfo?.roofMaterialEtc === null
                 ? '-'
@@ -228,25 +228,25 @@ export default function SurveySalePdf({ survey }: { survey: SurveyBasicInfo }) {
                     .join(', ')}
               {survey?.detailInfo?.roofMaterialEtc ? `, ${survey?.detailInfo?.roofMaterialEtc}` : ''}
             </Text>
-            <Text style={[styles.tableHeader, styles.tableHeaderMedium, styles.marginL]}>座根形状</Text>
+            <Text style={[styles.tableHeader, styles.tableHeaderMedium, styles.marginL]}>屋根形状</Text>
             <Text style={[styles.tableCell, styles.tableCellFlex07, styles.marginL]}>
               {selectBoxOptions.roofShape.find((shape) => shape.id.toString() === survey?.detailInfo?.roofShape)?.name ??
                 (survey?.detailInfo?.roofShapeEtc ? ` ${survey?.detailInfo?.roofShapeEtc}` : '-')}
             </Text>
           </View>
           <View style={styles.tableRow}>
-            <Text style={[styles.tableHeader, styles.tableHeaderMedium, styles.marginT]}>座根勾配</Text>
+            <Text style={[styles.tableHeader, styles.tableHeaderMedium, styles.marginT]}>屋根勾配</Text>
             <Text style={[styles.tableCell, styles.tableCellFlex1, styles.marginL, styles.marginT, styles.marginL]}>
               {survey?.detailInfo?.roofSlope ? `${survey?.detailInfo?.roofSlope} 寸` : '-'}
             </Text>
-            <Text style={[styles.tableHeader, styles.tableHeaderMedium, styles.marginL, styles.marginT]}>住宅樠造</Text>
+            <Text style={[styles.tableHeader, styles.tableHeaderMedium, styles.marginL, styles.marginT]}>住宅構造</Text>
             <Text style={[styles.tableCell, styles.tableCellFlex2, styles.marginL, styles.marginL, styles.marginT]}>
               {radioEtcData.houseStructure.find((structure) => structure.id.toString() === survey?.detailInfo?.houseStructure)?.label ??
                 (survey?.detailInfo?.houseStructureEtc ? ` ${survey?.detailInfo?.houseStructureEtc}` : '-')}
             </Text>
           </View>
           <View style={styles.tableRow}>
-            <Text style={[styles.tableHeader, styles.tableHeaderMedium, styles.marginT]}>並木材質</Text>
+            <Text style={[styles.tableHeader, styles.tableHeaderMedium, styles.marginT]}>垂木材質</Text>
             <Text style={[styles.tableCell, styles.tableCellFlex1, styles.marginL, styles.marginT]}>
               {radioEtcData.rafterMaterial.find((material) => material.id.toString() === survey?.detailInfo?.rafterMaterial)?.label ??
                 (survey?.detailInfo?.rafterMaterialEtc ? ` ${survey?.detailInfo?.rafterMaterialEtc}` : '-')}
@@ -280,7 +280,7 @@ export default function SurveySalePdf({ survey }: { survey: SurveyBasicInfo }) {
             </Text>
           </View>
           <View style={styles.tableRow}>
-            <Text style={[styles.tableHeader, styles.tableHeaderMedium, styles.marginT]}>兩漏の形跡</Text>
+            <Text style={[styles.tableHeader, styles.tableHeaderMedium, styles.marginT]}>雨漏りの形跡</Text>
             <Text style={[styles.tableCell, styles.tableCellFlex1, styles.marginL, styles.marginT]}>
               {survey?.detailInfo?.leakTrace ? 'あり' : 'なし'}
             </Text>
@@ -313,7 +313,7 @@ export default function SurveySalePdf({ survey }: { survey: SurveyBasicInfo }) {
       <View style={styles.sectionNoPadding}>
         <View style={styles.table}>
           <View style={styles.tableRow}>
-            <Text style={[styles.tableHeader, styles.tableHeaderLarge]}>区根製品名設置可否確認</Text>
+            <Text style={[styles.tableHeader, styles.tableHeaderLarge]}>屋根製品名設置可否</Text>
             <Text style={[styles.tableCell, styles.tableCellFlex1, styles.marginL]}>
               {survey?.detailInfo?.installationAvailability === null && survey.detailInfo?.installationAvailabilityEtc === null
                 ? '-'

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) {
+    setIsEtcSelected(isEtc)
-      updatedData[column] = value
-    }
-
-    setIsEtcSelected(isEtc || isSpecialEtc)
     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(없음) 으로 초기화*/
+    /** 누수 흔적 boolean 타입이므로 number 타입으로 변환 - 값이 없을 경우 2(없음) 으로 초기화*/
-    column === 'leakTrace' ? Number(detailInfoData?.[column as keyof SurveyDetailInfo]) || 2 : detailInfoData?.[column as keyof SurveyDetailInfo]
+    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 [etcValue, setEtcValue] = useState<string | null>(roofInfo?.[`${column}Etc` as keyof SurveyDetailInfo]?.toString() ?? null)
-  const [isOtherCheck, setIsOtherCheck] = useState<boolean>(Boolean(etcValue))
+  useEffect(() => {
+    const newValue = roofInfo?.[`${column}Etc` as keyof SurveyDetailInfo]?.toString() ?? null
+    setEtcValue(newValue)
+  }, [roofInfo, column])
 
   useEffect(() => {
     if (!initialized && !loading) loadOptions()
@@ -530,7 +530,7 @@ const MultiCheck = ({
 
   /** 다중 선택 처리 */
   const handleCheckbox = (item: { id: number; code: string | null; name: string }) => {
-    const isOtherSelected = Boolean(etcValue)
+    const isOtherSelected = etcValue !== null
     let newValue: string[]
 
     if (selectedValues.includes(item.code ?? String(item.id))) {
@@ -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
+      /** 지붕 재료 기타 선택 포함 최대 2개 선택 처리 */
-      if (!isOtherCheck && currentSelected >= 2) {
+      if (!isOtherSelected && 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
+          <input type="checkbox" id={`${column}Etc`} checked={etcValue !== null} disabled={mode === 'READ'} onChange={handleOtherCheckbox} />
-            type="checkbox"
-            id={`${column}Etc`}
-            checked={isOtherCheck || Boolean(etcValue)}
-            disabled={mode === 'READ'}
-            onChange={handleOtherCheckbox}
-          />
           <label htmlFor={`${column}Etc`}>その他 (直接入力)</label>
         </div>
       </div>