QR Code 생성기

QR Code 생성기

개요

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

QR 코드 소개

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

프로젝트 구현

1. 프로젝트 생성

   • 아래 명령어로 Next.js 프로젝트를 생성한다.

   npx create-next-app@latest

2. 패키지 설치

   • 프로젝트 구현에 필요한 패키지를 설치한다.

   npm install react-qr-code file-saver @types/file-saver framer-motion

3. UI 구성

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

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

4. 데이터 입력 컴포넌트 구현

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

   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;

5. QR 코드 생성 컴포넌트 구현

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

   '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;

6. 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');
     }
   };
    
   // ...

7. 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>
   // ...

8. 완성된 QRGenerator 코드

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

  '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 생성기를 만들어 볼 수 있었다.