From 6f6b9cde1d962492acf47f33121a7af740493b17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=98=84=EC=84=B1=ED=95=84?= <hyunsp@gmail.com>
Date: Tue, 9 May 2023 10:33:47 +0900
Subject: [PATCH] =?UTF-8?q?=ED=83=AD=20UI=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/page/routes/mockRouteEdit.html  | 52 ++++++++-----------
 1 file changed, 22 insertions(+), 30 deletions(-)

diff --git a/src/main/resources/templates/page/routes/mockRouteEdit.html b/src/main/resources/templates/page/routes/mockRouteEdit.html
index be7fb5c..72b3387 100644
--- a/src/main/resources/templates/page/routes/mockRouteEdit.html
+++ b/src/main/resources/templates/page/routes/mockRouteEdit.html
@@ -47,19 +47,7 @@
                             <label for="pathPattern" class="must">Path</label>
                         </div>
                     </div>
-                </div>
-            </div>
-            <div class="card mt-2">
-                <div class="card-header">
-                    <div class="d-flex justify-content-between">
-                        <h5>응답</h5>
-                        <button type="button" class="btn btn-sm btn-primary btn_add_case"><i
-                                class="fa-sharp fa-solid fa-plus"></i>케이스 추가
-                        </button>
-                    </div>
-                </div>
-                <div class="card-body" >
-                    <div id="responses">
+                    <div id="responses" class="mt-1">
                         <div class="row" th:each="response, status: *{responses}">
                             <input type="number" th:field="*{responses[__${status.index}__].statusCode}" required/>
                             <textarea th:field="*{responses[__${status.index}__].body}"></textarea>
@@ -86,8 +74,6 @@
                         </div>
                     </div>
                     <ul class="nav nav-tabs" id="responseTabTitle" role="tablist">
-                        <li class="nav-item" role="presentation">
-                        </li>
                     </ul>
                     <div class="tab-content" id="responseTabContent">
                     </div>
@@ -102,17 +88,6 @@
         </form>
         <div id="template" style="visibility: hidden; height: 0;">
             <div class="tab-pane" role="tabpanel">
-<!--                <div class="card mt-1">-->
-<!--                    <div class="card-header">-->
-<!--                        <div class="d-flex justify-content-between">-->
-<!--                            <span class="condition_name"></span>-->
-<!--                            <button type="button" class="btn btn-secondary btn-sm btn_remove_case">제거</button>-->
-<!--                        </div>-->
-<!--                    </div>-->
-<!--                    <div class="card-body">-->
-<!--                        -->
-<!--                    </div>-->
-<!--                </div>-->
                 <div class="row mt-1">
                     <div class="col-md condition">
                         <div class="card">
@@ -246,6 +221,12 @@
                         controller.addResponse();
                     });
 
+                    $('#responseTabTitle').on('click', 'button', function () {
+                        if ($(this).hasClass('btn_add_case')) {
+                            controller.addResponse();
+                        }
+                    });
+
                     $('#responseTabContent').on('click', 'button', function () {
                         if ($(this).hasClass('btn_remove_case')) {
                             controller.removeResponse($(this).attr("data-id"));
@@ -410,10 +391,19 @@
                         $('#responseTabContent').append(nodeCopy);
 
                     }
-                    console.log('#responseTabTitle li:eq(' + view.currentIdx + ') a');
-                    console.log("render: " + view.currentIdx);
+
+                    let tabButton = $('<button>').attr('class', 'nav-link btn_add_case')
+                        .attr('type', 'button')
+                        .attr('aria-selected', 'false')
+                        .text("케이스 추가");
+
+                    let li = $('<li>').attr('class', 'nav-item')
+                        .attr('role','presentation')
+                        .append(tabButton);
+
+                    $('#responseTabTitle').append(li);
+
                     $('#responseTabTitle li:eq(' + view.currentIdx + ') a').tab('show');
-                    // console.log(model);
                 }
             };
 
@@ -429,6 +419,8 @@
                         body: '',
                         conditions: [],
                     });
+
+                    view.currentIdx = model.responses.length - 1;
                     view.render();
                 },
                 removeResponse: function (idx) {
@@ -437,7 +429,7 @@
                         return;
                     }
                     model.responses.splice(idx, 1);
-                    view.currentIdx = 0;
+                    view.currentIdx = idx - 1;
                     view.render();
                 },
                 addResponseCondition: function (idx) {