Make text editable
Make the text at the bottom of the screen editable.
This commit is contained in:
gpt-engineer-app[bot]
@@ -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<AppVersionInfoProps> = ({
|
||||
className,
|
||||
showDevInfo = true,
|
||||
@@ -27,6 +33,9 @@ const AppVersionInfo: React.FC<AppVersionInfoProps> = ({
|
||||
// 편집 가능한 필드를 위한 상태
|
||||
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<AppVersionInfoProps> = ({
|
||||
// 초기화 완료 후 한번 더 시도하도록 설정
|
||||
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<AppVersionInfoProps> = ({
|
||||
}
|
||||
}
|
||||
}, [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 <div className={className}>
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<Label htmlFor="versionName" className="text-gray-600 text-center block">앱 버전</Label>
|
||||
{isEditing ? (
|
||||
<div className="flex gap-2 items-center mt-1">
|
||||
<Input
|
||||
id="versionName"
|
||||
value={editableVersionName}
|
||||
onChange={(e) => setEditableVersionName(e.target.value)}
|
||||
className="text-center"
|
||||
/>
|
||||
<Input
|
||||
id="buildNumber"
|
||||
value={editableBuildNumber}
|
||||
onChange={(e) => setEditableBuildNumber(e.target.value)}
|
||||
className="text-center w-20"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-2 text-base mt-1 py-0 text-center">
|
||||
{editableVersionName} (build {editableBuildNumber})
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="notes" className="text-gray-600 text-center block">세부 설명</Label>
|
||||
<div className="p-2 text-base mt-1 py-0 text-center">The first build</div>
|
||||
<Label htmlFor="detailText" className="text-gray-600 text-center block">세부 설명</Label>
|
||||
{isEditing ? (
|
||||
<Input
|
||||
id="detailText"
|
||||
value={editableDetailText}
|
||||
onChange={(e) => setEditableDetailText(e.target.value)}
|
||||
className="text-center mt-1"
|
||||
/>
|
||||
) : (
|
||||
<div className="p-2 text-base mt-1 py-0 text-center">{editableDetailText}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-[70px] text-center">
|
||||
<p className="text-gray-400 font-semibold text-lg my-[50px]">ZELLYY CLOUD</p>
|
||||
<div className="mt-[50px] text-center">
|
||||
{isEditing ? (
|
||||
<Input
|
||||
id="companyText"
|
||||
value={editableCompanyText}
|
||||
onChange={(e) => setEditableCompanyText(e.target.value)}
|
||||
className="text-center font-semibold my-[50px]"
|
||||
/>
|
||||
) : (
|
||||
<p className="text-gray-400 font-semibold text-lg my-[50px]">{editableCompanyText}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-2">
|
||||
{isEditing ? (
|
||||
<Button onClick={handleSaveChanges} variant="outline" size="sm">
|
||||
저장
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={toggleEditMode} variant="outline" size="sm">
|
||||
편집
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <div className={className}>
|
||||
{loading ? <div className="py-1 text-center">
|
||||
|
||||
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>
|
||||
</div> : <div className="py-1 text-center">
|
||||
</div>
|
||||
) : (
|
||||
<div className="py-1 text-center">
|
||||
<p className="text-sm">{versionInfo.versionName} (build {versionInfo.buildNumber})</p>
|
||||
{showDevInfo && versionInfo.versionCode && <p className="text-xs text-gray-400 mt-1 font-mono">versionCode: {versionInfo.versionCode}</p>}
|
||||
</div>}
|
||||
</div>;
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppVersionInfo;
|
||||
|
||||
Reference in New Issue
Block a user