첫 커밋

src/shared/ui/toasts/noti-bar.tsx

@@ -0,0 +1,77 @@
+/* eslint-disable @cspell/spellchecker */
+import { Slide, ToastContainer } from 'react-toastify';
+import styled from 'styled-components';
+
+const StyledNotiBar = styled(ToastContainer)`
+  // https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
+  &&&.Toastify__toast-container {
+    transform: translateX(2.5%);
+  }
+  .Toastify__toast {
+    min-height: auto;
+    width: 95%;
+    height: auto;
+
+    background-color: #262d42;
+    box-sizing: border-box;
+
+    border-radius: 0px 0px 20px 20px;
+    text-align: center;
+    -webkit-box-shadow: 1px 1px 10px 0px rgba(43, 38, 38, 0.5);
+    -moz-box-shadow: 1px 1px 10px 0px rgba(43, 38, 38, 0.5);
+    box-shadow: 1px 1px 10px 0px rgba(43, 38, 38, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+  }
+  .Toastify__toast-body {
+    padding: 0;
+    margin: 0;
+    height: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .Toastify__toast-body > div:last-child {
+    color: #fff;
+    font-weight: 600;
+    line-height: 16px;
+    height: 16px;
+    padding: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @supports (-webkit-touch-callout: none) {
+    &&&.Toastify__toast-container {
+      top: 0;
+    }
+    .Toastify__toast-body > div:last-child {
+      margin-top: calc(env(safe-area-inset-top) - 5px);
+    }
+  }
+`;
+
+export const NotiBar = () => {
+  return (
+    <StyledNotiBar
+      position="top-center"
+      autoClose={3000}
+      limit={1}
+      hideProgressBar
+      newestOnTop={false}
+      closeOnClick={false}
+      rtl={false}
+      pauseOnFocusLoss={false}
+      draggable
+      pauseOnHover={false}
+      containerId={'notibar'}
+      draggableDirection="y"
+      draggablePercent={30}
+      closeButton={false}
+    />
+  );
+};

src/shared/ui/toasts/snack-bar.tsx

@@ -0,0 +1,71 @@
+/* eslint-disable @cspell/spellchecker */
+import { cssTransition, ToastContainer } from 'react-toastify';
+import styled from 'styled-components';
+
+const StyledSnackBar = styled(ToastContainer)`
+  // https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
+  &&&.Toastify__toast-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    bottom: 20px;
+    pointer-events: none;
+    margin-bottom: calc(env(safe-area-inset-top) / 3);
+  }
+  .Toastify__toast {
+    pointer-events: none;
+    height: auto;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    min-height: auto;
+    border-radius: 50px;
+    padding: 10px 20px;
+    background-color: rgba(34, 37, 56, 0.555);
+    width: 85%;
+  }
+  .Toastify__toast-body {
+    padding: 0;
+    margin: 0;
+    height: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .Toastify__toast-body > div:last-child {
+    color: #fff;
+    line-height: 20px;
+    font-size: 14px;
+  }
+  .Toastify__progress-bar {
+  }
+`;
+
+export const SnackBar = () => {
+  const fade = cssTransition({
+    enter: 'animate__animated animate__fadeIn animate__faster',
+    exit: 'animate__animated animate__fadeOut animate__faster',
+  });
+
+  return (
+    <StyledSnackBar
+      position="bottom-center"
+      autoClose={2000}
+      limit={1}
+      hideProgressBar
+      newestOnTop={false}
+      closeOnClick={false}
+      rtl={false}
+      pauseOnFocusLoss={false}
+      draggable={false}
+      pauseOnHover={false}
+      transition={fade}
+      containerId={'snackbar'}
+      draggablePercent={10}
+      closeButton={false}
+    />
+  );
+};

src/shared/ui/toasts/toasts.tsx

@@ -0,0 +1,31 @@
+import { NotiBar } from './noti-bar';
+import { SnackBar } from './snack-bar';
+import { createPortal } from 'react-dom';
+import { 
+  useEffect, 
+  useState 
+} from 'react';
+
+export const Toasts = () => {
+  const [toastPortalRoot, setToastPortalRoot] = useState<HTMLDivElement>();
+
+  useEffect(() => {
+    const portalRoot = document.createElement('div');
+    portalRoot.id = 'toast-portal-root';
+    document.body.appendChild(portalRoot);
+    setToastPortalRoot(portalRoot);
+
+    return () => {
+      document.body.removeChild(portalRoot);
+    };
+  }, []);
+
+  if (!toastPortalRoot) return null;
+
+  return (
+    <>
+      { createPortal(<NotiBar />, toastPortalRoot) }
+      { createPortal(<SnackBar />, toastPortalRoot) }
+    </>
+  );
+};