fix: 앱 버전 정보 표시 개선 - editable 속성에 관계없이 버전 정보 표시

src/components/AppVersionInfo.tsx

@@ -1,12 +1,13 @@
-
 import React, { useCallback, useEffect, useState, useRef } from 'react';
 import { getAppVersionInfo, isAndroidPlatform } from '@/utils/platform';
 import { Label } from '@/components/ui/label';
+
 interface AppVersionInfoProps {
   className?: string;
   showDevInfo?: boolean;
   editable?: boolean;
 }
+
 const AppVersionInfo: React.FC<AppVersionInfoProps> = ({
   className,
   showDevInfo = true,
@@ -26,7 +27,6 @@ const AppVersionInfo: React.FC<AppVersionInfoProps> = ({
 
   // 버전 정보 가져오기
   const fetchVersionInfo = useCallback(async () => {
-    if (!editable) {
     setLoading(true);
     setError(false);
     try {
@@ -57,8 +57,7 @@ const AppVersionInfo: React.FC<AppVersionInfoProps> = ({
       setError(true);
       setLoading(false);
     }
-    }
+  }, [retries]);
-  }, [retries, editable]);
 
   // 재시도 처리
   const handleRetry = useCallback(() => {
@@ -71,12 +70,11 @@ const AppVersionInfo: React.FC<AppVersionInfoProps> = ({
 
   // 컴포넌트 마운트 시 즉시 실행 (IIFE)
   useEffect(() => {
-    if (!editable) {
     (async () => {
       // 즉시 버전 정보 가져오기 시도
       await fetchVersionInfo();
 
-        // 300ms 후에 한번 더 시도 (네이티브 플러그인이 완전히 로드되지 않았을 경우 대비)
+      // 1000ms 후에 한번 더 시도 (네이티브 플러그인이 완전히 로드되지 않았을 경우 대비)
       setTimeout(() => {
         if (error || loading) {
           fetchVersionInfo();
@@ -93,28 +91,44 @@ const AppVersionInfo: React.FC<AppVersionInfoProps> = ({
 
       return () => clearInterval(interval);
     }
-    }
+  }, [fetchVersionInfo, error, loading]);
-  }, [fetchVersionInfo, error, loading, editable]);
+
-  if (editable) {
+  return (
-    return <div className={className}>
+    <div className={className}>
-        <div className="space-y-3">
+      {loading ? (
-          <div className="mt-[70px] text-center">
+        <div className="py-1 text-center">
-            <p className="text-gray-400 font-semibold text-lg my-[50px]">ZELLYY CLOUD</p>
-          </div>
-        </div>
-      </div>;
-  }
-  return <div className={className}>
-      {loading ? <div className="py-1 text-center">
           <p className="text-sm text-gray-400 animate-pulse">버전 정보 로딩 중...</p>
-        </div> : error ? <div className="py-1 text-center">
+        </div>
+      ) : error ? (
+        <div className="py-1 text-center">
           <p className="text-sm text-red-500">빌드 정보 로딩 오류</p>
-          <button onClick={handleRetry} className="text-xs text-blue-500 underline mt-1 px-2 py-0.5 rounded hover:bg-blue-50">
+          <button
+            onClick={handleRetry}
+            className="text-xs text-blue-500 underline mt-1 px-2 py-0.5 rounded hover:bg-blue-50"
+          >
             재시도
           </button>
-        </div> : <div className="py-1 text-center">
+        </div>
-          {showDevInfo && versionInfo.versionCode && <p className="text-xs text-gray-400 mt-1 font-mono">versionCode: {versionInfo.versionCode}</p>}
+      ) : (
-        </div>}
+        <div className="py-2 text-center neuro-flat px-4 rounded-md">
-    </div>;
+          <p className="text-sm text-gray-600">
+            버전: <span className="font-semibold">{versionInfo.versionName}</span>
+          </p>
+          <p className="text-xs text-gray-500 mt-1">
+            빌드: <span className="font-mono">{versionInfo.buildNumber}</span>
+          </p>
+          {showDevInfo && versionInfo.versionCode && (
+            <p className="text-xs text-gray-400 mt-1 font-mono">
+              versionCode: {versionInfo.versionCode}
+            </p>
+          )}
+          {editable && (
+            <p className="text-gray-400 font-semibold text-sm mt-2">ZELLYY CLOUD</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
 };
+
 export default AppVersionInfo;