feat: 답안 공유 URL 복사 기능

[#2]
boostcampwm2023 · Dec 3, 2023 · c469e72 · c469e72
1 parent 64ef269
commit c469e72
Showing 1 changed file with 23 additions and 3 deletions.
diff --git a/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.tsx b/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.tsx
@@ -1,14 +1,30 @@
-import { Button, Modal } from "../../../design-system/components/common";
+import { Button, Modal, toast } from "../../../design-system/components/common";
 
 import * as styles from "./SolvedModal.css";
 
 interface SolvedModalProps {
   link: string;
   onClose: () => void;
   onNextQuiz: () => void;
+  onCopy?: (link: string) => void;
 }
 
-export function SolvedModal({ link, onClose, onNextQuiz }: SolvedModalProps) {
+export function SolvedModal({
+  link,
+  onClose,
+  onNextQuiz,
+  onCopy,
+}: SolvedModalProps) {
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(link);
+      toast.success("링크를 클립보드에 복사했습니다.");
+      onCopy?.(link);
+    } catch (error) {
+      toast.error("링크 복사를 실패했습니다. 잠시 후 다시 시도해 주세요.");
+    }
+  };
+
   return (
     <Modal onClose={onClose}>
       <div className={styles.container}>
@@ -21,7 +37,11 @@ export function SolvedModal({ link, onClose, onNextQuiz }: SolvedModalProps) {
             defaultValue={link}
             readOnly
           />
-          <button type="button" className={styles.linkCopyButton}>
+          <button
+            type="button"
+            className={styles.linkCopyButton}
+            onClick={handleCopy}
+          >
             URL 복사
           </button>
         </div>