2023-04-23: 개인 프로젝트 도전기 (14주차) - 방구석에 놔둔 개발 노트

목표 정산

프리릴리즈요? 그런 거 없었다..

대신에 릴리즈가 되면 본격적으로 배치하려고 했던 매장에 사장님께서 그쪽에 바로 배치하겠다고 하셔서 프리 릴리즈가 아닌 정식 릴리즈가 되어버렸다.

다만, 그러기 위한 계정 생성이 많이 늦어져서 릴리즈가 또 늦어진 것은.. 다른 이야기다..

이번 주에 진행한 내용은 아래와 같다.

~~임시 QR 코드 발급창 추가~~
~~구글 애널리틱스 배치~~
이미지 업로드 기능 구현
~~추가 QA 진행~~
프리 릴리즈 진행

이번에 QR 코드 발급창을 만들면서 다운로드 기능을 구현해보기도 했는데, 업로드는 해본 적 있어도 다운로드를 만들어본 적은 없었기 때문에 되ㄴ게 신선한 경험이었다.

그리고 슬슬 기능을 이용하면서 얼마나 많은 사람들이 이 기능을 이용하는지도 파악하고 싶어서 구글 애널리틱스를 배치해봤다.

QR code API를 이용해 QR코드를 발급해보자

고객들이 대기 등록을 진행하기 위해서는 QR코드를 사진으로 찍어 들어간 페이지에서 진행하도록 해야 했다.

포스터로 따로 만들어서 발급해주는 식으로 진행하려고 했지만, 당장 대기 등록이 필요한 경우를 고려하여 QR Code 관련 이미지를 저장하거나 보여줄 수 있으면 좋겠다 싶은 생각에 임시로라도 관련 사항을 적용할 수 있도록 작업하고자 했다.

그러기 위해서는 QR 코드 이미지를 발급받을 수 있는 API가 필요했는데 어떤 API가 있을까 하다가, 아래와 같은 API 레퍼런스 사이트를 찾게 됐다.

QR code API

사용법은 아래와 같다.

https://api.qrserver.com/v1/create-qr-code/?size=(width)x(height)&data=(연결할 데이터)

위의 링크를 통해서 발급이 가능한 점을 참고하여, QR Code 이미지를 드러낼 모달창에 아래와 같이 코드를 작성했다.

<Modal isOpen={isOpen} onClose={onClose}>
  <ModalOverlay />
  <ModalContent wordBreak="keep-all" padding="1.5rem 0" margin="2rem 1rem">
    <ModalHeader
      fontSize="1.25rem"
      fontWeight="semibold"
      padding="0 1rem"
      textAlign="center"
      margin="0.5rem 0"
    >
      임시 QR 코드
    </ModalHeader>
    <ModalBody display="flex" flexDirection="column" gap="1rem">
      <Image
        src={`https://api.qrserver.com/v1/create-qr-code/?data=https://waitsecond.vercel.app/store/${loginStateCheck()}&size=250x250`}
      />
      코드 인쇄 등을 위해 이미지를 저장하고 싶으시면 아래를 클릭해주세요.
    </ModalBody>
        <ModalFooter
      display="flex"
      flexDirection="column"
      width="100%"
      gap="1rem"
    >
      <Button
        type="button"
        background="mainBlue"
        color="#FFFFFF"
        fontWeight="medium"
        fontSize="1.25rem"
        padding="0.5rem 0"
        width="100%"
        borderRadius="0.25rem"
        height="3rem"
        onClick={downloadQRCodeImage}
      >
        코드 이미지 다운로드
      </Button>
      <Button
        type="button"
        background="accentGray"
        color="#FFFFFF"
        fontWeight="medium"
        fontSize="1.25rem"
        padding="0.5rem auto"
        width="100%"
        borderRadius="0.25rem"
        height="3rem"
        onClick={onClose}
      >
        창 닫기
      </Button>
    </ModalFooter>
  </ModalContent>
</Modal>

발급된 QR 코드를 버튼을 통해 다운로드 받게 해볼까?

QR Code 이미지가 나타나는 것은 좋지만, 경우에 따라서는 QR Code를 다운로드 받고 싶은 경우도 있지 않을까?

그런 생각을 하니, QR Code 이미지를 다운로드할 방법도 고려해야겠다고 생각했다.

예전에 업로드를 구현한 적은 있지만, 다운로드를 구현해본 적은 없어서 조금 신기한 느낌이었다.

구글링으로 찾아본 결과, 다운로드를 구현하는 방법은 blob 객체에서 나온 데이터를 통해서 가상의 a태그를 만들고 그걸 클릭시킨 뒤, 해당 태그를 삭제하는 식으로 진행되는 듯 했다.

자바스크립트로 파일 다운로드하기

JavaScript를 사용하여 파일 다운로드

API를 통해서 데이터를 가져오도록 통신한 다음에, 받아온 데이터를 blob 객체로 받아온 뒤 이를 가지고 객체의 URL를 만들어내서 다운로드를 만들어내는 거였다.

구현된 코드는 아래와 같다.

const downloadQRCodeImage = (e: React.MouseEvent) => {
  e.preventDefault();
    
    // axios를 설치하지 않았으므로, fetch로 가볍게 처리
  // 지금 보니 async function으로 처리할까 싶기도 하다.
  const linkURL = `https://api.qrserver.com/v1/create-qr-code/?data=https://waitsecond.vercel.app/store/${loginStateCheck()}&size=800x800`;
  fetch(linkURL, {
    method: "GET",
  })
        // 위에서 fetch 통신을 통해서 응답받은 데이터를 blob 객체로 받아오도록 함.
    .then((response) => response.blob())
    .then((blob) => {
            // 받아온 blob 객체를 새로운 Blob 인스턴스로 배정
      const blobData = new Blob([blob]);

            // Blob 인스턴스로부터 Object URL 생성
      const fileObjectURL = window.URL.createObjectURL(blobData);

            // 다운로드를 받을 anchor 요소를 생성
      const downloadAnchor = document.createElement("a");

            // 다운로드 링크는 위에서 만든 Object URL을 하이퍼링크로 배정
      downloadAnchor.href = fileObjectURL;
      downloadAnchor.style.display = "none";

            // 다운로드 파일명을 QRCode.png로 적용
      downloadAnchor.download = "QRCode.png";

            // 다운로드 후 삭제 적용
      downloadAnchor.click();
      downloadAnchor.remove();

            // revokeObjectURL을 통해 생성한 객체 URL을 해체해 지우도록 한다.
      window.URL.revokeObjectURL(fileObjectURL);
    });
};