Pdf나 json 파일 카카오톡 공유 버그

개발
,
1

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

질문 / 문제 해결

내용을 설명해주세요

PDF나 json 파일을 만들어서 카카오톡에 공유하는 기능이 있어서 테스트를 합니다.
ait를 올린 후, 푸시 메시지로 테스트를 해보면 카카오톡 공유하기 UI가 나오는 경우가 있고 나오지 않는 경우가 있습니다.
문제는 이 현상이 나왔을 때로 롤백을 해도 안되는 경우가 있습니다.
테스트 환경에서도 카카오톡 공유하기가 잘 안되는 버그가 있는거 같은데…
됐다 안됏다 하니 이거 뭐 어떻게 말로 표현할 수가 없네요..;;

2

image
image1920×1727 256 KB

방금 재현되어서 스샷 첨부합니다.

왼쪽에서는 카카오톡 공유가 된 상태이고 공유 팝업 UI가 잘 나옵니다.

그리고 다시 시도하면 안됩니다. 간헐적으로 발생하니 버그를 잡을 수가 없네요.

SDK 문제일까요?

3

안녕하세요 :slight_smile:
간헐적으로 시스템 공유창이 안열리는 경우가 있는걸까요 ?

4

네 맞습니다.

자주그러는것같아요

그리고 이제 샌드박스 미지원이니 테스트하기가 너무 힘듭니다

5

재현이 안되는걸까요?ㅠ.ㅠ

6

ㅜ.ㅜ 좀더 기다려야 하나요…

7

답변이 늦었습니다 :man_bowing:
웹 표준 Web Share API의 navigator.share()를 사용해서 파일 공유를 테스트해봤습니다.

공유 전에 navigator.canShare({ files: [file] })로 PDF/JSON 파일 공유 가능 여부를 확인했고,
가능할 때 navigator.share({ files: [file] })를 호출하니 시스템 공유 시트가 정상적으로 열리고 파일 공유도 잘 동작했습니다.

혹시 사용하신 코드 공유해주실 수 있을까요?

8

아래 코드대로 했습니다.

말씀 해주신대로 수정을 했더니 처음엔 잘 나오더니 그 이후로는 다시 안됩니다.

캐싱 같은게 남아 있는건지 …

해당 코드는 “오픽 AL is Well” 최신 버전에도 반영했습니다.

import { File as TossFile } from '@apps-in-toss/web-framework';

import { isAppsInToss } from 'src/utils/apps-in-toss';

import { toast } from 'src/components/snackbar';

// ----------------------------------------------------------------------

export async function exportBackupData(backupData: unknown, fileName: string): Promise<boolean> {
  try {
    const dataStr =
      typeof backupData === 'string' ? backupData : JSON.stringify(backupData, null, 2);

    // 1. Web Share API Level 2 우선 시도: 실제 .json 파일 객체 공유 (토스 웹뷰 및 모바일 브라우저 지원)
    if (typeof navigator !== 'undefined' && typeof window !== 'undefined' && navigator.share) {
      try {
        const blob = new Blob([dataStr], { type: 'application/json' });
        const file = new File([blob], fileName, { type: 'application/json' });

        if (navigator.canShare && navigator.canShare({ files: [file] })) {
          await navigator.share({
            files: [file],
            title: 'OPIC Drive 백업 데이터',
            text: 'OPIC Drive 백업 JSON 파일이에요.',
          });
          toast.success('공유 메뉴를 열었어요.');
          return true;
        }
      } catch (shareErr: unknown) {
        if (shareErr instanceof Error && shareErr.name === 'AbortError') {
          // 사용자가 시스템 공유 시트에서 취소를 누른 경우
          return false;
        }
        console.warn('Web Share API (files) fallback:', shareErr);
      }
    }

    // 2. 앱인토스 환경에서 파일 저장 시도 (Web Share 미지원 시 폴백)
    if (isAppsInToss()) {
      try {
        const base64 = btoa(unescape(encodeURIComponent(dataStr)));
        await TossFile.saveBase64({
          data: base64,
          fileName,
          mimeType: 'application/json',
        });
        toast.success('기기에 JSON 파일을 저장했어요.');
        return true;
      } catch (tossSaveErr) {
        console.warn('TossFile.saveBase64 failed:', tossSaveErr);
      }
    }

    // 3. 일반 PC 브라우저 및 웹 환경: Blob & a[download] 로컬 다운로드
    if (typeof window !== 'undefined') {
      const dataBlob = new Blob([dataStr], { type: 'application/json' });
      const url = window.URL.createObjectURL(dataBlob);
      const link = document.createElement('a');
      link.href = url;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
      toast.success('JSON 파일을 다운로드했어요.');
      return true;
    }

    return false;
  } catch (err) {
    console.error('Download/Share failed:', err);
    toast.error('파일을 공유하거나 다운로드하는 중 문제가 생겼어요. 다시 시도해 주세요.');
    return false;
  }
}
9

수정 완료했습니다.
파일명이 중복인 경우 뭔가 제대로 안되는 동작이 있었네요.
파일명에 시간초단위까지 명시했더니 잘 됩니다.
확인 감사합니다.