Merge pull request #97 from Devminjeong-eum/fix/DEV-133

fix: URL 공유 모달 뜰 때, 한번 더 클릭 시 없어지도록 변경
Devminjeong-eum · Jun 30, 2024 · beef363 · beef363
2 parents 82e08c2 + de11d57
commit beef363
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git a/src/components/common/CopiedNotice.tsx b/src/components/common/CopiedNotice.tsx
@@ -1,8 +1,17 @@
 import CheckSvg from '@/components/svg-component/CheckSvg.tsx';
 
-export function CopiedNotice() {
+interface Props {
+  isOpen: boolean;
+  handleClose: () => void;
+}
+export function CopiedNotice({ isOpen, handleClose }: Props) {
+  if (!isOpen) return null;
+
   return (
-    <div className="w-screen h-screen fixed left-0 top-0 flex justify-center items-center z-10">
+    <div
+      className="w-screen h-screen fixed left-0 top-0 flex justify-center items-center z-10"
+      onClick={handleClose}
+    >
       <div className="w-full h-screen flex justify-center items-center max-w-[430px] bg-[#000000] opacity-70 mix-blend-multiply" />
       <div className="absolute flex gap-1.5 py-4 px-[22px] rounded-[16px] bg-[#05050555]">
         <CheckSvg />

diff --git 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() {
           </div>
         </div>
       </div>
-      {isCopied && <CopiedNotice />}
+      <CopiedNotice isOpen={isCopied} handleClose={onCloseCopyClipboard} />
     </div>
   );
 }
diff --git 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 (
     <div>
-      <button onClick={() => onCopyClipboard()}>
+      <button onClick={onCopyClipboard}>
         <ExternalSvg />
       </button>
-      {isCopied && <CopiedNotice />}
+      {<CopiedNotice isOpen={isCopied} handleClose={onCloseCopyClipboard} />}
     </div>
   );
 }
diff --git 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 };
 }