feat(toast): 토스트창 추가 (#15)

Co-authored-by: baegofda <[email protected]>

package.json

@@ -27,7 +27,8 @@
     "dayjs": "^1.11.7",
     "next": "^13.2.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.0"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^3.1.8",

packages/travelmakers-design-hooks/src/index.ts

@@ -8,4 +8,5 @@ export * from "./useRafState";
 export * from "./useRemainingTimer";
 export * from "./useResize";
 export * from "./useTimeoutFn";
+export * from "./useToast";
 export * from "./useUpdateEffect";

packages/travelmakers-design-hooks/src/useToast/index.ts

@@ -0,0 +1 @@
+export * from "./useToast";

packages/travelmakers-design-hooks/src/useToast/stories/useToast.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta } from "@storybook/react";
+import { Toaster } from "react-hot-toast";
+import { useToast } from "../useToast";
+
+export default {
+  title: "@travelmakers-design-v2/hooks/useToast",
+} as Meta;
+
+export const Toast = () => {
+  const { toast, success, error } = useToast();
+
+  return (
+    <>
+      <div style={{ display: "flex", gap: "4px" }}>
+        <button onClick={() => toast({ text: "기본 테스트" })}>Toast</button>
+        <button onClick={() => success({ text: "성공" })}>Success</button>
+        <button onClick={() => error({ text: "실패" })}>Error</button>
+      </div>
+      <Toaster />
+    </>
+  );
+};

packages/travelmakers-design-hooks/src/useToast/useToast.tsx

@@ -0,0 +1,83 @@
+import { Icon } from "@travelmakers-design-v2/core";
+import { TmTheme, useTmTheme } from "@travelmakers-design-v2/styles";
+import { Property } from "csstype";
+import _toast from "react-hot-toast";
+import { ToastOptions } from "react-hot-toast";
+import { IconTypes } from "../../../travelmakers-design-core/src/components/Icon/Icon.type";
+
+type ToastAlignType = "left" | "center" | "right";
+type ToastIconType = "success" | "error";
+type ToastProps = ToastOptions & {
+  text: string;
+  align?: ToastAlignType;
+};
+
+const TOAST_ALIGN: { [key in ToastAlignType]: Property.JustifyContent } = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end",
+};
+const TOAST_ICON: { [key in ToastIconType]: IconTypes } = {
+  success: "IcResultSuccess",
+  error: "IcResultFail",
+};
+
+const getDefaultOptions = (theme: TmTheme) => {
+  const { typography, colors, shadows } = theme;
+
+  return {
+    style: {
+      ...typography.body2,
+      width: "328px",
+      padding: "11px 6px",
+      color: colors.white,
+      backgroundColor: colors.black30,
+      boxShadow: shadows.elevation4,
+    },
+    duration: 2000,
+  };
+};
+const getDefaultStyle = (align: ToastAlignType) => {
+  return {
+    display: "flex",
+    justifyContent: TOAST_ALIGN[align ?? "center"],
+    width: "100%",
+  };
+};
+
+export const useToast = () => {
+  const theme = useTmTheme();
+  const { spacing } = theme;
+
+  const toastGenerator = (
+    { text, align, ...options }: ToastProps,
+    iconType?: ToastIconType
+  ) => {
+    _toast(
+      <div
+        style={{
+          ...getDefaultStyle(align),
+          padding: "1px 0",
+          wordBreak: "break-all",
+        }}
+      >
+        {iconType && (
+          <Icon
+            src={TOAST_ICON[iconType]}
+            width={24}
+            height={24}
+            style={{ flexShrink: 0, marginRight: spacing.spacing10 }}
+          />
+        )}
+        <p style={{ margin: 0, wordBreak: "break-all" }}>{text}</p>
+      </div>,
+      { ...getDefaultOptions(theme), ...options }
+    );
+  };
+
+  const toast = (props: ToastProps) => toastGenerator(props);
+  const success = (props: ToastProps) => toastGenerator(props, "success");
+  const error = (props: ToastProps) => toastGenerator(props, "error");
+
+  return { toast, success, error };
+};

packages/travelmakers-design-hooks/tsconfig.build.json

@@ -18,11 +18,13 @@
     "declarationDir": "lib",
     "composite": true,
     "paths": {
+      "@travelmakers-design-v2/core": ["../travelmakers-design-core"],
       "@travelmakers-design-v2/styles": ["../travelmakers-design-styles"],
       "@travelmakers-design-v2/utils": ["../travelmakers-design-utils"]
     }
   },
   "references": [
+    { "path": "../travelmakers-design-core" },
     { "path": "../travelmakers-design-utils" },
     { "path": "../travelmakers-design-styles" }
   ]

packages/travelmakers-design-hooks/tsconfig.json

@@ -11,11 +11,13 @@
     "declarationDir": "lib",
     "composite": true,
     "paths": {
+      "@travelmakers-design-v2/core": ["../travelmakers-design-core"],
       "@travelmakers-design-v2/styles": ["../travelmakers-design-styles"],
       "@travelmakers-design-v2/utils": ["../travelmakers-design-utils"]
     }
   },
   "references": [
+    { "path": "../travelmakers-design-core" },
     { "path": "../travelmakers-design-styles" },
     { "path": "../travelmakers-design-utils" }
   ]