[FE] FEAT: api 응답 수신전까지 토글 클릭 방지 #1680

innovationacademy-kr · Nov 4, 2024 · 38d6dda · 38d6dda
1 parent 37aa76c
commit 38d6dda
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/config b/config
diff --git a/frontend/src/Cabinet/components/Card/AlarmCard/AlarmCard.container.tsx b/frontend/src/Cabinet/components/Card/AlarmCard/AlarmCard.container.tsx
@@ -120,6 +120,7 @@ const AlarmCardContainer = ({ alarm }: { alarm: AlarmInfo | null }) => {
               ]
         }
         onToggleChange={handleToggleChange}
+        isLoading={isLoading}
       />
       <ModalPortal>
         {showResponseModal &&

diff --git a/frontend/src/Cabinet/components/Card/AlarmCard/AlarmCard.tsx b/frontend/src/Cabinet/components/Card/AlarmCard/AlarmCard.tsx
@@ -11,9 +11,15 @@ interface AlarmCardProps {
   alarm: AlarmInfo;
   buttons: IButtonProps[];
   onToggleChange: (type: keyof AlarmInfo, checked: boolean) => void;
+  isLoading: boolean;
 }
 
-const AlarmCard = ({ alarm, buttons, onToggleChange }: AlarmCardProps) => {
+const AlarmCard = ({
+  alarm,
+  buttons,
+  onToggleChange,
+  isLoading,
+}: AlarmCardProps) => {
   const handleToggle = (type: keyof AlarmInfo) => (checked: boolean) => {
     onToggleChange(type, checked);
   };
@@ -25,6 +31,7 @@ const AlarmCard = ({ alarm, buttons, onToggleChange }: AlarmCardProps) => {
         id={`${type}-alarm`}
         checked={alarm[type]}
         onChange={handleToggle(type)}
+        disabled={isLoading}
       />
     </CardContentStyled>
   );