feat: Snackbar 제거 및 TransitionMotion 컴포넌트 추가 (#106)

package.json

@@ -16,7 +16,10 @@
     "url": "https://github.com/Lubycon/lubycon-ui-kit.git"
   },
   "keywords": [
-    "lubycon"
+    "lubycon",
+    "ui",
+    "ui kit",
+    "design system"
   ],
   "author": "Lubycon",
   "dependencies": {

src/components/LubyconUIKitProvider/index.tsx

@@ -1,6 +1,5 @@
 import React, { ReactNode } from 'react';
 import { PortalProvider } from 'contexts/Portal';
-import { SnackbarProvider } from 'contexts/Snackbar';
 import { OverlayProvider } from 'contexts/Overlay';
 
 interface Props {
@@ -10,9 +9,7 @@ interface Props {
 function LubyconUIKitProvider({ children }: Props) {
   return (
     <PortalProvider>
-      <OverlayProvider>
-        <SnackbarProvider>{children}</SnackbarProvider>
-      </OverlayProvider>
+      <OverlayProvider>{children}</OverlayProvider>
     </PortalProvider>
   );
 }

src/components/TransitionMotion/index.tsx

@@ -0,0 +1,52 @@
+import React, { CSSProperties, ElementType, PropsWithChildren } from 'react';
+import { TransitionKeyProps, useTransition, animated } from 'react-spring';
+import { OverridableProps } from 'src/types/OverridableProps';
+
+type Props<E extends ElementType = 'div'> = OverridableProps<
+  E,
+  {
+    flag: boolean;
+    keys?: TransitionKeyProps | TransitionKeyProps[] | null;
+    from?: Partial<CSSProperties>;
+    enter?: Partial<CSSProperties> | Partial<CSSProperties>[];
+    leave?: Partial<CSSProperties> | Partial<CSSProperties>[];
+    onStart?: () => void;
+    onDestroyed?: () => void;
+  }
+>;
+const TransitionMotion = ({
+  flag,
+  keys = null,
+  from,
+  enter,
+  leave,
+  children,
+  onStart,
+  onDestroyed,
+  as,
+  style,
+  ...rest
+}: PropsWithChildren<Props>) => {
+  const transitions = useTransition(flag, keys, {
+    from,
+    enter,
+    leave,
+    onStart,
+    onDestroyed,
+  });
+  const Component = animated[as ?? 'div'];
+
+  return (
+    <>
+      {transitions.map(({ item, key, props }) => {
+        return item ? (
+          <Component key={key} {...rest} style={{ ...style, ...props }}>
+            {children}
+          </Component>
+        ) : null;
+      })}
+    </>
+  );
+};
+
+export default TransitionMotion;

src/index.ts

@@ -13,15 +13,14 @@ export {
   CardImageContent,
   CardFooter,
 } from './components/Card';
-export { default as Snackbar } from './components/Snackbar';
 export { default as Input } from './components/Input';
 export { default as Accordion } from './components/Accordion';
 export { Portal } from './contexts/Portal';
-export { useSnackbar } from './contexts/Snackbar';
 export { colors } from './constants/colors';
 export { default as Icon } from './components/Icon';
 export { default as Shadow } from './components/Shadow';
 export { default as Spacing } from './components/Spacing';
 export { default as useProgress } from './hooks/useProgress';
 export { default as useResizeObserver } from './hooks/useResizeObserver';
 export { useOverlay } from './contexts/Overlay';
+export { default as TransitionMotion } from './components/TransitionMotion';