style: 답안 공유 URL 복사 시 ✅

[#2]
flydog98 · Dec 14, 2023 · 0ecd9f1 · 0ecd9f1
1 parent 8e1f1e6
commit 0ecd9f1
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.css.ts b/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.css.ts
@@ -58,13 +58,37 @@ export const linkCopyButton = style([
   border.all,
   typography.$semantic.body2Regular,
   {
+    position: "relative",
     borderLeft: "none",
     borderTopRightRadius: BORDER_RADIUS,
     borderBottomRightRadius: BORDER_RADIUS,
     padding: "9px 19px",
     color: "inherit",
     backgroundColor: color.$scale.grey50,
+
+    selectors: {
+      "&.visible::after": {
+        display: "inline-block",
+      },
+    },
+
+    "::after": {
+      content: "✅",
+      display: "none",
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+    },
   },
 ]);
 
 export const buttonGroup = style([flexCenter, { gap: 4 }]);
+
+export const linkCopyButtonText = style({
+  selectors: {
+    [`${linkCopyButton}.visible &`]: {
+      visibility: "hidden",
+    },
+  },
+});
diff --git a/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.tsx b/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.tsx
@@ -1,4 +1,5 @@
 import { useRouter } from "next/router";
+import { useRef } from "react";
 
 import { Button, Modal, toast } from "../../../design-system/components/common";
 
@@ -18,14 +19,21 @@ export function SolvedModal({
   onNextQuiz,
 }: SolvedModalProps) {
   const router = useRouter();
+
+  const copyButtonRef = useRef<HTMLButtonElement>(null);
+
   const handleShowAnswer = () => {
     router.push(link);
   };
 
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(link);
-      toast.success("링크를 클립보드에 복사했습니다.");
+      copyButtonRef.current?.classList.add("visible");
+
+      setTimeout(() => {
+        copyButtonRef.current?.classList.remove("visible");
+      }, 2000);
     } catch (error) {
       toast.error("링크 복사를 실패했습니다. 잠시 후 다시 시도해 주세요.");
     }
@@ -47,8 +55,9 @@ export function SolvedModal({
             type="button"
             className={styles.linkCopyButton}
             onClick={handleCopy}
+            ref={copyButtonRef}
           >
-            URL 복사
+            <span className={styles.linkCopyButtonText}>URL 복사</span>
           </button>
         </div>
         <div className={styles.buttonGroup}>

diff --git a/packages/frontend/src/pages/quizzes/[id].page.tsx b/packages/frontend/src/pages/quizzes/[id].page.tsx
@@ -155,6 +155,7 @@ export default function QuizPage({ quiz }: { quiz: Quiz }) {
       {solvedModal.modalOpen && (
         <SolvedModal
           link={solvedModal.shareLink}
+          lastQuiz={false}
           onClose={solvedModal.closeModal}
           onNextQuiz={console.log}
         />