[Feat] Toast 컴포넌트 추가

apps/web/package.json

@@ -14,13 +14,14 @@
     "@repo/theme": "workspace:^",
     "@repo/ui": "workspace:^",
     "next": "14.2.21",
+    "overlay-kit": "^1.4.1",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
-    "@repo/typescript-config": "workspace:*",
     "@repo/theme": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
     "@repo/ui": "workspace:*",
     "@types/node": "^20.11.24",
     "@types/react": "18.3.0",

apps/web/src/app/page.tsx

@@ -1,17 +1,49 @@
-import { Icon } from '@repo/ui';
+'use client';
+
+import { Icon, Toast } from '@repo/ui';
 import { tokens } from '@repo/theme';
+import { overlay, OverlayProvider } from 'overlay-kit';
+
 export default function Home() {
+  const notify1 = () =>
+    overlay.open(({ isOpen, close, unmount }) => (
+      <Toast
+        open={isOpen}
+        onClose={close}
+        leftAddon={<Toast.Icon toastType="success" />}
+        onExited={unmount}
+      >
+        생성된 본문이 업데이트 됐어요!
+      </Toast>
+    ));
+
+  const notify2 = () =>
+    overlay.open(({ isOpen, close, unmount }) => (
+      <Toast
+        open={isOpen}
+        onClose={close}
+        leftAddon={<Toast.Icon toastType="error" />}
+        onExited={unmount}
+      >
+        1개 이상의 게시물을 선택해주세요
+      </Toast>
+    ));
+
   return (
-    <div>
-      웹 1팀 파이팅!
-      <Icon size={24} name="stack" type="stroke" />
-      <Icon size={24} name="stack" type="fill" />
-      <Icon
-        size={24}
-        name="stack"
-        type="stroke"
-        color={tokens.colors.warning300}
-      />
-    </div>
+    <OverlayProvider>
+      <div>
+        웹 1팀 파이팅!
+        <Icon size={24} name="stack" type="stroke" />
+        <Icon size={24} name="stack" type="fill" />
+        <Icon
+          size={24}
+          name="stack"
+          type="stroke"
+          color={tokens.colors.warning300}
+        />
+        <button onClick={notify1}>success 토스트 열기</button>
+        <button onClick={notify2}>warning 토스트 열기</button>
+      </div>
+    </OverlayProvider>
   );
 }

packages/ui/esbuild.config.mjs

@@ -20,6 +20,7 @@ const buildOptions = {
     }),
   ],
   loader: { '.css': 'file' },
+  allowOverwrite: true,
   outdir,
   external: ['react'],
 };

packages/ui/package.json

@@ -21,8 +21,10 @@
   },
   "dependencies": {
     "@repo/theme": "workspace:^",
+    "@types/react-dom": "18.3.1",
     "@vanilla-extract/css": "^1.17.0",
     "@vanilla-extract/recipes": "^0.5.5",
+    "motion": "^11.17.0",
     "react": "^18"
   },
   "devDependencies": {
@@ -36,7 +38,6 @@
     "ts-node": "^10.9.2"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^18"
   }
 }

packages/ui/src/components/Toast/Toast.css.ts

@@ -0,0 +1,24 @@
+import { style } from '@vanilla-extract/css';
+import { tokens } from '@repo/theme';
+
+export const container = style({
+  position: 'fixed',
+  bottom: 40,
+  right: 40,
+  padding: `${tokens.spacing[20]} ${tokens.spacing[32]}`,
+  borderRadius: 100,
+  backgroundColor: tokens.colors.grey700,
+  color: tokens.colors.grey0,
+});
+
+export const content = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: tokens.spacing[8],
+});
+
+export const message = style({
+  fontSize: tokens.typography.fontSize[20],
+  fontWeight: tokens.typography.fontWeight.semibold,
+  lineHeight: '24px',
+});

packages/ui/src/components/Toast/Toast.tsx

@@ -0,0 +1,124 @@
+import { motion, AnimatePresence, HTMLMotionProps } from 'motion/react';
+import {
+  ForwardRefExoticComponent,
+  ReactNode,
+  forwardRef,
+  useEffect,
+} from 'react';
+import { ToastIcon } from './compounds/Icon/Icon';
+import * as styles from './Toast.css';
+import { useTimer } from './hooks/useTimer';
+
+export type ToastType = 'default' | 'success' | 'error';
+
+export type ToastProps = {
+  /**
+   * 토스트 타입
+   * @default 'default'
+   */
+  toastType?: ToastType;
+  /**
+   * 왼쪽 추가 요소 (아이콘 등)
+   */
+  leftAddon?: ReactNode;
+  /**
+   * 토스트 지속 시간
+   * @default 2000
+   */
+  duration?: number;
+  /**
+   * 자식 요소
+   */
+  children?: ReactNode;
+  /**
+   * 토스트 열기 여부
+   */
+  open: boolean;
+  /**
+   * 토스트가 열릴 때 호출되는 함수
+   */
+  onOpen?: VoidFunction;
+  /**
+   * 토스트가 닫힐 때 호출되는 함수
+   */
+  onClose?: VoidFunction;
+  /**
+   * 토스트가 완전히 닫힌 후 호출되는 함수
+   */
+  onExited?: VoidFunction;
+} & Omit<HTMLMotionProps<'div'>, 'children'>;
+
+const ToastComponent = forwardRef<HTMLDivElement, ToastProps>(
+  (
+    {
+      toastType = 'default',
+      leftAddon,
+      duration = 2000,
+      children,
+      open,
+      onOpen,
+      onClose,
+      onExited,
+      style: toastStyle,
+      ...restProps
+    },
+    ref
+  ) => {
+    const { startCurrentTimer, clearCurrentTimeout } = useTimer({
+      onTimerEnd: onClose,
+      timeoutSecond: duration,
+    });
+
+    useEffect(() => {
+      if (open) {
+        onOpen?.();
+        startCurrentTimer();
+      }
+    }, [open, onOpen, startCurrentTimer]);
+
+    return (
+      <AnimatePresence onExitComplete={onExited}>
+        {open && (
+          <motion.div
+            ref={ref}
+            className={styles.container}
+            initial={{ y: '120%', opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: '120%', opacity: 0 }}
+            transition={{
+              type: 'spring',
+              damping: 25,
+              stiffness: 400,
+              opacity: {
+                duration: 0.15,
+                ease: 'easeInOut',
+              },
+            }}
+            onPointerEnter={clearCurrentTimeout}
+            onPointerLeave={startCurrentTimer}
+            style={{
+              ...toastStyle,
+            }}
+            {...restProps}
+          >
+            <div className={styles.content}>
+              {leftAddon ?? <ToastIcon toastType={toastType} />}
+              <span className={styles.message}>{children}</span>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    );
+  }
+);
+
+type ToastComposition = {
+  Icon: typeof ToastIcon;
+};
+
+export const Toast: ForwardRefExoticComponent<ToastProps> & ToastComposition =
+  Object.assign(ToastComponent, {
+    Icon: ToastIcon,
+  });
+
+Toast.displayName = 'Toast';

packages/ui/src/components/Toast/compounds/Icon/Icon.tsx

@@ -0,0 +1,39 @@
+import { Icon } from '@repo/ui';
+import type { IconProps } from '@repo/ui';
+import { tokens } from '@repo/theme';
+import { ToastType } from '../../Toast';
+
+export type ToastIconProps = Omit<IconProps, 'name'> & {
+  toastType?: ToastType;
+};
+
+export function ToastIcon({
+  toastType = 'default',
+  ...restProps
+}: ToastIconProps) {
+  const iconName = (() => {
+    switch (toastType) {
+      case 'success':
+        return 'check';
+      case 'error':
+        return 'notice';
+      default:
+        return null;
+    }
+  })();
+
+  if (!iconName) {
+    return null;
+  }
+
+  const iconColor = (() => {
+    switch (toastType) {
+      case 'success':
+        return tokens.colors.green200;
+      case 'error':
+        return tokens.colors.warning300;
+    }
+  })();
+
+  return <Icon type="fill" name={iconName} color={iconColor} {...restProps} />;
+}

packages/ui/src/components/Toast/hooks/useTimer.ts

@@ -0,0 +1,42 @@
+import { useRef, useCallback, useEffect } from 'react';
+
+type UseTimerParameters = {
+  onTimerEnd?: () => void;
+  timeoutSecond?: number;
+};
+
+export function useTimer({
+  onTimerEnd,
+  timeoutSecond = 3000,
+}: UseTimerParameters) {
+  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+
+  const startCurrentTimer = useCallback(() => {
+    if (!onTimerEnd) {
+      return;
+    }
+
+    timerRef.current = setTimeout(() => {
+      onTimerEnd();
+    }, timeoutSecond);
+  }, [timeoutSecond, onTimerEnd]);
+
+  const clearCurrentTimeout = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [timerRef]);
+
+  return {
+    startCurrentTimer,
+    clearCurrentTimeout,
+  };
+}

packages/ui/src/components/Toast/index.ts

@@ -0,0 +1,4 @@
+export { Toast } from './Toast';
+export type { ToastProps, ToastType } from './Toast';
+export { ToastIcon } from './compounds/Icon/Icon';
+export type { ToastIconProps } from './compounds/Icon/Icon';

packages/ui/src/components/index.ts

@@ -1,3 +1,5 @@
 export * from './Spacing/Spacing';
 export { Icon } from './Icon/Icon';
 export type { IconName, IconProps } from './Icon/Icon';
+export { Toast } from './Toast';
+export type { ToastProps, ToastType, ToastIconProps } from './Toast';