diff --git a/src/components/AppVersionInfo.tsx b/src/components/AppVersionInfo.tsx index 2949ac8..d319f59 100644 --- a/src/components/AppVersionInfo.tsx +++ b/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 = ({ className, showDevInfo = true, @@ -26,39 +27,37 @@ const AppVersionInfo: React.FC = ({ // 버전 정보 가져오기 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 = ({ // 컴포넌트 마운트 시 즉시 실행 (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
-
-
-

ZELLYY CLOUD

-
-
-
; - } - return
- {loading ?
+ }, [fetchVersionInfo, error, loading]); + + return ( +
+ {loading ? ( +

버전 정보 로딩 중...

-
: error ?
+
+ ) : error ? ( +

빌드 정보 로딩 오류

- -
:
- {showDevInfo && versionInfo.versionCode &&

versionCode: {versionInfo.versionCode}

} -
} -
; +
+ ) : ( +
+

+ 버전: {versionInfo.versionName} +

+

+ 빌드: {versionInfo.buildNumber} +

+ {showDevInfo && versionInfo.versionCode && ( +

+ versionCode: {versionInfo.versionCode} +

+ )} + {editable && ( +

ZELLYY CLOUD

+ )} +
+ )} +
+ ); }; + export default AppVersionInfo;