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,39 +27,37 @@ const AppVersionInfo: React.FC<AppVersionInfoProps> = ({
 
   // 버전 정보 가져오기
   const fetchVersionInfo = useCallback(async () => {
-    if (!editable) {
-      setLoading(true);
-      setError(false);
-      try {
-        console.log('앱 버전 정보 요청 시작... (retries:', retries, ')');
-        console.log('현재 플랫폼은', isAndroidPlatform() ? 'Android' : '기타');
+    setLoading(true);
+    setError(false);
+    try {
+      console.log('앱 버전 정보 요청 시작... (retries:', retries, ')');
+      console.log('현재 플랫폼은', isAndroidPlatform() ? 'Android' : '기타');
 
-        // 재시도를 하는 경우 짤은 지연 추가
-        if (retries > 0) {
-          await new Promise(resolve => setTimeout(resolve, 300));
-        }
-        const info = await getAppVersionInfo();
-        console.log('받은 앱 버전 정보:', info);
-
-        // 데이터 검증 - 유효한 버전 정보인지 확인
-        if (!info || typeof info !== 'object') {
-          throw new Error('유효하지 않은 응답 형식');
-        }
-        setVersionInfo({
-          versionName: info.versionName,
-          buildNumber: info.buildNumber,
-          versionCode: info.versionCode
-        });
-
-        setLoading(false);
-        console.log('앱 버전 정보 표시 준비 완료');
-      } catch (error) {
-        console.error('버전 정보 가져오기 실패:', error);
-        setError(true);
-        setLoading(false);
+      // 재시도를 하는 경우 짤은 지연 추가
+      if (retries > 0) {
+        await new Promise(resolve => setTimeout(resolve, 300));
       }
+      const info = await getAppVersionInfo();
+      console.log('받은 앱 버전 정보:', info);
+
+      // 데이터 검증 - 유효한 버전 정보인지 확인
+      if (!info || typeof info !== 'object') {
+        throw new Error('유효하지 않은 응답 형식');
+      }
+      setVersionInfo({
+        versionName: info.versionName,
+        buildNumber: info.buildNumber,
+        versionCode: info.versionCode
+      });
+
+      setLoading(false);
+      console.log('앱 버전 정보 표시 준비 완료');
+    } catch (error) {
+      console.error('버전 정보 가져오기 실패:', error);
+      setError(true);
+      setLoading(false);
     }
-  }, [retries, editable]);
+  }, [retries]);
 
   // 재시도 처리
   const handleRetry = useCallback(() => {
@@ -71,50 +70,65 @@ const AppVersionInfo: React.FC<AppVersionInfoProps> = ({
 
   // 컴포넌트 마운트 시 즉시 실행 (IIFE)
   useEffect(() => {
-    if (!editable) {
-      (async () => {
-        // 즉시 버전 정보 가져오기 시도
-        await fetchVersionInfo();
+    (async () => {
+      // 즉시 버전 정보 가져오기 시도
+      await fetchVersionInfo();
 
-        // 300ms 후에 한번 더 시도 (네이티브 플러그인이 완전히 로드되지 않았을 경우 대비)
-        setTimeout(() => {
-          if (error || loading) {
-            fetchVersionInfo();
-            initialLoadAttemptedRef.current = true;
-          }
-        }, 1000);
-      })();
-
-      // 개발 모드에서는 버전 정보 변경을 쉽게 확인하기 위해 주기적 갱신
-      if (process.env.NODE_ENV === 'development') {
-        const interval = setInterval(() => {
+      // 1000ms 후에 한번 더 시도 (네이티브 플러그인이 완전히 로드되지 않았을 경우 대비)
+      setTimeout(() => {
+        if (error || loading) {
           fetchVersionInfo();
-        }, 30000); // 30초마다 새로 가져오기
+          initialLoadAttemptedRef.current = true;
+        }
+      }, 1000);
+    })();
 
-        return () => clearInterval(interval);
-      }
+    // 개발 모드에서는 버전 정보 변경을 쉽게 확인하기 위해 주기적 갱신
+    if (process.env.NODE_ENV === 'development') {
+      const interval = setInterval(() => {
+        fetchVersionInfo();
+      }, 30000); // 30초마다 새로 가져오기
+
+      return () => clearInterval(interval);
     }
-  }, [fetchVersionInfo, error, loading, editable]);
-  if (editable) {
-    return <div className={className}>
-        <div className="space-y-3">
-          <div className="mt-[70px] 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">
+  }, [fetchVersionInfo, error, loading]);
+
+  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">
-          {showDevInfo && versionInfo.versionCode && <p className="text-xs text-gray-400 mt-1 font-mono">versionCode: {versionInfo.versionCode}</p>}
-        </div>}
-    </div>;
+        </div>
+      ) : (
+        <div className="py-2 text-center neuro-flat px-4 rounded-md">
+          <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;