style: 답안 공유 URL 복사 시 ✅

[#2]
boostcampwm2023 · Dec 3, 2023 · 5c5d9c9 · 5c5d9c9
1 parent 7681ab3
commit 5c5d9c9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 39 deletions.
diff --git a/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.css.ts b/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.css.ts
@@ -57,51 +57,23 @@ 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,
-  },
-]);
-
-export const copyTooltip = style([
-  border.all,
-  {
-    display: "none",
-    position: "absolute",
-    left: "50%",
-    top: -33,
-    transform: "translateX(-50%)",
-    padding: 2,
-    color: color.$scale.grey700,
-    backgroundColor: color.$scale.grey50,
 
     selectors: {
-      "&.visible": {
-        display: "block",
-      },
-
-      "&::before,&::after": {
-        content: "",
-        position: "absolute",
-        left: "50%",
-        transform: "translateX(-50%)",
-        borderWidth: 5,
-        borderStyle: "solid",
+      "&.visible::after": {
+        display: "inline-block",
       },
     },
 
-    "::before": {
-      bottom: -10,
-      borderColor: `${color.$semantic.border} transparent transparent transparent`,
-    },
-
     "::after": {
-      bottom: -9,
-      borderColor: `${color.$scale.grey50} transparent transparent transparent`,
+      display: "none",
+      content: "✅",
+      marginLeft: 3,
     },
   },
 ]);
diff --git a/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.tsx b/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.tsx
@@ -17,15 +17,15 @@ export function SolvedModal({
   onNextQuiz,
   onCopy,
 }: SolvedModalProps) {
-  const tooltipRef = useRef<HTMLDivElement>(null);
+  const copyButtonRef = useRef<HTMLButtonElement>(null);
 
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(link);
-      tooltipRef.current?.classList.add("visible");
+      copyButtonRef.current?.classList.add("visible");
 
       setTimeout(() => {
-        tooltipRef.current?.classList.remove("visible");
+        copyButtonRef.current?.classList.remove("visible");
       }, 2000);
       onCopy?.(link);
     } catch (error) {
@@ -49,11 +49,9 @@ export function SolvedModal({
             type="button"
             className={styles.linkCopyButton}
             onClick={handleCopy}
+            ref={copyButtonRef}
           >
             URL 복사
-            <div ref={tooltipRef} className={styles.copyTooltip}>
-              copied
-            </div>
           </button>
         </div>
         <Button full variant="primaryFill" onClick={onNextQuiz}>