Merge pull request #58 from ShipFriend0516/refactor/toast

[Refactor] 토스트 개선

Author: ShipFriend0516

app/entities/common/Toast/Toast.tsx

@@ -9,27 +9,25 @@ interface ToastProps {
 const Toast = ({ message, type, removeToast }: ToastProps) => {
   const iconRender = (type: 'success' | 'error') => {
     if (type === 'success') {
-      return <CiCircleCheck size={32} />;
+      return <CiCircleCheck color={'green'} size={40} />;
     } else {
-      return <CiCircleRemove size={32} />;
+      return <CiCircleRemove color={'red'} size={40} />;
     }
   };
-  const backgroundColor = type === 'success' ? 'bg-green-500' : 'bg-red-500';
-
   return (
-    <div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50 w-[90%] max-w-md">
-      <div
-        className={`
+    <div
+      onClick={() => removeToast()}
+      className={`
           transform transition-all duration-300 ease-out animate-slideUp
-          bg-gray-200/90 text-black px-4 py-3 rounded-lg flex items-center gap-3 
-          backdrop-blur-sm w-full max-w-md
+          bg-gray-200/90 text-black px-3 py-2 rounded-lg flex items-center gap-3 
+          backdrop-blur-sm w-full max-w-md origin-center cursor-pointer 
+          hover:bg-gray-300/90 hover:shadow-lg
         `}
-      >
-        <div className={`${backgroundColor} rounded-full p-0.5`}>
-          {iconRender(type)}
-        </div>
-        <p className="text whitespace-pre-line flex-1">{message}</p>
+    >
+      <div className={`flex items-center justify-center rounded-full p-0.5`}>
+        {iconRender(type)}
       </div>
+      <p className="text line-clamp-1 whitespace-pre-line flex-1">{message}</p>
     </div>
   );
 };

app/entities/common/Toast/ToastProvider.tsx

@@ -11,9 +11,14 @@ interface Toast {
 const ToastProvider = () => {
   const { toasts, removeToast } = useToastStore();
 
+  const reversedToasts = toasts.toReversed();
   return (
-    <div className={'fixed z-50 flex flex-col gap-2 top-10 right-10'}>
-      {toasts.map((toast: Toast) => {
+    <div
+      className={
+        'fixed bottom-6 left-1/2 transform -translate-x-1/2 flex flex-col gap-4  z-50 w-[90%] max-w-md'
+      }
+    >
+      {reversedToasts.map((toast: Toast) => {
         return (
           <Toast
             key={toast.id}

tailwind.config.ts

@@ -39,11 +39,13 @@ const config: Config = {
         },
         slideUp: {
           '0%': {
-            transform: 'translateY(100%)',
+            transform: 'translateY(50%)',
+            width: '20%',
             opacity: '0',
           },
           '100%': {
             transform: 'translateY(0)',
+            width: '100%',
             opacity: '1',
           },
         },