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

'use client';

import './style.scss';
import { useCallback } 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 handleDownload = useCallback(() => {
		const svgElement = document.getElementById('qrCode');
		if (!svgElement) {
			return;
		}

		const svgData = new XMLSerializer().serializeToString(svgElement);
		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)));
	}, []);

	if (!isEnable) {
		return null;
	}

	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={window.location.href} />
				</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>
	);
}