refactor(Button): Button 컴포넌트 variant 추가

apps/docs/src/stories/Button.stories.tsx

@@ -4,9 +4,9 @@ import { IconPlus, IconChevronRight } from '@sopt-makers/icons';
 
 interface ButtonOwnProps {
   size?: 'sm' | 'md' | 'lg';
-  theme?: 'white' | 'black' | 'blue' | 'red';
-  rounded?: 'md' | 'lg';
-  variant?: 'fill' | 'outlined';
+  intent?: 'primary' | 'secondary' | 'success' | 'danger';
+  shape?: 'rect' | 'pill';
+  variant?: 'fill' | 'outlined' | 'text' | 'floating';
   disabled?: boolean;
   LeftIcon?: React.ComponentType;
   RightIcon?: React.ComponentType;
@@ -20,8 +20,8 @@ export default {
   tags: ['autodocs'],
   argTypes: {
     size: { control: 'radio', options: ['sm', 'md', 'lg'] },
-    theme: { control: 'radio', options: ['white', 'black', 'blue', 'red'] },
-    rounded: { control: 'radio', options: ['md', 'lg'] },
+    intent: { control: 'radio', options: ['primary', 'secondary', 'success', 'danger'] },
+    shape: { control: 'radio', options: ['rect', 'pill'] },
     variant: { control: 'radio', options: ['fill', 'outlined'] },
     LeftIcon: { control: false },
     RightIcon: { control: false },
@@ -33,8 +33,8 @@ export const Default: StoryObj<ButtonStoryProps> = {
   args: {
     children: 'Default Button',
     size: 'md',
-    theme: 'white',
-    rounded: 'md',
+    intent: 'primary',
+    shape: 'rect',
     disabled: false,
   },
 };
@@ -44,8 +44,8 @@ export const Outlined: StoryObj<ButtonStoryProps> = {
   args: {
     children: 'Outlined Button',
     size: 'md',
-    theme: 'white',
-    rounded: 'md',
+    intent: 'primary',
+    shape: 'rect',
     variant: 'outlined',
     disabled: false,
   },
@@ -56,8 +56,8 @@ export const LeftIcon: StoryObj<ButtonStoryProps> = {
   args: {
     children: 'LeftIcon Button',
     size: 'sm',
-    theme: 'red',
-    rounded: 'lg',
+    intent: 'danger',
+    shape: 'pill',
     disabled: false,
     LeftIcon: IconPlus,
   },
@@ -67,9 +67,29 @@ export const RightIcon: StoryObj<ButtonStoryProps> = {
   args: {
     children: 'RightIcon Button',
     size: 'lg',
-    theme: 'blue',
-    rounded: 'lg',
+    intent: 'success',
+    shape: 'pill',
     disabled: false,
     RightIcon: IconChevronRight,
   },
 };
+
+// text 버튼 스토리
+export const Text: StoryObj<ButtonStoryProps> = {
+  args: {
+    children: 'Text Button',
+    variant: 'text',
+    disabled: false,
+    RightIcon: IconChevronRight,
+  },
+};
+
+// floating 버튼 스토리
+export const Floating: StoryObj<ButtonStoryProps> = {
+  args: {
+    children: '글쓰기',
+    variant: 'floating',
+    disabled: false,
+    LeftIcon: IconPlus,
+  },
+};

packages/ui/Button/Button.tsx

@@ -1,7 +1,9 @@
-import React, { type ButtonHTMLAttributes } from 'react';
+import React, { useEffect, useState, type ButtonHTMLAttributes } from 'react';
 import * as S from './style.css';
 import createButtonVariant from './utils';
 import { iconSizes } from './constants';
+import { ButtonIntent, ButtonShape, ButtonVariant } from './types';
+import { useResolvedProps, useScrollDirection } from './hooks';
 
 interface IconProps {
   color?: string;
@@ -13,33 +15,48 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children?: React.ReactNode;
   className?: string;
   size?: 'sm' | 'md' | 'lg';
-  theme?: 'white' | 'black' | 'blue' | 'red';
-  rounded?: 'md' | 'lg';
-  variant?: 'fill' | 'outlined';
+  theme?: 'white' | 'black' | 'blue' | 'red'; // @deprecated - `intent` prop 사용
+  rounded?: 'md' | 'lg'; // @deprecated - `shape` prop 사용
+  variant?: ButtonVariant;
   LeftIcon?: React.ComponentType<IconProps>;
   RightIcon?: React.ComponentType<IconProps>;
+  shape?: ButtonShape;
+  intent?: ButtonIntent;
 }
 
 function Button({
   children,
   className,
   size = 'md',
-  theme = 'white',
-  rounded = 'md',
+  theme,
+  rounded,
   LeftIcon,
   RightIcon,
   variant = 'fill',
+  shape = 'rect',
+  intent = 'primary',
   ...buttonElementProps
 }: ButtonProps) {
-  const style = createButtonVariant(theme, rounded, size, variant);
+  const { finalIntent, finalShape } = useResolvedProps({ intent, shape, theme, rounded });
+  const isFloating = variant === 'floating';
+  const scrollDirection = isFloating ? useScrollDirection() : null;
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    if (!isFloating) return;
+    setIsExpanded(scrollDirection === 'down');
+  }, [scrollDirection, isFloating]);
+
+  const style = createButtonVariant(finalIntent, finalShape, size, variant, isExpanded);
   const iconSize = iconSizes[size];
   return (
     <button className={`${S.root} ${style} ${className}`} type='button' {...buttonElementProps}>
       {LeftIcon ? <LeftIcon height={iconSize} width={iconSize} /> : null}
-      <span>{children}</span>
+      {(!isFloating || isExpanded) && <span>{children}</span>}
       {RightIcon && !LeftIcon ? <RightIcon height={iconSize} width={iconSize} /> : null}
     </button>
   );
 }
 
+Button.displayName = 'Button';
 export default Button;