Merge pull request #301 from prgrms-web-devcourse-final-project/refactor/300-button

[refactor] 버튼 컴포넌트 리펙토링

Author: kangsuyeong

package-lock.json

@@ -18,6 +18,8 @@
     "@types/node": "^22.13.4",
     "@types/youtube": "^0.1.0",
     "axios": "^1.7.9",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "event-source-polyfill": "^1.0.31",
     "framer-motion": "^12.4.7",

package.json

@@ -4,9 +4,9 @@ import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 type ButtonHandler = {
-  buttonEnabled: boolean;
-  buttonText: string;
-  isPending: boolean;
+  disable: boolean;
+  text: string;
+  isLoading: boolean;
   onClick: () => void;
 };
 

src/components/InputAuthCode.tsx

@@ -1,28 +1,35 @@
-import { twMerge } from 'tailwind-merge';
 import { forwardRef } from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '@/utils';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'disabled';
 }
 
-const buttonStyle = {
-  primary: 'bg-primary-normal hover:bg-primary-hover',
-  secondary: 'bg-white border border-primary-active text-primary-active hover:bg-gray-5',
-  disabled: 'bg-gray-30 cursor-not-allowed',
-};
+export const buttonVariants = cva(
+  'flex justify-center items-center w-full rounded-lg h-[38px] text-white transition body-m cursor-pointer',
+  {
+    variants: {
+      variant: {
+        primary: 'bg-primary-normal hover:bg-primary-hover',
+        secondary: 'bg-white border border-primary-active text-primary-active hover:bg-gray-5',
+        disabled: 'bg-gray-30 cursor-not-allowed',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+    },
+  },
+);
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, variant = 'primary', type = 'button', className, disabled, ...props }, ref) => {
+  ({ children, variant = 'primary', type = 'button', disabled, className, ...props }, ref) => {
     return (
       <button
         ref={ref}
         type={type}
-        className={twMerge(
-          'flex justify-center items-center w-full rounded-lg h-[38px] text-white transition body-m cursor-pointer',
-          buttonStyle[variant],
-          className,
-        )}
-        disabled={variant === 'disabled'}
+        disabled={variant === 'disabled' || disabled}
+        className={cn(buttonVariants({ variant }), className)}
         {...props}
       >
         {children}
@@ -31,9 +38,6 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   },
 );
 
-export default Button;
+Button.displayName = 'Button';
 
-// 사용 예시
-// <Button variant="secondary" className="w-40 py-3 text-lg">
-//   Secondary 버튼
-// </Button>
+export default Button;

src/components/button/Button.tsx

@@ -1,31 +1,28 @@
 import Button from '@/components/button/Button';
 import SpinLoading from '@/components/loading/SpinLoading';
-import useDelayedLoading from '@/hooks/useDelayedLoading';
+import useDelayedLoading from '@/hooks/button/useDelayedLoading';
 
 interface LoadingSpinnerButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  isPending: boolean; // pending 되었는지 유무
-  buttonText: string; // 버튼 text
-  buttonEnabled: boolean; // 버튼 활성화 유무
+  isLoading: boolean;
+  text: string;
+  disabled?: boolean;
 }
 
 // 로딩 스피너 있는 버튼
 const LoadingSpinnerButton = ({
-  isPending,
-  buttonText,
-  buttonEnabled,
-  onClick,
+  isLoading,
+  text,
+  disabled,
+  className,
   ...props
 }: LoadingSpinnerButtonProps) => {
-  const showLoading = useDelayedLoading({ isPending });
+  const showLoading = useDelayedLoading({ isLoading });
+
+  const variant = disabled ? 'disabled' : 'primary';
 
   return (
-    <Button
-      variant={buttonEnabled ? 'primary' : 'disabled'}
-      disabled={isPending}
-      onClick={onClick}
-      {...props}
-    >
-      {showLoading ? <SpinLoading /> : buttonText}
+    <Button variant={variant} disabled={isLoading || disabled} className={className} {...props}>
+      {showLoading ? <SpinLoading /> : text}
     </Button>
   );
 };

src/components/button/LoadingSpinnerButton.tsx

@@ -1,23 +1,23 @@
 import { useEffect, useState } from 'react';
 
 interface UseDelayedLoadingProps {
-  isPending: boolean;
+  isLoading: boolean;
   delay?: number; // 기본값: 100ms
 }
 
 //로딩 상태가 pending일 때 delay 후 로딩 UI를 표시합니다.
-const useDelayedLoading = ({ isPending, delay = 100 }: UseDelayedLoadingProps) => {
+const useDelayedLoading = ({ isLoading, delay = 100 }: UseDelayedLoadingProps) => {
   const [showLoading, setShowLoading] = useState(false);
 
   useEffect(() => {
     let loadingTimeout: NodeJS.Timeout;
-    if (isPending) {
+    if (isLoading) {
       loadingTimeout = setTimeout(() => setShowLoading(true), delay);
     } else {
       setShowLoading(false);
     }
     return () => clearTimeout(loadingTimeout);
-  }, [isPending, delay]);
+  }, [isLoading, delay]);
 
   return showLoading;
 };

src/hooks/useDelayedLoading.ts renamed to src/hooks/button/useDelayedLoading.ts

@@ -96,9 +96,9 @@ function AuthCodeInput({ email, authcodeValidity, setValidity }: AuthCodeInputPr
   };
 
   const buttonHandler = {
-    buttonEnabled: validationMessage.success && !authcodeValidity,
-    buttonText: '인증확인',
-    isPending: isPending,
+    disable: validationMessage.success && !authcodeValidity,
+    text: '인증확인',
+    isLoading: isPending,
     onClick: verifyEmail,
   };
 

src/pages/signup/components/AuthCodeInput.tsx

@@ -107,10 +107,10 @@ function EmailInput({
       disabled={authcodeValidity} // input disabled
       actionButton={
         <LoadingSpinnerButton
-          isPending={isCheckingEmail && isRequestingEmailVerification}
+          isLoading={isCheckingEmail && isRequestingEmailVerification}
           className="w-[65px]"
-          buttonText="인증요청"
-          buttonEnabled={validationStatus.isValid && !emailValidity}
+          text="인증요청"
+          disabled={!validationStatus.isValid || emailValidity}
           onClick={() => checkEmailAvailability()}
         />
       }

src/pages/signup/components/EmailInput.tsx

@@ -66,10 +66,10 @@ const IdInput = ({ changeFormID, setValidity }: IdInputProps) => {
       isValid={validationStatus.isValid}
       actionButton={
         <LoadingSpinnerButton
-          isPending={isPending}
+          isLoading={isPending}
           className="w-[65px]"
-          buttonText="중복확인"
-          buttonEnabled={validationStatus.isValid}
+          text="중복확인"
+          disabled={!validationStatus.isValid}
           onClick={() => mutate()}
         />
       }

src/pages/signup/components/IdInput.tsx

@@ -76,10 +76,10 @@ function NicknameInput({ initialText = '', changeFormNickname, setValidity }: Ni
       isValid={validationStatus.isValid}
       actionButton={
         <LoadingSpinnerButton
-          isPending={isPending}
+          isLoading={isPending}
           className="w-[65px]"
-          buttonText="중복확인"
-          buttonEnabled={validationStatus.isValid}
+          text="중복확인"
+          disabled={!validationStatus.isValid}
           onClick={() => mutate()}
         />
       }