diff --git a/Caecae/src/features/FindingGameLanding/LadingPageTitle.tsx b/Caecae/src/features/FindingGameLanding/LadingPageTitle.tsx index dabb87d..07e0479 100644 --- a/Caecae/src/features/FindingGameLanding/LadingPageTitle.tsx +++ b/Caecae/src/features/FindingGameLanding/LadingPageTitle.tsx @@ -1,8 +1,43 @@ +import { useState } from "react"; + interface LadingPageTitleProps { onClick: () => void; } const LadingPageTitle = ({ onClick }: LadingPageTitleProps) => { + const [showMessage, setShowMessage] = useState(false); + const [animate, setAnimate] = useState(false); + const [isAnimating, setIsAnimating] = useState(false); + + const shareEvent = () => { + if (isAnimating) return; + setIsAnimating(true); + const url: string = window.location.href; + + navigator.clipboard.writeText(url) + .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); + }); + }; return ( <>
@@ -32,9 +67,14 @@ const LadingPageTitle = ({ onClick }: LadingPageTitleProps) => { className="h-[300px] mt-[50px]" />
-
+
sharedButton -

공유하기

+

+ 공유하기 +

{ className="opacity-[70%] w-[230px] right-0 absolute bottom-0 z-10" />
+ {showMessage && ( +
+
+ URL이 복사되었습니다! +
+
+ )}
); diff --git a/Caecae/src/features/RacingGameLanding/EventIntro.tsx b/Caecae/src/features/RacingGameLanding/EventIntro.tsx index d7b4dca..9a59ec2 100644 --- a/Caecae/src/features/RacingGameLanding/EventIntro.tsx +++ b/Caecae/src/features/RacingGameLanding/EventIntro.tsx @@ -1,6 +1,40 @@ +import { useState } from "react"; import { Link } from "../../shared/Hyunouter"; const EventIntro = () => { + const [showMessage, setShowMessage] = useState(false); + const [animate, setAnimate] = useState(false); + const [isAnimating, setIsAnimating] = useState(false); + + const shareEvent = () => { + if (isAnimating) return; + setIsAnimating(true); + const url: string = window.location.href; + + navigator.clipboard.writeText(url) + .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); + }); + }; return ( <>
@@ -35,14 +69,14 @@ const EventIntro = () => { />
sharedButton 공유하기
-
+
전력 질주하러 가기 rightShevron
@@ -66,12 +100,16 @@ const EventIntro = () => { className="opacity-[70%] w-[230px] right-0 top-96 absolute z-10" />
+ {showMessage && ( +
+
+ URL이 복사되었습니다! +
+
+ )}
); }; -const shareEvent = () => { - console.log("이벤트를 공유합니다!"); -}; export default EventIntro;