fix: http에서 클립보드 api 사용 못해서 발생하는 버그 수정

softeerbootcamp4th · Aug 23, 2024 · a2e57bb · a2e57bb
1 parent 011fea8
commit a2e57bb
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 35 deletions.
diff --git a/Caecae/src/components/RacingGame/RacingGame.tsx b/Caecae/src/components/RacingGame/RacingGame.tsx
@@ -160,25 +160,44 @@ const RacingGame: React.FC = () => {
         const baseShareUrl = "http://www.caecae.kro.kr/a/"
         const shareUrl = baseShareUrl + shortUrl;
 
-        navigator.clipboard.writeText(shareUrl)
-          .then(() => {
-            setShowMessage(true);
-
+        let textArea = document.createElement("textarea");
+        textArea.value = shareUrl;
+
+        textArea.style.position = "fixed";
+        textArea.style.left = "-9999px";
+        textArea.style.top = "-9999px";
+
+        document.body.appendChild(textArea);
+        textArea.select();
+
+        return new Promise((res, rej) => {
+            if (document.execCommand('copy')) {
+                res(shareUrl)
+            }else {
+                rej();
+            }
+            textArea.remove();
+        }).then(() => {
+          setShowMessage(true);
+
+          setTimeout(() => {
+            setAnimate(true);
+
             setTimeout(() => {
-              setAnimate(true);
-    
+              setAnimate(false);
+
               setTimeout(() => {
-                setAnimate(false);
-
-                setTimeout(() => {
-                  setShowMessage(false);
-                  setIsAnimating(false);
-                }, 500);
-
-              }, 3000);
-              
-            }, 10);  
-          });
+                setShowMessage(false);
+                setIsAnimating(false);
+              }, 500);
+
+            }, 3000);
+
+          }, 10);  
+        }).catch((error) => {
+          console.error("클립보드 복사 실패:", error);
+          setIsAnimating(false);
+        });
       }catch(error) {
         console.error("단축 Url api 호출 실패:", error);
       }

diff --git a/Caecae/src/features/FindingGameLanding/LadingPageTitle.tsx b/Caecae/src/features/FindingGameLanding/LadingPageTitle.tsx
@@ -14,6 +14,45 @@ const LadingPageTitle = ({ onClick }: LadingPageTitleProps) => {
     setIsAnimating(true);
     const url: string = window.location.href;
 
+    let textArea = document.createElement("textarea");
+    textArea.value = url;
+
+    textArea.style.position = "fixed";
+    textArea.style.left = "-9999px";
+    textArea.style.top = "-9999px";
+
+    document.body.appendChild(textArea);
+    textArea.select();
+
+    return new Promise((res, rej) => {
+        if (document.execCommand('copy')) {
+            res(url)
+        }else {
+            rej();
+        }
+        textArea.remove();
+    }).then(() => {
+      setShowMessage(true);
+
+      setTimeout(() => {
+        setAnimate(true);
+
+        setTimeout(() => {
+          setAnimate(false);
+
+          setTimeout(() => {
+            setShowMessage(false);
+            setIsAnimating(false);
+          }, 500);
+
+        }, 3000);
+
+      }, 10);  
+    }).catch((err: Error) => {
+      console.error('URL 복사에 실패했습니다.', err);
+      setIsAnimating(false);
+    });
+
     navigator.clipboard
       .writeText(url)
       .then(() => {

diff --git a/Caecae/src/features/RacingGameLanding/EventIntro.tsx b/Caecae/src/features/RacingGameLanding/EventIntro.tsx
@@ -15,29 +15,44 @@ const EventIntro: React.FC<EventIntroProps> = ({isEventOpen}) => {
     setIsAnimating(true);
     const url: string = window.location.href;
 
-    navigator.clipboard.writeText(url)
-      .then(() => {
-        setShowMessage(true);
+    let textArea = document.createElement("textarea");
+    textArea.value = url;
+
+    textArea.style.position = "fixed";
+    textArea.style.left = "-9999px";
+    textArea.style.top = "-9999px";
+
+    document.body.appendChild(textArea);
+    textArea.select();
+
+    return new Promise((res, rej) => {
+        if (document.execCommand('copy')) {
+            res(url)
+        }else {
+            rej();
+        }
+        textArea.remove();
+    }).then(() => {
+      setShowMessage(true);
+
+      setTimeout(() => {
+        setAnimate(true);
 
         setTimeout(() => {
-          setAnimate(true);
+          setAnimate(false);
 
           setTimeout(() => {
-            setAnimate(false);
-
-            setTimeout(() => {
-              setShowMessage(false);
-              setIsAnimating(false);
-            }, 500);
+            setShowMessage(false);
+            setIsAnimating(false);
+          }, 500);
 
-          }, 3000);
-
-        }, 10);  
-      })
-      .catch((err: Error) => {
-        console.error('URL 복사에 실패했습니다.', err);
-        setIsAnimating(false);
-      });
+        }, 3000);
+
+      }, 10);  
+    }).catch((err: Error) => {
+      console.error('URL 복사에 실패했습니다.', err);
+      setIsAnimating(false);
+    });
   };
 
   const checkEventOpen = () => {