Merge pull request 'admin: 활성화 탭 변경시 작성 데이터 유지 #10' (#11) from feature/#10 into main

Reviewed-on: #11

poc/admin/src/main/resources/templates/layout/common.html

@@ -39,55 +39,26 @@
         let tabContentCache = {};
 
         Reqhelper.reqGetJson('/admin/tab/list', function(data) {
+            if(data.length !== 0) {
                 data.forEach(function(item) {
                     loadTab(item.id, item.name, item.url);
                 })
+                if (data.length > 0) {
+                    openTab(null, data[0].id);
+                    loadTabContent(data[0].id, data[0].url)
+                }
+            }
         });
 
-
+        //DB에 저장된 탭 생성
+        //여러 탭이 로드 될 경우 가장 좌측 탭을 열어준다.
          function loadTab(id,tabName, url) {
-            const newTab = $('<li></li>').addClass('tab-item');
+             createTab(id, tabName, url);
-            const newTabLink = $('<a></a>').addClass('tab-link')
+             openTab({currentTarget: $(`#${id}-tab`)}, id);
-                .attr('id', `${id}-tab`)
-                .attr('href', `#${id}`)
-                .attr('role', 'tab')
-                .attr('aria-controls', `${id}`)
-                .attr('aria-selected', 'false')
-                .text(tabName)
-                .click(function(event) {
-                    openTab(event, id);
              loadTabContent(id, url);
-                });
-
-            const closeButton = $('<span></span>').addClass('close-button')
-                .text('X')
-                .click(function(event) {
-                    $(`#${id}`).remove();
-                    $(`#${id}-tab`).parent().remove();
-                    event.stopPropagation();
-                    Reqhelper.reqPostJson('/admin/tab/delete', {
-                        id : id
-                    }, function() {
-                        console.log('Tab deleted successfully');
-                    }, function() {
-                        console.log('Failed to delete tab');
-                    })
-                });
-
-            newTabLink.append(closeButton);
-            newTab.append(newTabLink);
-            $('#myTab').append(newTab);
-
-            const newTabContent = $('<div></div>').addClass('tab-pane')
-                .attr('id', id)
-                .attr('role', 'tabpanel')
-                .attr('aria-labelledby', `${id}-tab`)
-                .on('input', 'input, textarea', function() {
-                    tabContentCache[id] = newTabContent.html();
-                });
-            $('#myTabContent').append(newTabContent);
         }
 
+        // 탭 생성 및 DB Insert 메서드
         function addTab(tabName, url) {
             Reqhelper.reqPostJson('/admin/tab/add', {
                 name: tabName,
@@ -95,6 +66,31 @@
             }, function(response) {
                 console.log('Tab created successfully');
                 const tabId = response.id;
+                createTab(tabId, tabName, url);
+                openTab({currentTarget: $(`#${tabId}-tab`)}, tabId);
+                loadTabContent(tabId, url);
+            }, function() {
+                console.log('Failed to create tab');
+            });
+        }
+
+        function loadTabContent(tabId, url) {
+            if (!tabContentCache[tabId]) {
+                $.ajax({
+                    url: url,
+                    type: 'GET',
+                    success: function(data) {
+                        tabContentCache[tabId] = data;
+                        $('#' + tabId).html(data);
+                    },
+                    error: function() {
+                        alert('Failed to load tab content');
+                    }
+                });
+            }
+        }
+
+        function createTab(tabId, tabName, url) {
             const newTab = $('<li></li>').addClass('tab-item');
             const newTabLink = $('<a></a>').addClass('tab-link')
                 .attr('id', `${tabId}-tab`)
@@ -111,16 +107,7 @@
             const closeButton = $('<span></span>').addClass('close-button')
                 .text('X')
                 .click(function(event) {
-                        $(`#${tabId}`).remove();
+                    deleteTab(event, tabId);
-                        $(`#${tabId}-tab`).parent().remove();
-                        event.stopPropagation();
-                        Reqhelper.reqPostJson('/admin/tab/delete', {
-                            id : tabId
-                        }, function() {
-                            console.log('Tab deleted successfully');
-                        }, function() {
-                            console.log('Failed to delete tab');
-                        })
                 });
 
             newTabLink.append(closeButton);
@@ -135,28 +122,6 @@
                     tabContentCache[tabId] = newTabContent.html();
                 });
             $('#myTabContent').append(newTabContent);
-            }, function() {
-                console.log('Failed to create tab');
-            });
-
-        }
-
-        function loadTabContent(tabId, url) {
-            if (tabContentCache[tabId]) {
-                $('#' + tabId).html(tabContentCache[tabId]);
-            } else {
-                $.ajax({
-                    url: url,
-                    type: 'GET',
-                    success: function(data) {
-                        tabContentCache[tabId] = data;
-                        $('#' + tabId).html(data);
-                    },
-                    error: function() {
-                        alert('Failed to load tab content');
-                    }
-                });
-            }
         }
 
         function openTab(evt, tabId) {
@@ -169,12 +134,23 @@
             $(evt.currentTarget).addClass('active');
         }
 
+        function deleteTab(event, tabId) {
+            $(`#${tabId}`).remove();
+            $(`#${tabId}-tab`).parent().remove();
+            event.stopPropagation();
+            Reqhelper.reqPostJson('/admin/tab/delete', {
+                id : tabId
+            }, function() {
+                console.log('Tab deleted successfully');
+            }, function() {
+                console.log('Failed to delete tab');
+            })
+        }
+
+        // 탭 이동 메서드
         $(function() {
             $("#myTab").sortable({
-                placeholder: "ui-state-highlight",
+                placeholder: "ui-state-highlight"
-                update: function(event, ui) {
-
-                }
             });
             $("#myTab").disableSelection();
         });