feat: add disabled state to Button component and update usage in SignIn/SignUp modals

Author: cjeongmin

apps/client/src/components/Button.tsx

@@ -2,11 +2,15 @@ import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react';
 
 type ButtonProps = PropsWithChildren<HTMLAttributes<HTMLButtonElement>>;
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  const { children, className, onClick } = props;
+const Button = forwardRef<
+  HTMLButtonElement,
+  ButtonProps & { disabled?: boolean }
+>((props, ref) => {
+  const { children, className, disabled, onClick } = props;
 
   return (
     <button
+      disabled={disabled}
       ref={ref}
       className={`flex items-center justify-center rounded-md px-3 py-2 ${className}`}
       type='button'

apps/client/src/components/modal/SignInModal.tsx

@@ -62,6 +62,7 @@ function SignInModal() {
             </div>
           </Button>
           <Button
+            disabled={!isLoginEnabled}
             className={`transition-colors duration-200 ${isLoginEnabled ? 'bg-indigo-600' : 'cursor-not-allowed bg-indigo-300'}`}
             onClick={login}
           >

apps/client/src/components/modal/SignUpModal.tsx

@@ -92,6 +92,7 @@ function SignUpModal() {
             </div>
           </Button>
           <Button
+            disabled={!isSignUpButtonEnabled}
             className={`transition-colors duration-200 ${isSignUpButtonEnabled ? 'bg-indigo-600' : 'cursor-not-allowed bg-indigo-300'}`}
             onClick={handleSignUp}
           >