somang4819/itsm_ysm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

소장자료관 메인화면 인터페이스 변경 (메뉴명,검색창위치, 퀵메뉴,메인컨텐츠 순서, 스크롤다운추가)

Browse Source
This commit is contained in:
ecpla 2023-03-13 16:05:05 +09:00
parent 8fc32a2b5f
commit 1b01051665
13 changed files with 11231 additions and 2089 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/main/resources/egovframework/message/message-common.properties
View File

@ -135,6 +135,7 @@ fail.common.idsearch = \uc544\uc774\ub514\ub97c \ucc3e\uc744\uc218 \uc5c6\uc2b5\
fail.common.pwsearch = \ube44\ubc00\ubc88\ud638\ub97c \ucc3e\uc744\uc218 \uc5c6\uc2b5\ub2c8\ub2e4.
fail.request.msg = \uc694\uccad\ucc98\ub9ac\ub97c \uc2e4\ud328\ud558\uc600\uc2b5\ub2c8\ub2e4.
fail.common.login.ip = \ub4f1\ub85d\ub41c IP\uac00 \uc544\ub2c8\ubbc0\ub85c \ub85c\uadf8\uc778\uc774 \uac70\ubd80\ub418\uc5c8\uc2b5\ub2c8\ub2e4.
fail.request.msg = \ucc98\ub9ac\uc911 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.\uad00\ub9ac\uc790\uc5d0\uac8c \ubb38\uc758\ud574\uc8fc\uc138\uc694.
#UI User Message#
fail.user.passwordUpdate1=\ud604\uc7ac \ube44\ubc00\ubc88\ud638\uac00 \ub9de\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.

2
src/main/webapp/META-INF/MANIFEST.MF
View File

@ -1,5 +1,5 @@
Manifest-Version: 1.0
Built-By: com02
Built-By: ecpla
Build-Jdk: 1.8.0_201
Created-By: Maven Integration for Eclipse

4
src/main/webapp/META-INF/maven/nlib/nlib/pom.properties
View File

@ -1,7 +1,7 @@
#Generated by Maven Integration for Eclipse
#Tue Dec 14 09:54:36 KST 2021
#Mon Mar 13 10:07:45 KST 2023
version=1.0.0
groupId=nlib
m2e.projectName=iams.nlib
m2e.projectLocation=D\:\\iams\\workspace\\iams.nlib
m2e.projectLocation=D\:\\work_source\\iams\\workspace\\iams.nlib
artifactId=nlib

16
src/main/webapp/META-INF/maven/nlib/nlib/pom.xml
View File

@ -240,6 +240,11 @@
<version>2.8.1</version>
</dependency>
-->
<dependency>
<groupId>org.jasypt</groupId>
<artifactId>jasypt-spring3</artifactId>
<version>1.9.2</version>
</dependency>
<!-- 제이슨 파싱 (DIGITALSHIP JSYOO 2021.08.12)-->
<dependency>
<groupId>com.googlecode.json-simple</groupId>
@ -381,6 +386,13 @@
<version>3.3.2</version>
</dependency>
<!-- OWASP HTML Sanitizer -->
<dependency>
<groupId>com.googlecode.owasp-java-html-sanitizer</groupId>
<artifactId>owasp-java-html-sanitizer</artifactId>
<version>20211018.2</version>
</dependency>
</dependencies>
<build>
@ -588,6 +600,10 @@
<delete file="${project.build.outputDirectory}/nlib/nlib.properties"/>
<rename src="${project.build.outputDirectory}/nlib/nlib.properties.opr" dest="${project.build.outputDirectory}/nlib/nlib.properties"/>
<!-- context-oauth.xml 파일 -->
<delete file="${project.build.outputDirectory}/egovframework/spring/context-oauth.xml"/>
<rename src="${project.build.outputDirectory}/egovframework/spring/context-oauth.xml.opr" dest="${project.build.outputDirectory}/egovframework/spring/context-oauth.xml"/>
</tasks>
</configuration>
</execution>

47
src/main/webapp/WEB-INF/jsp/nlib/cmm/headerSubPart.jsp
View File

@ -38,28 +38,31 @@ function fn_getMemberCard() {
<h1><a href="javascript:void(0)" onclick="javascript:location.href='/';"><img src="/images/img/img-logo.svg" alt=""><span class="title-1" id="siteCommonTitle"><c:out value='${councilNm}'/></span><span class="title-2">소장자료관</span></a></h1>
<div class="search-wrap">
<h2 class="blind">검색</h2>
<div class="search-close"><button type="button"></button></div>
<form id="searchHeaderForm" name="searchHeaderForm" method="post" action="/search/searchList.do">
<input type="hidden" name="filter_mylist">
<fieldset>
<legend>검색</legend>
<div class="condition_sear">
<select name="sfield" id="sfield" class="sear_depth" title="검색대상">
<option value="" selected="selected">전체</option>
<option value="TITLE">제목</option>
</select>
<label for="sfield" style="display:none">검색대상</label>
</div>
<div class="search-input">
<input type="text" placeholder="검색어를 입력해주세요" title="검색어 입력" name="query" id="top_query" class="ark_query" value="" autocomplete="off"><label for="top_query" style="display:none">검색어</label>
<button type="button" class="btn-search" id="searchHeaderButton" onclick="goSearch();"><span>검색</span></button>
<button type="button" class="btn-search-detail" id="btn-search-detail-cl">상세<span>검색</span></button>
</div>
</fieldset>
</form>
</div>
<c:set var="path" value="${requestScope['javax.servlet.forward.servlet_path']}" />
<c:if test="${ '/index.jsp' ne path }">
<div class="search-wrap">
<h2 class="blind">검색</h2>
<div class="search-close"><button type="button"></button></div>
<form id="searchHeaderForm" name="searchHeaderForm" method="post" action="/search/searchList.do">
<input type="hidden" name="filter_mylist">
<fieldset>
<legend>검색</legend>
<div class="condition_sear">
<select name="sfield" id="sfield" class="sear_depth" title="검색대상">
<option value="" selected="selected">전체</option>
<option value="TITLE">제목</option>
</select>
<label for="sfield" style="display:none">검색대상</label>
</div>
<div class="search-input">
<input type="text" placeholder="검색어를 입력해주세요" title="검색어 입력" name="query" id="top_query" class="ark_query" value="" autocomplete="off"><label for="top_query" style="display:none">검색어</label>
<button type="button" class="btn-search" id="searchHeaderButton" onclick="goSearch();"><span>검색</span></button>
<button type="button" class="btn-search-detail" id="btn-search-detail-cl">상세<span>검색</span></button>
</div>
</fieldset>
</form>
</div>
</c:if>
<div class="log">
<ul>

170
src/main/webapp/WEB-INF/jsp/nlib/cmm/home.jsp
View File

@ -24,8 +24,72 @@ $(document).ready(function() {
$('.sec6 .inner .more-btn a').focus(function(){
$('.sec6 .onlineSwiper .items .List .inner div.thumbnail div.detail-cover').css('opacity','0');
});
// 현재 viewoport내의 element 확인
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementTop + 300 < viewportBottom
};
$(window).on('resize', function() {
//브라우저 크기 확인 실시
var windowHeight = $(window).height(); //요소의 높이를 반환
if(windowHeight < 440) {
$('#btn-scroll').removeClass("btn-scroll-fix");
$('#btn-scroll').addClass("btn-scroll-hide");
}else {
$('#btn-scroll').addClass("btn-scroll-fix");
$('#btn-scroll').removeClass("btn-scroll-hide");
}
});
$(window).on('scroll', function() {
// scroll 숨기기
var $window = $(window);
var $document = $(document);
var $footer = $("#footer");
if ($window.scrollTop() < $document.height() - $window.height() - $footer.outerHeight() + 100) {
$('#btn-scroll').addClass("btn-scroll-fix");
$('#btn-scroll').removeClass("btn-scroll-hide");
} else {
$('#btn-scroll').removeClass("btn-scroll-fix");
$('#btn-scroll').addClass("btn-scroll-hide");
}
// 스크롤 할때마다 다음 section값으로 수정
$('.sec').each(function(index, item){
if ($(item).isInViewport()) {
var seq = index+2;
if(seq == 8) {
$('#btn-scroll').removeClass("btn-scroll-fix");
$('#btn-scroll').addClass("btn-scroll-hide");
$('#btn-scroll').attr('onclick','');
return false;
}
$('#btn-scroll').attr('onclick','fn_Move('+seq+')');
// return false;
}
});
});
});
function fn_Move(seq) {
var interval = 100;
var offset = $("#sec" + seq).offset();
if(seq > 3) interval = 250;
$('html, body').animate({
scrollTop: offset.top - interval
}, 300);
return false;
}
function fn_search(keyword) {
var form = document.createElement("form");
form.style.display = "none";
@ -93,9 +157,9 @@ function fn_listPops(typeDivCd) {
}
</script>
<button type="button" id="btn-scroll" class="btn-scroll btn-scroll-fix" onclick="fn_Move(2)"></button>
<!-- 섹션1 -->
<section id="sec1" class="sec1">
<section id="sec1" class="sec sec1">
<h2 class="blind">배너 섹션영역</h2>
<div class="inner">
<div class="banner text-white">
@ -154,14 +218,38 @@ function fn_listPops(typeDivCd) {
</div>
</div>
<div id="sec1-1" class="color-box">
<div id="sec1-1" class="search-wrap">
<h2 class="blind">검색</h2>
<div class="search-close"><button type="button"></button></div>
<form id="searchHeaderForm" name="searchHeaderForm" method="post" action="/search/searchList.do">
<input type="hidden" name="filter_mylist">
<fieldset>
<legend>검색</legend>
<div class="condition_sear">
<select name="sfield" id="sfield" class="sear_depth" title="검색대상">
<option value="" selected="selected">전체</option>
<option value="TITLE">제목</option>
</select>
<label for="sfield" style="display:none">검색대상</label>
</div>
<div class="search-input">
<input type="text" placeholder="검색어를 입력해주세요" title="검색어 입력" name="query" id="top_query" class="ark_query" value="" autocomplete="off"><label for="top_query" style="display:none">검색어</label>
<button type="button" class="btn-search" id="searchHeaderButton" onclick="goSearch();"><span>검색</span></button>
<button type="button" class="btn-search-detail" id="btn-search-detail-cl">상세<span>검색</span></button>
</div>
</fieldset>
</form>
</div>
<div id="sec1-2" class="color-box">
<a href="javascript:void(0);" class="list" onclick="location.href = '/inform/selectNCultureOperationInfo.do';" title="이용안내">
<div class="title">이용안내</div>
<div class="icon"><img src="/images/icon/icon-sec1-01.png" alt=""></div>
<div class="open"><img src="/images/icon/icon-plus.png" alt=""></div>
</a>
<a href="javascript:void(0);" class="list" onclick="gfn_gotoUrl('/inform/selectNCultureLocationInfo.do')" title="찾아오시는 길">
<div class="title">찾아오시는 길</div>
<a href="javascript:void(0);" class="list" onclick="gfn_gotoUrl('/interest/listInterests.do')" title="관심자료">
<div class="title">관심자료</div>
<div class="icon"><img src="/images/icon/icon-sec1-02.png" alt=""></div>
<div class="open"><img src="/images/icon/icon-plus.png" alt=""></div>
</a>
@ -180,27 +268,8 @@ function fn_listPops(typeDivCd) {
</section>
<!-- 섹션2 -->
<c:if test="${fn:length(listKeywords) > 0 }">
<section id="sec2" class="sec2">
<h2 class="blind">키워드 섹션영역</h2>
<div class="inner">
<div class="keyword-box">
<h3 class="title"><span>AI 추천</span> 키워드</h3>
<p class="desc">어떤 자료들을 소장 중인지 키워드로 살펴보세요!</p>
<ul class="list-tag">
<c:forEach var="itemKeyword" items="${listKeywords }">
<li><a href="javascript:void(0)" title="<c:out value='${itemKeyword.keyName }'/>" onclick="fn_search('<c:out value='${itemKeyword.keyName }'/>')"># <c:out value='${itemKeyword.keyName }'/></a>
</li>
</c:forEach>
</ul>
</div>
</div>
</section>
</c:if>
<!-- 섹션3 -->
<c:if test="${fn:length(listOrgPicks) > 0 }">
<section id="sec3" class="sec3">
<section id="sec2" class="sec sec2">
<h2 class="blind">문화원픽 섹션영역</h2>
<div class="inner">
<div class="pick-box">
@ -243,20 +312,10 @@ function fn_listPops(typeDivCd) {
</section>
</c:if>
<!-- 섹션4 -->
<section id="sec4" class="sec4">
<h2 class="blind">중간배너 섹션영역</h2>
<div class="inner">
<div class="middle-banner">
<h3>회원가입만 하면 발급되는<br><strong>간편 온라인 회원증!</strong></h3>
<p>문화원 소장자료관 회원가입 시 해당 문화원에서<br>사용할 수 있는 온라인 회원증이 발급됩니다.</p>
</div>
</div>
</section>
<!-- 섹션5 -->
<!-- 섹션3 -->
<c:if test="${fn:length(listPops) > 0 }">
<section id="sec5" class="sec5">
<section id="sec3" class="sec sec3">
<h2 class="blind">인기자료 섹션영역</h2>
<div class="inner">
<h3 class="title"><span>인기</span> 자료</h3>
@ -297,9 +356,9 @@ function fn_listPops(typeDivCd) {
</section>
</c:if>
<!-- 섹션6 -->
<!-- 섹션4 -->
<c:if test="${fn:length(listOnline) > 0 }">
<section id="sec6" class="sec6">
<section id="sec4" class="sec sec4">
<h2 class="blind">온라인자료관 섹션영역</h2>
<div class="inner">
<h3 class="title"><span>온라인</span> 자료관</h3>
@ -348,8 +407,27 @@ function fn_listPops(typeDivCd) {
</section>
</c:if>
<!-- 섹션7 -->
<section id="sec7" class="sec7">
<!-- 섹션5 -->
<c:if test="${fn:length(listKeywords) > 0 }">
<section id="sec5" class="sec sec5">
<h2 class="blind">키워드 섹션영역</h2>
<div class="inner">
<div class="keyword-box">
<h3 class="title"><span>AI 추천</span> 키워드</h3>
<p class="desc">어떤 자료들을 소장 중인지 키워드로 살펴보세요!</p>
<ul class="list-tag">
<c:forEach var="itemKeyword" items="${listKeywords }">
<li><a href="javascript:void(0)" title="<c:out value='${itemKeyword.keyName }'/>" onclick="fn_search('<c:out value='${itemKeyword.keyName }'/>')"># <c:out value='${itemKeyword.keyName }'/></a>
</li>
</c:forEach>
</ul>
</div>
</div>
</section>
</c:if>
<!-- 섹션6 -->
<section id="sec6" class="sec sec6">
<h2 class="blind">커뮤니티 섹션영역</h2>
<div class="inner">
<div class="Fl notice">
@ -400,6 +478,16 @@ function fn_listPops(typeDivCd) {
</div>
</section>
<!-- 섹션7 -->
<section id="sec7" class="sec sec7">
<h2 class="blind">중간배너 섹션영역</h2>
<div class="inner">
<div class="middle-banner">
<h3>회원가입만 하면 발급되는<br><strong>간편 온라인 회원증!</strong></h3>
<p>문화원 소장자료관 회원가입 시 해당 문화원에서<br>사용할 수 있는 온라인 회원증이 발급됩니다.</p>
</div>
</div>
</section>
<sec:authorize access="isAuthenticated()">
<button type="button" id="mo-member-btn" class="member-btn" onclick="fn_getMemberCard();">회원증 보러가기</button>
</sec:authorize>

2
src/main/webapp/WEB-INF/tiles/inc/footer.jsp
View File

@ -23,7 +23,7 @@ $(document).ready(function(){
data: inputData,
dataType: "html",
}).done(function(result){
console.log(result);
// console.log(result);
$('#select_mngOrgNm').html(result);
});
}

8
src/main/webapp/WEB-INF/tiles/inc/menu.jsp
View File

@ -18,7 +18,9 @@
</div>
<nav id="primary-nav" class="dropdown cf">
<ul class="dropdown menu">
<li><a href="javascript:void(0)" onclick="javascript:location.href='${pageContext.request.contextPath}/inform/selectGreeting.do';" title="자료관안내" class="eff">자료관안내</a>
<li>
<%-- <a href="javascript:void(0)" onclick="javascript:location.href='${pageContext.request.contextPath}/inform/selectGreeting.do';" title="자료관안내" class="eff">자료관안내</a> --%>
<a href="javascript:void(0)" onclick="javascript:location.href='${pageContext.request.contextPath}/inform/selectGreeting.do';" title="자료관 이용소개" class="eff">자료관 이용소개</a>
<ul class="sub-menu">
<li><a href="javascript:void(0)" onclick="gfn_gotoUrl('${pageContext.request.contextPath}/inform/selectGreeting.do')" title="인사말"><span class="underline blue">인사말</span></a></li>
<li><a href="javascript:void(0)" onclick="gfn_gotoUrl('${pageContext.request.contextPath}/inform/selectNCultureOperationInfo.do')" title="이용안내"><span class="underline blue">이용안내</span></a></li>
@ -27,7 +29,9 @@
</li>
<li><a href="javascript:void(0)" onclick="javascript:location.href='${pageContext.request.contextPath}/search/searchList.do';" title="소장자료" class="eff">소장자료</a></li>
<li><a href="javascript:void(0)" onclick="javascript:location.href='${pageContext.request.contextPath}/bbs/listAncmnts.do';" title="고객지원" class="eff">고객지원</a>
<li>
<%-- <a href="javascript:void(0)" onclick="javascript:location.href='${pageContext.request.contextPath}/bbs/listAncmnts.do';" title="고객지원" class="eff">고객지원</a> --%>
<a href="javascript:void(0)" onclick="javascript:location.href='${pageContext.request.contextPath}/bbs/listAncmnts.do';" title="자료관 소식" class="eff">자료관 소식</a>
<ul class="sub-menu">
<li><a href="javascript:void(0)" onclick="gfn_gotoUrl('${pageContext.request.contextPath}/bbs/listAncmnts.do')" title="공지사항"><span class="underline blue">공지사항</span></a></li>
<li><a href="javascript:void(0)" onclick="gfn_gotoUrl('${pageContext.request.contextPath}/bbs/listFaqs.do')" title="FAQ"><span class="underline blue">FAQ</span></a></li>

12883
src/main/webapp/css/default.css
View File

File diff suppressed because it is too large Load Diff

11
src/main/webapp/css/media.css
View File

@ -118,6 +118,13 @@ a.pop-logo img { margin-right: 10px; }
.MainSwiper .swiper-slide {height:400px;}
.MainSwiper .swiper-slide .img {height:400px;}
.MainSwiper .pagination {position: absolute;bottom: 100px;left: calc(50% - -423px);}
.sec1 .inner .search-wrap {width: 100vw;top: -140px;}
.sec1 .inner .search-wrap form .condition_sear {right: 333px;padding-right: 2px;}
.sec1 .inner .search-wrap .ark_query {text-align: left;z-index: 9;width: 495px;padding: 0px 20px 0px 88px;}
.sec1 .inner .color-box {width:100vw;padding:0px 50px;box-sizing: border-box;top:-70px;}
.sec1 .inner .color-box .list {height:150px;}
.sec1 .inner .color-box .list .title {font-size:18px;margin:20px 0px 10px;}
@ -317,6 +324,10 @@ footer .family_site {right:10px;}
.MainSwiper .swiper-slide .img {width:100%;height:100%;}
.MainSwiper .swiper-slide .img img {object-fit:cover;width:100%;height:100%;}
.MainSwiper .pagination {bottom: 55px;left: calc(50% - -135px);}
.sec1 .inner .search-wrap form .condition_sear {right: 189px;}
.sec1 .inner .search-wrap .ark_query {width:204px;}
.sec1 .inner .color-box { width: 100vw; padding: 0 16px; box-sizing: border-box; top: -45px; }
.sec1 .inner .color-box .list { height: 85px; display: flex; align-items: center; flex-direction: column-reverse; }
.sec1 .inner .color-box .list .title { font-size: 12px; line-height: 18px; margin: 8px 0px 9px; }

BIN
src/main/webapp/images/icon/icon-scroll.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/main/webapp/images/icon/icon-sec1-02-old.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
src/main/webapp/images/icon/icon-sec1-02.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB