변수 Snippet

src/main/resources/templates/layout/api_tester_layout.html

@@ -112,6 +112,40 @@
                 $('#variable_modal').modal('show');
             });
 
+            $('.btn_add_variables').on('click', function() {
+                var tbody = $('.variables');
+
+                // Create a new row with empty key and value inputs
+                var newRow = $('<tr>');
+                var keyInput = $('<input>').attr('type', 'text').addClass('form-control key-input');
+                var valueInput = $('<input>').attr('type', 'text').addClass('form-control value-input');
+                var deleteButton = $('<button>').attr('type', 'button').addClass('btn btn-danger btn-sm delete-variable').html('<i class="fa fa-trash"></i>');
+
+                newRow.append($('<td>').append(keyInput));
+                newRow.append($('<td>').append(valueInput));
+                newRow.append($('<td>').append(deleteButton));
+                tbody.append(newRow);
+
+                // Event listeners for the new inputs
+                keyInput.on('change', function() {
+                    var newKey = $(this).val();
+                    window.globals[newKey] = ''; // Initialize the key with an empty value
+                    valueInput.attr('data-old-key', newKey);
+                });
+
+                valueInput.on('change', function() {
+                    var key = $(this).closest('tr').find('.key-input').val();
+                    var newValue = $(this).val();
+                    window.globals[key] = newValue;
+                });
+
+                deleteButton.on('click', function() {
+                    var key = $(this).closest('tr').find('.key-input').val();
+                    delete window.globals[key];
+                    $(this).closest('tr').remove();
+                });
+            });
+
             document.addEventListener('keydown', (event) => {
                 if (event.key === 'Escape') {
                     container.classList.remove('full-screen');

src/main/resources/templates/page/tester/apiCollection.html

@@ -164,8 +164,7 @@
                             <th scope="col">키</th>
                             <th scope="col">값</th>
                             <th scope="col">
-                                <button type="button" class="btn btn-secondary btn-sm btn_add_variables">추가
-                                </button>
+                                <button type="button" class="btn btn-secondary btn-sm btn_add_variables">추가</button>
                             </th>
                         </tr>
                         </thead>

src/main/resources/templates/page/tester/apiTester.html

@@ -20,8 +20,9 @@
             </div>
         </div>
     </div>
-    <div id="popperContent" style="display: none;">
-        Your Popper content here.
+    <div id="popperContent" class="variable_popper" style="display: none;">
+        <div class="variable_popper">
+        </div>
     </div>
     <div style="display: none">
         <ul id="servers">