1. react-share 패키지 설치:

npm install react-share

2.컴포넌트 파일에서 공유 버튼 및 아이콘 가져오기:

"use client";

import {
    FacebookShareButton, TwitterShareButton, WhatsappShareButton, EmailShareButton,
    FacebookIcon, TwitterIcon, WhatsappIcon, EmailIcon
} from "react-share";

3.공유할 URL 설정:

const shareUrl = `${process.env.NEXT_PUBLIC_DOMAIN}/properties/${property._id}`

4.기존 버튼 제거 후 새로운 공유 버튼 추가:

return (
    <>
        <h3 className="text-xl font-bold text-center pt-2">Share this property</h3>
        <div className="flex gap-3 justify-center pb-5">
            <FacebookShareButton url={shareUrl} quote={property.name} hashtag={`#${property.type.replace(/\s/g, "")}forrent`}>
                <FacebookIcon size={40} round />
            </FacebookShareButton>
            
            <TwitterShareButton url={shareUrl} title={property.name} hashtags={[`${property.type.replace(/\s/g, "")}forrent`]}>
                <TwitterIcon size={40} round />
            </TwitterShareButton>
            
            <WhatsappShareButton url={shareUrl} title={property.name} separator=":: ">
                <WhatsappIcon size={40} round />
            </WhatsappShareButton>
            
            <EmailShareButton url={shareUrl} subject={property.name} body={`Check out this property listing: ${shareUrl}`}>
                <EmailIcon size={40} round />
            </EmailShareButton>
        </div>
    </>
);

• 공유 버튼 별로 설정:

  • Facebook: url, quote, hashtag
  • Twitter: url, title, hashtags
  • Whatsapp: url, title, separator
  • Email: url, subject, body

• 프로젝트 실행 후 확인:

  • Facebook 공유는 실제 배포 환경에서만 작동할 수 있습니다.
  • Twitter, Whatsapp, Email 공유 버튼은 즉시 확인할 수 있습니다.

샘플

ShareButtons.tsx

"use client";
import React from "react";
import { PropertyCardProps } from "./PropertyCard";
import { FacebookShareButton, TwitterShareButton, WhatsappShareButton, EmailShareButton,
  FacebookIcon, TwitterIcon, WhatsappIcon, EmailIcon
} from 'react-share'

const ShareButtons: React.FC<PropertyCardProps> = ({ property }) => {
  const shareUrl = `${process.env.NEXTAUTH_URL}/properties/${property._id}`;
  const shareTitle = property.name;
  const shareDescription = property.description;
  const shareRate = property.rates.monthly ? `월세: ${property.rates.monthly.toLocaleString()}원` : 
                     property.rates.weekly ? `주간: ${property.rates.weekly.toLocaleString()}원` : 
                     `일간: ${property.rates.nightly.toLocaleString()}원`;

  const message = `${shareTitle} - ${shareDescription}\n${shareRate}\n자세한 정보는 링크를 확인하세요:`;

  return (
    <>
      <h3 className="text-xl font-bold text-center pt-2">부동산 공유</h3>
      <div className="flex gap-3 justify-center pb-5">
        <FacebookShareButton url={shareUrl} title={message} hashtag={`#${property.type.replace(/\s/g, '')}ForRent`} >
          <FacebookIcon size={40} round={true} />
        </FacebookShareButton>
        <TwitterShareButton url={shareUrl} title={shareTitle}
          hashtags={[`#${property.type.replace(/\s/g, '')}ForRent`]}>
          <TwitterIcon size={40} round={true} />
        </TwitterShareButton>
        <WhatsappShareButton url={shareUrl} title={shareTitle}
          separator="::">
          <WhatsappIcon size={40} round={true} />
        </WhatsappShareButton>
        <EmailShareButton url={shareUrl} subject={shareTitle}
         body={`부동산 공유 : ${shareUrl}`}>
          <EmailIcon size={40} round={true} />
        </EmailShareButton>

      </div>
      {/* <button className="bg-orange-500 hover:bg-orange-600 text-white font-bold w-full py-2 px-4 rounded-full flex items-center justify-center">
        <i className="fas fa-share mr-2"></i> 부동산 공유
      </button> */}
    </>
  );
};

export default ShareButtons;