fix: 토스트 트리거 존재하는 경우 스토리 추가, 토스트가 없을 때 오버레이 공간 차지하지 않도록 조건부 렌더링

GDSC-Hongik · Sep 22, 2024 · 35c07d9 · 35c07d9
1 parent 286e932
commit 35c07d9
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 17 deletions.
diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx
@@ -2,6 +2,8 @@ import type { Meta } from "@storybook/react";
 import { useEffect } from "react";
 import { Warn } from "wowds-icons";
 
+import Button from "@/components/Button";
+
 import Toast from ".";
 import ToastProvider from "./ToastProvider";
 import useToast from "./useToast";
@@ -78,6 +80,16 @@ export const Default = () => {
   }, []);
 };
 
+export const WithTrigger = () => {
+  const { toast } = useToast();
+
+  return (
+    <Button onClick={() => toast({ text: "Text", subText: "subtext" })}>
+      토스트 열기
+    </Button>
+  );
+};
+
 export const Close = () => {
   const { toast } = useToast();
   useEffect(() => {
@@ -137,8 +149,8 @@ export const Slow = () => {
   const { toast } = useToast();
   useEffect(() => {
     toast({
-      text: "TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText",
-      icon: <Warn />,
+      text: "Text",
+      subText: "subtext",
       toastDuration: 5000,
     });
   }, []);

diff --git a/packages/wow-ui/src/components/Toast/ToastProvider.tsx b/packages/wow-ui/src/components/Toast/ToastProvider.tsx
@@ -27,21 +27,23 @@ const ToastProvider = ({ children }: { children: ReactNode }) => {
 
   return (
     <ToastContext.Provider value={{ toasts, addToast, removeToast }}>
-      <Flex
-        align="center"
-        direction="column"
-        gap="xs"
-        height="100vh"
-        left={0}
-        position="fixed"
-        top="1.5rem"
-        width="100vw"
-        zIndex="overlay"
-      >
-        {toasts?.map((toast: ToastProps) => (
-          <Toast key={toast.id} {...toast} />
-        ))}
-      </Flex>
+      {toasts.length > 0 && (
+        <Flex
+          align="center"
+          direction="column"
+          gap="xs"
+          height="100vh"
+          left={0}
+          position="fixed"
+          top="1.5rem"
+          width="100vw"
+          zIndex="overlay"
+        >
+          {toasts?.map((toast: ToastProps) => (
+            <Toast key={toast.id} {...toast} />
+          ))}
+        </Flex>
+      )}
       {children}
     </ToastContext.Provider>
   );