Merge pull request #236 from dnd-side-project/feat/235

[FEAT] 버튼, 모달 애니메이션 추가

Author: DongjaJ

packages/ui/src/components/Button/Button.tsx

@@ -21,33 +21,36 @@ export type ButtonProps = {
   variant?: ButtonVariant;
 } & ComponentProps<'button'>;
 
-const buttonVariantMap = cva('relative flex justify-center items-center rounded-lg gap-1', {
-  variants: {
-    size: {
-      sm: 'w-[101px] h-[38px]',
-      md: 'w-[132px] h-11',
-      lg: 'w-[343px] h-[52px]',
+const buttonVariantMap = cva(
+  'relative flex justify-center items-center rounded-lg gap-1 active:scale-[0.97] transition-transform',
+  {
+    variants: {
+      size: {
+        sm: 'w-[101px] h-[38px]',
+        md: 'w-[132px] h-11',
+        lg: 'w-[343px] h-[52px]',
+      },
+      variant: {
+        primary50:
+          'bg-primary-50 text-primary-600 hover:bg-primary-100 disabled:bg-gray-400 disabled:text-gray-500',
+        black: 'bg-gray-800 text-white hover:bg-black disabled:bg-gray-600 disabled:text-gray-400',
+        gray100:
+          'bg-gray-100 text-gray-600 hover:bg-gray-200 disabled:bg-gray-400 disabled:text-gray-500',
+        primary500:
+          'bg-primary-500 text-primary-50 hover:bg-primary-700 disabled:bg-gray-600 disabled:text-gray-400',
+        gray200:
+          'bg-gray-200 text-gray-600 hover:bg-gray-700 disabled:bg-gray-400 disabled:text-gray-500',
+      },
     },
-    variant: {
-      primary50:
-        'bg-primary-50 text-primary-600 hover:bg-primary-100 disabled:bg-gray-400 disabled:text-gray-500',
-      black: 'bg-gray-800 text-white hover:bg-black disabled:bg-gray-600 disabled:text-gray-400',
-      gray100:
-        'bg-gray-100 text-gray-600 hover:bg-gray-200 disabled:bg-gray-400 disabled:text-gray-500',
-      primary500:
-        'bg-primary-500 text-primary-50 hover:bg-primary-700 disabled:bg-gray-600 disabled:text-gray-400',
-      gray200:
-        'bg-gray-200 text-gray-600 hover:bg-gray-700 disabled:bg-gray-400 disabled:text-gray-500',
-    },
-  },
-  compoundVariants: [
-    {
-      variant: ['primary50', 'primary500'],
-      size: 'lg',
-      className: 'text-white',
-    },
-  ],
-});
+    compoundVariants: [
+      {
+        variant: ['primary50', 'primary500'],
+        size: 'lg',
+        className: 'text-white',
+      },
+    ],
+  }
+);
 
 const buttonTextVariantMap = {
   sm: {

packages/ui/src/components/IconButton/IconButton.tsx

@@ -10,7 +10,13 @@ export const IconButton = ({
   ...restProps
 }: PropsWithChildren<IconButtonProps>) => {
   return (
-    <button className={cn('flex items-center justify-center', className)} {...restProps}>
+    <button
+      className={cn(
+        'flex items-center justify-center transition-transform active:scale-[0.97]',
+        className
+      )}
+      {...restProps}
+    >
       {children}
     </button>
   );

packages/ui/src/components/Modal/Modal.tsx

@@ -3,7 +3,7 @@ import { ComponentProps } from 'react';
 import { motion } from 'motion/react';
 
 import { cn } from '../../lib/core';
-import { FADE_IN_ANIMATION } from '../../lib/motions';
+import { FADE_IN_ANIMATION, SCALE_IN_ANIMATION } from '../../lib/motions';
 import { Portal } from '../Portal';
 
 import { Content } from './ModalContent';
@@ -66,9 +66,11 @@ export function Modal({
           className
         )}
       >
-        <Content graphic={graphic} contentClassName={contentClassName}>
-          {children}
-        </Content>
+        <motion.div variants={SCALE_IN_ANIMATION}>
+          <Content graphic={graphic} contentClassName={contentClassName}>
+            {children}
+          </Content>
+        </motion.div>
       </motion.div>
     </Portal>
   );

packages/ui/src/lib/motions.ts

@@ -10,3 +10,13 @@ export const SLIDE_IN_ANIMATION = {
   exit: { translateX: '100%' },
   transition: { type: 'tween', damping: 50 },
 };
+
+export const SCALE_IN_ANIMATION = {
+  initial: { scale: 0.95, opacity: 0 },
+  animate: { scale: 1, opacity: 1 },
+  exit: { scale: 0.95, opacity: 0 },
+  transition: {
+    duration: 0.2,
+    ease: [0.39, 0.57, 0.56, 1],
+  },
+};