#100 feat: close modal after share

DDD-Community · Aug 26, 2024 · 2593185 · 2593185
1 parent 828b3bb
commit 2593185
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/src/app/(board)/board/[boardId]/_components/ShareBtn.tsx b/src/app/(board)/board/[boardId]/_components/ShareBtn.tsx
@@ -25,17 +25,23 @@ const ShareBtn = () => {
   }, [])
 
   const copyLink = () => {
-    return navigator.clipboard.writeText(currentURL)
+    navigator.clipboard.writeText(currentURL)
   }
 
   const { run, nextStep } = useTutorial()
+
   const handleClose = () => {
     setShowShareModal(false)
     if (run) {
       nextStep()
     }
   }
 
+  const handleShare = (shareFn: () => void) => {
+    shareFn()
+    setShowShareModal(false)
+  }
+
   return (
     <>
       <Share onClick={() => setShowShareModal(true)} className="w-6" />
@@ -50,31 +56,31 @@ const ShareBtn = () => {
               icon={<CopyIcon className="-rotate-45" />}
               bg="bg-gray-900"
               desc="링크 복사"
-              onClick={copyLink}
+              onClick={() => handleShare(copyLink)}
             />
             <Section.Item
               icon={<KakaoIcon />}
               bg="bg-kakao"
               desc="카카오톡"
-              onClick={shareToKakao}
+              onClick={() => handleShare(shareToKakao)}
             />
             <Section.Item
               icon={<IGIcon />}
               bg="bg-[url('/icons/sns/sns-ig-bg.png')]"
               desc="인스타그램"
-              onClick={shareToInsta}
+              onClick={() => handleShare(shareToInsta)}
             />
             <Section.Item
               icon={<XIcon />}
               bg="bg-[#000]"
               desc="X"
-              onClick={shareToX}
+              onClick={() => handleShare(shareToX)}
             />
             <Section.Item
               icon={<FacebookIcon />}
               bg="bg-facebook"
               desc="페이스북"
-              onClick={shareToFacebook}
+              onClick={() => handleShare(shareToFacebook)}
             />
           </Section>
           <Section title="보드 이미지 저장">

diff --git a/src/app/(board)/board/[boardId]/_hooks/useSnsShare.ts b/src/app/(board)/board/[boardId]/_hooks/useSnsShare.ts
@@ -26,7 +26,7 @@ const useSnsShare = () => {
       return
     }
 
-    if (!Kakao.isInitialized()) {
+    if (!Kakao || !Kakao.isInitialized()) {
       Kakao.init(process.env.NEXT_PUBLIC_KAKAO_API_KEY)
     }
 
@@ -56,26 +56,25 @@ const useSnsShare = () => {
   }
 
   const shareToInsta = () => {
+    let url
     if (isIOS) {
-      window.open('https://www.instagram.com/create/story')
+      url = 'https://www.instagram.com/create/story'
     } else if (isAndroid) {
-      window.open(
-        'intent://instagram.com/#Intent;scheme=https;package=com.instagram.android;end',
-      )
+      url =
+        'intent://instagram.com/#Intent;scheme=https;package=com.instagram.android;end'
     } else {
-      // desktop
-      window.open('https://www.instagram.com/')
+      url = 'https://www.instagram.com/'
     }
+
+    window.open(url)
   }
 
   const shareToFacebook = () => {
     window.open(`https://www.facebook.com/sharer.php?u=${window.location.href}`)
   }
 
   const shareToX = () => {
-    return window.open(
-      `https://twitter.com/intent/tweet?url=${window.location.href}`,
-    )
+    window.open(`https://twitter.com/intent/tweet?url=${window.location.href}`)
   }
 
   return { shareToKakao, shareToInsta, shareToFacebook, shareToX }