From 31fd7542b80e490f6aa18880e7abc23b63d9e533 Mon Sep 17 00:00:00 2001
From: backuppc <backuppc@mail.com>
Date: Wed, 9 Jul 2025 14:33:38 +0900
Subject: [PATCH] =?UTF-8?q?category=20toglle=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EB=B3=B5=EA=B5=AC=20icon=20=EC=A0=80=EC=9E=A5=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95=20=EA=B2=80?=
 =?UTF-8?q?=EC=83=89=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Form1.Designer.cs           |  2 +-
 Services/DatabaseService.cs | 34 +++++++++++-----------
 Web/wwwroot/index.html      |  2 +-
 Web/wwwroot/js/app.js       | 57 +++++++++++++++++++++++++------------
 4 files changed, 58 insertions(+), 37 deletions(-)

diff --git a/Form1.Designer.cs b/Form1.Designer.cs
index a021304..de06dbb 100644
--- a/Form1.Designer.cs
+++ b/Form1.Designer.cs
@@ -34,7 +34,7 @@
             // 
             this.AutoScaleDimensions = new System.Drawing.SizeF(7F, 12F);
             this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
-            this.ClientSize = new System.Drawing.Size(584, 561);
+            this.ClientSize = new System.Drawing.Size(616, 733);
             this.Name = "Form1";
             this.Text = "Form1";
             this.ResumeLayout(false);
diff --git a/Services/DatabaseService.cs b/Services/DatabaseService.cs
index 068ac47..2b1f3ca 100644
--- a/Services/DatabaseService.cs
+++ b/Services/DatabaseService.cs
@@ -24,7 +24,7 @@ namespace VNCServerList.Services
             using (var connection = new SqlConnection(_connectionString))
             {
                 connection.Open();
-                
+
                 // VNC_ServerList 테이블이 존재하는지 확인
                 string checkTableSql = @"
                     IF NOT EXISTS (SELECT * FROM sysobjects WHERE name='VNC_ServerList' AND xtype='U')
@@ -64,12 +64,12 @@ namespace VNCServerList.Services
         public List<VNCServer> GetAllServers()
         {
             var servers = new List<VNCServer>();
-            
+
             using (var connection = new SqlConnection(_connectionString))
             {
                 connection.Open();
                 string sql = "SELECT * FROM VNC_ServerList ORDER BY [User]";
-                
+
                 using (var command = new SqlCommand(sql, connection))
                 using (var reader = command.ExecuteReader())
                 {
@@ -89,7 +89,7 @@ namespace VNCServerList.Services
                     }
                 }
             }
-            
+
             return servers;
         }
 
@@ -99,12 +99,12 @@ namespace VNCServerList.Services
             {
                 connection.Open();
                 string sql = "SELECT * FROM VNC_ServerList WHERE [User] = @User AND [IP] = @IP";
-                
+
                 using (var command = new SqlCommand(sql, connection))
                 {
                     command.Parameters.AddWithValue("@User", user);
                     command.Parameters.AddWithValue("@IP", ip);
-                    
+
                     using (var reader = command.ExecuteReader())
                     {
                         if (reader.Read())
@@ -124,7 +124,7 @@ namespace VNCServerList.Services
                     }
                 }
             }
-            
+
             return null;
         }
 
@@ -136,7 +136,7 @@ namespace VNCServerList.Services
                 string sql = @"
                     INSERT INTO VNC_ServerList ([User], [IP], [Category], [Title],[Description], [Password], [Argument], [Icon])
                     VALUES (@User, @IP, @Category, @Title,@Description, @Password, @Argument, @Icon)";
-                
+
                 using (var command = new SqlCommand(sql, connection))
                 {
                     command.Parameters.AddWithValue("@User", server.User);
@@ -146,8 +146,8 @@ namespace VNCServerList.Services
                     command.Parameters.AddWithValue("@Description", (object)server.Description ?? DBNull.Value);
                     command.Parameters.AddWithValue("@Password", (object)server.Password ?? DBNull.Value);
                     command.Parameters.AddWithValue("@Argument", (object)server.Argument ?? DBNull.Value);
-                    command.Parameters.AddWithValue("@Icon", (object)server.Icon ?? DBNull.Value);
-                    
+                    command.Parameters.Add("@Icon", SqlDbType.Image).Value = (object)server.Icon ?? DBNull.Value;
+
                     return command.ExecuteNonQuery() > 0;
                 }
             }
@@ -163,7 +163,7 @@ namespace VNCServerList.Services
                     SET [Category] = @Category, [Title] = @Title, [Description] = @Description, 
                         [Password] = @Password, [Argument] = @Argument, [Icon] = @Icon
                     WHERE [User] = @User AND [IP] = @IP";
-                
+
                 using (var command = new SqlCommand(sql, connection))
                 {
                     command.Parameters.AddWithValue("@User", server.User);
@@ -174,7 +174,7 @@ namespace VNCServerList.Services
                     command.Parameters.AddWithValue("@Password", (object)server.Password ?? DBNull.Value);
                     command.Parameters.AddWithValue("@Argument", (object)server.Argument ?? DBNull.Value);
                     command.Parameters.AddWithValue("@Icon", (object)server.Icon ?? DBNull.Value);
-                    
+
                     return command.ExecuteNonQuery() > 0;
                 }
             }
@@ -190,7 +190,7 @@ namespace VNCServerList.Services
                     SET [IP] = @NewIP, [Category] = @Category, [Title] = @Title, [Description] = @Description, 
                         [Password] = @Password, [Argument] = @Argument, [Icon] = @Icon
                     WHERE [User] = @User AND [IP] = @OriginalIP";
-                
+
                 using (var command = new SqlCommand(sql, connection))
                 {
                     command.Parameters.AddWithValue("@User", originalUser);
@@ -201,8 +201,8 @@ namespace VNCServerList.Services
                     command.Parameters.AddWithValue("@Description", (object)newServerData.Description ?? DBNull.Value);
                     command.Parameters.AddWithValue("@Password", (object)newServerData.Password ?? DBNull.Value);
                     command.Parameters.AddWithValue("@Argument", (object)newServerData.Argument ?? DBNull.Value);
-                    command.Parameters.AddWithValue("@Icon", (object)newServerData.Icon ?? DBNull.Value);
-                    
+                    command.Parameters.Add("@Icon", SqlDbType.Image).Value = (object)newServerData.Icon ?? DBNull.Value;
+
                     return command.ExecuteNonQuery() > 0;
                 }
             }
@@ -214,7 +214,7 @@ namespace VNCServerList.Services
             {
                 connection.Open();
                 string sql = "DELETE FROM VNC_ServerList WHERE [User] = @User AND [IP] = @IP";
-                
+
                 using (var command = new SqlCommand(sql, connection))
                 {
                     command.Parameters.AddWithValue("@User", user);
@@ -224,4 +224,4 @@ namespace VNCServerList.Services
             }
         }
     }
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/Web/wwwroot/index.html b/Web/wwwroot/index.html
index 0244dff..3e2274f 100644
--- a/Web/wwwroot/index.html
+++ b/Web/wwwroot/index.html
@@ -221,7 +221,7 @@
 
     <!-- 숨겨진 템플릿들 -->
     <template id="serverItemTemplate">
-        <div class="server-item px-4 py-3 hover:bg-gray-50 transition duration-200 border-b border-gray-100 relative overflow-hidden group">
+        <div class="server-item px-4 py-3 hover:bg-gray-50 transition duration-200 border-b border-gray-100 relative overflow-hidden group {{marginClass}}">
             <div class="flex items-center justify-between">
                 <div class="flex-1 cursor-pointer" onclick="app.connectToServer('{{userName}}', '{{serverIP}}')">
                     <div class="flex items-center space-x-3">
diff --git a/Web/wwwroot/js/app.js b/Web/wwwroot/js/app.js
index d06b247..d772243 100644
--- a/Web/wwwroot/js/app.js
+++ b/Web/wwwroot/js/app.js
@@ -495,20 +495,33 @@ class VNCServerApp {
             const iconFile = document.getElementById('iconFile');
             if (iconFile.files.length > 0) {
                 const file = iconFile.files[0];
-                const reader = new FileReader();
                 
-                reader.onload = async (e) => {
-                    // Base64 데이터에서 헤더 제거 (data:image/png;base64, 부분)
-                    const base64Data = e.target.result.split(',')[1];
+                // 파일을 Base64로 변환하는 Promise
+                const base64Promise = new Promise((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        try {
+                            // Base64 데이터에서 헤더 제거 (data:image/png;base64, 부분)
+                            const base64Data = e.target.result.split(',')[1];
+                            resolve(base64Data);
+                        } catch (error) {
+                            reject(error);
+                        }
+                    };
+                    reader.onerror = reject;
+                    reader.readAsDataURL(file);
+                });
+
+                try {
+                    const base64Data = await base64Promise;
                     serverData.IconBase64 = base64Data;
-                    
-                    await this.submitServerData(serverData, form);
-                };
-                
-                reader.readAsDataURL(file);
-            } else {
-                await this.submitServerData(serverData, form);
+                } catch (error) {
+                    this.showError('아이콘 파일 처리 중 오류가 발생했습니다: ' + error.message);
+                    return;
+                }
             }
+
+            await this.submitServerData(serverData, form);
         } catch (error) {
             this.showError('서버 저장 중 오류가 발생했습니다: ' + error.message);
         }
@@ -689,28 +702,30 @@ class VNCServerApp {
         // 카테고리 헤더
         if (depth === 0) {
             html += `<div class="category-header bg-gray-100 px-4 py-2 border-b border-gray-200">
-                <div class="flex items-center justify-between">
+                <div class="flex items-center justify-between cursor-pointer" onclick="app.toggleCategory('${this.escapeHtml(categoryName)}', ${depth})">
                     <h3 class="text-lg font-semibold text-gray-800 flex items-center">
-                        <svg class="w-5 h-5 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <svg class="w-5 h-5 mr-2 text-gray-600 category-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                         </svg>
                         ${this.escapeHtml(categoryName)}
                     </h3>
                     <span class="text-sm text-gray-500">${categoryData.servers.length}개 서버</span>
                 </div>
-            </div>`;
+            </div>
+            <div id="category-${this.escapeHtml(categoryName)}-${depth}" class="category-content">`;
         } else {
             html += `<div class="subcategory-header bg-gray-50 px-4 py-2 border-b border-gray-200 ml-${depth * 4}">
-                <div class="flex items-center justify-between">
+                <div class="flex items-center justify-between cursor-pointer" onclick="app.toggleCategory('${this.escapeHtml(categoryName)}', ${depth})">
                     <h4 class="text-md font-medium text-gray-700 flex items-center">
-                        <svg class="w-4 h-4 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <svg class="w-4 h-4 mr-2 text-gray-500 category-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                         </svg>
                         ${this.escapeHtml(categoryName)}
                     </h4>
                     <span class="text-sm text-gray-500">${categoryData.servers.length}개 서버</span>
                 </div>
-            </div>`;
+            </div>
+            <div id="category-${this.escapeHtml(categoryName)}-${depth}" class="category-content">`;
         }
         
         // 서버 목록
@@ -726,6 +741,9 @@ class VNCServerApp {
                 // 아이콘 URL 생성
                 const iconUrl = `${this.apiBase}/icon/${encodeURIComponent(userName)}/${encodeURIComponent(serverIP)}`;
                 
+                // depth에 따라 margin-left 클래스 적용 (최대 ml-24)
+                const marginClass = `ml-${Math.min(depth * 4, 24)}`;
+                
                 const serverData = {
                     userName: userName,
                     serverIP: serverIP,
@@ -733,7 +751,8 @@ class VNCServerApp {
                     serverCategory: this.escapeHtml(serverCategory),
                     serverDescription: this.escapeHtml(serverDescription),
                     serverArgument: this.escapeHtml(serverArgument),
-                    iconUrl: iconUrl
+                    iconUrl: iconUrl,
+                    marginClass: marginClass
                 };
                 
                 html += this.renderTemplate('serverItemTemplate', serverData);
@@ -746,6 +765,8 @@ class VNCServerApp {
             html += this.renderCategoryNode(subcategory, categoryData.subcategories[subcategory], depth + 1);
         });
         
+        html += '</div>'; // category-content 닫기
+        
         return html;
     }