3 changed files with 30 additions and 112 deletions
--- a/src/components/survey-sale/detail/RoofForm.tsx
+++ b/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 { useSurveyOptionStore } from '@/store/surveyOptionStore'
 import { radioEtcData, supplementaryFacilities } from '@/types/Survey'
+import { useSurveyOptionStore } from '@/store/surveyOptionStore'

 const makeNumArr = (value: string) => {
  return value
@ -20,11 +20,6 @@ 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') {
@ -140,42 +135,7 @@ export default function RoofForm(props: {
              {/* 건축 연수 */}
              <div className="data-input-form-tit red-f">築年数</div>
              <div className="data-input mb5">
-                <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>
+                <SelectedBox mode={mode} column="constructionYear" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
              </div>
            </div>
            <div className="data-input-form-bx">
@ -291,39 +251,7 @@ export default function RoofForm(props: {
            <div className="data-input-form-bx">
              {/* 지붕 제품명 설치 가능 여부 확인 */}
              <div className="data-input-form-tit">屋根製品名 設置可否確認</div>
-              <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>
+              <SelectedBox mode={mode} column="installationAvailability" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
            </div>
            <div className="data-input-form-bx">
              {/* 메모 */}
@ -369,10 +297,14 @@ 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
@ -395,19 +327,16 @@ const SelectedBox = ({

  /** Input box 비활성화 처리
   * - 읽기 모드 : 비활성화
-   * - 기타 선택 해제 시 비활성화
+   * - 설치 가능 여부 : 기타 입력 창 항상 활성화
+   * - 건축 연수 : 新築 신축 (N) 체크 시 비활성화
   * */
  const isInputDisabled = () => {
    if (mode === 'READ') return true
-    return !isEtcSelected && !etcValue
-  }
-
-  /** placeholder 설정 처리 */
-  const setPlaceholder = (column: string) => {
-    switch (column) {
-      default:
-        return '-'
+    if (column === 'installationAvailability') return false
+    if (column === 'constructionYear') {
+      return detailInfoData.constructionYear === selectBoxOptions.constructionYear[0].code || detailInfoData.constructionYear === null
    }
+    return !isEtcSelected && !etcValue
  }

  return (
@ -425,24 +354,27 @@ const SelectedBox = ({
            {item.name}
          </option>
        ))}
-        <option key="etc" value="etc">
-          その他 (直接入力)
-        </option>
+        {showEtcOption && (
+          <option key="etc" value="etc">
+            その他 (直接入力)
+          </option>
+        )}
        <option key="" value="" hidden>
          選択してください
        </option>
      </select>
-      <div className="data-input">
+      <div className={`data-input ${column === 'constructionYear' ? 'flex' : ''}`}>
        <input
          id={`${column}Etc`}
-          type="text"
-          inputMode="text"
+          type={column === 'constructionYear' ? 'number' : 'text'}
+          inputMode={column === 'constructionYear' ? 'numeric' : 'text'}
          className="input-frame"
-          placeholder={setPlaceholder(column)}
+          placeholder="-"
          value={detailInfoData[`${column}Etc` as keyof SurveyDetailInfo]?.toString() ?? ''}
          onChange={handleEtcInputChange}
          readOnly={isInputDisabled()}
        />
+        {column === 'constructionYear' && <span>年</span>}
      </div>
    </>
  )
@ -521,13 +453,6 @@ const RadioSelected = ({
    return !etcChecked && !etcValue
  }

-  const setPlaceholder = (column: string) => {
-    switch (column) {
-      default:
-        return '-'
-    }
-  }
-
  return (
    <>
      {radioEtcData[column as keyof typeof radioEtcData].map((item) => (
@ -564,7 +489,7 @@ const RadioSelected = ({
            id={`${column}Etc`}
            type="text"
            className="input-frame"
-            placeholder={setPlaceholder(column)}
+            placeholder="-"
            value={detailInfoData[`${column}Etc` as keyof SurveyDetailInfo]?.toString() ?? ''}
            onChange={handleEtcInputChange}
            readOnly={isInputDisabled()}
@ -655,13 +580,6 @@ const MultiCheck = ({
    return mode === 'READ' || etcValue === null
  }

-  const setPlaceholder = (column: string) => {
-    switch (column) {
-      default:
-        return '-'
-    }
-  }
-
  return (
    <>
      <div className="data-check-wrap">
@ -686,7 +604,7 @@ const MultiCheck = ({
        <input
          type="text"
          className="input-frame"
-          placeholder={setPlaceholder(column)}
+          placeholder="-"
          value={roofInfo[`${column}Etc` as keyof SurveyDetailInfo]?.toString() ?? ''}
          onChange={handleOtherInputChange}
          readOnly={isInputDisabled()}
--- a/src/hooks/useSurvey.ts
+++ b/src/hooks/useSurvey.ts
@ -15,7 +15,7 @@ export const requiredFields = [
  },
  {
    field: 'constructionYear',
-    name: '築年数',
+    name: '建築年数',
  },
  {
    field: 'rafterSize',
@ -23,15 +23,15 @@ export const requiredFields = [
  },
  {
    field: 'rafterPitch',
-    name: '垂木ピッチ',
+    name: '垂木傾斜',
  },
  {
    field: 'waterproofMaterial',
-    name: 'ルーフィングの種類',
+    name: '防水材',
  },
  {
    field: 'insulationPresence',
-    name: '断熱材の有無',
+    name: '断熱材有無',
  },
  {
    field: 'structureOrder',
--- a/src/types/Survey.ts
+++ b/src/types/Survey.ts
@ -552,7 +552,7 @@ export const radioEtcData: Record<RadioEtcKeys, { id: number; code: string | nul
      /** 아스팔트 지붕 940(22kg 이상) */
      id: 1,
      code: null,
-      label: 'アスファルトルーフィング940（22kg以上）',
+      label: 'アスファルト屋根940（22kg以上）',
    },
  ],
  insulationPresence: [