From 206e435610255d65f89929634ab1dfd665904dfa Mon Sep 17 00:00:00 2001
From: keyy1315 <lovelina1315@gmail.com>
Date: Tue, 5 Aug 2025 18:21:07 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A1=B0=EC=82=AC=EB=A7=A4=EB=AC=BC=20?=
 =?UTF-8?q?=EC=A7=80=EB=B6=95=EC=A0=95=EB=B3=B4=20=EC=88=98=EC=A0=95/?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EC=8B=9C=20=EC=BD=94=EB=93=9C=EA=B0=92=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=EB=90=98=EB=8F=84=EB=A1=9D=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 공통코드 동기화 이후 코드 값이 존재하면 수정/생성 시 해당 코드 값이 입력되도록 구현
---
 .../survey-sale/detail/RoofForm.tsx           | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/survey-sale/detail/RoofForm.tsx b/src/components/survey-sale/detail/RoofForm.tsx
index 1d2b544..553acf2 100644
--- a/src/components/survey-sale/detail/RoofForm.tsx
+++ b/src/components/survey-sale/detail/RoofForm.tsx
@@ -206,7 +206,7 @@ export default function RoofForm(props: {
                 <SelectedBox mode={mode} column="openFieldPlateKind" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
               </div>
             </div>
-            {roofInfo.openFieldPlateKind === '4' && (
+            {roofInfo.openFieldPlateKind === 'S' && (
               <div className="data-input-form-bx">
                 {/* 노지판 두께 */}
                 <div className="data-input-form-tit">
@@ -309,7 +309,7 @@ const SelectedBox = ({
   const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const value = e.target.value
     const isEtc = value === 'etc'
-    const isSpecialEtc = isSpecialCase && value === '2'
+    const isSpecialEtc = isSpecialCase && value === 'O'
 
     const updatedData = {
       ...detailInfoData,
@@ -339,7 +339,7 @@ const SelectedBox = ({
     if (mode === 'READ') return true
     if (column === 'installationAvailability') return false
     if (column === 'constructionYear') {
-      return detailInfoData.constructionYear === '1' || detailInfoData.constructionYear === null
+      return detailInfoData.constructionYear === 'N' || detailInfoData.constructionYear === null
     }
     return !isEtcSelected && !etcValue
   }
@@ -351,11 +351,11 @@ const SelectedBox = ({
         name={column}
         id={column}
         disabled={mode === 'READ'}
-        value={selectedId ? Number(selectedId) : etcValue || isEtcSelected ? 'etc' : ''}
+        value={selectedId ? String(selectedId) : etcValue || isEtcSelected ? 'etc' : ''}
         onChange={handleSelectChange}
       >
         {selectBoxOptions[column as keyof typeof selectBoxOptions].map((item) => (
-          <option key={item.id} value={item.id}>
+          <option key={item.code ?? String(item.id)} value={item.code ?? String(item.id)}>
             {item.name}
           </option>
         ))}
@@ -458,17 +458,17 @@ const RadioSelected = ({
   return (
     <>
       {radioEtcData[column as keyof typeof radioEtcData].map((item) => (
-        <div className="radio-form-box mb10" key={item.id}>
+        <div className="radio-form-box mb10" key={item.code ?? String(item.id)}>
           <input
             type="radio"
             name={column}
-            id={`${column}_${item.id}`}
+            id={`${column}_${item.code ?? item.id}`}
             disabled={mode === 'READ'}
-            checked={Number(selectedId) === item.id}
+            checked={Number(selectedId) === (item.code ?? item.id)}
             onChange={handleRadioChange}
-            value={item.id}
+            value={item.code ?? item.id}
           />
-          <label htmlFor={`${column}_${item.id}`}>{item.label}</label>
+          <label htmlFor={`${column}_${item.code ?? item.id}`}>{item.label}</label>
         </div>
       ))}
       {showEtcOption && (
@@ -528,12 +528,12 @@ const MultiCheck = ({
   const selectedValues = makeNumArr(String(roofInfo[column as keyof SurveyDetailInfo] ?? ''))
 
   /** 다중 선택 처리 */
-  const handleCheckbox = (id: number) => {
+  const handleCheckbox = (item: { id: number; code: string | null; name: string }) => {
     const isOtherSelected = Boolean(etcValue)
     let newValue: string[]
 
-    if (selectedValues.includes(String(id))) {
-      newValue = selectedValues.filter((v) => v !== String(id))
+    if (selectedValues.includes(item.code ?? String(item.id))) {
+      newValue = selectedValues.filter((v) => v !== item.code && v !== String(item.id))
     } else {
       /** 지붕 재료 처리 - 최대 2개 선택 처리 */
       if (isRoofMaterial) {
@@ -543,7 +543,7 @@ const MultiCheck = ({
           return
         }
       }
-      newValue = [...selectedValues, String(id)]
+      newValue = [...selectedValues, item.code ?? String(item.id)]
     }
     setRoofInfo({ ...roofInfo, [column]: newValue.join(',') })
   }
@@ -586,9 +586,9 @@ const MultiCheck = ({
             <input
               type="checkbox"
               id={`${column}_${item.id}`}
-              checked={selectedValues.includes(String(item.id))}
+              checked={selectedValues.includes(item.code ?? String(item.id))}
               disabled={mode === 'READ'}
-              onChange={() => handleCheckbox(item.id)}
+              onChange={() => handleCheckbox(item)}
             />
             <label htmlFor={`${column}_${item.id}`}>{item.name}</label>
           </div>