diff --git a/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.css.ts b/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.css.ts index e4189537..9d2e3dd5 100644 --- 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 index 8362ab6e..5d4be72b 100644 --- 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,6 +19,9 @@ export function SolvedModal({ onNextQuiz, }: SolvedModalProps) { const router = useRouter(); + + const copyButtonRef = useRef(null); + const handleShowAnswer = () => { router.push(link); }; @@ -25,7 +29,11 @@ export function SolvedModal({ 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 복사 + URL 복사
diff --git a/packages/frontend/src/pages/quizzes/[id].page.tsx b/packages/frontend/src/pages/quizzes/[id].page.tsx index be6e87fd..63cdcc4d 100644 --- 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 && (