로그인페이지 수정

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

@@ -33,3 +33,50 @@ body::-webkit-scrollbar {
 footer{
     z-index:200;
 }
+
+html,body {height: 100%;font-family: 'Noto Sans KR';font-weight:400;font-size:14px;color:#333;}
+body {display: flex;flex-direction: column;text-align: center;margin: 0;}
+html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0px;padding:0px;border:0px}
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
+legend {position:absolute;font-size:0px;line-height:0px;text-indent:-9999em;overflow:hidden}
+input, button {margin:0px;padding:0px;border-radius:0; /*-webkit-appearance:none;*/background:none;}
+button, input[type=submit] {cursor:pointer}
+input[type=text], input[type=password], input[type=image], button {-webkit-appearance:none}
+textarea, select,button {font-style: normal; -webkit-appearance:none;}
+a {color:inherit;text-decoration:none}
+a:visited {color:inherit;text-decoration:none}
+a,img,input, a:active, a:focus {outline:none;}
+ul,li,dl,dt,dd {padding:0px;margin:0px;list-style:none;box-sizing:border-box;}
+img {margin:0px;padding:0px;}
+div {margin:0px;padding:0px;box-sizing:border-box;}
+
+
+@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');
+/*font-family: 'Noto Sans KR' font-family: 'Nanum Gothic' font-family: 'Noto Serif KR',*/
+@font-face {font-family: 'GmarketSansBold';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');font-weight: normal;font-style: normal;}
+@font-face {font-family: 'GmarketSansMedium';src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');font-weight: normal;font-style: normal;}
+@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('/img/main_bg.png') center no-repeat;background-size:cover;}
+.login_warp {width:1100px;margin:12% auto 0px;display:inline-block;}
+.login_warp li {float:left;text-align:left;}
+.login_warp li:nth-child(1) {width:65%;}
+.login_warp li:nth-child(1) img {display:block;}
+.login_warp li:nth-child(1) h1 {clear:both;width:100%;display:block;color:#fff;font-family: 'GmarketSansBold';font-size:64px;margin:70px 0px 0px 0px;}
+.login_warp li:nth-child(1) h2 {clear:both;width:100%;display:block;color:#fff;font-family: 'GmarketSansLight';font-size:18px;margin:0px 0px 0px 0px;}
+.login_warp li:nth-child(2) {width:35%;}
+.login_warp li:nth-child(2) div {background-color:rgba(255,255,255,0.1);border-radius:3px;width:380px;height:500px;padding:40px 40px 0px;box-sizing:border-box;color:#fff;}
+.login_warp li:nth-child(2) div h1 {clear:both;width:100%;display:block;padding:0px 0px 10px 0px;margin:0px 0px 80px 0px;border-bottom:1px solid rgba(255,255,255,0.5);font-family: 'Nanum Gothic';font-weight:lighter;font-size:34px;}
+.login_warp li:nth-child(2) dl {width:100%;display:flex;}
+.login_warp li:nth-child(2) dd {float:left;font-size:13px;flex:auto}
+.login_warp li:nth-child(2) dd:hover {color:#fee494;}
+.login_warp li:nth-child(2) dd span {font-size:0px;display:inline-block;width:4px;height:4px;border-radius:50%;background-color:#fff;margin:0px 7px 0px 0px;position:relative;top:-7px;}
+
+.form_01 {width:100%;height:35px;padding-left:55px;font-size:14px;margin:0px auto 10px;border:0px;background:#fff;display:inline-block;border-radius:2px;color:#333;box-sizing:border-box;}
+.form_log {background:#fff url('/img/login_icon01.png') 20px 4px no-repeat;}
+.form_pw {background:#fff url('/img/login_icon02.png') 20px 4px no-repeat;}
+.form_02 {width:15px;height:15px;margin:0px 5px 0px 0px;border:0px;background-color:#fff;display:inline-block;position:relative;top:2px;}
+
+.btn_login {width:100%;height:40px;line-height:38px;text-align:center;background-color:#3356a4;color:#fff;font-size:16px;display:inline-block;border-radius:5px;border:0px;margin:100px 0px 10px;transition: background 0.5s ease-in-out;}
+.btn_login:hover {cursor: pointer;background-color:#b72525;font-weight:bold;}

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

@@ -4,8 +4,8 @@
       xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
       xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
 <head>
-  <meta charset="UTF-8" />
+  <meta charset="UTF-8"/>
-  <title>해양경찰청 보안종합포털</title>
+  <title>해양경찰청 보안정보시스템</title>
 
   <!--bootstrap-->
   <link rel="stylesheet" th:href="@{/vendor/bootstrap-5.2.0-dist/css/bootstrap.min.css}">
@@ -24,8 +24,10 @@
   <!--bootstrap-->
   <script type="text/javascript" th:src="@{/vendor/bootstrap-5.2.0-dist/js/bootstrap.bundle.min.js}"></script>
   <!--bootstrap-datepicker-->
-  <script type="text/javascript" th:src="@{/vendor/bootstrap-datepicker-1.9.0-dist/js/bootstrap-datepicker.min.js}"></script>
+  <script type="text/javascript"
-  <script type="text/javascript" th:src="@{/vendor/bootstrap-datepicker-1.9.0-dist/locales/bootstrap-datepicker.ko.min.js}"></script>
+          th:src="@{/vendor/bootstrap-datepicker-1.9.0-dist/js/bootstrap-datepicker.min.js}"></script>
+  <script type="text/javascript"
+          th:src="@{/vendor/bootstrap-datepicker-1.9.0-dist/locales/bootstrap-datepicker.ko.min.js}"></script>
   <!--summernote-->
   <script type="text/javascript" th:src="@{/vendor/summernote-0.8.18-dist/summernote-lite.min.js}"></script>
   <script type="text/javascript" th:src="@{/vendor/summernote-0.8.18-dist/lang/summernote-ko-KR.min.js}"></script>
@@ -46,20 +48,20 @@
   </th:block>-->
 </head>
 <body class="d-flex flex-column h-100">
-  <header th:replace="fragments/header :: headerFragment"></header>
+<header th:replace="fragments/header :: headerFragment"></header>
-  <div sec:authorize="isAnonymous()" layout:fragment="content"></div>
+<div sec:authorize="isAnonymous()" layout:fragment="content"></div>
-  <div sec:authorize="isAuthenticated()" class="row h-100 mx-0">
+<div sec:authorize="isAuthenticated()" class="row h-100 mx-0">
   <div class="col-2 border-end">
     <div th:replace="fragments/leftMenu :: leftMenuFragment"></div>
   </div>
   <div class="col-10">
     <div layout:fragment="content"></div>
   </div>
-  </div>
+</div>
-  <footer th:replace="fragments/footer :: footerFragment"></footer>
+<footer th:replace="fragments/footer :: footerFragment"></footer>
-  <div id="fadeDiv" style="display: none;">
+<div id="fadeDiv" style="display: none;">
   <div class="p-5 rounded"><h1>저장중입니다.</h1></div>
-  </div>
+</div>
-  <th:block layout:fragment="modal"></th:block>
+<th:block layout:fragment="modal"></th:block>
 </body>
 </html>

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

@@ -1,21 +1,26 @@
 <!DOCTYPE html>
 <html lang="ko" xmlns:th="http://www.thymeleaf.org"
       xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      layout:decorate="~{layout/layout}">
+      layout:decorate="~{layout/layout}"
+>
+
 <th:block layout:fragment="css">
   <link rel="stylesheet" th:href="@{/css/login/login.css}">
 </th:block>
 <th:block layout:fragment="script">
   <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">
+  <!--  <img id="img02" th:src="@{/img/main_bg.png}" class="w-100 h-100" alt="배경2">-->
-  <div id="form-signin" class="form-signin text-center bg-white">
+<!--  <div id="form-signin" class="form-signin text-center bg-white">-->
     <!-- Security config의 loginPage("url")와 action url과 동일하게 작성-->
-    <div class="row">
+
-      <h2>반갑습니다</h2>
+<!--    <div class="row">-->
-      <p>이곳은 보안정보시스템입니다</p>
+<!--      <h2>반갑습니다</h2>-->
-    </div>
+<!--      <p>이곳은 보안정보관리시스템입니다</p>-->
+<!--    </div>-->
+
     <form action="/login" method="post">
       <!-- Spring Security가 적용되면 POST 방식으로 보내는 모든 데이터는 csrf 토큰 값이 필요 -->
       <input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>
@@ -23,33 +28,64 @@
       <p th:if="${loginError}" class="error text-danger">로그인에 실패하였습니다.</p>
       <!-- 로그인 시 아이디의 name 애트리뷰트 값은 username -->
       <!-- 파라미터명을 변경하고 싶을 경우 config class formlogin()에서 .usernameParameter("") 명시 -->
-      <div class="row">
+
-        <label for="username" class="col-sm-4 col-form-label mb-2">아이디</label>
+      <div class="index_warp ">
-        <div class="col-sm-8 mb-2">
+        <ul class="login_warp">
-          <input type="text" class="form-control" id="username" name="username">
+          <li>
+            <img src="img/logo_white.png" alt=""/>
+            <h1>보안정보관리시스템</h1>
+            <h2>NATIONAL SECRET INTELLIGENCE MANAGEMENT SYSTEM</h2>
+          </li>
+          <li>
+            <div>
+              <h1>Login</h1>
+              <input th:src="@{/img/login_icon02.png}" type="text" name="username" id="username" placeholder="아이디" onfocus="this.placeholder=''" onblur="this.placeholder='아이디'" class="form_01 form_log">
+              <input th:src="@{/img/login_icon02.png}" type="password" name="password" id="password" placeholder="비밀번호" onfocus="this.placeholder=''" onblur="this.placeholder='비밀번호'" class="form_01 form_pw">
+              <input name="idchk" type="checkbox" id="idchk" class="form_02"> 아이디저장
+
+              <input type="submit" name="login" id="login" value="로그인" class="btn_login">
+
+              <dl>
+                <dd><a href="#" data-bs-toggle="modal" data-bs-target="#userInsertModal"><span>dot</span>회원가입</a></dd>
+                <dd><a href="#"><span>dot</span>아이디/비밀번호찾기</a></dd>
+              </dl>
             </div>
-        <label for="password" class="col-sm-4 col-form-label mb-2">비밀번호</label>
+          </li>
-        <div class="col-sm-8 mb-2">
+        </ul>
-          <input type="password" class="form-control" id="password" name="password">
-        </div>
-      </div>
-      <!--<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>
-      <div class="row my-2 justify-content-between">
-        <div class="col-auto">
-          <a href="#" data-bs-toggle="modal" data-bs-target="#userInsertModal">회원가입</a>
-        </div>
-        <div class="col-auto">
-          <a href="#">아이디/비밀번호 찾기</a>
-        </div>
-      </div>
-    </form>
       </div>
 
+
+
+
+<!--      <div class="row">-->
+<!--        <label for="username" class="col-sm-4 col-form-label mb-2">아이디</label>-->
+<!--        <div class="col-sm-8 mb-2">-->
+<!--          <input type="text" class="form-control" id="username" name="username">-->
+<!--        </div>-->
+<!--        <label for="password" class="col-sm-4 col-form-label mb-2">비밀번호</label>-->
+<!--        <div class="col-sm-8 mb-2">-->
+<!--          <input type="password" class="form-control" id="password" name="password">-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      &lt;!&ndash;<div class="checkbox mb-3">-->
+<!--        <label>-->
+<!--          <input type="checkbox" class="disabled" value="remember-me"> 계정저장(비활성화)-->
+<!--        </label>-->
+<!--      </div>&ndash;&gt;-->
+<!--      <button class="w-100 my-2 btn btn-lg btn-primary" type="submit">로그인</button>-->
+<!--      <div class="row my-2 justify-content-between">-->
+<!--        <div class="col-auto">-->
+<!--          <a href="#" data-bs-toggle="modal" data-bs-target="#userInsertModal">회원가입</a>-->
+<!--        </div>-->
+<!--        <div class="col-auto">-->
+<!--          <a href="#">아이디/비밀번호 찾기</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">
     <div class="modal-dialog modal-lg">
       <div class="modal-content ">