From 38e081e36841b16643bd1ce22100ea534977905a Mon Sep 17 00:00:00 2001 From: nyoung113 Date: Sat, 29 Jun 2024 13:43:59 +0900 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20clipboard=20method=EB=A5=BC=20event?= =?UTF-8?q?=20handler=20=EC=97=90=EC=84=9C=20=EB=B0=94=EB=A1=9C=20?= =?UTF-8?q?=ED=98=B8=EC=B6=9C=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/pages/detail/URLShareButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pages/detail/URLShareButton.tsx b/src/components/pages/detail/URLShareButton.tsx index 33d3fd1b..107c3964 100644 --- a/src/components/pages/detail/URLShareButton.tsx +++ b/src/components/pages/detail/URLShareButton.tsx @@ -7,7 +7,7 @@ export default function URLShareButton() { return (
- {isCopied && } From 7a92ad3045529dcd09b737bbe2ad9d00b042ae70 Mon Sep 17 00:00:00 2001 From: nyoung113 Date: Sat, 29 Jun 2024 23:13:55 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EB=B0=B1=EA=B7=B8=EB=9D=BC?= =?UTF-8?q?=EC=9A=B4=EB=93=9C=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=ED=81=B4?= =?UTF-8?q?=EB=A6=BD=EB=B3=B4=EB=93=9C=20=EB=B3=B5=EC=82=AC=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=EC=9D=B4=20=EC=82=AC=EB=9D=BC=EC=A7=90=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/CopiedNotice.tsx | 29 +++++++++++++------ src/components/common/ShareModal.tsx | 4 +-- .../pages/detail/URLShareButton.tsx | 5 ++-- src/hooks/useCopyClipboard.ts | 12 +++++--- 4 files changed, 33 insertions(+), 17 deletions(-) diff --git a/src/components/common/CopiedNotice.tsx b/src/components/common/CopiedNotice.tsx index 96ff899b..6d2271f1 100644 --- a/src/components/common/CopiedNotice.tsx +++ b/src/components/common/CopiedNotice.tsx @@ -1,13 +1,24 @@ import CheckSvg from '@/components/svg-component/CheckSvg.tsx'; -export function CopiedNotice() { - return ( -
-
-
- - 링크 복사 완료 +interface Props { + isOpen: boolean; + handleClose: () => void; +} +export function CopiedNotice({ isOpen, handleClose }: Props) { + if (isOpen) { + return ( +
+
+
+ + 링크 복사 완료 +
-
- ); + ); + } + + return null; } diff --git a/src/components/common/ShareModal.tsx b/src/components/common/ShareModal.tsx index baeffbd0..8b9afc44 100644 --- a/src/components/common/ShareModal.tsx +++ b/src/components/common/ShareModal.tsx @@ -12,7 +12,7 @@ export default function ShareModal() { const { handleShare } = useLoadKakaoScript(); const router = useRouter(); const shareURL = window.location.href; - const { isCopied, onCopyClipboard } = useCopyClipboard({ + const { isCopied, onCopyClipboard, onCloseCopyClipboard } = useCopyClipboard({ url: shareURL, }); @@ -44,7 +44,7 @@ export default function ShareModal() {
- {isCopied && } +
); } diff --git a/src/components/pages/detail/URLShareButton.tsx b/src/components/pages/detail/URLShareButton.tsx index 107c3964..2eb82c01 100644 --- a/src/components/pages/detail/URLShareButton.tsx +++ b/src/components/pages/detail/URLShareButton.tsx @@ -3,14 +3,15 @@ import useCopyClipboard from '@/hooks/useCopyClipboard.ts'; import { CopiedNotice } from '@/components/common/CopiedNotice.tsx'; export default function URLShareButton() { - const { isCopied, onCopyClipboard } = useCopyClipboard(); + const { isCopied, onCopyClipboard, onCloseCopyClipboard } = + useCopyClipboard(); return (
- {isCopied && } + {}
); } diff --git a/src/hooks/useCopyClipboard.ts b/src/hooks/useCopyClipboard.ts index bde4b6f8..7d1c919b 100644 --- a/src/hooks/useCopyClipboard.ts +++ b/src/hooks/useCopyClipboard.ts @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; async function copyURL(url?: string) { const targetUrl = url ? url : window.document.location.href; @@ -28,10 +28,14 @@ export default function useCopyClipboard(props?: Props) { }; }, [isCopied, props?.ms]); - const onCopyClipboard = async () => { + const onCopyClipboard = useCallback(async () => { await copyURL(props?.url); setIsCopied(true); - }; + }, [props?.url]); - return { isCopied, onCopyClipboard }; + const onCloseCopyClipboard = useCallback(() => { + setIsCopied(false); + }, []); + + return { isCopied, setIsCopied, onCopyClipboard, onCloseCopyClipboard }; } From de11d57c9c97b414895f2d68b9ec3cd432773a47 Mon Sep 17 00:00:00 2001 From: nyoung113 Date: Sun, 30 Jun 2024 22:14:48 +0900 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20if=20=EB=AC=B8=20=EB=A6=AC?= =?UTF-8?q?=ED=8C=A9=ED=84=B0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/CopiedNotice.tsx | 28 ++++++++++++-------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/src/components/common/CopiedNotice.tsx b/src/components/common/CopiedNotice.tsx index 6d2271f1..9f79cecb 100644 --- a/src/components/common/CopiedNotice.tsx +++ b/src/components/common/CopiedNotice.tsx @@ -5,20 +5,18 @@ interface Props { handleClose: () => void; } export function CopiedNotice({ isOpen, handleClose }: Props) { - if (isOpen) { - return ( -
-
-
- - 링크 복사 완료 -
-
- ); - } + if (!isOpen) return null; - return null; + return ( +
+
+
+ + 링크 복사 완료 +
+
+ ); }