From 80b6e3644cde55befc137c6b5cd62ac3a7b4d53c Mon Sep 17 00:00:00 2001
From: keyy1315 <lovelina1315@gmail.com>
Date: Fri, 4 Jul 2025 16:12:00 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=A1=B0=EC=82=AC=EB=A7=A4?=
 =?UTF-8?q?=EB=AC=BC=20=EC=83=9D=EC=84=B1/=EC=82=AD=EC=A0=9C/=EC=A0=9C?=
 =?UTF-8?q?=EC=B6=9C/=EC=88=98=EC=A0=95=20=EC=8B=9C=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=EB=B9=84=ED=99=9C=EC=84=B1=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../survey-sale/detail/ButtonForm.tsx         | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/survey-sale/detail/ButtonForm.tsx b/src/components/survey-sale/detail/ButtonForm.tsx
index b52e071..d7063da 100644
--- a/src/components/survey-sale/detail/ButtonForm.tsx
+++ b/src/components/survey-sale/detail/ButtonForm.tsx
@@ -48,10 +48,12 @@ export default function ButtonForm({ mode, setMode, data }: ButtonFormProps) {
 
   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 { showErrorAlert, showSuccessAlert, showConfirm } = useAlertMsg()
 
+  const buttonDisabled = isLoadingSurveyDetail || isSubmittingSurvey || isCreatingSurvey || isUpdatingSurvey || isDeletingSurvey
+
   useEffect(() => {
     if (!session?.isLoggedIn) return
 
@@ -237,9 +239,9 @@ export default function ButtonForm({ mode, setMode, data }: ButtonFormProps) {
         <div className="sale-form-btn-wrap">
           <div className="btn-flex-wrap">
             <ListButton />
-            {(permissions.isWriter || permissions.isSubmiter || (permissions.isReceiver && isSubmit)) && <EditButton setMode={setMode} />}
-            {(permissions.isWriter || (permissions.isReceiver && isSubmit)) && <DeleteButton handleDelete={handleDelete} />}
-            {!isSubmit && permissions.isSubmiter && <SubmitButton handleSubmit={handleSubmit} />}
+            {(permissions.isWriter || permissions.isSubmiter || (permissions.isReceiver && isSubmit)) && <EditButton setMode={setMode} disabled={buttonDisabled} />}
+            {(permissions.isWriter || (permissions.isReceiver && isSubmit)) && <DeleteButton handleDelete={handleDelete} disabled={buttonDisabled} />}
+            {!isSubmit && permissions.isSubmiter && <SubmitButton handleSubmit={handleSubmit} disabled={buttonDisabled} />}
           </div>
         </div>
       )}
@@ -252,9 +254,9 @@ export default function ButtonForm({ mode, setMode, data }: ButtonFormProps) {
         <div className="sale-form-btn-wrap">
           <div className="btn-flex-wrap">
             <ListButton />
-            <TempButton handleSave={() => handleSave(true, false)} />
-            <SaveButton handleSave={() => handleSave(false, false)} />
-            {!isSubmit && permissions.isSubmiter && <SubmitButton handleSubmit={handleSubmit} />}
+            <TempButton handleSave={() => handleSave(true, false)} disabled={buttonDisabled} />
+            <SaveButton handleSave={() => handleSave(false, false)} disabled={buttonDisabled} />
+            {!isSubmit && permissions.isSubmiter && <SubmitButton handleSubmit={handleSubmit} disabled={buttonDisabled} />}
           </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 (
     <div className="btn-bx">
       <button
@@ -282,6 +284,7 @@ const EditButton = ({ setMode }: { setMode: (mode: Mode) => void }) => {
         onClick={() => {
           setMode('EDIT')
         }}
+        disabled={disabled}
       >
         修正<i className="btn-arr"></i>
       </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">
-    <button className="btn-frame red icon" onClick={handleSubmit}>
+    <button className="btn-frame red icon" onClick={handleSubmit} disabled={disabled}>
       提出<i className="btn-arr"></i>
     </button>
   </div>
 )
 
-const DeleteButton = ({ handleDelete }: { handleDelete: () => void }) => (
+const DeleteButton = ({ handleDelete, disabled }: { handleDelete: () => void; disabled: boolean }) => (
   <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>
     </button>
   </div>
 )
 
-const SaveButton = ({ handleSave }: { handleSave: () => void }) => (
+const SaveButton = ({ handleSave, disabled }: { handleSave: () => void; disabled: boolean }) => (
   <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>
     </button>
   </div>
 )
 
-const TempButton = ({ handleSave }: { handleSave: () => void }) => (
+const TempButton = ({ handleSave, disabled }: { handleSave: () => void; disabled: boolean }) => (
   <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>
     </button>
   </div>