feat: share

jakepro657 · Feb 10, 2024 · cd2ec2b · cd2ec2b
1 parent 1a5142f
commit cd2ec2b
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 0 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,6 +8,7 @@ import ImageGallery from './components/sections/ImageGallery'
 import Intro from './components/sections/intro'
 import Invitation from './components/sections/Invitation'
 import Map from './components/sections/Map'
+import Share from './components/sections/Share'
 import Video from './components/sections/Video'
 
 import FullScreenMessage from './components/shared/FullScreenMessage'
@@ -80,6 +81,7 @@ function App() {
             <Calendar date={date} />
             <Map location={location} />
             <Contact groom={groom} bride={bride} />
+            <Share date={date} groomName={groom.name} brideName={bride.name} />
             {/* {JSON.stringify(wedding)} */}
         </div>
     )

diff --git a/src/components/sections/Share.module.scss b/src/components/sections/Share.module.scss
@@ -0,0 +1,10 @@
+.wrap-share {
+    display: flex;
+    justify-content: center;
+
+    svg {
+        width: 24px;
+        height: 24px;
+        margin-right: 10px;
+    }
+}
diff --git a/src/components/sections/Share.tsx b/src/components/sections/Share.tsx
@@ -0,0 +1,122 @@
+import React, { useEffect } from 'react'
+import classNames from 'classnames/bind'
+import Section from '../shared/Section'
+import styles from './Share.module.scss'
+import { Location } from '@/models/wedding'
+import { format, parseISO } from 'date-fns'
+import { ko } from 'date-fns/locale'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+
+const cx = classNames.bind(styles)
+
+declare global {
+    interface Window {
+        Kakao: any
+    }
+}
+
+interface ShareProps {
+    groomName: string
+    brideName: string
+    date: string
+}
+
+function Share({ brideName, date, groomName }: ShareProps) {
+    useEffect(() => {
+        const script = document.createElement('script')
+        script.src = `https://t1.kakaocdn.net/kakao_js_sdk/2.3.0/kakao.min.js`
+        script.async = true
+
+        document.head.appendChild(script)
+
+        script.onload = () => {
+            if (!window.Kakao.isInitialized()) {
+                window.Kakao.init(process.env.REACT_APP_KAKAO_API_KEY)
+            }
+        }
+    }, [])
+
+    const handleShareKakao = () => {
+        window.Kakao.Share.sendDefault({
+            objectType: 'feed',
+            content: {
+                title: `${groomName} & ${brideName} 결혼합니다.`,
+                description: `${format(parseISO(date), 'M월 d일 eeee aaa h시', { locale: ko })}`,
+                imageUrl: '',
+                link: {
+                    mobileWebUrl: window.location.origin,
+                    webUrl: window.location.origin,
+                },
+            },
+            buttons: [
+                {
+                    title: '청첩장 보러가기',
+                    link: {
+                        mobileWebUrl: window.location.origin,
+                        webUrl: window.location.origin,
+                    },
+                },
+            ],
+        })
+    }
+
+    return (
+        <Section title="공유하기">
+            <div className={cx('wrap-share')}>
+                <button onClick={handleShareKakao}>
+                    <Kakao />
+                </button>
+                <CopyToClipboard
+                    text={window.location.origin}
+                    onCopy={() => window.alert('주소가 복사되었습니다.')}
+                >
+                    <button>
+                        <Clipboard />
+                    </button>
+                </CopyToClipboard>
+            </div>
+        </Section>
+    )
+}
+
+function Kakao() {
+    return (
+        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+            <title />
+            <g id="kakao_talk_chat_media_social">
+                <path d="M29.88,13.06a1,1,0,0,0-1,1c0,5.42-5.78,9.83-12.88,9.83a15.91,15.91,0,0,1-2.19-.16,1,1,0,0,0-.89.34,13.88,13.88,0,0,1-4,3,8.32,8.32,0,0,0,.71-3.91,1,1,0,0,0-.56-.81c-3.75-1.83-6-4.92-6-8.28C3.12,8.63,8.9,4.22,16,4.22A14.15,14.15,0,0,1,26.87,8.79,1,1,0,1,0,28.4,7.5C25.64,4.2,21,2.22,16,2.22,7.79,2.22,1.12,7.53,1.12,14.06c0,4,2.44,7.6,6.56,9.8a8.82,8.82,0,0,1-1.29,3.91A.85.85,0,0,0,6.3,28a1.39,1.39,0,0,0,.54,1.52,1.35,1.35,0,0,0,1.52.07,18.49,18.49,0,0,0,5.72-3.8,18.71,18.71,0,0,0,1.92.11c8.21,0,14.88-5.31,14.88-11.83A1,1,0,0,0,29.88,13.06Z" />
+                <path d="M10.79,17.62A1,1,0,0,0,12.08,17l1.06-2.76L14.21,17a1,1,0,0,0,.93.64,1.13,1.13,0,0,0,.36-.06,1,1,0,0,0,.58-1.3l-2-5.18a1,1,0,0,0-1.87,0l-2,5.18A1,1,0,0,0,10.79,17.62Z" />
+                <path d="M17.51,10.5a1,1,0,0,0-1,1v5.18a1,1,0,0,0,1,1h2.56a1,1,0,0,0,0-2H18.51V11.5A1,1,0,0,0,17.51,10.5Z" />
+                <path d="M8.46,17.68a1,1,0,0,0,1-1V12.5h.75a1,1,0,0,0,0-2H6.71a1,1,0,0,0,0,2h.75v4.18A1,1,0,0,0,8.46,17.68Z" />
+                <path d="M22.46,10.5a1,1,0,0,0-1,1v5.18a1,1,0,0,0,2,0v-1.2L25,17.32a1,1,0,0,0,.77.36A1,1,0,0,0,26.53,16l-2-2.34,1.8-1.41a1,1,0,0,0-1.23-1.58L23.46,12V11.5A1,1,0,0,0,22.46,10.5Z" />
+            </g>
+        </svg>
+    )
+}
+
+function Clipboard() {
+    return (
+        <svg
+            id="Layer_1"
+            version="1.1"
+            viewBox="0 0 512 512"
+            xmlSpace="preserve"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+        >
+            <g>
+                <g>
+                    <path d="M160,160h192c-1.7-20-9.7-35.2-27.9-40.1c-0.4-0.1-0.9-0.3-1.3-0.4c-12-3.4-20.8-7.5-20.8-20.7V78.2    c0-25.5-20.5-46.3-46-46.3c-25.5,0-46,20.7-46,46.3v20.6c0,13.1-8.8,17.2-20.8,20.6c-0.4,0.1-0.9,0.4-1.4,0.5    C169.6,124.8,161.9,140,160,160z M256,64.4c7.6,0,13.8,6.2,13.8,13.8c0,7.7-6.2,13.8-13.8,13.8c-7.6,0-13.8-6.2-13.8-13.8    C242.2,70.6,248.4,64.4,256,64.4z" />
+                    <path d="M404.6,63H331v14.5c0,10.6,8.7,18.5,19,18.5h37.2c6.7,0,12.1,5.7,12.4,12.5l0.1,327.2c-0.3,6.4-5.3,11.6-11.5,12.1    l-264.4,0.1c-6.2-0.5-11.1-5.7-11.5-12.1l-0.1-327.3c0.3-6.8,5.9-12.5,12.5-12.5H162c10.3,0,19-7.9,19-18.5V63h-73.6    C92.3,63,80,76.1,80,91.6V452c0,15.5,12.3,28,27.4,28H256h148.6c15.1,0,27.4-12.5,27.4-28V91.6C432,76.1,419.7,63,404.6,63z" />
+                </g>
+                <rect height="16" width="112" x="144" y="192" />
+                <rect height="16" width="160" x="144" y="288" />
+                <rect height="16" width="129" x="144" y="384" />
+                <rect height="16" width="176" x="144" y="336" />
+                <rect height="16" width="208" x="144" y="240" />
+            </g>
+        </svg>
+    )
+}
+
+export default Share