refactor: delete disabled control

Myongji-Graduate · Apr 20, 2024 · 74d05c6 · 74d05c6
1 parent 9dd8364
commit 74d05c6
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 17 deletions.
diff --git a/app/ui/lecture/taken-lecture/add-taken-lecture-button.tsx b/app/ui/lecture/taken-lecture/add-taken-lecture-button.tsx
@@ -2,15 +2,18 @@ import { LectureInfo } from '@/app/type/lecture';
 import Form from '../../view/molecule/form';
 import { addTakenLecture } from '@/app/business/lecture/taken-lecture.command';
 import { useToast } from '../../view/molecule/toast/use-toast';
+import { useState } from 'react';
 
 interface AddTakenLectureButtonProps {
   lectureItem: LectureInfo;
   isTakenLecture: boolean;
 }
 export default function AddTakenLectureButton({ lectureItem, isTakenLecture }: AddTakenLectureButtonProps) {
   const { toast } = useToast();
+  const [disabled, setDisabled] = useState(isTakenLecture);
 
-  const announceSuccessOfAddTakenLecture = () => {
+  const handleSuccessOfAdditionTakenLecture = () => {
+    setDisabled(true);
     return toast({
       title: '과목 추가에 성공했습니다',
     });
@@ -23,13 +26,13 @@ export default function AddTakenLectureButton({ lectureItem, isTakenLecture }: A
         return addTakenLecture(lectureItem.id);
       }}
       failMessageControl="toast"
-      onSuccess={announceSuccessOfAddTakenLecture}
+      onSuccess={handleSuccessOfAdditionTakenLecture}
     >
       <Form.SubmitButton
         label="추가"
         position="center"
         variant="list"
-        disabledInfo={{ value: isTakenLecture, control: true }}
+        disabled={disabled}
         size="default"
         data-testid="add-taken-lecture-button"
       />

diff --git a/app/ui/view/molecule/form/form-root.tsx b/app/ui/view/molecule/form/form-root.tsx
@@ -59,7 +59,7 @@ export function FormRoot({
   };
 
   return (
-    <FormContext.Provider value={{ errors: formState.validationError, formId: id, isSuccess: formState.isSuccess }}>
+    <FormContext.Provider value={{ errors: formState.validationError, formId: id }}>
       {formState.isFailure && failMessageControl === 'alert' ? (
         <div className="mb-4">
           <AlertDestructive description={formState.message!} />

diff --git a/app/ui/view/molecule/form/form-submit-button.tsx b/app/ui/view/molecule/form/form-submit-button.tsx
@@ -9,26 +9,17 @@ interface FormSubmitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEle
   position?: 'left' | 'right' | 'center';
   variant?: 'primary' | 'secondary' | 'list';
   size?: ButtonSize;
-  disabledInfo?: {
-    value: boolean;
-    control: boolean;
-  };
 }
 
 export function FormSubmitButton({
   label,
   position = 'right',
   variant = 'primary',
   size = 'md',
-  disabledInfo = {
-    value: false, // disabled의 값
-    control: false, // disabled 를 control 하는지 (현재 form에서는 과목 추가에서만 disabled를 control)
-  },
   ...props
 }: FormSubmitButtonProps) {
-  const { formId, isSuccess } = useContext(FormContext);
+  const { formId } = useContext(FormContext);
   const { pending } = useFormStatus();
-  const disabledValue = disabledInfo.value ? true : disabledInfo.control && isSuccess ? true : false;
 
   return (
     <div
@@ -46,7 +37,6 @@ export function FormSubmitButton({
         variant={variant}
         type="submit"
         label={label}
-        disabled={disabledValue}
         {...props}
       />
     </div>

diff --git a/app/ui/view/molecule/form/form.context.ts b/app/ui/view/molecule/form/form.context.ts
@@ -3,11 +3,9 @@ import { createContext } from 'react';
 interface FormContext {
   formId: string;
   errors: Record<string, string[] | undefined>;
-  isSuccess: boolean;
 }
 
 export const FormContext = createContext<FormContext>({
   formId: '',
   errors: {},
-  isSuccess: false,
 });