QR Code 생성기 | Woongsnote

개요

QR Code 생성기를 구현하는 방법을 작성해보려 한다. Next.js와 TypeScript를 사용하여 Data를 입력하고 생성 버튼을 클릭하면, QR 코드가 생성되고, 생성된 QR 코드는 바로 다운로드할 수 있는 서비스이다.

QR 코드 소개

QR Code는 Quick Response Code의 약자로, 빠르고 쉽게 정보를 전달하는 데 사용되는 2차원 바코드다.

프로젝트 구현

프로젝트 생성
- 아래 명령어로 Next.js 프로젝트를 생성한다.
```
npx create-next-app@latest
```
패키지 설치
- 프로젝트 구현에 필요한 패키지를 설치한다.
```
npm install react-qr-code file-saver @types/file-saver framer-motion
```

UI 구성

프로젝트의 UI를 구성하기 위해, 먼저, 제목 부분과, QR 생성기 부분으로 나눠서 구현할 것이다.
QR 생성기에 입력 필드, QR 코드 생성 버튼, 그리고 QR 코드 표시 영역을 추가한다.

app/page.tsx

import QRGenerator from '@/components/QRGenerator';
import Title from '@/components/Title';
 
export default function Home() {
  return (
    <main>
      <Title />
      <QRGenerator />
    </main>
  );
}

데이터 입력 컴포넌트 구현

QR 코드에 들어갈 내용을 입력하기 위한 입력 필드를 구현한다.

QRCodeInput.tsx

interface QRCodeInputProps {
  value: string;
  onChange: (value: string) => void;
}
 
const QRCodeInput = ({ value, onChange }: QRCodeInputProps) => {
  return (
    <input
      type="text"
      value={value}
      className="mx-auto mt-4 w-full rounded-lg border px-4 text-lg md:w-3/4"
      placeholder="Enter Text"
      onChange={(e) => onChange(e.target.value)}
      autoFocus
    />
  );
};
 
export default QRCodeInput;

QR 코드 생성 컴포넌트 구현

QR 코드 생성을 위해 react-qr-code 라이브러리를 사용해서 구현한다.

QRGenerator.tsx

'use client'; // useState 사용을 위해, client component 사용
 
import { useState } from 'react';
import saveAs from 'file-saver';
import QRCode from 'react-qr-code';
import { motion } from 'framer-motion';
import QRCodeInput from './QRCodeInput';
import Button from './Button';
 
const QRGenerator = () => {
  const [qrData, setQrData] = useState<string>('');
  const [isGenerated, setIsGenerated] = useState<boolean>(false);
 
  const handleInputChange = (value: string) => {
    setQrData(value);
    setIsGenerated(false);
  };
 
  const generateQRCode = () => {
    if (qrData) {
      setIsGenerated(true);
    }
  };
 
  return (
    <>
      <QRCodeInput value={qrData} onChange={handleInputChange} />
      <Button
        onClick={generateQRCode}
        disabled={qrData === ''}
        title="Generate QR Code"
      />
      {isGenerated && (
        <>
          <div className="border p-2">
            <QRCode value={qrData} />
          </div>
        </>
      )}
    </>
  );
};
 
export default QRGenerator;

QR 코드 저장 기능에 대한 함수 구현

생성된 QR 코드를 이미지로 저장하기 위해 file-saver 라이브러리를 사용했다.

import saveAs from 'file-saver';
// ...
const saveQRCode = () => {
  if (isGenerated) {
    const svgString = document.querySelector('svg')?.outerHTML;
 
    if (!svgString) return;
 
    const blob = new Blob([svgString], { type: 'image/svg+xml' });
    saveAs(blob, 'qrcode.svg');
  }
};
 
// ...

QR Code 생성될 때, 애니메이션 추가

QR Code가 생성될 때, framer-motion을 사용하여 애니메이션을 추가했다.

// ...
<motion.div
  className="border p-2"
  initial={{ opacity: 0, scale: 0.5 }}
  animate={{ opacity: 1, scale: 1 }}
  transition={{ duration: 0.5 }}
>
  <QRCode value={qrData} />
</motion.div>
// ...

완성된 QRGenerator 코드

위 내용이 모두 반영된 **최종 컴포넌트(QRGenerator)**의 코드다.

QRGenerator.tsx

'use client';
 
import { useState } from 'react';
import saveAs from 'file-saver';
import QRCode from 'react-qr-code';
import { motion } from 'framer-motion';
import QRCodeInput from './QRCodeInput';
import Button from './Button';
 
const QRGenerator = () => {
  const [qrData, setQrData] = useState<string>('');
  const [isGenerated, setIsGenerated] = useState<boolean>(false);
 
  const handleInputChange = (value: string) => {
    setQrData(value);
    setIsGenerated(false);
  };
 
  const generateQRCode = () => {
    if (qrData) {
      setIsGenerated(true);
    }
  };
 
  const saveQRCode = () => {
    if (isGenerated) {
      const svgString = document.querySelector('svg')?.outerHTML;
 
      if (!svgString) return;
 
      const blob = new Blob([svgString], { type: 'image/svg+xml' });
      saveAs(blob, 'qrcode.svg');
    }
  };
 
  return (
    <>
      <QRCodeInput value={qrData} onChange={handleInputChange} />
      <Button
        onClick={generateQRCode}
        disabled={qrData === ''}
        title="Generate QR Code"
      />
      {isGenerated && (
        <>
          <motion.div
            className="border p-2"
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5 }}
          >
            <QRCode value={qrData} />
          </motion.div>
          <Button
            onClick={saveQRCode}
            disabled={!isGenerated}
            title="Save QR Code"
          />
        </>
      )}
    </>
  );
};
 
export default QRGenerator;

구현 결과

결론

이미 만들어진 QR Code 라이브러리를 활용해서, 쉽고 빠르게 QR Code 생성기를 만들어 볼 수 있었다.