날짜 형식 처리 안정성 강화 및 트랜잭션 삭제 시 앱 먹통 문제 해결

2025-03-18 01:07:17 +09:00
parent 6f91afeebe
commit acb9ae3d70
23 changed files with 732 additions and 18 deletions
--- a/src/components/NativeImage.tsx
+++ b/src/components/NativeImage.tsx
@@ -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;