날짜 형식 처리 안정성 강화 및 트랜잭션 삭제 시 앱 먹통 문제 해결
This commit is contained in:
hansoo
87
src/components/AvatarImageView.tsx
Normal file
87
src/components/AvatarImageView.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
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;
|
||||
76
src/components/NativeImage.tsx
Normal file
76
src/components/NativeImage.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
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 NativeImageProps {
|
||||
resourceName: string; // 안드로이드 리소스 이름 (확장자 없이)
|
||||
className?: string;
|
||||
alt?: string;
|
||||
fallback?: string;
|
||||
}
|
||||
|
||||
const NativeImage: React.FC<NativeImageProps> = ({
|
||||
resourceName,
|
||||
className,
|
||||
alt = "이미지",
|
||||
fallback = "ZY"
|
||||
}) => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(false);
|
||||
const [imageSrc, setImageSrc] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
const loadImage = async () => {
|
||||
try {
|
||||
if (Capacitor.isNativePlatform()) {
|
||||
// 안드로이드에서는 리소스 ID를 사용
|
||||
if (Capacitor.getPlatform() === 'android') {
|
||||
// 웹뷰가 resource:// 프로토콜을 지원하는 경우를 위한 코드
|
||||
setImageSrc(`file:///android_res/drawable/${resourceName}`);
|
||||
} else {
|
||||
// iOS - 다른 방식 적용 (추후 구현)
|
||||
setImageSrc('/zellyy.png');
|
||||
}
|
||||
} else {
|
||||
// 웹에서는 일반 경로 사용
|
||||
setImageSrc(`/${resourceName}.png`);
|
||||
}
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.error('이미지 로드 오류:', err);
|
||||
setError(true);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadImage();
|
||||
}, [resourceName]);
|
||||
|
||||
return (
|
||||
<Avatar className={className}>
|
||||
{loading ? (
|
||||
<div className="h-full w-full flex items-center justify-center">
|
||||
<Skeleton className="h-full w-full rounded-full" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{!error && (
|
||||
<img
|
||||
src={imageSrc}
|
||||
alt={alt}
|
||||
className="h-full w-full object-cover"
|
||||
onError={() => setError(true)}
|
||||
/>
|
||||
)}
|
||||
{error && (
|
||||
<AvatarFallback delayMs={100}>{fallback}</AvatarFallback>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Avatar>
|
||||
);
|
||||
};
|
||||
|
||||
export default NativeImage;
|
||||
59
src/components/ResourceImage.tsx
Normal file
59
src/components/ResourceImage.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { getResourceImage } from '@/plugins/imagePlugin';
|
||||
|
||||
interface ResourceImageProps {
|
||||
resourceName: string;
|
||||
className?: string;
|
||||
alt?: string;
|
||||
fallback?: string;
|
||||
}
|
||||
|
||||
const ResourceImage: React.FC<ResourceImageProps> = ({
|
||||
resourceName,
|
||||
className = "h-12 w-12",
|
||||
alt = "이미지",
|
||||
fallback = "ZY"
|
||||
}) => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(false);
|
||||
const [imageSrc, setImageSrc] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
const loadResourceImage = async () => {
|
||||
try {
|
||||
const imgSrc = await getResourceImage(resourceName);
|
||||
setImageSrc(imgSrc);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.error('이미지 로드 실패:', err);
|
||||
setError(true);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadResourceImage();
|
||||
}, [resourceName]);
|
||||
|
||||
return (
|
||||
<Avatar className={className}>
|
||||
{loading ? (
|
||||
<div className="h-full w-full flex items-center justify-center">
|
||||
<Skeleton className="h-full w-full rounded-full" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<AvatarFallback delayMs={0}>{fallback}</AvatarFallback>
|
||||
) : (
|
||||
<img
|
||||
src={imageSrc}
|
||||
alt={alt}
|
||||
className="h-full w-full object-cover"
|
||||
onError={() => setError(true)}
|
||||
/>
|
||||
)}
|
||||
</Avatar>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResourceImage;
|
||||
0
src/components/SimpleAvatar.tsx
Normal file
0
src/components/SimpleAvatar.tsx
Normal file
50
src/components/ZellyAvatar.tsx
Normal file
50
src/components/ZellyAvatar.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Capacitor } from '@capacitor/core';
|
||||
|
||||
/**
|
||||
* 젤리 아바타 컴포넌트
|
||||
* 웹과 앱 환경 모두에서 올바르게 표시되는 아바타 컴포넌트
|
||||
*/
|
||||
const ZellyAvatar: React.FC<{ className?: string }> = ({ className = "h-12 w-12 mr-3" }) => {
|
||||
const [imageLoaded, setImageLoaded] = useState(false);
|
||||
const [imageError, setImageError] = useState(false);
|
||||
const [imageSrc, setImageSrc] = useState<string>('/zellyy.png');
|
||||
|
||||
useEffect(() => {
|
||||
// 앱 환경에서는 Base64 인코딩된 이미지를 사용
|
||||
if (Capacitor.isNativePlatform()) {
|
||||
setImageSrc('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFEmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjMtMDYtMzBUMjI6MDM6NTIrMDk6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTA2LTMwVDIzOjIxOjI1KzA5OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzLTA2LTMwVDIzOjIxOjI1KzA5OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE0ZDg5ZjI0LTRmZjctNDUwOS1hNDA3LWM4ODZhM2Q4MDk0YSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxNGQ4OWYyNC00ZmY3LTQ1MDktYTQwNy1jODg2YTNkODA5NGEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxNGQ4OWYyNC00ZmY3LTQ1MDktYTQwNy1jODg2YTNkODA5NGEiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjE0ZDg5ZjI0LTRmZjctNDUwOS1hNDA3LWM4ODZhM2Q4MDk0YSIgc3RFdnQ6d2hlbj0iMjAyMy0wNi0zMFQyMjowMzo1MiswOTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+GWKCCQAAATNJREFUWIXtlTFuwzAQRV+QTgk8ZMjWA+QAOViGLJmzdSsydS1kypojZAqQJbNvYHgplCKRQrUoqUiGwrcbLXAffFCH3O3ESSEJEzHZJEwhDMMQQtg/t1OGkJnZ4fNzDODtYU4MYRwiLb5eX8YAHp+WiSH8Cl+DvQPTXZwYAuBPa3dlQ8i5YEgOYJe1KxvCZ3HLqk1MWULmG+y5gx9gvfTYkDyJKaBDDZzE5BqEVT1fzNkP5Fy3tUXECF9X07dtvb/+TJbLFIYXzX9aNwPxUMkBOm34q2TNI8IWEQ4R4RARDhHhEBHO5pzV/gprM7aWFQtExBcRDhHhEBEOEeEQEU5Ljtb5+D+13lx3nP7lWpedwuA7fNP5OYhrNrXc4xVlGHPyODEEwGY1/AFIBfclfLkBYAAAAABJRU5ErkJggg==');
|
||||
} else {
|
||||
// 웹 환경에서는 일반 경로 사용
|
||||
setImageSrc('/zellyy.png');
|
||||
}
|
||||
setImageLoaded(true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Avatar className={className}>
|
||||
{!imageLoaded && !imageError ? (
|
||||
<div className="h-full w-full flex items-center justify-center">
|
||||
<Skeleton className="h-full w-full rounded-full" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<AvatarImage
|
||||
src={imageSrc}
|
||||
alt="Zellyy"
|
||||
className={imageLoaded ? 'opacity-100' : 'opacity-0'}
|
||||
onLoad={() => setImageLoaded(true)}
|
||||
onError={() => setImageError(true)}
|
||||
/>
|
||||
{(imageError || !imageLoaded) && (
|
||||
<AvatarFallback delayMs={100}>ZY</AvatarFallback>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Avatar>
|
||||
);
|
||||
};
|
||||
|
||||
export default ZellyAvatar;
|
||||
Reference in New Issue
Block a user