diff --git a/src/components/AppVersionInfo.tsx b/src/components/AppVersionInfo.tsx index 411a774..9078036 100644 --- a/src/components/AppVersionInfo.tsx +++ b/src/components/AppVersionInfo.tsx @@ -2,11 +2,17 @@ import React, { useCallback, useEffect, useState, useRef } from 'react'; import { getAppVersionInfo, isAndroidPlatform } from '@/utils/platform'; import { Label } from '@/components/ui/label'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; + interface AppVersionInfoProps { className?: string; showDevInfo?: boolean; editable?: boolean; } + +const STORAGE_KEY = 'app_version_custom_info'; + const AppVersionInfo: React.FC = ({ className, showDevInfo = true, @@ -27,6 +33,9 @@ const AppVersionInfo: React.FC = ({ // 편집 가능한 필드를 위한 상태 const [editableVersionName, setEditableVersionName] = useState('1.0.1'); const [editableBuildNumber, setEditableBuildNumber] = useState('2'); + const [editableDetailText, setEditableDetailText] = useState('The first build'); + const [editableCompanyText, setEditableCompanyText] = useState('ZELLYY CLOUD'); + const [isEditing, setIsEditing] = useState(false); // 버전 정보 가져오기 const fetchVersionInfo = useCallback(async () => { @@ -76,6 +85,24 @@ const AppVersionInfo: React.FC = ({ // 초기화 완료 후 한번 더 시도하도록 설정 const initialLoadAttemptedRef = useRef(false); + // 저장된 커스텀 정보 로드 + useEffect(() => { + if (editable) { + try { + const savedInfo = localStorage.getItem(STORAGE_KEY); + if (savedInfo) { + const parsedInfo = JSON.parse(savedInfo); + if (parsedInfo.versionName) setEditableVersionName(parsedInfo.versionName); + if (parsedInfo.buildNumber) setEditableBuildNumber(parsedInfo.buildNumber); + if (parsedInfo.detailText) setEditableDetailText(parsedInfo.detailText); + if (parsedInfo.companyText) setEditableCompanyText(parsedInfo.companyText); + } + } catch (e) { + console.error('저장된 버전 정보 로드 실패:', e); + } + } + }, [editable]); + // 컴포넌트 마운트 시 즉시 실행 (IIFE) useEffect(() => { if (!editable) { @@ -102,39 +129,121 @@ const AppVersionInfo: React.FC = ({ } } }, [fetchVersionInfo, error, loading, editable]); + + // 편집 모드 토글 + const toggleEditMode = () => { + setIsEditing(!isEditing); + }; + + // 변경사항 저장 + const handleSaveChanges = () => { + // 로컬 스토리지에 저장 + try { + const customInfo = { + versionName: editableVersionName, + buildNumber: editableBuildNumber, + detailText: editableDetailText, + companyText: editableCompanyText + }; + localStorage.setItem(STORAGE_KEY, JSON.stringify(customInfo)); + } catch (e) { + console.error('커스텀 정보 저장 실패:', e); + } + setIsEditing(false); + }; + if (editable) { - return
+ return ( +
-
- {editableVersionName} (build {editableBuildNumber}) -
+ {isEditing ? ( +
+ setEditableVersionName(e.target.value)} + className="text-center" + /> + setEditableBuildNumber(e.target.value)} + className="text-center w-20" + /> +
+ ) : ( +
+ {editableVersionName} (build {editableBuildNumber}) +
+ )}
- -
The first build
+ + {isEditing ? ( + setEditableDetailText(e.target.value)} + className="text-center mt-1" + /> + ) : ( +
{editableDetailText}
+ )}
-
-

ZELLYY CLOUD

+
+ {isEditing ? ( + setEditableCompanyText(e.target.value)} + className="text-center font-semibold my-[50px]" + /> + ) : ( +

{editableCompanyText}

+ )} +
+ +
+ {isEditing ? ( + + ) : ( + + )}
-
; +
+ ); } - return
- {loading ?
+ + return ( +
+ {loading ? ( +

버전 정보 로딩 중...

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

빌드 정보 로딩 오류

-
:
+
+ ) : ( +

{versionInfo.versionName} (build {versionInfo.buildNumber})

{showDevInfo && versionInfo.versionCode &&

versionCode: {versionInfo.versionCode}

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