feat: 관리자 관리 검색바 구현

rnjsrntkd95 · rnjsrntkd95 · commit 9735ed1242cd · 2022-05-23T16:25:54.000+09:00
관리자를 특정 키워드로 검색할 수 있는 검색바를 구현함
키워드 입력 후 검색 버튼 클릭 시 GET요청으로 검색 조건과 키워드가 쿼리스트링으로 전달됨
diff --git a/src/main/resources/static/css/page/admin_list.css b/src/main/resources/static/css/page/admin_list.css
@@ -55,4 +55,22 @@
 }
 .admin-row-date {
     flex: 3;
+}
+.admin-search {
+    width: 100%;
+    height: 35px;
+    margin: 20px 0;
+
+    display: flex;
+    justify-content: flex-end;
+}
+.admin-search-menu {
+    width: 100px;
+}
+.admin-search-input {
+    width: 200px;
+    margin: 0 10px;
+}
+.admin-search-submit {
+    width: 75px;
 }
diff --git a/src/main/resources/static/js/page/admin_list.js b/src/main/resources/static/js/page/admin_list.js
@@ -0,0 +1,11 @@
+(() => {
+    const searchHandler = () => {
+        const condition = searchBar.querySelector(".admin-search-menu").value;
+        const kwd = searchBar.querySelector(".admin-search-input").value;
+
+        location.href = `/user/all?condition=${condition}&kwd=${kwd}`
+    }
+    const searchBar = document.querySelector(".admin-search");
+    const searchSubmit = searchBar.querySelector(".admin-search-submit");
+    searchSubmit.addEventListener("click", searchHandler);
+})()
diff --git a/src/main/resources/templates/admin_list.html b/src/main/resources/templates/admin_list.html
@@ -7,17 +7,22 @@
 <th:block layout:fragment="css">
         <link rel="stylesheet" th:href="@{/css/page/admin_list.css}" >
 </th:block>
-<th:block layout:fragment="script">
-    <!--    <script th:src="@{/js/page/home.js}"></script>-->
+<th:block layout:fragment="js">
+        <script th:src="@{/js/page/admin_list.js}"></script>
 </th:block>
 
 <div layout:fragment="content">
     <div class="content-header">관리자 등록/관리</div>
     <div class="content-container">
-        <aside class="aside" th:replace="fragment/aside :: asideFragment(title='관리자 관리', menu1='관리자 등록/관리', menu2='관리자 로그')">
-        </aside>
+        <aside class="aside" th:replace="fragment/aside :: asideFragment(title='관리자 관리', menu1='관리자 등록/관리', menu2='관리자 로그')"></aside>
         <div class="admin-container">
-            <div class="admin-search">검색바</div>
+            <div class="admin-search">
+                <select name="admin-search-menu" class="admin-search-menu">
+                    <option value="userid">아이디</option>
+                </select>
+                <input type="text" class="admin-search-input">
+                <button class="admin-search-submit">검색</button>
+            </div>
             <div class="admin-list-box">
                 <div class="admin-list-guide">
                     <div class="admin-row-number">번호</div>
diff --git a/src/main/resources/templates/fragment/layout.html b/src/main/resources/templates/fragment/layout.html
@@ -14,13 +14,14 @@
     <link rel="stylesheet" th:href="@{/css/footer.css}">
 
     <th:block layout:fragment="css"></th:block>
-    <th:block layout:fragment="js"></th:block>
 </head>
 
 <body>
     <th:block th:replace="fragment/header :: headerFragment"></th:block>
     <th:block layout:fragment="content"></th:block>
     <th:block th:replace="fragment/footer :: footerFragment"> </th:block>
+
+    <th:block layout:fragment="js"></th:block>
 </body>
 
 </html>
