로그인 페이지 수정

src/main/java/com/dbnt/faisp/config/BaseController.java

@@ -46,7 +46,7 @@ public class BaseController {
   public ModelAndView loginCheck(@AuthenticationPrincipal UserInfo loginUser) {
     ModelAndView mav = null;
     if(loginUser == null){
-      mav = new ModelAndView("redirect:/login");
+      mav = new ModelAndView("redirect:/login2");
     }else{
       mav = new ModelAndView("redirect:/dashboard");
     }
@@ -55,13 +55,13 @@ public class BaseController {
 
   @GetMapping("/login")
   public ModelAndView goLogin() { 
-    ModelAndView mav = new ModelAndView("login/login");
+    ModelAndView mav = new ModelAndView("login/login2");
     return mav;
   }
 
   @GetMapping("/login-error")
   public ModelAndView loginError() {
-    ModelAndView mav = new ModelAndView("login/login");
+    ModelAndView mav = new ModelAndView("login/login2");
     mav.addObject("loginError", true);
     return mav;
   }

src/main/java/com/dbnt/faisp/config/SecurityConfig.java

@@ -114,6 +114,7 @@ public class SecurityConfig{
     http.authorizeRequests() // 페이지 권한 설정
         .antMatchers(
             "/css/**",
+            "/font/**",
             "/img/**",
             "/js/**",
             "/vendor/**",

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

@@ -76,8 +76,8 @@ 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/login/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/login/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:15px 0px 10px;transition: background 0.5s ease-in-out;}

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

@@ -0,0 +1,170 @@
+/*로그인 폼*/
+.form-signin{
+    width: 100%;
+    max-width: 330px;
+    padding: 15px;
+    margin: auto;
+    position: absolute;
+    z-index: 200;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 10px;
+}
+
+header{
+    z-index:300;
+    background-color: white;
+}
+
+body{
+    overflow: hidden;
+}
+
+/*스크롤기능 있지만 안보이게*/
+body::-webkit-scrollbar {
+    display: none;
+}
+
+#logo{
+    z-index:300;
+}
+
+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;}
+
+
+
+@font-face {
+  font-family: 'Montserrat-Bold';
+  src: url("/font/Montserrat-Bold.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+
+.index_warp {width:100%;height:100%;clear:both;display:block;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;}
+.index_warp li {float:left;height:470px;box-sizing:border-box;padding:20px}
+/*.index_warp li:nth-child(1) {width:420px;}
+.index_warp li:nth-child(1) div{width:100%;height:100%;border-radius:10px;background-image: linear-gradient(120deg, #012f82 0%, #001a61 100%);text-align:center;padding-top:calc(50% - 115px);box-sizing:border-box;}*/
+.index_warp li:nth-child(2) {width:380px;text-align:left;color:#757575;padding:20px 55px 0px}
+.index_warp li:nth-child(2) img {margin:20px auto 0px;display:block;}
+.index_warp li:nth-child(2) h3 {clear:both;width:100%;font-family: 'GmarketSansMedium';color:#001a61;font-size:16px;text-align:left;display:block;padding:0px;margin:40px 0px 0px 0px;}
+.index_warp li:nth-child(2) h4 {clear:both;width:100%;font-family: 'GmarketSansLight';color:#8b91aa;font-size:16px;text-align:left;display:block;padding:0px;margin:5px 0px 30px 0px;}
+.index_warp li:nth-child(2) .join {float:left;width:100px;height:26px;line-height:24px;border:1px solid #99accd;border-radius:4px;font-size:13px;text-align:center;color:#8b91aa;transition: background 0.5s ease-in-out;}
+.index_warp li:nth-child(2) .join:hover {background:#99accd;color:#fff;cursor:pointer;}
+.index_warp li:nth-child(2) .find {float:right;width:150px;height:26px;line-height:24px;border:1px solid #99accd;border-radius:4px;font-size:13px;text-align:center;color:#8b91aa;transition: background 0.5s ease-in-out;}
+.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/login/log_icon1.png') 15px 5px no-repeat;}
+.form_pw {background:#fff url('../../img/login/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:15px 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;
+}
+
+
+
+
+
+
+
+/*video*/
+
+div.video {width:100vw; height:100vh; overflow:hidden;margin-top: -48px;}
+p.notic {position:absolute; top:60px; left:50px; color:#fff; font-size:18px; text-align:left;  padding:10px; font-weight:bold; background:red;}
+p.notic span {display:block; font-size:16px; margin-top:6px;}
+
+
+
+/*로그인 수정 재선언*/
+
+.index_warp h1 {margin-top:155px;}
+.index_warp ul{
+	width:380px;
+	background-color:rgba(255, 255, 255, 0.68);
+	box-shadow: rgba(0,0,0,0.5)5px 3px 20px;
+	margin-top:100px;
+	border:1px solid #fcfbfb;
+	
+}
+
+div.logo {position:absolute; top:280px; left:50%; margin-left:-100px;}
+
+
+.logintit {font-family: 'Montserrat-Bold'; text-transform:uppercase; text-align:center; font-size:45px; color:#001a61; }
+.logintit span {display:block;font-size:16px; margin-top:-8px; color:#000;}
+
+
+
+.form_01 {
+	border:none;
+	height:36px;
+	margin-bottom:6px;
+}
+
+
+.form_log {background:#f5f5f5 url('../../img/login/log_icon1.png') 15px 9px no-repeat;}
+.form_pw {background:#f5f5f5 url('../../img/login/log_icon2.png') 15px 9px no-repeat;}
+
+
+
+/*
+.index_warp li.logintxt .join, .index_warp lilogintxt .find {background:#adbdd9; border:none; color:#012f82;}
+
+.index_warp li.logintxt .join:hover, .index_warp li.logintxt .find:hover {background:#fff; color:#012f82;}
+
+*/
+.index_warp li.logintxt {width:380px;text-align:left;color:#757575;padding:75px 55px 0px}
+.index_warp li.logintxt img {margin:20px auto 0px;display:block;}
+.index_warp li.logintxt h3 {clear:both;width:100%;font-family: 'GmarketSansMedium';color:#001a61;font-size:16px;text-align:left;display:block;padding:0px;margin:40px 0px 0px 0px;}
+.index_warp li.logintxt h4 {clear:both;width:100%;font-family: 'GmarketSansLight';color:#8b91aa;font-size:16px;text-align:left;display:block;padding:0px;margin:5px 0px 30px 0px;}
+.index_warp li.logintxt .join {float:left;width:100px;height:30px;line-height:30px;border:1px solid #314f87;border-radius:4px;font-size:13px;text-align:center;color:#012f82;transition: background 0.5s ease-in-out;}
+.index_warp li.logintxt .join:hover {background:#f1f1f1;cursor:pointer;}
+.index_warp li.logintxt .find {float:right;width:150px;height:30px;line-height:30px;border:1px solid #314f87;border-radius:4px;font-size:13px;text-align:center;color:#012f82;transition: background 0.5s ease-in-out;}
+.index_warp li.logintxt .find:hover {background:#f1f1f1;cursor:pointer;}
+
+.index_warp li.logintxt .join {width:44%;}
+.index_warp li.logintxt .find {width:54%;}
+
+
+
+
+.btn_login {height:46px; margin:4px 0 40px;}

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

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="ko" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layout/layout}">
+<th:block layout:fragment="css">
+  <link rel="stylesheet" th:href="@{/css/login/login2.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">
+
+  <div class="index_warp form-login">
+    <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-warning login-Fail">로그인에 실패하였습니다.</p>
+
+      <!-- 로그인 시 아이디의 name 애트리뷰트 값은 username -->
+      <!-- 파라미터명을 변경하고 싶을 경우 config class formlogin()에서 .usernameParameter("") 명시 -->
+      <h1><img th:src="@{/img/login/tit.png}" alt="외사포털 FOREIGN AFFAIRS INTELLIGENCE MANAGEMENT SYSTEM"></h1>
+      <div class="logo"><img th:src="@{/img/login/logo.png}" alt="해양경찰청"></div>
+      <ul>
+
+        <li class="logintxt">
+          <p class="logintit pt-5"><img th:src="@{/img/login/login_txt.png}" alt="login foreign affairs division"></p>
+
+          <div class="pt-5" style="margin-top:-25px">
+            <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">
+          </div>
+
+
+          <input type="submit" name="login" id="login" value="로그인" class="btn_login">
+
+          <div class="join">
+
+            <a href="#" id="joinModalBtn">회원가입</a>
+          </div>
+          <div class="find"><a href="#" data-bs-toggle="modal" data-bs-target="#findPasswordModal">비밀번호 재설정</a></div>
+
+        </li>
+      </ul>
+    </form>
+  </div>
+
+  <p class="notic">
+    대외보안
+    <span>※ 모든 내용은 비밀에 준하여 관리됩니다.</span>
+  </p>
+  <div class="video">
+    <video class="desktop-video" preload="auto" autoplay loop muted>
+      <source th:src="@{/img/login/login_page_video.mp4}" type="video/mp4">
+    </video>
+  </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 " id="userInsertModalContent">
+        
+      </div>
+    </div>
+  </div>
+  
+  <div class="modal fade" id="findPasswordModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
+       aria-labelledby="findPasswordModalLabel" aria-hidden="true">
+    <div class="modal-dialog None">
+      <div class="modal-content " id="findPasswordModalContent">
+        <div class="modal-header bg-dark">
+          <h5 class="modal-title text-white" id="userInsertModalLabel">비밀번호 찾기</h5>
+          <button type="button" class="btn-close f-invert" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="mb-3 mt-3 row">
+            <div class="col-1"></div>
+            <label for="fDicCode" class="col-sm-3 col-form-label col-form-label-sm text-center ">디지털 식별코드</label>
+            <div class="col-sm-7">
+              <input type="text" class="form-control form-control-sm" id="fDicCode" name="dicCode" autocomplete="off">
+            </div>
+          </div>
+          <div class="mb-3 mt-3 row">
+            <div class="col-1"></div>
+            <label for="fUserId" class="col-sm-3 col-form-label col-form-label-sm text-center ">아이디</label>
+            <div class="col-sm-7">
+              <input type="text" class="form-control form-control-sm" id="fUserId" name="userId" autocomplete="off">
+            </div>
+          </div>
+          <div class="mb-3 mt-3 row">
+            <div class="col-1"></div>
+            <label for="fUserNm" class="col-sm-3 col-form-label col-form-label-sm text-center ">이름</label>
+            <div class="col-sm-7">
+              <input type="text" class="form-control form-control-sm" id="fUserNm" name="userNm" autocomplete="off">
+            </div>
+          </div>
+          <div class="mb-3 mt-3 row">
+            <div class="col-1"></div>
+            <label for="fPhoneNo" class="col-sm-3 col-form-label col-form-label-sm text-center ">휴대폰번호</label>
+            <div class="col-sm-7">
+              <input type="text" class="form-control form-control-sm" id="fPhoneNo" name="phoneNo" placeholder="휴대폰 번호는 -(하이픈)을 빼고 숫자만 입력해 주세요." autocomplete="off">
+            </div>
+          </div>
+          <button type="button" class="btn btn-sm btn-outline-primary" id="findPwBtn">찾기</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <div class="modal fade" id="changePasswordModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
+       aria-labelledby="findPasswordModalLabel" aria-hidden="true">
+    <div class="modal-dialog None">
+      <div class="modal-content " id="changePasswordModalContent">
+        <div class="modal-header bg-dark">
+          <h5 class="modal-title text-white" id="changePasswordModalLabel">비밀번호 변경</h5>
+          <button type="button" class="btn-close f-invert" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+        <form id="changePasswordFm" method="post">
+        <input type="hidden" id="changeUserSeq" name="userSeq"> 
+          <div class="mb-3 mt-3 row">
+            <div class="col-1"></div>
+            <label for="cPw" class="col-sm-3 col-form-label col-form-label-sm text-center ">비밀번호</label>
+            <div class="col-sm-7">
+              <input type="password" class="form-control form-control-sm" id="cPw" name="password" autocomplete="off">
+            </div>
+          </div>
+          <div class="mb-3 mt-3 row">
+            <div class="col-1"></div>
+            <label for="chkPw" class="col-sm-3 col-form-label col-form-label-sm text-center ">비밀번호 확인</label>
+            <div class="col-sm-7">
+              <input type="password" class="form-control form-control-sm" id="chkPw" autocomplete="off">
+            </div>
+          </div>
+          <button type="button" class="btn btn-sm btn-outline-primary" id="changePwBtn">변경</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+</html>