혹시 사용하시는 framework 버전을 알 수 있을까요 ?
maxCount 1로 했을때 오류가 발생하지 않는데요.. 
framework를 최신버전으로 업데이트 후 테스트 부탁드려도 될까요 ?
테스트한 코드 첨부드려요
import { createRoute } from '@granite-js/react-native';
import React, { useState } from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import { Button} from '@toss-design-system/react-native';
import { fetchAlbumPhotos, ImageResponse} from '@apps-in-toss/framework';
export const Route = createRoute('/', {
component: Page,
});
const base64 = true;
function AlbumPhotoList() {
const [albumPhotos, setAlbumPhotos] = useState<ImageResponse[]>([]);
async function handlePress() {
try {
console.log('앨범 사진 가져오기 시작...');
const response = await fetchAlbumPhotos({
base64,
maxCount: 1,
maxWidth: 360,
});
console.log('가져온 사진 개수:', response.length);
console.log('가져온 사진 데이터:', response);
setAlbumPhotos((prev) => [...prev, ...response]);
} catch (error) {
console.error('앨범을 가져오는 데 실패했어요:', error);
}
}
return (
<View style={styles.albumContainer}>
<Text style={styles.albumTitle}>앨범 사진</Text>
{albumPhotos.length === 0 ? (
<Text style={styles.noPhotoText}>사진이 없습니다. 버튼을 눌러 앨범에서 사진을 가져오세요.</Text>
) : (
albumPhotos.map((image) => {
// base64 형식으로 반환된 이미지를 표시하려면 데이터 URL 스키마 Prefix를 붙여야해요.
const imageUri = base64 ? 'data:image/jpeg;base64,' + image.dataUri : image.dataUri;
console.log('이미지 ID:', image.id);
console.log('이미지 dataUri 길이:', image.dataUri?.length);
console.log('최종 imageUri:', imageUri.substring(0, 100) + '...');
return (
<Image
key={image.id}
source={{ uri: imageUri }}
style={styles.albumImage}
resizeMode="cover"
/>
);
})
)}
<View style={styles.albumButton}>
<Button onPress={handlePress}>
앨범 가져오기
</Button>
</View>
</View>
);
}
function Page() {
return (
<Container>
<AlbumPhotoList />
</Container>
);
}
function Container({ children }: { children: React.ReactNode }) {
return <View style={styles.container}>{children}</View>;
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 16,
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
},
brandText: {
color: '#0064FF',
fontWeight: 'bold',
},
text: {
fontSize: 24,
color: '#202632',
textAlign: 'center',
marginBottom: 10,
},
title: {
fontSize: 32,
fontWeight: 'bold',
color: '#1A202C',
textAlign: 'center',
marginBottom: 16,
},
subtitle: {
fontSize: 18,
color: '#4A5568',
textAlign: 'center',
marginBottom: 24,
},
description: {
fontSize: 16,
color: '#718096',
textAlign: 'center',
marginBottom: 32,
lineHeight: 24,
},
button: {
backgroundColor: '#0064FF',
paddingVertical: 12,
paddingHorizontal: 32,
borderRadius: 8,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
buttonText: {
color: 'white',
fontSize: 16,
fontWeight: 'bold',
textAlign: 'center',
},
codeContainer: {
padding: 8,
backgroundColor: '#333',
borderRadius: 4,
width: '100%',
},
code: {
color: 'white',
fontFamily: 'monospace',
letterSpacing: 0.5,
fontSize: 14,
},
albumContainer: {
marginTop: 20,
alignItems: 'center',
width: '100%',
},
albumTitle: {
fontSize: 18,
fontWeight: 'bold',
color: '#1A202C',
marginBottom: 16,
},
albumImage: {
width: 200,
height: 200,
borderRadius: 12,
marginBottom: 16,
borderWidth: 2,
borderColor: '#E2E8F0',
},
albumButton: {
marginTop: 8,
},
noPhotoText: {
fontSize: 14,
color: '#718096',
textAlign: 'center',
marginBottom: 16,
fontStyle: 'italic',
},
});
