login 페이지 회원가입 수정 중

src/main/resources/static/css/login/login.css

@@ -59,7 +59,7 @@ div {margin:0px;padding:0px;box-sizing:border-box;}
 @font-face {font-family: 'GmarketSansLight';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');font-weight: normal;font-style: normal;}
 @import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css'); /*font-family: 'NanumSquare';300,400,700,800*/
 
-.index_warp {width:100%;height:100%;clear:both;display:block;background:#031134 url('static/img/main_bg.png') center no-repeat;background-size:cover;}
+.index_warp {width:100%;height:100%;clear:both;display:block;background:#031134 url('../../img/main_bg.png') center no-repeat;background-size:cover;}
 .index_warp h1 {display:block;margin:8.5% auto 0px;font-family: 'GmarketSansBold';color:#fff;font-size:60px;}
 .index_warp h2 {clear:both;display:block;margin:0px auto 0px;font-family: 'GmarketSansLight';color:#fff;font-size:18px;}
 .index_warp ul {width:800px;border-radius:10px;background-color:#fff;margin:50px auto 0px;overflow:hidden;}
@@ -76,9 +76,24 @@ div {margin:0px;padding:0px;box-sizing:border-box;}
 .index_warp li:nth-child(2) .find:hover {background:#99accd;color:#fff;cursor:pointer;}
 
 .form_01 {width:100%;height:30px;padding-left:57px;font-size:14px;margin:0px auto 10px;border:0px;border:1px solid #d3d7e4;display:inline-block;border-radius:3px;color:#333;box-sizing:border-box;}
-.form_log {background:#fff url('img/log_icon1.png') 15px 5px no-repeat;}
+.form_log {background:#fff url('../../img/log_icon1.png') 15px 5px no-repeat;}
-.form_pw {background:#fff url('img/log_icon2.png') 15px 5px no-repeat;}
+.form_pw {background:#fff url('../../img/log_icon2.png') 15px 5px no-repeat;}
 .form_02 {clear:both;width:15px;height:15px;margin:0px 5px 0px 0px;border:0px;border:1px solid #d3d7e4;display:inline-block;position:relative;top:2px;}
 
 .btn_login {width:100%;height:40px;line-height:38px;text-align:center;background-color:#012f82;color:#fff;font-size:16px;display:inline-block;border-radius:5px;border:0px;margin:40px 0px 10px;transition: background 0.5s ease-in-out;}
 .btn_login:hover {cursor: pointer;background-color:#b72525;font-weight:bold;}
+
+
+.form-login{
+  width: 100%;
+  margin: auto;
+  position: absolute;
+  z-index: 200;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.login-Fail {
+  font-size: 25px;
+}

src/main/resources/static/js/login/login.js

@@ -1,3 +1,8 @@
+$(document).on('click', '#userSginModal', function (){
+  alert("##");
+  $("#userInsertModal").modal('show');
+})
+
 $(document).on('click', '#dicCodeSearchBtn', function (){
   const dicCode = $("#dicCode").val();
   if(dicCode!==''){

src/main/resources/templates/login/login.html

@@ -9,48 +9,61 @@
   <script type="text/javascript" th:src="@{/js/login/login.js}"></script>
 </th:block>
 <div layout:fragment="content">
-  <img id="img02" th:src="@{/img/img02.jpg}" class="w-100 h-100" alt="배경2">
+
-  <div id="form-signin" class="form-signin text-center bg-white">
+  <div class="index_warp form-login">
-    <!-- Security config의 loginPage("url")와 action url과 동일하게 작성-->
-    <div class="row">
-      <h2>반갑습니다</h2>
-      <p>이곳은 외사정보시스템입니다</p>
-    </div>
     <form action="/login" method="post">
       <!-- Spring Security가 적용되면 POST 방식으로 보내는 모든 데이터는 csrf 토큰 값이 필요 -->
       <input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>
       <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
-      <p th:if="${loginError}" class="error text-danger">로그인에 실패하였습니다.</p>
+      <p th:if="${loginError}" class="error text-warning login-Fail">로그인에 실패하였습니다.</p>
       <!-- 로그인 시 아이디의 name 애트리뷰트 값은 username -->
       <!-- 파라미터명을 변경하고 싶을 경우 config class formlogin()에서 .usernameParameter("") 명시 -->
-      <div class="row">
+      <h1>사이버외사정보시스템</h1>
-        <label for="username" class="col-sm-4 col-form-label mb-2">아이디</label>
+      <h2>FOREIGN AFFAIRS INTELLIGENCE CYBER SYSTEM</h2>
-        <div class="col-sm-8 mb-2">
+      <ul>
-          <input type="text" class="form-control form-control-sm" id="username" name="username">
+        <li>
-        </div>
+          <div><img src="img/logo_big.png" alt="해양경찰청"></div>
-        <label for="password" class="col-sm-4 col-form-label mb-2">비밀번호</label>
+        </li>
-        <div class="col-sm-8 mb-2">
+        <li>
-          <input type="password" class="form-control form-control-sm" id="password" name="password">
+          <img src="img/logo.png" alt="해양경찰청">
-        </div>
+          <h3>FOREIGN AFFAIRS DIVISION</h3>
-      </div>
+          <h4>LOGIN</h4>
+
+          <input type="text" name="username" id="username" placeholder="아이디" onfocus="this.placeholder=''"
+                 onblur="this.placeholder='아이디'" class="form_01 form_log">
+          <input type="password" name="password" id="password" placeholder="비밀번호" onfocus="this.placeholder=''"
+                 onblur="this.placeholder='비밀번호'" class="form_01 form_pw">
+
+          <!-- <input name="idcchk" type="checkbox" id="idcchk" class="form_02"> 아이디저장-->
           <!--<div class="checkbox mb-3">
                   <label>
                     <input type="checkbox" class="disabled" value="remember-me"> 계정저장(비활성화)
                   </label>
                 </div>-->
-      <button class="w-100 my-2 btn btn-lg btn-primary" type="submit">로그인</button>
+          <input type="submit" name="login" id="login" value="로그인" class="btn_login">
-      <div class="row my-2 justify-content-between">
+
-        <div class="col-auto">
+
+          <!--<div class="join">
             <a href="#" data-bs-toggle="modal" data-bs-target="#userInsertModal">회원가입</a>
-        </div>
+          </div>-->
+          <div class="row my-2 justify-content-between">
+
           <div class="col-auto">
-          <a href="#">아이디/비밀번호 찾기</a>
+            <a href="#"  id="userSginModal">회원가입</a>
           </div>
           </div>
-    </form>
-  </div>
 
-  <div class="modal fade" id="userInsertModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="userInsertModalLabel" aria-hidden="true">
+
+          <a href="#">
+            <div class="find">아이디/패스워드찾기</div>
+          </a>
+        </li>
+      </ul>
+    </form>
+  </div>
+</div>
+
+<div class="modal fade" id="userInsertModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="userEditModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg">
     <div class="modal-content " id="userInsertModalContent">
       <div class="modal-header bg-dark">
@@ -69,5 +82,6 @@
     </div>
   </div>
 </div>
+
 </div>
 </html>