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

'use client';

import './style.scss';
import { useEffect, useState } from 'react';
import { QRCodeSVG } from 'qrcode.react';
import { Button } from '@/components/ui/button';
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { getDateFilename } from '@/lib/utils/client';

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

export default function QRCode({ isEnable, open, onChange }: Props) {
	const [url, setUrl] = useState<string>('');

	useEffect(() => {
		if (typeof window !== 'undefined') {
			setUrl(window.location.href);
		}
	}, []);

	if (!isEnable) {
		return;
	}

	const handleDownload = () => {
		const svgData = new XMLSerializer().serializeToString(
			document.getElementById('qrCode')!
		);

		const canvas = document.createElement('canvas');
		const ctx = canvas.getContext('2d')!;
		const img = new Image();

		img.onload = () => {
			canvas.width = img.width;
			canvas.height = img.height;
			ctx.drawImage(img, 0, 0);
			const pngFile = canvas.toDataURL('image/png');

			const link = document.createElement('a');
			link.download = getDateFilename('qr');
			link.href = pngFile;
			link.click();
		};

		img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgData)));
	};

	return (
		<Dialog open={open} onOpenChange={onChange}>
			<DialogContent className='sm:max-w-md'>
				<DialogHeader>
					<DialogTitle>게시글 확인 QR</DialogTitle>
					<DialogDescription>
						아래 QR을 스캔하여 게시글을 확인할 수 있습니다.
					</DialogDescription>
				</DialogHeader>
				<div className='flex items-center justify-center space-x-2'>
					<QRCodeSVG id='qrCode' value={url} />
				</div>
				<DialogFooter className='sm:justify-center'>
					<DialogClose asChild>
						<Button type='button' variant='outline' className='hover:bg-blue-500 hover:text-white sm:w-24' onClick={handleDownload}>
							저장
						</Button>
					</DialogClose>
				</DialogFooter>
			</DialogContent>
		</Dialog>
	);
}