사용자 관리페이지 개인정보/권한을 모달로 변경및 모달사이즈 조절

src/main/resources/static/js/admin/userMgt.js

@@ -188,6 +188,7 @@ function getUserInfo(userSeq){
       dataType:"html",
       success: function(html){
         $("#userContent").empty().append(html)
+        $("#userInfoModal").modal('show')
       },
       error:function(){
 
@@ -204,6 +205,7 @@ function getCategoryRole(userSeq){
       dataType:"html",
       success: function(html){
         $("#userContent").empty().append(html)
+        $("#userInfoModal").modal('show')
       },
       error:function(){
 

src/main/resources/templates/admin/userMgt.html

@@ -16,7 +16,7 @@
       <div class="col-12 card text-center">
         <div class="card-body">
           <div class="row justify-content-start">
-            <div class="col-xl-7">
+            <div class="col-12">
               <form method="get" th:action="@{/admin/userMgt}">
                 <input type="hidden" name="pageIndex" id="pageIndex" th:value="${searchParams.pageIndex}">
                 <div class="row justify-content-between">
@@ -138,22 +138,7 @@
                   </nav>
                 </div>
                 <div class="col-auto">
-                  <input type="button" class="btn btn-success" value="사용자 생성" data-bs-toggle="modal" data-bs-target="#userInfoModal">
+                  <input type="button" class="btn btn-success" value="사용자 생성" data-bs-toggle="modal" data-bs-target="#userInsertModal">
-                </div>
-              </div>
-            </div>
-            <div class="col-xl-5">
-              <ul class="nav nav-tabs" id="userTab" role="tablist">
-                <li class="nav-item" role="presentation">
-                  <button class="nav-link active" id="infoTab" data-bs-toggle="tab" type="button" role="tab">개인정보</button>
-                </li>
-                <li class="nav-item" role="presentation">
-                  <button class="nav-link" id="categoryTab" data-bs-toggle="tab" type="button" role="tab">권한</button>
-                </li>
-              </ul>
-              <div class="tab-content border border-top-0" id="userContent">
-                <div class="py-5">
-                  <h3>목록에서 선택해주세요.</h3>
                 </div>
               </div>
             </div>
@@ -163,11 +148,11 @@
     </div>
   </main>
 
-  <div class="modal fade" id="userInfoModal" tabindex="-1" aria-labelledby="userInfoModalLabel" aria-hidden="true">
+  <div class="modal fade" id="userInsertModal" tabindex="-1" aria-labelledby="userInsertModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-xl">
+    <div class="modal-dialog">
       <div class="modal-content ">
         <div class="modal-header">
-          <h5 class="modal-title" id="userInfoModalLabel">사용자 생성</h5>
+          <h5 class="modal-title" id="userInsertModalLabel">사용자 생성</h5>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div  class="modal-body">
@@ -239,5 +224,31 @@
       </div>
     </div>
   </div>
+
+  <div class="modal fade" id="userInfoModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <ul class="nav nav-tabs" id="userTab" role="tablist">
+            <li class="nav-item" role="presentation">
+              <button class="nav-link active" id="infoTab" data-bs-toggle="tab" type="button" role="tab">개인정보</button>
+            </li>
+            <li class="nav-item" role="presentation">
+              <button class="nav-link" id="categoryTab" data-bs-toggle="tab" type="button" role="tab">권한</button>
+            </li>
+          </ul>
+          <div class="tab-content border border-top-0" id="userContent">
+            <div class="py-5">
+              <h3>목록에서 선택해주세요.</h3>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 </html>

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

@@ -51,10 +51,10 @@
   <header th:replace="fragments/header :: headerFragment"></header>
   <div class="h-100" sec:authorize="isAnonymous()" layout:fragment="content"></div>
   <div sec:authorize="isAuthenticated()" class="row mx-0">
-    <div class="sidebar col-2 centerDiv border-end">
+    <div class="sidebar col-2 d-lg-block d-none centerDiv border-end">
       <div th:replace="fragments/leftMenu :: leftMenuFragment"></div>
     </div>
-    <div class="col-10 centerDiv">
+    <div class="col-12 col-lg-10 centerDiv">
       <div layout:fragment="content"></div>
     </div>
   </div>