DBNT
/
geoinfo_eGov_work
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 로그인 팝업 뒤로가기 추가 및 모바일에 로그인화면 뜨도록 수정

main
thkim 2024-06-26 16:49:30 +09:00
parent c70c23046a
commit f0eae1eac1
9 changed files with 177 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/main/webapp/WEB-INF/clipreport4/DataConnection.properties
View File

@ -14,9 +14,13 @@ dataconnection1.version=
#dataconnection1.url=jdbc:oracle:thin:@192.168.0.29:1521:xe #dataconnection1.url=jdbc:oracle:thin:@192.168.0.29:1521:xe
#dataconnection1.url=jdbc:oracle:thin:@192.168.0.8:1521:orcl #dataconnection1.url=jdbc:oracle:thin:@192.168.0.8:1521:orcl
################################################################ ################################################################
# dataconnection1.url=jdbc:oracle:thin:@192.168.0.8:3452:orcl is prod # \uc544\ub798\ub294 \uac74\uae30\uc5f0 \uc6b4\uc601\uc11c\ubc84
# dataconnection1.url=jdbc:oracle:thin:@192.168.0.8:3452:orcl # dataconnection1.url=jdbc:oracle:thin:@192.168.0.8:3452:orcl
dataconnection1.url=jdbc:oracle:thin:@118.219.150.34:1521:ORAGEODEV #dataconnection1.url=jdbc:oracle:thin:@192.168.0.8:3452:orcl
# \uc544\ub798\ub294 \ub514\ube44\uc5d4\ud14d \uac1c\ubc1c \uc11c\ubc84
#dataconnection1.url=jdbc:oracle:thin:@118.219.150.34:1521:ORAGEODEV
# \uc544\ub798\ub294 \ub514\ube44\uc5d4\ud14d \ub85c\uceec \uc11c\ubc84
dataconnection1.url=jdbc:oracle:thin:@127.0.0.1:1521:ORAGEODEV
################################################################ ################################################################
dataconnection1.user=geoinfo dataconnection1.user=geoinfo

28
src/main/webapp/WEB-INF/views/home/include/header.jsp
View File

@ -114,7 +114,7 @@
============================================================== --> ============================================================== -->
<!-- 공통 script --> <!-- 공통 script -->
<script type="text/javascript" <script type="text/javascript"
src="${pageContext.request.contextPath}/com/js/common.js?v=20240610_1352"></script> src="${pageContext.request.contextPath}/com/js/common.js?v=20240610_1353"></script>
<!-- 스타일 css --> <!-- 스타일 css -->
<link rel="stylesheet" <link rel="stylesheet"
@ -122,7 +122,7 @@
<!-- 전체 조합 css --> <!-- 전체 조합 css -->
<link rel="stylesheet" <link rel="stylesheet"
href="${pageContext.request.contextPath}/com/css/common.v2.0.css?v=20240610_1352" /> href="${pageContext.request.contextPath}/com/css/common.v2.0.css?v=20240610_1353" />
<!-- ============================================================== <!-- ==============================================================
IE9 HTML5 일부지원 IE9 HTML5 일부지원
@ -196,6 +196,7 @@
</script> </script>
<!-- 로그인 시작 --> <!-- 로그인 시작 -->
<div id="login" class="login-popup mfp-hide"> <div id="login" class="login-popup mfp-hide">
<button id="mfp-back" class="mfp-back"></button>
<button id="mfp-close" class="mfp-close">X</button> <button id="mfp-close" class="mfp-close">X</button>
<form name="login" method="post"> <form name="login" method="post">
<input type="hidden" name="login_param" value=""> <input type="hidden" name="login_param" value="">
@ -280,6 +281,8 @@
var signInPrefix = document.getElementById("sign-in-prefix"); var signInPrefix = document.getElementById("sign-in-prefix");
// 로그인 팝업 뒤로가기 버튼
var mfpBackButton = document.getElementById("mfp-back");
// 각 라디오 버튼 요소 가져오기 // 각 라디오 버튼 요소 가져오기
var radioInputs = document.getElementsByName("cls"); var radioInputs = document.getElementsByName("cls");
@ -311,12 +314,33 @@
var signinWrapperEle = document var signinWrapperEle = document
.getElementById("signin-wrapper"); .getElementById("signin-wrapper");
signinWrapperEle.style.display = "block"; signinWrapperEle.style.display = "block";
mfpBackButton.style.display = "inline-block";
} }
// 각 버튼에 클릭 이벤트 리스너 추가 // 각 버튼에 클릭 이벤트 리스너 추가
clsButton0.addEventListener("click", handleButtonClick); clsButton0.addEventListener("click", handleButtonClick);
clsButton1.addEventListener("click", handleButtonClick); clsButton1.addEventListener("click", handleButtonClick);
clsButton2.addEventListener("click", handleButtonClick); clsButton2.addEventListener("click", handleButtonClick);
// 로그인 팝업 뒤로가기 클릭 이벤트 핸들러 함수
function handleMfpBackButtonClick(event) {
var clickedButtonId = event.currentTarget.id;
var accountTypeWrapperEle = document.getElementById("account-type-wrapper");
accountTypeWrapperEle.style.display="block";
var signinWrapperEle = document.getElementById("signin-wrapper");
signinWrapperEle.style.display="none";
var signInPrefix = document.getElementById("sign-in-prefix");
signInPrefix.innerHTML = '';
mfpBackButton.style.display = "none";
}
// 로그인 팝업 뒤로가기 버튼에 클릭 이벤트 리스너 추가
mfpBackButton.addEventListener("click", handleMfpBackButtonClick);
</script> </script>

95
src/main/webapp/com/css/common.v2.0.css
View File

@ -3100,11 +3100,21 @@ ul.faq-q > li textarea {
/* ====================================== */ /* ====================================== */
/* ====================================== */ /* ====================================== */
.login-popup-wrapper .mfp-content.login-popup-content { .mfp-bg.mfp-fade.mfp-ready {
width: 100vw;
min-width: 620px;
}
.mfp-wrap.mfp-close-btn-in.mfp-auto-cursor.mfp-fade.mfp-ready {
width: 100vw;
min-width: 620px;
}
.mfp-content.login-popup-content {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
} }
.login-popup-wrapper .mfp-content .login-popup { .mfp-content .login-popup {
position: relative; position: relative;
width: 610px; width: 610px;
height: 347px; height: 347px;
@ -3114,14 +3124,31 @@ ul.faq-q > li textarea {
border: 1px solid #000000; border: 1px solid #000000;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
} }
.login-popup-wrapper .mfp-content .login-popup .contents-title { .mfp-content .login-popup .mfp-back {
display: none;
width: 60px;
height: 60px;
position: absolute;
left: 0px;
top: 0px;
border-width: 0px;
background-color: #333333;
-moz-background-size: 30%;
-webkit-background-size: 30%;
-o-background-size: 30%;
background-size: 30%;
background-repeat: no-repeat;
background-position: center;
background-image: url("/com/img/main/signin/back.svg?v=20240607_1153");
}
.mfp-content .login-popup .contents-title {
font-size: 36px; font-size: 36px;
margin-bottom: 10px; margin-bottom: 10px;
color: #161616; color: #161616;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
} }
.login-popup-wrapper .mfp-content .login-popup .t-center .account-type-wrapper > p { .mfp-content .login-popup .t-center .account-type-wrapper > p {
text-align: center; text-align: center;
width: 100%; width: 100%;
display: block; display: block;
@ -3130,11 +3157,11 @@ ul.faq-q > li textarea {
color: #161616; color: #161616;
font-weight: normal; font-weight: normal;
} }
.login-popup-wrapper .mfp-content .login-popup .t-center .account-type-wrapper > ul { .mfp-content .login-popup .t-center .account-type-wrapper > ul {
width: 100%; width: 100%;
display: inline-block; display: inline-block;
} }
.login-popup-wrapper .mfp-content .login-popup .t-center .account-type-wrapper > ul > li { .mfp-content .login-popup .t-center .account-type-wrapper > ul > li {
width: 150px; width: 150px;
height: 150px; height: 150px;
display: inline-block; display: inline-block;
@ -3146,26 +3173,26 @@ ul.faq-q > li textarea {
border-radius: 20px; border-radius: 20px;
padding: 30px; padding: 30px;
} }
.login-popup-wrapper .mfp-content .login-popup .t-center .account-type-wrapper > ul > li:hover { .mfp-content .login-popup .t-center .account-type-wrapper > ul > li:hover {
background: #3378C1; background: #3378C1;
color: #ffffff; color: #ffffff;
} }
.login-popup-wrapper .mfp-content .login-popup .t-center .account-type-wrapper > ul > li:hover > div > div.icons.individual-user { .mfp-content .login-popup .t-center .account-type-wrapper > ul > li:hover > div > div.icons.individual-user {
background-image: url("/com/img/main/signin/individual_user_white.svg?v=20240607_1153"); background-image: url("/com/img/main/signin/individual_user_white.svg?v=20240607_1153");
} }
.login-popup-wrapper .mfp-content .login-popup .t-center .account-type-wrapper > ul > li:hover > div > div.icons.corporate-user { .mfp-content .login-popup .t-center .account-type-wrapper > ul > li:hover > div > div.icons.corporate-user {
background-image: url("/com/img/main/signin/corporate_user_white.svg?v=20240607_1153"); background-image: url("/com/img/main/signin/corporate_user_white.svg?v=20240607_1153");
} }
.login-popup-wrapper .mfp-content .login-popup .t-center .account-type-wrapper > ul > li:hover > div > div.icons.ordering-organization { .mfp-content .login-popup .t-center .account-type-wrapper > ul > li:hover > div > div.icons.ordering-organization {
background-image: url("/com/img/main/signin/ordering_organization_white.svg?v=20240607_1153"); background-image: url("/com/img/main/signin/ordering_organization_white.svg?v=20240607_1153");
} }
.login-popup-wrapper .mfp-content .login-popup .t-center .account-type-wrapper > ul > li.center { .mfp-content .login-popup .t-center .account-type-wrapper > ul > li.center {
margin: 0px 30px; margin: 0px 30px;
} }
.login-popup-wrapper .mfp-content .login-popup .t-center .account-type-wrapper > ul > li > div { .mfp-content .login-popup .t-center .account-type-wrapper > ul > li > div {
text-align: center; text-align: center;
} }
.login-popup-wrapper .mfp-content .login-popup .t-center .account-type-wrapper > ul > li > div > div.icons { .mfp-content .login-popup .t-center .account-type-wrapper > ul > li > div > div.icons {
display: inline-block; display: inline-block;
width: 75px; width: 75px;
height: 75px; height: 75px;
@ -3176,28 +3203,28 @@ ul.faq-q > li textarea {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.login-popup-wrapper .mfp-content .login-popup .t-center .account-type-wrapper > ul > li > div > div.icons.individual-user { .mfp-content .login-popup .t-center .account-type-wrapper > ul > li > div > div.icons.individual-user {
background-image: url("/com/img/main/signin/individual_user.svg?v=20240607_1153"); background-image: url("/com/img/main/signin/individual_user.svg?v=20240607_1153");
} }
.login-popup-wrapper .mfp-content .login-popup .t-center .account-type-wrapper > ul > li > div > div.icons.corporate-user { .mfp-content .login-popup .t-center .account-type-wrapper > ul > li > div > div.icons.corporate-user {
background-image: url("/com/img/main/signin/corporate_user.svg?v=20240607_1153"); background-image: url("/com/img/main/signin/corporate_user.svg?v=20240607_1153");
} }
.login-popup-wrapper .mfp-content .login-popup .t-center .account-type-wrapper > ul > li > div > div.icons.ordering-organization { .mfp-content .login-popup .t-center .account-type-wrapper > ul > li > div > div.icons.ordering-organization {
background-image: url("/com/img/main/signin/ordering_organization.svg?v=20240607_1153"); background-image: url("/com/img/main/signin/ordering_organization.svg?v=20240607_1153");
} }
.login-popup-wrapper .mfp-content .login-popup .t-center .account-type-wrapper > ul > li > div > div > span { .mfp-content .login-popup .t-center .account-type-wrapper > ul > li > div > div > span {
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: normal;
} }
.login-popup-wrapper .mfp-content .login-popup .t-center .login-radio { .mfp-content .login-popup .t-center .login-radio {
line-height: 50px; line-height: 50px;
border-top: 1px solid #000000; border-top: 1px solid #000000;
border-bottom: 1px solid #000000; border-bottom: 1px solid #000000;
} }
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper { .mfp-content .login-popup .signin-wrapper {
text-align: center; text-align: center;
} }
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > p { .mfp-content .login-popup .signin-wrapper > p {
text-align: center; text-align: center;
width: 100%; width: 100%;
display: block; display: block;
@ -3206,43 +3233,43 @@ ul.faq-q > li textarea {
color: #161616; color: #161616;
font-weight: normal; font-weight: normal;
} }
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row { .mfp-content .login-popup .signin-wrapper > .login-form-row {
display: inline-block; display: inline-block;
font-size: 0px; font-size: 0px;
} }
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row { .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row {
vertical-align: top; vertical-align: top;
} }
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.id-password-wrapper { .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.id-password-wrapper {
display: inline-block; display: inline-block;
width: 330px; width: 330px;
height: 106px; height: 106px;
padding: 0px; padding: 0px;
margin-right: 10px; margin-right: 10px;
} }
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.id-password-wrapper > input { .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.id-password-wrapper > input {
height: 48px; height: 48px;
margin: 0px; margin: 0px;
} }
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.id-password-wrapper > input#id { .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.id-password-wrapper > input#id {
margin-bottom: 10px; margin-bottom: 10px;
} }
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.signin-button-wrapper { .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.signin-button-wrapper {
display: inline-block; display: inline-block;
width: 139px; width: 139px;
height: 106px; height: 106px;
padding: 0px; padding: 0px;
} }
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.signin-button-wrapper > button { .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.signin-button-wrapper > button {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: 106px; height: 106px;
font-size: 16px; font-size: 16px;
} }
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.signin-button-wrapper > button.mfp-popup-close { .mfp-content .login-popup .signin-wrapper > .login-form-row > .contents-row.signin-button-wrapper > button.mfp-popup-close {
display: none; display: none;
} }
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .login-form-options { .mfp-content .login-popup .signin-wrapper > .login-form-row > .login-form-options {
display: flex; /* 혹은 grid */ display: flex; /* 혹은 grid */
justify-content: space-between; /* 혹은 원하는 정렬 방식 */ justify-content: space-between; /* 혹은 원하는 정렬 방식 */
align-items: center; align-items: center;
@ -3250,24 +3277,24 @@ ul.faq-q > li textarea {
font-size: 13px; font-size: 13px;
color: #333333; color: #333333;
} }
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .login-form-options > .checkbox-container { .mfp-content .login-popup .signin-wrapper > .login-form-row > .login-form-options > .checkbox-container {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 13px; font-size: 13px;
} }
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .login-form-options > .checkbox-container > input { .mfp-content .login-popup .signin-wrapper > .login-form-row > .login-form-options > .checkbox-container > input {
margin: 0px; margin: 0px;
margin-right: 10px; margin-right: 10px;
} }
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .login-form-options > .checkbox-container > label { .mfp-content .login-popup .signin-wrapper > .login-form-row > .login-form-options > .checkbox-container > label {
cursor: pointer; cursor: pointer;
} }
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .login-form-options > .find-account-links > a { .mfp-content .login-popup .signin-wrapper > .login-form-row > .login-form-options > .find-account-links > a {
color: #333333; color: #333333;
text-decoration: none; text-decoration: none;
font-size: 13px; font-size: 13px;
} }
.login-popup-wrapper .mfp-content .login-popup .signin-wrapper > .login-form-row > .login-form-options > .find-account-links > .vertical-bar { .mfp-content .login-popup .signin-wrapper > .login-form-row > .login-form-options > .find-account-links > .vertical-bar {
color: #999999; color: #999999;
} }

2
src/main/webapp/com/css/common.v2.0.css.map
View File

File diff suppressed because one or more lines are too long

1
src/main/webapp/com/css/open_target.bat Normal file
View File

@ -0,0 +1 @@
explorer ..\..\..\..\..\..\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\geoinfo_eGov_work\com\css\

30
src/main/webapp/com/css/sass/common.v2.0.scss
View File

@ -2687,8 +2687,15 @@ ul.faq-q > li textarea {
/* ====================================== */ /* ====================================== */
// 메인 로그인 팝업 시작 // 메인 로그인 팝업 시작
/* ====================================== */ /* ====================================== */
//mfp-back
.login-popup-wrapper { .mfp-bg.mfp-fade.mfp-ready {
width: 100vw;
min-width: 620px;
}
.mfp-wrap.mfp-close-btn-in.mfp-auto-cursor.mfp-fade.mfp-ready {
width: 100vw;
min-width: 620px;
}
.mfp-content { .mfp-content {
&.login-popup-content { &.login-popup-content {
display: table-cell; display: table-cell;
@ -2704,7 +2711,23 @@ ul.faq-q > li textarea {
border: 1px solid #000000; border: 1px solid #000000;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
.mfp-back {
display: none;
width: 60px;
height: 60px;
position: absolute;
left: 0px;
top: 0px;
border-width: 0px;
background-color: #333333;
-moz-background-size: 30%;
-webkit-background-size: 30%;
-o-background-size: 30%;
background-size: 30%;
background-repeat: no-repeat;
background-position: center;
background-image: url("/com/img/main/signin/back.svg?v=20240607_1153");
}
.contents-title { .contents-title {
font-size: 36px; font-size: 36px;
margin-bottom: 10px; margin-bottom: 10px;
@ -2881,7 +2904,6 @@ ul.faq-q > li textarea {
} }
} }
} }
}
/* ====================================== */ /* ====================================== */
// 메인 로그인 팝업 끝 // 메인 로그인 팝업 끝
/* ====================================== */ /* ====================================== */

51
src/main/webapp/com/img/main/signin/back.svg Normal file
View File

@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="60.314949mm"
height="113.62518mm"
viewBox="0 0 60.314949 113.62518"
version="1.1"
id="svg5"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
sodipodi:docname="back.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="0.52410025"
inkscape:cx="18.126303"
inkscape:cy="443.61742"
inkscape:window-width="1920"
inkscape:window-height="1017"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2" />
<g
inkscape:label="레이어 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-95.382252,-83.018087)">
<path
style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
d="m 150.00865,196.21671 c -1.34829,-0.68732 -53.963574,-53.28706 -54.35797,-54.34191 -0.357904,-0.95726 -0.357904,-3.10934 0,-4.06659 0.430967,-1.15267 53.03326,-53.677122 54.44229,-54.361735 2.71231,-1.317843 5.60423,0.549933 5.60423,3.619552 0,0.523563 -0.1314,1.211997 -0.292,1.529852 -0.16059,0.317855 -11.67966,11.978151 -25.59792,25.911771 l -25.30592,25.33385 25.30592,25.33386 c 13.91826,13.93362 25.43733,25.59391 25.59792,25.91177 0.40011,0.7919 0.36639,2.30374 -0.075,3.35999 -0.80627,1.92969 -3.34893,2.7752 -5.3216,1.76959 z"
id="path980" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

4
src/main/webapp/com/js/common.js
View File

@ -323,6 +323,10 @@ $(document).ready(function () {
var signInPrefix = document.getElementById("sign-in-prefix"); var signInPrefix = document.getElementById("sign-in-prefix");
signInPrefix.innerHTML = ''; signInPrefix.innerHTML = '';
// 로그인 팝업 뒤로가기 버튼
var mfpBackButton = document.getElementById("mfp-back");
mfpBackButton.style.display = "none";
$('#login').parent().addClass('login-popup-content'); $('#login').parent().addClass('login-popup-content');
if (!isMobile) { if (!isMobile) {
$('body').addClass('overflow-hidden login-popup-wrapper'); $('body').addClass('overflow-hidden login-popup-wrapper');