[#556] 버튼 컴포넌트 disabled style 작성 (#615)

* feat: Button disabled style 추가

* feat: 모임 생성 퍼널 버튼에 form이 유효하지 않으면 disabled 적용

Author: gxxrxn

src/stories/base/Button.stories.tsx

@@ -59,6 +59,22 @@ export const Kakao: Story = {
   render: args => <Button {...args}>버튼</Button>,
 };
 
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: args => (
+    <div className="flex gap-[0.5rem]">
+      <Button {...args} fill={true}>
+        버튼
+      </Button>
+      <Button {...args} fill={false}>
+        버튼
+      </Button>
+    </div>
+  ),
+};
+
 export const RecentSearch: Story = {
   args: {
     ...MainLight.args,

src/v1/base/Button.tsx

@@ -33,7 +33,20 @@ const getSizeClasses = (size: Size) => {
   }
 };
 
-const getSchemeClasses = (theme: ColorScheme, isFill: boolean) => {
+const getSchemeClasses = (
+  theme: ColorScheme,
+  isFill: boolean,
+  disabled?: boolean
+) => {
+  if (disabled) {
+    return (
+      'cursor-default ' +
+      (isFill
+        ? 'border-transparent bg-black-900/[0.12] text-black-900/[0.26]'
+        : 'border-black-900/[0.12] bg-white text-black-900/[0.26]')
+    );
+  }
+
   switch (theme) {
     case 'main': {
       return isFill
@@ -68,21 +81,23 @@ const Button = ({
   fill = true,
   fullRadius = false,
   className,
+  disabled,
   children,
   ...props
 }: ButtonProps) => {
   const computedClasses = useMemo(() => {
     const sizeClass = getSizeClasses(size);
-    const schemeClass = getSchemeClasses(colorScheme, fill);
+    const schemeClass = getSchemeClasses(colorScheme, fill, disabled);
     const roundedClass = fullRadius ? 'rounded-full' : 'rounded-[5px]';
 
     return [sizeClass, schemeClass, roundedClass].join(' ');
-  }, [size, colorScheme, fill, fullRadius]);
+  }, [size, colorScheme, fill, fullRadius, disabled]);
 
   return (
     <button
       type="button"
-      className={`${BASE_BUTTON_CLASSES} ${computedClasses} ` + className}
+      className={`${BASE_BUTTON_CLASSES} ${computedClasses} ${className}`}
+      disabled={disabled}
       {...props}
     >
       {children}

src/v1/bookGroup/create/steps/EnterTitleStep/EnterTitleStep.tsx

@@ -9,7 +9,10 @@ import BottomActionButton from '@/v1/base/BottomActionButton';
 import { TitleField } from './fields';
 
 const EnterTitleStep = ({ onNextStep }: MoveFunnelStepProps) => {
-  const { handleSubmit } = useFormContext<EnterTitleStepFormValues>();
+  const {
+    handleSubmit,
+    formState: { isValid },
+  } = useFormContext<EnterTitleStepFormValues>();
 
   useRemoveVerticalScroll();
 
@@ -24,6 +27,7 @@ const EnterTitleStep = ({ onNextStep }: MoveFunnelStepProps) => {
 
       <BottomActionButton
         type="submit"
+        disabled={!isValid}
         onClick={handleSubmit(() => onNextStep?.())}
       >
         다음

src/v1/bookGroup/create/steps/SelectJoinTypeStep/SelectJoinTypeStep.tsx

@@ -10,7 +10,10 @@ export type JoinTypeStepFieldName = keyof SelectJoinTypeStepFormValues;
 export type JoinTypeStepFieldProp = { name: JoinTypeStepFieldName };
 
 const SelectJoinTypeStep = ({ onSubmit }: MoveFunnelStepProps) => {
-  const { handleSubmit } = useFormContext<SelectJoinTypeStepFormValues>();
+  const {
+    handleSubmit,
+    formState: { isValid },
+  } = useFormContext<SelectJoinTypeStepFormValues>();
 
   return (
     <article>
@@ -31,6 +34,7 @@ const SelectJoinTypeStep = ({ onSubmit }: MoveFunnelStepProps) => {
 
       <BottomActionButton
         type="submit"
+        disabled={!isValid}
         onClick={onSubmit && handleSubmit(onSubmit)}
       >
         독서모임 만들기

src/v1/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx

@@ -30,8 +30,11 @@ const SetUpDetailStep = ({
   goToSelectBookStep,
   onNextStep,
 }: SetUpDetailStepProps) => {
-  const { handleSubmit, getValues } =
-    useFormContext<SetUpDetailStepFormValues>();
+  const {
+    handleSubmit,
+    getValues,
+    formState: { isValid },
+  } = useFormContext<SetUpDetailStepFormValues>();
 
   return (
     <article className="flex flex-col gap-[2.5rem] overflow-y-scroll pb-[7rem]">
@@ -55,6 +58,7 @@ const SetUpDetailStep = ({
 
       <BottomActionButton
         type="submit"
+        disabled={!isValid}
         onClick={handleSubmit(() => onNextStep?.())}
       >
         다음