qcast3/onsitesurvey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 조사매물 생성/삭제/제출/수정 시 버튼 비활성화

Browse Source
This commit is contained in:
Dayoung 2025-07-04 16:12:00 +09:00
parent 2db1357558
commit 80b6e3644c
1 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/survey-sale/detail/ButtonForm.tsx
View File

@ -48,10 +48,12 @@ export default function ButtonForm({ mode, setMode, data }: ButtonFormProps) {
const isSubmit = data.basic.submissionStatus const isSubmit = data.basic.submissionStatus
const { deleteSurvey, updateSurvey, isDeletingSurvey, isUpdatingSurvey } = useSurvey(id) const { deleteSurvey, updateSurvey, isDeletingSurvey, isUpdatingSurvey, isSubmittingSurvey, isLoadingSurveyDetail } = useSurvey(id)
const { validateSurveyDetail, createSurvey, isCreatingSurvey } = useSurvey() const { validateSurveyDetail, createSurvey, isCreatingSurvey } = useSurvey()
const { showErrorAlert, showSuccessAlert, showConfirm } = useAlertMsg() const { showErrorAlert, showSuccessAlert, showConfirm } = useAlertMsg()
const buttonDisabled = isLoadingSurveyDetail || isSubmittingSurvey || isCreatingSurvey || isUpdatingSurvey || isDeletingSurvey
useEffect(() => { useEffect(() => {
if (!session?.isLoggedIn) return if (!session?.isLoggedIn) return
@ -237,9 +239,9 @@ export default function ButtonForm({ mode, setMode, data }: ButtonFormProps) {
<div className="sale-form-btn-wrap"> <div className="sale-form-btn-wrap">
<div className="btn-flex-wrap"> <div className="btn-flex-wrap">
<ListButton /> <ListButton />
{(permissions.isWriter || permissions.isSubmiter || (permissions.isReceiver && isSubmit)) && <EditButton setMode={setMode} />} {(permissions.isWriter || permissions.isSubmiter || (permissions.isReceiver && isSubmit)) && <EditButton setMode={setMode} disabled={buttonDisabled} />}
{(permissions.isWriter || (permissions.isReceiver && isSubmit)) && <DeleteButton handleDelete={handleDelete} />} {(permissions.isWriter || (permissions.isReceiver && isSubmit)) && <DeleteButton handleDelete={handleDelete} disabled={buttonDisabled} />}
{!isSubmit && permissions.isSubmiter && <SubmitButton handleSubmit={handleSubmit} />} {!isSubmit && permissions.isSubmiter && <SubmitButton handleSubmit={handleSubmit} disabled={buttonDisabled} />}
</div> </div>
</div> </div>
)} )}
@ -252,9 +254,9 @@ export default function ButtonForm({ mode, setMode, data }: ButtonFormProps) {
<div className="sale-form-btn-wrap"> <div className="sale-form-btn-wrap">
<div className="btn-flex-wrap"> <div className="btn-flex-wrap">
<ListButton /> <ListButton />
<TempButton handleSave={() => handleSave(true, false)} /> <TempButton handleSave={() => handleSave(true, false)} disabled={buttonDisabled} />
<SaveButton handleSave={() => handleSave(false, false)} /> <SaveButton handleSave={() => handleSave(false, false)} disabled={buttonDisabled} />
{!isSubmit && permissions.isSubmiter && <SubmitButton handleSubmit={handleSubmit} />} {!isSubmit && permissions.isSubmiter && <SubmitButton handleSubmit={handleSubmit} disabled={buttonDisabled} />}
</div> </div>
</div> </div>
)} )}
@ -274,7 +276,7 @@ const ListButton = () => {
) )
} }
const EditButton = ({ setMode }: { setMode: (mode: Mode) => void }) => { const EditButton = ({ setMode, disabled }: { setMode: (mode: Mode) => void; disabled: boolean }) => {
return ( return (
<div className="btn-bx"> <div className="btn-bx">
<button <button
@ -282,6 +284,7 @@ const EditButton = ({ setMode }: { setMode: (mode: Mode) => void }) => {
onClick={() => { onClick={() => {
setMode('EDIT') setMode('EDIT')
}} }}
disabled={disabled}
> >
修正<i className="btn-arr"></i> 修正<i className="btn-arr"></i>
</button> </button>
@ -289,33 +292,33 @@ const EditButton = ({ setMode }: { setMode: (mode: Mode) => void }) => {
) )
} }
const SubmitButton = ({ handleSubmit }: { handleSubmit: () => void }) => ( const SubmitButton = ({ handleSubmit, disabled }: { handleSubmit: () => void; disabled: boolean }) => (
<div className="btn-bx"> <div className="btn-bx">
<button className="btn-frame red icon" onClick={handleSubmit}> <button className="btn-frame red icon" onClick={handleSubmit} disabled={disabled}>
提出<i className="btn-arr"></i> 提出<i className="btn-arr"></i>
</button> </button>
</div> </div>
) )
const DeleteButton = ({ handleDelete }: { handleDelete: () => void }) => ( const DeleteButton = ({ handleDelete, disabled }: { handleDelete: () => void; disabled: boolean }) => (
<div className="btn-bx"> <div className="btn-bx">
<button className="btn-frame n-blue icon" onClick={handleDelete}> <button className="btn-frame n-blue icon" onClick={handleDelete} disabled={disabled}>
削除<i className="btn-arr"></i> 削除<i className="btn-arr"></i>
</button> </button>
</div> </div>
) )
const SaveButton = ({ handleSave }: { handleSave: () => void }) => ( const SaveButton = ({ handleSave, disabled }: { handleSave: () => void; disabled: boolean }) => (
<div className="btn-bx"> <div className="btn-bx">
<button className="btn-frame n-blue icon" onClick={handleSave}> <button className="btn-frame n-blue icon" onClick={handleSave} disabled={disabled}>
保存<i className="btn-arr"></i> 保存<i className="btn-arr"></i>
</button> </button>
</div> </div>
) )
const TempButton = ({ handleSave }: { handleSave: () => void }) => ( const TempButton = ({ handleSave, disabled }: { handleSave: () => void; disabled: boolean }) => (
<div className="btn-bx"> <div className="btn-bx">
<button className="btn-frame n-blue icon" onClick={handleSave}> <button className="btn-frame n-blue icon" onClick={handleSave} disabled={disabled}>
一時保存<i className="btn-arr"></i> 一時保存<i className="btn-arr"></i>
</button> </button>
</div> </div>