파일 다운로드 연동

파일과 이미지를 사용자 기기에 다운로드합니다.

개요

Appify SDK의 Download 모듈은 웹뷰 환경에서 기기의 파일 시스템과 갤러리로 직접 다운로드하는 기능을 제공합니다.

단일 메서드: download() 하나로 파일과 이미지를 모두 처리합니다.
자동 판별: URL 확장자의 MIME 타입에 따라 저장 위치가 자동 결정됩니다.
파일명 지정: 저장 시 사용할 파일명을 직접 지정할 수 있습니다.

파일 다운로드

기본 다운로드

URL만 전달하면 해당 파일을 기기 저장소에 저장합니다. 파일명은 URL에서 자동으로 추출합니다.

import { appify } from "@nolraunsoft/appify-sdk";

const success = await appify.download.download({
  url: "https://example.com/report.pdf",
});

if (!success) {
  console.warn("파일 다운로드에 실패했습니다.");
}

파일명 지정 다운로드

name 옵션으로 저장될 파일명을 직접 지정할 수 있습니다.

import { appify } from "@nolraunsoft/appify-sdk";

const success = await appify.download.download({
  url: "https://example.com/report-2024-q4.pdf",
  name: "2024년_4분기_보고서.pdf",
});

if (!success) {
  console.warn("파일 다운로드에 실패했습니다.");
}

이미지 다운로드

이미지 URL을 전달하면 자동으로 기기 갤러리(iOS의 사진 앱, Android의 갤러리 앱)에 저장됩니다.

import { appify } from "@nolraunsoft/appify-sdk";

// 이미지 → 갤러리에 자동 저장
const success = await appify.download.download({
  url: "https://example.com/photo.jpg",
});

// 파일명 지정
const success2 = await appify.download.download({
  url: "https://example.com/profile.jpg",
  name: "profile_photo.jpg",
});

실전 예제: 다운로드 버튼 구현

로딩 상태와 오류 처리를 포함한 실전 예제입니다.

import { useState } from "react";
import { appify } from "@nolraunsoft/appify-sdk";

interface DownloadButtonProps {
  url: string;
  name?: string;
}

export function DownloadButton({ url, name }: DownloadButtonProps) {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleDownload = async () => {
    setIsLoading(true);
    setError(null);

    try {
      const success = await appify.download.download({ url, name });

      if (!success) {
        setError("다운로드에 실패했습니다. 다시 시도해 주세요.");
      }
    } catch (err) {
      setError("예기치 않은 오류가 발생했습니다.");
      console.error("[DownloadButton] 다운로드 오류:", err);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      <button onClick={handleDownload} disabled={isLoading}>
        {isLoading ? "다운로드 중..." : "다운로드"}
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

사용 예시:

// PDF 파일 다운로드 버튼
<DownloadButton
  url="https://example.com/contract.pdf"
  name="계약서.pdf"
/>

// 이미지 갤러리 저장 버튼 (자동 판별)
<DownloadButton
  url="https://example.com/banner.jpg"
  name="banner.jpg"
/>

플랫폼별 참고사항

iOS

파일은 **파일 앱(Files)**의 다운로드 폴더에 저장됩니다.
이미지는 **사진 앱(Photos)**에 저장됩니다. 사진 접근 권한(NSPhotoLibraryAddUsageDescription)이 필요합니다.

Android

파일은 기기의 Downloads 폴더에 저장됩니다.
이미지는 기기 갤러리 앱에서 확인할 수 있습니다.
Android 10(API 29) 미만에서는 외부 저장소 쓰기 권한(WRITE_EXTERNAL_STORAGE)이 필요합니다.

개요​

파일 다운로드​

기본 다운로드​

파일명 지정 다운로드​

이미지 다운로드​

실전 예제: 다운로드 버튼 구현​

플랫폼별 참고사항​

관련 API​

개요