feat: 조사매물 placeholder 문구 추가 및 컴포넌트 분리
- selectBox 컴포넌트 기타 선택 항목이 아닌 부분 분리 - installationAvailability 항목 placeholder 문구 추가 - 분리 된 공통 컴포넌트에 placeholder 문구 작성 함수 추가 구현
This commit is contained in:
parent
091d3332dd
commit
32fc5a696d
@ -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>
|
||||
)}
|
||||
<option key="etc" value="etc">
|
||||
その他 (直接入力)
|
||||
</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'}
|
||||
inputMode={column === 'constructionYear' ? 'numeric' : 'text'}
|
||||
type="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()}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user