앱인토스에서 2개 이상의 이미지를 한 번에 카카오톡 공유 가능한가요?

이 글의 성격은 무엇인가요?

질문 / 문제 해결

내용을 설명해주세요

Next JS로 포토샵, 그림판 앱을 만들고 있는데, 한 번에 편집하기 기능이 있습니다.
한 번에 편집은 가능한데, 공유하기를 하면 1장씩만 카카오톡으로 올릴 수 있더라구요.
그렇다고 모바일에서 zip으로 다운로드하게 하는건 편의성이 떨어질거같고..

여러 장 공유하는 방법이 있을까요? 아니면 아직 미지원인가요?

안녕하세요 :slight_smile:
웹 표준 API 사용을 막고 있지 않아서, 필요하시다면 표준 Web Share API를 직접 사용할 수 있습니다.
navigator.share({ files })로 전달하고, 실제 지원 여부는 공유 전에 navigator.canShare({ files })로 확인해주세요.

const files = [...]; // File[]

  if (
    typeof navigator.share === 'function' &&
    typeof navigator.canShare === 'function' &&
    navigator.canShare({ files })
  ) {
    await navigator.share({
      files,
      title: '편집한 이미지',
      text: `${files.length}장의 이미지를 공유합니다.`,
    });
  } else {
    // 미지원 환경 처리
  }

이렇게 했는데도 결과가 같습니다.
N개의 이미지를 편집 → 1번씩 카카오톡에 공유 x N번..

테스트 했을때는 여러 이미지를 동시에 공유할 수 있었는데, 혹시 재현 코드를 주실 수 있을까요 ?

/**
 * 대량 이미지 카카오톡 / 네이티브 공유 헬퍼
 */
export async function shareBatchToKakaoTalk(
  items: Array<{ name: string; dataUrl: string }>,
  title: string = "이미지 일괄 공유",
): Promise<{ success: boolean; message: string }> {
  if (items.length === 0) {
    return { success: false, message: "공유할 이미지가 없습니다." };
  }

  // 단일 파일인 경우 단일 공유로 위임
  if (items.length === 1) {
    const item = items[0];
    const filename = item.name.includes(".")
      ? item.name
      : `${item.name.replace(/\.[^/.]+$/, "") || "image"}.png`;
    return shareToKakaoTalk(item.dataUrl, title, filename);
  }

  // 1. Web Share API로 여러 이미지 파일 한 번에 (카카오톡 묶어보내기/네이티브 멀티 공유) 전송 시도
  if (
    typeof window !== "undefined" &&
    typeof navigator !== "undefined" &&
    typeof navigator.share === "function" &&
    typeof navigator.canShare === "function"
  ) {
    try {
      const filesArray = await Promise.all(
        items.map(async (item, idx) => {
          const res = await fetch(item.dataUrl);
          const blob = await res.blob();
          const itemMime = getMimeTypeFromDataUrl(item.dataUrl, item.name);
          const filename = item.name.includes(".")
            ? item.name
            : `${item.name.replace(/\.[^/.]+$/, "") || `photo_${idx + 1}`}.png`;
          return new File([blob], filename, { type: itemMime });
        }),
      );

      if (navigator.canShare({ files: filesArray })) {
        await navigator.share({
          files: filesArray,
          title: title || "편집한 이미지",
          text: `${filesArray.length}장의 이미지를 공유합니다.`,
        });
        return {
          success: true,
          message: "공유 창을 열었습니다!",
        };
      }
    } catch (err: unknown) {
      if (
        err &&
        typeof err === "object" &&
        "name" in err &&
        err.name === "AbortError"
      ) {
        return { success: true, message: "공유가 취소되었습니다." };
      }
      console.log("Web share batch API failed/skipped:", err);
    }
  }

  // 2. 앱인토스 환경에서 갤러리 일괄 저장 (saveBase64Data)
  let savedCount = 0;
  try {
    if (typeof window !== "undefined") {
      for (let i = 0; i < items.length; i++) {
        const item = items[i];
        const base64Data = item.dataUrl.includes(",")
          ? item.dataUrl.split(",")[1]
          : item.dataUrl;
        const itemMime = getMimeTypeFromDataUrl(item.dataUrl, item.name);
        const filename = item.name.includes(".")
          ? item.name
          : `${item.name.replace(/\.[^/.]+$/, "") || `photo_${i + 1}`}.png`;

        await saveBase64Data({
          data: base64Data,
          fileName: filename,
          mimeType: itemMime,
        });
        savedCount++;
      }
    }
  } catch (err) {
    console.log("saveBase64Data batch failed or not in Toss webview:", err);
  }

  if (savedCount === items.length && savedCount > 0) {
    return {
      success: true,
      message: `${savedCount}장의 이미지가 갤러리에 모두 저장되었습니다!`,
    };
  }

  // 3. 멀티 파일 공유 미지원 PC/웹 환경에서는 1개의 ZIP 파일로 다운로드
  try {
    const { downloadBatchAsZip } = await import("./zip-exporter");
    await downloadBatchAsZip(
      items.map((item, idx) => ({
        id: String(idx),
        name: item.name,
        dataUrl: item.dataUrl,
      })),
      "converted_images.zip",
    );
    return {
      success: true,
      message: `${items.length}개 이미지가 ZIP 파일로 다운로드되었습니다.`,
    };
  } catch (e) {
    console.error("Batch share fallback failed:", e);
    return {
      success: false,
      message: "저장 및 공유 처리 중 오류가 발생했습니다.",
    };
  }
}

입니다!

Next JS, Android, Galaxy S26U 입니다.

이것저것 수정해보았는데, 여러장의 이미지를 1장으로 합쳐서 보내네요.
한 번에 공유해야되는데..ㅠㅠ