feat: 강의 코드 복사 기능 구현 #68

- 버튼 클릭 시에 강의 코드를 복사하도록 작업을 완료했습니다.
LellowMellow · Nov 28, 2023 · ffb88f0 · ffb88f0
1 parent d224ab2
commit ffb88f0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/frontend/src/components/Header/components/HeaderCodeCopyButton.tsx b/frontend/src/components/Header/components/HeaderCodeCopyButton.tsx
@@ -1,13 +1,27 @@
 import SmallButton from "@/components/SmallButton/SmallButton";
 import ShareIcon from "@/assets/svgs/share.svg?react";
+import { useToast } from "@/components/Toast/useToast";
 
 interface HeaderCodeCopyButtonProps {
   lectureCode: string;
 }
 
 const HeaderCodeCopyButton = ({ lectureCode }: HeaderCodeCopyButtonProps) => {
+  const showToast = useToast();
+  const handleShareButtonClicked = async () => {
+    try {
+      await navigator.clipboard.writeText(
+        `[함께 듣는 실시간 강의 Boarlog]\n\n지금 진행되는 강의에 참여해보세요.\n\n강의 코드: ${lectureCode}\n강의 제목: 강의 제목\n강의 링크: 강의 링크`
+      );
+      showToast({ message: "클립보드에 강의 코드를 복사했어요.", type: "success" });
+    } catch (error) {
+      console.error("복사 실패:", error);
+      showToast({ message: "강의 코드 복사에 실패했어요. 잠시 후 다시 시도해 주세요.", type: "alert" });
+    }
+  };
+
   return (
-    <SmallButton onClick={() => console.log("clicked")} className="bg-grayscale-lightgray">
+    <SmallButton onClick={handleShareButtonClicked} className="bg-grayscale-lightgray">
       <ShareIcon className="fill-grayscale-black" />
       {lectureCode}
     </SmallButton>

diff --git a/frontend/src/components/Toast/ToastContainer.tsx b/frontend/src/components/Toast/ToastContainer.tsx
@@ -34,7 +34,7 @@ const Toast = ({ toastKey, message, type }: ToastProps) => {
   return (
     <div
       key={toastKey}
-      className={`rounded-xl medium-16 w-full text-grayscale-black px-4 py-4 flex flex-row items-center justify-start gap-3 cursor-pointer shadow-ml ${
+      className={`rounded-xl medium-16 w-full text-grayscale-black px-4 py-4 flex flex-row items-center justify-start gap-3 cursor-pointer shadow-xl ${
         animation ? "toast-fade-in" : "toast-fade-out"
       } ${type === "alert" && "bg-alert-10"} ${type === "success" && "bg-boarlog-10"} ${
         type === "default" && "bg-grayscale-lightgray"