feat: 토스트 기능 구현

Author: lgrin-byte

src/components/ReviewResult/ReviewResult.module.scss

@@ -34,6 +34,12 @@
 }
 
 .Bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.ButtonBox {
   align-items: center;
   gap: 0.875rem;
   z-index: 1;

src/components/ReviewResult/ReviewResult.tsx

@@ -1,6 +1,9 @@
 import { useEffect } from "react";
 
 import confetti from "canvas-confetti";
+import type { Options as ConfettiOptions } from "canvas-confetti";
+
+import Toast from "../ui/Toast/Toast";
 
 import HomeNavigateConfirmModal from "@/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal";
 import styles from "@/components/ReviewResult/ReviewResult.module.scss";
@@ -9,11 +12,15 @@ import IconButton from "@/components/ui/IconButton/IconButton";
 import Text from "@/components/ui/Text/Text";
 
 import { useOverlay } from "@/hooks/common/useOverlay";
-
-import type { Options as ConfettiOptions } from "canvas-confetti";
+import useToast from "@/hooks/common/useToast";
 
 const ReviewResult = () => {
   const { isOpen, handleClose, handleOpen } = useOverlay();
+  const { isToast, showToast } = useToast(1000); // 1초 후 사라짐
+
+  const handleCopy = () => {
+    showToast();
+  };
 
   const handleConfetti = () => {
     const setting: ConfettiOptions = {
@@ -51,12 +58,16 @@ const ReviewResult = () => {
           거예요.
         </Text>
         <div className={styles.IconBtn}>
-          <IconButton text="복사하기" iconName="paste" size="sm" />
+          <IconButton text="복사하기" iconName="paste" size="sm" onClick={handleCopy} />
         </div>
       </div>
+
       <div className={styles.Bottom}>
-        <Button text="다시생성" variant="secondary" />
-        <Button text="홈으로 가기" onClick={handleOpen} />
+        {isToast && <Toast text="링크가 복사되었어요." />}
+        <div className={styles.ButtonBox}>
+          <Button text="다시생성" variant="secondary" />
+          <Button text="홈으로 가기" onClick={handleOpen} />
+        </div>
       </div>
 
       <HomeNavigateConfirmModal isOpen={isOpen} handleClose={handleClose} />

src/components/ui/Toast/Toast.module.scss

@@ -0,0 +1,39 @@
+.ToastStory {
+  display: flex;
+  align-items: center;
+  gap: 4rem;
+
+  .Wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+
+    .InnerWrapper {
+      width: 1.5rem;
+      height: 1.5rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+
+.Toast {
+  width: 100%;
+  height: 3.25rem;
+  z-index: 1;
+  border-radius: 0.75rem;
+  background-color: white;
+  padding: 0.875rem 1.125rem;
+
+  transform: translateY(-20px);
+  transition:
+    opacity 0.3s,
+    transform 0.3s;
+}
+
+.show {
+  opacity: 1;
+  transform: translateY(0);
+}

src/components/ui/Toast/Toast.stories.tsx

@@ -0,0 +1,20 @@
+import Toast from "@/components/ui/Toast/Toast";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+type ToastProps = {
+  text: string;
+};
+
+const meta: Meta<typeof Toast> = {
+  title: "Example/Toast",
+  component: Toast,
+};
+
+export default meta;
+
+export const Primary: StoryObj<ToastProps> = {
+  args: {
+    text: "링크가 복사되었어요.",
+  },
+};

src/components/ui/Toast/Toast.tsx

@@ -0,0 +1,20 @@
+import { forwardRef } from "react";
+
+import classNames from "classnames";
+
+import Text from "@/components/ui/Text/Text";
+import styles from "@/components/ui/Toast/Toast.module.scss";
+
+export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+  text: string;
+}
+
+const Toast = forwardRef<HTMLDivElement, ToastProps>(({ text, className, ...props }, ref) => {
+  return (
+    <div ref={ref} className={classNames(styles.Toast, className)} {...props}>
+      <Text variant="bodyM">{text}</Text>
+    </div>
+  );
+});
+
+export default Toast;

src/hooks/common/useToast.ts

@@ -0,0 +1,21 @@
+import { useState } from "react";
+
+interface UseToastReturn {
+  isToast: boolean;
+  showToast: () => void;
+}
+
+const useToast = (duration: number = 1000): UseToastReturn => {
+  const [isToast, setIsToast] = useState<boolean>(false);
+
+  const showToast = () => {
+    setIsToast(true);
+    setTimeout(() => {
+      setIsToast(false);
+    }, duration);
+  };
+
+  return { isToast, showToast };
+};
+
+export default useToast;

src/pages/ReviewResultPage.tsx

@@ -4,6 +4,7 @@ import Navbar from "@/components/common/Navbar/Navbar";
 import CreateReviewLoading from "@/components/CreateReviewLoading/CreateReviewLoading";
 import ReviewResult from "@/components/ReviewResult/ReviewResult";
 import Icon from "@/components/ui/Icon/Icon";
+import Toast from "@/components/ui/Toast/Toast";
 
 import { useRoute } from "@/hooks/common/useRoute";