feature. Versionup react-toastify

Author: Siyeop

package.json

@@ -83,7 +83,7 @@
         "lodash": "^4.17.21",
         "react-modal": "^3.16.1",
         "react-slick": "^0.29.0",
-        "react-toastify": "^9.1.3",
+        "react-toastify": "^11.0.3",
         "react-tooltip": "^5.21.1"
     },
     "repository": {

src/components/guide/badge/TBadge.tsx

@@ -1,4 +1,3 @@
-import 'react-toastify/dist/ReactToastify.css';
 import {CSSProperties, useMemo} from 'react';
 import {TBadgeProps} from '@/components';
 

src/components/guide/toast/TToast.tsx

@@ -1,15 +1,14 @@
-import 'react-toastify/dist/ReactToastify.css';
-import {Theme, toast, ToastContainer} from 'react-toastify';
-import {ToastPosition} from 'react-toastify/dist/types';
-import {TToastProps} from './TToast.interface';
+'use client';
+
+import {Theme, toast, ToastContainer, ToastPosition} from 'react-toastify';
+
+import {TToastProps} from '@/components';
 
 function TToast({
     theme = 'light' as Theme,
     className = 'tks-toast-container',
     autoClose = 5000,
     toastClassName = 'tks-toast',
-    bodyClassName = 'tks-toast__body',
-    progressClassName = 'tks-toast__progress',
     position = 'top-right' as ToastPosition,
     draggable = false,
     ...restProps
@@ -20,10 +19,9 @@ function TToast({
         className,
         autoClose,
         toastClassName,
-        bodyClassName,
-        progressClassName,
         position,
         draggable,
+
         ...restProps,
     };
 
@@ -32,5 +30,8 @@ function TToast({
     );
 }
 
-export const notify = toast;
+const notify = toast;
+
+export {notify, toast};
+
 export default TToast;

src/styles/component/guide/toast/TToast.scss

@@ -8,9 +8,11 @@
     --toastify-color-progress-success: #{$t-primary-color};
     --toastify-color-progress-warning: #{$t-primary-color};
     --toastify-color-progress-error: #{$t-primary-color};
+    --toastify-color-progress-bgo: 0.15;
 
     --toastify-toast-width: 320px;
 
+
     $t-toastify-progress-bar-height: 5px;
 
     @at-root .tks-toast-container {
@@ -20,16 +22,22 @@
 
             .Toastify__toast {
 
-                padding: $t-spacing-16 $t-spacing-10 calc($t-spacing-16 + $t-toastify-progress-bar-height) $t-spacing-16;
+                padding-top: $t-spacing-16;
+                padding-right: calc($t-spacing-16 + $t-spacing-20 + $t-spacing-10);
+                padding-bottom: calc($t-spacing-16 + $t-toastify-progress-bar-height);
+                padding-left: $t-spacing-16;
+
+
                 border-radius: 4px;
                 font-weight: normal;
+                @include typo-element-3
             }
 
-            .Toastify__toast-body {
-                margin: 0;
-                padding: 0 $t-spacing-16 0 0;
 
-                @include typo-element-3
+            .Toastify__close-button {
+                padding-top: 10px;
+                margin-left: $t-spacing-16;
+
             }
 
         }
@@ -61,6 +69,7 @@
 
     .Toastify__progress-bar {
         height: $t-toastify-progress-bar-height;
+        opacity: 1;
     }
 
 }

stories/components/guide/toast/TToast.stories.tsx

@@ -1,6 +1,7 @@
 import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
-import {ToastPosition} from 'react-toastify/dist/types';
+
+import {ToastPosition} from 'react-toastify';
 import TToast, {notify} from '@/components/guide/toast/TToast';
 import TButton from '@/components/button/button/TButton';
 
@@ -56,10 +57,8 @@ export const Default: Story = {
     render: Template,
     args: {
         className: 'tks-toast-container',
-        autoClose: 5000,
+        autoClose: 10000,
         toastClassName: 'tks-toast',
-        bodyClassName: 'tks-toast__body',
-        progressClassName: 'tks-toast__progress',
         position: 'top-right' as ToastPosition,
         draggable: false,
     },