이 글의 성격은 무엇인가요?
질문 / 문제 해결
내용을 설명해주세요
Next JS로 포토샵, 그림판 앱을 만들고 있는데, 한 번에 편집하기 기능이 있습니다.
한 번에 편집은 가능한데, 공유하기를 하면 1장씩만 카카오톡으로 올릴 수 있더라구요.
그렇다고 모바일에서 zip으로 다운로드하게 하는건 편의성이 떨어질거같고..
여러 장 공유하는 방법이 있을까요? 아니면 아직 미지원인가요?
안녕하세요 
웹 표준 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장으로 합쳐서 보내네요.
한 번에 공유해야되는데..ㅠㅠ