기능 | 공유하기 - ssseok/wedding.invitation GitHub Wiki

목적

  • 청첩장을 다른 사람들과 공유할 수 있습니다.

설정

    <script
      src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js"
      integrity="sha384-DKYJZ8NLiK8MN4/C5P2dtSmLQ4KwPaoqAfyA/DfmEc1VDxu4yyC7wy6K1Hs90nka"
      crossorigin="anonymous"
      defer
    ></script>
  • SDK 버전에 맞게 코드를 복사해와 최상위 루트에 있는 index.html에 넣어줍니다.
import ReactDOM from 'react-dom/client';
import App from '@/App.tsx';
import '@/index.css';
import HotToast from '@/common/components/hot-toast';

// 초기화 코드
window.Kakao.init(import.meta.env.VITE_KAKAO_API_KEY);
window.Kakao.isInitialized();

ReactDOM.createRoot(document.getElementById('root')!).render(
  <>
    <App />
    <HotToast />
  </>,
);
  • 최상위 루트인 main.tsx에 초기화해주는 코드를 넣어줍니다.

설치

bunx --bun shadcn@latest add dropdown-menu

코드

import { copy } from '@/lib/copy';
import { URL } from '@/lib/utils';
import { useState } from 'react';
import { Share2, Link } from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/common/components/ui/dropdown-menu';

export default function Share() {
  const [open, setOpen] = useState(false);

  const onCopy = () => {
    copy(URL);
    setOpen(false);
  };

  const kakaoSend = (image: {
    imageUrl: string;
    imageWidth: number;
    imageHeight: number;
  }) => {
    window.Kakao.Share.sendDefault({
      objectType: 'feed',
      content: {
        ...image,
        title: '○○○ ♥ ○○○ 결혼합니다',
        description: '○○월 ○○일 ○ ○○시 ○○분\n○○, ○○○○○○',
        link: {
          mobileWebUrl: URL,
          webUrl: URL,
        },
      },
      buttons: [
        {
          title: '모바일 청첩장 보기',
          link: {
            mobileWebUrl: URL,
            webUrl: URL,
          },
        },
      ],
    });
  };

  const kakaoShareFeed = () => {
    kakaoSend({
      imageUrl:
        'https://imagedelivery.net/9PYUDgg_yiUa2u-j77sFBg/d5b8c0a2-13c7-4e81-70ee-20f263346200/tog',
      imageWidth: 600,
      imageHeight: 450,
    });
  };

  return (
    <DropdownMenu open={open} onOpenChange={setOpen}>
      <DropdownMenuTrigger>
        <Share2 className='w-5 h-5' />
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem onClick={onCopy}>
          <Link className='w-4 h-4' />
          링크 복사하기
        </DropdownMenuItem>
        <DropdownMenuItem
          className='flex justify-between'
          onClick={kakaoShareFeed}
        >
          <svg
            xmlns='http://www.w3.org/2000/svg'
            width='1em'
            height='1em'
            viewBox='0 0 24 24'
          >
            <path
              fill='currentColor'
              d='M12 3c5.8 0 10.501 3.664 10.501 8.185c0 4.52-4.701 8.184-10.5 8.184a13.51 13.51 0 0 1-1.727-.11l-4.408 2.883c-.501.265-.678.236-.472-.413l.892-3.678c-2.88-1.46-4.785-3.99-4.785-6.866c0-4.52 4.7-8.185 10.5-8.185Zm5.908 8.06l1.47-1.424a.472.472 0 0 0-.656-.678l-1.928 1.866V9.282a.472.472 0 0 0-.944 0v2.557a.472.472 0 0 0 0 .222V13.5a.472.472 0 0 0 .944 0v-1.363l.427-.413l1.428 2.033a.472.472 0 1 0 .773-.543l-1.514-2.155Zm-2.958 1.924h-1.46V9.297a.472.472 0 0 0-.943 0v4.159c0 .26.21.472.471.472h1.932a.472.472 0 1 0 0-.944Zm-5.857-1.091l.696-1.708l.638 1.707H9.093Zm2.523.487l.002-.016a.469.469 0 0 0-.127-.32l-1.046-2.8a.69.69 0 0 0-.627-.474a.696.696 0 0 0-.653.447l-1.662 4.075a.472.472 0 0 0 .874.357l.332-.813h2.07l.298.8a.472.472 0 1 0 .884-.33l-.345-.926ZM8.294 9.302a.472.472 0 0 0-.471-.472H4.578a.472.472 0 1 0 0 .944h1.16v3.736a.472.472 0 0 0 .944 0V9.774h1.14a.472.472 0 0 0 .472-.472Z'
            ></path>
          </svg>
          카카오 초대장
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
  • 상태 관리
    • open => 드롭다운 메뉴의 열림/닫힘 상태를 관리하는 boolean 값입니다.
  • onCopy (링크 복사 함수)
    • copy component를 활용하여 복사하면 toast가 뜹니다.
  • kakaoSend (Kakao 공유 API를 호출하는 재사용 가능한 함수)
    • window.Kakao.Share.sendDefault API를 사용하여 카카오톡으로 콘텐츠를 공유합니다.
  • kakaoShareFeed (실제로 Kakao 공유를 실행하는 함수입니다.)
    • 특정 이미지 URL과 크기를 지정하여 kakaoSend 함수를 호출합니다.
    • 결혼식 청첩장의 대표 이미지를 설정합니다.

참고

https://developers.kakao.com/docs/latest/ko/javascript/download

https://developers.kakao.com/docs/latest/ko/javascript/getting-started

⚠️ **GitHub.com Fallback** ⚠️