bitforum-frontend/app/(forum)/post/_component/SnsShare.tsx

'use client';

import './style.scss';
import { useCallback } from 'react';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faNairaSign } from '@fortawesome/free-solid-svg-icons';
import { faFacebook, faTwitter, faReddit } from '@fortawesome/free-brands-svg-icons';

type Props = {
	isEnable: boolean;
	open: boolean;
	onChange: (open: boolean) => void;
}

export default function SnsShare({ isEnable, open, onChange }: Props)
{
	const handleSnsShare = useCallback((type: string) => {
		if (type) {
			let url = encodeURIComponent(window.location.href);

			switch (type) {
				case 'facebook':
					url = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
					break;
				case 'twitter':
					url = `https://twitter.com/intent/tweet?url=${url}`;
					break;
				case 'reddit':
					url = `https://www.reddit.com/submit?url=${url}`;
					break;
				case 'band':
					url = `https://band.us/plugin/share?body=${url}`;
					break;
				default:
					return;
			}

			const width = 600;
			const height = 400;
			const left = (window.screenX + (window.outerWidth - width) / 2);
			const top = (window.screenY + (window.outerHeight - height) / 2);
			window.open(url, '_blank', `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`);
		}

		onChange(false);
	}, []);

	if (!isEnable) {
		return;
	}

	return (
		<Dialog open={open} onOpenChange={onChange}>
			<DialogContent className='sm:max-w-md'>
				<DialogHeader>
					<DialogTitle>SNS 공유</DialogTitle>
				</DialogHeader>
				<div className='flex flex-col gap-2'>
					<Button variant='outline' onClick={() => handleSnsShare("facebook")}><FontAwesomeIcon icon={faFacebook} /> Facebook</Button>
					<Button variant='outline' onClick={() => handleSnsShare("twitter")}><FontAwesomeIcon icon={faTwitter} /> Twitter</Button>
					<Button variant='outline' onClick={() => handleSnsShare("reddit")}><FontAwesomeIcon icon={faReddit} /> Reddit</Button>
					<Button variant='outline' onClick={() => handleSnsShare("band")}><FontAwesomeIcon icon={faNairaSign} /> Band</Button>
				</div>
			</DialogContent>
		</Dialog>
	);
}