Appearance

앨범 가져오기 ​

fetchAlbumPhotos ​

fetchAlbumPhotos 는 사용자의 앨범에서 사진 목록을 불러오는 함수예요. 최대 개수와 해상도를 설정할 수 있고 갤러리 미리보기, 이미지 선택 기능 등에 활용할 수 있어요.

시그니처 ​

typescript
function fetchAlbumPhotos(options: FetchAlbumPhotosOptions): Promise<ImageResponse[]>;

파라미터 ​

  • options필수

    조회 옵션을 담은 객체예요.

    • options.maxCountnumber · 10

      가져올 사진의 최대 개수를 설정해요. 숫자로 입력하며 기본값은 10이에요.

    • options.maxWidthnumber · 1024

      사진의 최대 폭을 제한해요. 단위는 픽셀이며 기본값은 1024이에요.

    • options.base64boolean · false

      이미지를 base64 형식으로 반환할지 설정해요. 기본값은 false예요.

반환 값 ​

  • Promise<ImageResponse[]>

앨범 사진의 고유 ID와 데이터 URI를 포함한 배열을 반환해요.

예제 ​

사진의 최대 폭을 360px로 제한하여 가져오기 ​

tsx
import { fetchAlbumPhotos, ImageResponse } from '@apps-in-toss/web-framework';
import { Asset, Button } from '@toss-design-system/mobile';
import { useState } from 'react';

const base64 = true;

// 앨범 사진 목록을 가져와 화면에 표시하는 컴포넌트
function AlbumPhotoList() {
  const [albumPhotos, setAlbumPhotos] = useState<ImageResponse[]>([]);

  async function handleClick() {
    try {
      const response = await fetchAlbumPhotos({
        base64,
        maxWidth: 360,
      });
      setAlbumPhotos((prev) => [...prev, ...response]);
    } catch (error) {
      console.error('앨범을 가져오는 데 실패했어요:', error);
    }
  }

  return (
    <div>
      {albumPhotos.map((image) => {
        // base64 형식으로 반환된 이미지를 표시하려면 데이터 URL 스키마 Prefix를 붙여야해요.
        const imageUri = base64 ? 'data:image/jpeg;base64,' + image.dataUri : image.dataUri;

        return <Asset.Image key={image.id} src={imageUri} />;
      })}
      <Button onClick={handleClick}>
        앨범 가져오기
      </Button>
    </div>
  );
}
tsx
import { fetchAlbumPhotos, ImageResponse } from '@apps-in-toss/framework';
import { Button, Asset } from '@toss-design-system/react-native';
import { useState } from 'react';
import { View } from 'react-native';

const base64 = true;

// 앨범 사진 목록을 가져와 화면에 표시하는 컴포넌트
function AlbumPhotoList() {
  const [albumPhotos, setAlbumPhotos] = useState<ImageResponse[]>([]);

  async function handlePress() {
    try {
      const response = await fetchAlbumPhotos({
        base64,
        maxWidth: 360,
      });
      setAlbumPhotos((prev) => [...prev, ...response]);
    } catch (error) {
      console.error('앨범을 가져오는 데 실패했어요:', error);
    }
  }

  return (
    <View>
      {albumPhotos.map((image) => {
        // base64 형식으로 반환된 이미지를 표시하려면 데이터 URL 스키마 Prefix를 붙여야해요.
        const imageUri = base64 ? 'data:image/jpeg;base64,' + image.dataUri : image.dataUri;

        return <Asset.Image key={image.id} source={{ uri: imageUri }} />;
      })}
      <Button onPress={handlePress}>앨범 가져오기</Button>
    </View>
  );
}