[#98] Feat: 복사 짤 util 함수 구현

[hyeonjinan096]

📝 작업 내용

이미지 상세 모달 api 코드는 어느정도 완료한 상태인데 ui 머지 후 진행하는게 좋을 것 같아
이미지 복사 기능 함수를 구현했습니다.

이미지를 복사하여 클립보드에 저장합니다.
navigator.clipboard.write(data)를 사용합니다.

클립보드 API에서 제공하는 데이터 형식은 text, html, png 이미지 데이터로 제한되어있습니다.
따라서 서버에 있는 jpg파일을 png로 변환하는 로직을 추가했습니다.
파일 변환은 jpg 이미지를 <canvas> 요소에 그려서 png이미지로 변환합니다.

test는 layout-with-chat> index파일에 다음과 같이 버튼을 추가해주시면 될 것 같습니다:)

import { createFileRoute } from "@tanstack/react-router";
import copyZzal from "@/utils/copyZzal";
import { debounce } from "@/utils/debounce";

const Home = () => {
  const handleCopyClick = debounce(() => {
    copyZzal(
      "https://zzalmyu-bucket.s3.ap-northeast-2.amazonaws.com/upload/keroro9073%40gmail.comtemp_image10005225818988034545.jpg",
    );
  }, 500);

  return (
    <div>
      <button onClick={handleCopyClick}>복사 test 버튼</button>
    </div>
  );
};

export const Route = createFileRoute("/_layout-with-chat/")({
  component: Home,
});

📍 기타 (선택)

MDN문서 : Clipboard: write() method
stackoverflow : how to copy an image to clipboard?
close #98

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
zzalmyu-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 5, 2024 4:15pm

[Kim-Jaemin420]

LGTM!

[choi-ik]

LGTM!!!🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀 X 9억