From 72d272ef5478ff7b4d1be9425d6e4c7fd31fae25 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 22 Mar 2025 13:36:44 +0000
Subject: [PATCH] Reverted to edit edt-f8847c66-50e6-4952-bb7a-178d44a26294:
 "Fix edit functionality

The edit functionality was not working as expected. This commit addresses the issue."
---
 src/components/AppVersionInfo.tsx | 114 ++++++++++++++----------------
 1 file changed, 55 insertions(+), 59 deletions(-)

diff --git a/src/components/AppVersionInfo.tsx b/src/components/AppVersionInfo.tsx
index 9078036..c7b8eec 100644
--- a/src/components/AppVersionInfo.tsx
+++ b/src/components/AppVersionInfo.tsx
@@ -3,6 +3,7 @@ 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 { Textarea } from '@/components/ui/textarea';
 import { Button } from '@/components/ui/button';
 
 interface AppVersionInfoProps {
@@ -11,8 +12,6 @@ interface AppVersionInfoProps {
   editable?: boolean;
 }
 
-const STORAGE_KEY = 'app_version_custom_info';
-
 const AppVersionInfo: React.FC<AppVersionInfoProps> = ({
   className,
   showDevInfo = true,
@@ -33,8 +32,8 @@ 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 [companyText, setCompanyText] = useState('ZELLYY CLOUD');
+  const [detailText, setDetailText] = useState('The first build');
   const [isEditing, setIsEditing] = useState(false);
 
   // 버전 정보 가져오기
@@ -85,24 +84,6 @@ 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) {
@@ -130,27 +111,43 @@ const AppVersionInfo: React.FC<AppVersionInfoProps> = ({
     }
   }, [fetchVersionInfo, error, loading, editable]);
 
-  // 편집 모드 토글
-  const toggleEditMode = () => {
-    setIsEditing(!isEditing);
+  // 변경사항 저장 처리
+  const handleSaveChanges = () => {
+    // 편집 모드 종료
+    setIsEditing(false);
+    
+    // 실제 저장 로직 구현 (로컬 스토리지에 저장)
+    try {
+      const versionData = {
+        versionName: editableVersionName,
+        buildNumber: parseInt(editableBuildNumber, 10),
+        companyText,
+        detailText
+      };
+      localStorage.setItem('customVersionInfo', JSON.stringify(versionData));
+      console.log('변경사항 저장 완료:', versionData);
+    } catch (error) {
+      console.error('변경사항 저장 실패:', error);
+    }
   };
 
-  // 변경사항 저장
-  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);
+  // 로컬 스토리지에서 저장된 버전 정보 로드
+  useEffect(() => {
+    if (editable) {
+      try {
+        const savedData = localStorage.getItem('customVersionInfo');
+        if (savedData) {
+          const parsedData = JSON.parse(savedData);
+          setEditableVersionName(parsedData.versionName || '1.0.1');
+          setEditableBuildNumber(String(parsedData.buildNumber || 2));
+          setCompanyText(parsedData.companyText || 'ZELLYY CLOUD');
+          setDetailText(parsedData.detailText || 'The first build');
+        }
+      } catch (error) {
+        console.error('저장된 버전 정보 로드 실패:', error);
+      }
     }
-    setIsEditing(false);
-  };
+  }, [editable]);
 
   if (editable) {
     return (
@@ -159,7 +156,7 @@ const AppVersionInfo: React.FC<AppVersionInfoProps> = ({
           <div>
             <Label htmlFor="versionName" className="text-gray-600 text-center block">앱 버전</Label>
             {isEditing ? (
-              <div className="flex gap-2 items-center mt-1">
+              <div className="flex gap-2 mt-1">
                 <Input
                   id="versionName"
                   value={editableVersionName}
@@ -181,41 +178,40 @@ const AppVersionInfo: React.FC<AppVersionInfoProps> = ({
           </div>
           
           <div>
-            <Label htmlFor="detailText" className="text-gray-600 text-center block">세부 설명</Label>
+            <Label htmlFor="notes" className="text-gray-600 text-center block">세부 설명</Label>
             {isEditing ? (
-              <Input
+              <Textarea
                 id="detailText"
-                value={editableDetailText}
-                onChange={(e) => setEditableDetailText(e.target.value)}
-                className="text-center mt-1"
+                value={detailText}
+                onChange={(e) => setDetailText(e.target.value)}
+                className="text-center min-h-[80px] mt-1"
               />
             ) : (
-              <div className="p-2 text-base mt-1 py-0 text-center">{editableDetailText}</div>
+              <div className="p-2 text-base mt-1 py-0 text-center">{detailText}</div>
             )}
           </div>
           
-          <div className="mt-[50px] text-center">
+          <div className="mt-[70px] text-center">
             {isEditing ? (
               <Input
                 id="companyText"
-                value={editableCompanyText}
-                onChange={(e) => setEditableCompanyText(e.target.value)}
-                className="text-center font-semibold my-[50px]"
+                value={companyText}
+                onChange={(e) => setCompanyText(e.target.value)}
+                className="text-center text-gray-400 font-semibold text-lg"
               />
             ) : (
-              <p className="text-gray-400 font-semibold text-lg my-[50px]">{editableCompanyText}</p>
+              <p className="text-gray-400 font-semibold text-lg my-[50px]">{companyText}</p>
             )}
           </div>
 
-          <div className="flex justify-center gap-2">
+          <div className="flex justify-center mt-4">
             {isEditing ? (
-              <Button onClick={handleSaveChanges} variant="outline" size="sm">
-                저장
-              </Button>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => setIsEditing(false)}>취소</Button>
+                <Button onClick={handleSaveChanges}>저장</Button>
+              </div>
             ) : (
-              <Button onClick={toggleEditMode} variant="outline" size="sm">
-                편집
-              </Button>
+              <Button onClick={() => setIsEditing(true)}>편집</Button>
             )}
           </div>
         </div>