88 lines
4.8 KiB
TypeScript
88 lines
4.8 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Capacitor } from '@capacitor/core';
|
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
|
|
interface AvatarImageViewProps {
|
|
className?: string;
|
|
fallback?: string;
|
|
}
|
|
|
|
const AvatarImageView: React.FC<AvatarImageViewProps> = ({
|
|
className = "h-12 w-12",
|
|
fallback = "ZY"
|
|
}) => {
|
|
const [loaded, setLoaded] = useState(false);
|
|
const [error, setError] = useState(false);
|
|
const [imageSrc, setImageSrc] = useState<string>('/zellyy.png');
|
|
|
|
useEffect(() => {
|
|
const loadImage = async () => {
|
|
try {
|
|
// 플랫폼 체크
|
|
if (Capacitor.isNativePlatform()) {
|
|
const platform = Capacitor.getPlatform();
|
|
|
|
if (platform === 'android') {
|
|
// Android에서는 res/mipmap 리소스 사용
|
|
setImageSrc('file:///android_asset/public/zellyy.png');
|
|
|
|
// 다른 가능한 경로들
|
|
const possiblePaths = [
|
|
'file:///android_asset/public/zellyy.png',
|
|
'file:///android_res/mipmap/zellyy.png',
|
|
'@mipmap/zellyy',
|
|
'mipmap/zellyy',
|
|
'res/mipmap/zellyy.png',
|
|
'/zellyy.png',
|
|
'./zellyy.png',
|
|
'android.resource://com.lovable.zellyfinance/mipmap/zellyy',
|
|
];
|
|
|
|
// 하드코딩된 Base64 이미지
|
|
const fallbackBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFEmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjMtMDYtMzBUMjI6MDM6NTIrMDk6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTA2LTMwVDIzOjIxOjI1KzA5OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzLTA2LTMwVDIzOjIxOjI1KzA5OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE0ZDg5ZjI0LTRmZjctNDUwOS1hNDA3LWM4ODZhM2Q4MDk0YSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxNGQ4OWYyNC00ZmY3LTQ1MDktYTQwNy1jODg2YTNkODA5NGEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxNGQ4OWYyNC00ZmY3LTQ1MDktYTQwNy1jODg2YTNkODA5NGEiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjE0ZDg5ZjI0LTRmZjctNDUwOS1hNDA3LWM4ODZhM2Q4MDk0YSIgc3RFdnQ6d2hlbj0iMjAyMy0wNi0zMFQyMjowMzo1MiswOTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+GWKCCQAAATNJREFUWIXtlTFuwzAQRV+QTgk8ZMjWA+QAOViGLJmzdSsydS1kypojZAqQJbNvYHgplCKRQrUoqUiGwrcbLXAffFCH3O3ESSEJEzHZJEwhDMMQQtg/t1OGkJnZ4fNzDODtYU4MYRwiLb5eX8YAHp+WiSH8Cl+DvQPTXZwYAuBPa3dlQ8i5YEgOYJe1KxvCZ3HLqk1MWULmG+y5gx9gvfTYkDyJKaBDDZzE5BqEVT1fzNkP5Fy3tUXECF9X07dtvb/+TJbLFIYXzX9aNwPxUMkBOm34q2TNI8IWEQ4R4RARDhHhEBHO5pzV/gprM7aWFQtExBcRDhHhEBEOEeEQEU5Ljtb5+D+13lx3nP7lWpedwuA7fNP5OYhrNrXc4xVlGHPyODEEwGY1/AFIBfclfLkBYAAAAABJRU5ErkJggg==';
|
|
|
|
// 마지막 수단으로 Base64 사용
|
|
setImageSrc(fallbackBase64);
|
|
} else if (platform === 'ios') {
|
|
// iOS 경로 처리
|
|
setImageSrc('/zellyy.png');
|
|
}
|
|
} else {
|
|
// 웹에서는 일반 경로 사용
|
|
setImageSrc('/zellyy.png');
|
|
}
|
|
|
|
setLoaded(true);
|
|
} catch (err) {
|
|
console.error('이미지 로드 오류:', err);
|
|
setError(true);
|
|
}
|
|
};
|
|
|
|
loadImage();
|
|
}, []);
|
|
|
|
return (
|
|
<Avatar className={className}>
|
|
{!loaded ? (
|
|
<div className="h-full w-full flex items-center justify-center">
|
|
<Skeleton className="h-full w-full rounded-full" />
|
|
</div>
|
|
) : (
|
|
<>
|
|
<img
|
|
src={imageSrc}
|
|
alt="Zellyy"
|
|
className="h-full w-full object-cover"
|
|
onError={() => setError(true)}
|
|
/>
|
|
{error && <AvatarFallback delayMs={100}>{fallback}</AvatarFallback>}
|
|
</>
|
|
)}
|
|
</Avatar>
|
|
);
|
|
};
|
|
|
|
export default AvatarImageView;
|