feat: 조사매물 placeholder 문구 추가 및 컴포넌트 분리

- selectBox 컴포넌트 기타 선택 항목이 아닌 부분 분리
- installationAvailability 항목 placeholder 문구 추가
- 분리 된 공통 컴포넌트에 placeholder 문구 작성 함수 추가 구현

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

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react'
 import type { Mode, SurveyDetailInfo, SurveyDetailRequest } from '@/types/Survey'
 import { useAlertMsg, WARNING_MESSAGE } from '@/hooks/useAlertMsg'
-import { radioEtcData, supplementaryFacilities } from '@/types/Survey'
 import { useSurveyOptionStore } from '@/store/surveyOptionStore'
+import { radioEtcData, supplementaryFacilities } from '@/types/Survey'
 
 const makeNumArr = (value: string) => {
   return value
@@ -20,6 +20,11 @@ export default function RoofForm(props: {
   const { showErrorAlert } = useAlertMsg()
   const [isFlip, setIsFlip] = useState<boolean>(true)
 
+  const { selectBoxOptions, initialized, loading, loadOptions } = useSurveyOptionStore()
+  useEffect(() => {
+    if (!initialized && !loading) loadOptions()
+  }, [initialized, loading])
+
   const handleNumberInput = (key: keyof SurveyDetailRequest, value: number | string) => {
     /** 지붕 경사도, 노지판 두께 처리 - 최대 5자리, 소수점 1자리 처리 */
     if (key === 'roofSlope' || key === 'openFieldPlateThickness') {
@@ -135,7 +140,42 @@ export default function RoofForm(props: {
               {/* 건축 연수 */}
               <div className="data-input-form-tit red-f">築年数</div>
               <div className="data-input mb5">
-                <SelectedBox mode={mode} column="constructionYear" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
+                <select
+                  className="select-form mb10"
+                  disabled={mode === 'READ'}
+                  name="constructionYear"
+                  id="constructionYear"
+                  value={roofInfo?.constructionYear ?? ''}
+                  onChange={(e) =>
+                    setRoofInfo({
+                      ...roofInfo,
+                      constructionYear: e.target.value,
+                      constructionYearEtc: e.target.value === selectBoxOptions.constructionYear[0].code ? null : roofInfo?.constructionYearEtc,
+                    })
+                  }
+                >
+                  <option value="" hidden>
+                    選択してください
+                  </option>
+                  {selectBoxOptions.constructionYear.map((item) => (
+                    <option key={item.code ?? String(item.id)} value={item.code ?? String(item.id)}>
+                      {item.name}
+                    </option>
+                  ))}
+                </select>
+                <div className="data-input flex">
+                  <input
+                    readOnly={mode === 'READ' || roofInfo?.constructionYear === selectBoxOptions.constructionYear[0].code}
+                    type="number"
+                    inputMode="numeric"
+                    id="constructionYearEtc"
+                    className="input-frame"
+                    placeholder="-"
+                    value={roofInfo?.constructionYearEtc ?? ''}
+                    onChange={(e) => setRoofInfo({ ...roofInfo, constructionYearEtc: e.target.value })}
+                  />
+                  <span>年</span>
+                </div>
               </div>
             </div>
             <div className="data-input-form-bx">
@@ -251,7 +291,39 @@ export default function RoofForm(props: {
             <div className="data-input-form-bx">
               {/* 지붕 제품명 설치 가능 여부 확인 */}
               <div className="data-input-form-tit">屋根製品名 設置可否確認</div>
-              <SelectedBox mode={mode} column="installationAvailability" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
+              <select
+                className="select-form mb10"
+                disabled={mode === 'READ'}
+                name="installationAvailability"
+                id="installationAvailability"
+                value={roofInfo?.installationAvailability ?? ''}
+                onChange={(e) =>
+                  setRoofInfo({
+                    ...roofInfo,
+                    installationAvailability: e.target.value,
+                    installationAvailabilityEtc: null,
+                  })
+                }
+              >
+                <option value="" hidden>
+                  選択してください
+                </option>
+                {selectBoxOptions.installationAvailability.map((item) => (
+                  <option key={item.code ?? String(item.id)} value={item.code ?? String(item.id)}>
+                    {item.name}
+                  </option>
+                ))}
+              </select>
+              <div className="data-input">
+                <input
+                  type="text"
+                  className="input-frame"
+                  value={roofInfo?.installationAvailabilityEtc ?? ''}
+                  onChange={(e) => setRoofInfo({ ...roofInfo, installationAvailabilityEtc: e.target.value })}
+                  placeholder="屋根製品名が分かる場合は入力してください"
+                  readOnly={mode === 'READ'}
+                />
+              </div>
             </div>
             <div className="data-input-form-bx">
               {/* 메모 */}
@@ -297,14 +369,10 @@ const SelectedBox = ({
   const selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
   const etcValue = detailInfoData?.[`${column}Etc` as keyof SurveyDetailInfo]
   const [isEtcSelected, setIsEtcSelected] = useState<boolean>(Boolean(etcValue))
-
   useEffect(() => {
     if (!initialized && !loading) loadOptions()
   }, [initialized, loading])
 
-  const isSpecialCase = column === 'constructionYear' || column === 'installationAvailability'
-  const showEtcOption = !isSpecialCase
-
   /** SelectBox 값 변경 처리 */
   const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const value = e.target.value
@@ -327,18 +395,21 @@ const SelectedBox = ({
 
   /** Input box 비활성화 처리
    * - 읽기 모드 : 비활성화
-   * - 설치 가능 여부 : 기타 입력 창 항상 활성화
+   * - 기타 선택 해제 시 비활성화
-   * - 건축 연수 : 新築 신축 (N) 체크 시 비활성화
    * */
   const isInputDisabled = () => {
     if (mode === 'READ') return true
-    if (column === 'installationAvailability') return false
-    if (column === 'constructionYear') {
-      return detailInfoData.constructionYear === selectBoxOptions.constructionYear[0].code || detailInfoData.constructionYear === null
-    }
     return !isEtcSelected && !etcValue
   }
 
+  /** placeholder 설정 처리 */
+  const setPlaceholder = (column: string) => {
+    switch (column) {
+      default:
+        return '-'
+    }
+  }
+
   return (
     <>
       <select
@@ -354,27 +425,24 @@ const SelectedBox = ({
             {item.name}
           </option>
         ))}
-        {showEtcOption && (
+        <option key="etc" value="etc">
-          <option key="etc" value="etc">
+          その他 (直接入力)
-            その他 (直接入力)
+        </option>
-          </option>
-        )}
         <option key="" value="" hidden>
           選択してください
         </option>
       </select>
-      <div className={`data-input ${column === 'constructionYear' ? 'flex' : ''}`}>
+      <div className="data-input">
         <input
           id={`${column}Etc`}
-          type={column === 'constructionYear' ? 'number' : 'text'}
+          type="text"
-          inputMode={column === 'constructionYear' ? 'numeric' : 'text'}
+          inputMode="text"
           className="input-frame"
-          placeholder="-"
+          placeholder={setPlaceholder(column)}
           value={detailInfoData[`${column}Etc` as keyof SurveyDetailInfo]?.toString() ?? ''}
           onChange={handleEtcInputChange}
           readOnly={isInputDisabled()}
         />
-        {column === 'constructionYear' && <span>年</span>}
       </div>
     </>
   )
@@ -453,6 +521,13 @@ const RadioSelected = ({
     return !etcChecked && !etcValue
   }
 
+  const setPlaceholder = (column: string) => {
+    switch (column) {
+      default:
+        return '-'
+    }
+  }
+
   return (
     <>
       {radioEtcData[column as keyof typeof radioEtcData].map((item) => (
@@ -489,7 +564,7 @@ const RadioSelected = ({
             id={`${column}Etc`}
             type="text"
             className="input-frame"
-            placeholder="-"
+            placeholder={setPlaceholder(column)}
             value={detailInfoData[`${column}Etc` as keyof SurveyDetailInfo]?.toString() ?? ''}
             onChange={handleEtcInputChange}
             readOnly={isInputDisabled()}
@@ -580,6 +655,13 @@ const MultiCheck = ({
     return mode === 'READ' || etcValue === null
   }
 
+  const setPlaceholder = (column: string) => {
+    switch (column) {
+      default:
+        return '-'
+    }
+  }
+
   return (
     <>
       <div className="data-check-wrap">
@@ -604,7 +686,7 @@ const MultiCheck = ({
         <input
           type="text"
           className="input-frame"
-          placeholder="-"
+          placeholder={setPlaceholder(column)}
           value={roofInfo[`${column}Etc` as keyof SurveyDetailInfo]?.toString() ?? ''}
           onChange={handleOtherInputChange}
           readOnly={isInputDisabled()}