-
-
- menu
-
-
- <%-- LEVEL1 DEPTH MENU 표출(클릭 시 하위에 있는 URL 중 첫번째 URL로 이동 가능) --%>
+
+
+
+ <%-- 상단 메뉴와 서브메뉴 드롭다운 표출 --%>
@@ -226,32 +183,51 @@ $(document).ready(function() {
// 세션 타이머 초기화
initSessionTimer();
- // 상단 메뉴 아이콘 초기화 (Feather 아이콘 라이브러리 사용)
- if (typeof feather !== 'undefined') {
- feather.replace('.top-menu-icon');
- }
+ // Feather 아이콘 초기화 (모든 data-feather 속성을 가진 아이콘에 적용)
+ initializeFeatherIcons();
+
+ // 상단 메뉴 드롭다운 이벤트 처리
+ $('.top-menu-dropdown').hover(
+ function() {
+ // 마우스 오버 시 서브메뉴 표시
+ $(this).find('.top-menu-submenu').fadeIn(200);
+ },
+ function() {
+ // 마우스 아웃 시 서브메뉴 숨김
+ $(this).find('.top-menu-submenu').fadeOut(200);
+ }
+ );
+
- $(document).on('click', '#saveSidebarState', function () {
- var saveSidebarStateValue = "sidebar-collapse";
- if( $("body").hasClass("sidebar-collapse") ){
- saveSidebarStateValue = ""
+ /**
+ * Feather 아이콘 초기화 함수
+ * 모든 data-feather 속성을 가진 요소를 feather 아이콘으로 변환합니다.
+ */
+ function initializeFeatherIcons() {
+ // feather 라이브러리가 로드되었는지 확인
+ if (typeof feather === 'undefined') {
+ console.log('[DEBUG_LOG] Feather 라이브러리가 로드되지 않았습니다.');
+ return;
}
- console.log(saveSidebarStateValue);
- // AJAX 요청으로 사이드바 상태 저장
- $.ajax({
- url: "단속자료 목록
Pages
@@ -172,7 +172,7 @@
var dataSource = this.createDataSource();
// 현재 선택된 perPage 값 가져오기
- var perPage = parseInt($('#perPageSelect').val() || 10, 10);
+ var perPage = parseInt($('#perPageSelect').val() || 15, 10);
// 그리드 설정 객체 생성
var gridConfig = new XitTuiGridConfig();
@@ -180,7 +180,7 @@
// 기본 설정
gridConfig.setOptDataSource(dataSource); // 데이터소스 연결
gridConfig.setOptGridId('grid'); // 그리드를 출력할 Element ID
- gridConfig.setOptGridHeight(390); // 그리드 높이(단위: px)
+ gridConfig.setOptGridHeight('auto'); // 그리드 높이(단위: px)
gridConfig.setOptRowHeight(30); // 그리드 행 높이(단위: px)
gridConfig.setOptRowHeaderType('rowNum'); // 행 첫번째 셀 타입(rowNum: 순번, checkbox: 체크박스, '': 출력 안함)
gridConfig.setOptUseClientSort(false); // 서버사이드 정렬 false
diff --git a/src/main/webapp/resources/xit/menu-path.js b/src/main/webapp/resources/xit/menu-path.js
index a0778aa..469d914 100644
--- a/src/main/webapp/resources/xit/menu-path.js
+++ b/src/main/webapp/resources/xit/menu-path.js
@@ -26,19 +26,19 @@ $(function() {
// 현재 URL과 일치하는 메뉴 찾기
var currentMenuPath = "";
- // 활성화된 메뉴 항목 찾기 (active 클래스가 있는 항목)
- var $activeMenuItem = $('.nav.treeview.mb-4 li.nav-item > a.active');
+ // 상단 메뉴에서 활성화된 메뉴 항목 찾기 (active 클래스가 있는 항목)
+ var $activeMenuItem = $('.top-menu-item.active');
+ var $activeSubMenuItem = $('.submenu-item.active');
if ($activeMenuItem.length > 0) {
- // 활성화된 메뉴가 있는 경우
- var menuText = $activeMenuItem.text().trim();
+ // 활성화된 상위 메뉴가 있는 경우
+ var menuText = $activeMenuItem.find('span').text().trim();
currentMenuPath = menuText;
- // 하위 메뉴 확인
- var $activeSubMenuItem = $activeMenuItem.parent('li').find('.nav > li.show');
+ // 활성화된 하위 메뉴가 있는지 확인
if ($activeSubMenuItem.length > 0) {
- var subMenuText = $activeSubMenuItem.find('a').text().trim();
- currentMenuPath = menuText + " - " + subMenuText;
+ var subMenuText = $activeSubMenuItem.text().trim();
+ currentMenuPath = menuText + " > " + subMenuText;
}
}
diff --git a/src/main/webapp/resources/xit/xit-common.css b/src/main/webapp/resources/xit/xit-common.css
index 34b6868..bd395d9 100644
--- a/src/main/webapp/resources/xit/xit-common.css
+++ b/src/main/webapp/resources/xit/xit-common.css
@@ -1,5 +1,206 @@
@charset "utf-8";
+/* ===== 상단 메뉴 레이아웃 스타일 ===== */
+/* 메인 컨텐츠가 전체 너비를 사용하도록 설정 */
+.main-content-full {
+ width: 100%;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+/* 메인 헤더 스타일 */
+.main-header {
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ background-color: #fff;
+ border-bottom: 1px solid #e9ecef;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ height: 70px;
+ width: 100%;
+}
+
+/* 헤더 로고 스타일 */
+.header-logo {
+ /*margin-right: 40px;*/
+}
+
+.header-logo .logo {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ color: #495057;
+}
+
+.header-logo .logo img {
+ width: auto !important; /* style.min.css의 width: 40px 비활성화 */
+ height: 40px;
+ margin-right: 10px;
+}
+
+.header-logo .logo-text {
+ font-size: 18px;
+ font-weight: bold;
+ line-height: 1.2;
+ color: #007bff;
+}
+
+/* 상단 메뉴 드롭다운 스타일 */
+.top-menu-dropdown {
+ position: relative;
+ display: inline-block;
+}
+
+.top-menu-dropdown .dropdown-arrow {
+ font-size: 16px;
+ margin-left: 5px;
+ transition: transform 0.2s;
+}
+
+.top-menu-dropdown:hover .dropdown-arrow {
+ transform: rotate(180deg);
+}
+
+.top-menu-submenu {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ min-width: 200px;
+ background-color: #fff;
+ border: 1px solid #e9ecef;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ border-radius: 4px;
+ z-index: 1000;
+ padding: 8px 0;
+}
+
+.top-menu-submenu .submenu-item {
+ display: block;
+ padding: 10px 20px;
+ color: #495057;
+ text-decoration: none;
+ font-size: 14px;
+ transition: background-color 0.2s;
+}
+
+.top-menu-submenu .submenu-item:hover {
+ background-color: #f8f9fa;
+ color: #007bff;
+ text-decoration: none;
+}
+
+.top-menu-submenu .submenu-item.active {
+ background-color: #e3f2fd;
+ color: #1976d2;
+ font-weight: 550;
+}
+
+.top-menu-submenu .submenu-item.active:hover {
+ background-color: #bbdefb;
+ color: #1565c0;
+}
+
+/* 상단 메뉴 컨테이너 스타일 */
+.top-level-menu {
+ display: flex;
+ align-items: center;
+ margin-left: 15px;
+}
+
+/* 메뉴 간 구분자 스타일 */
+.top-menu-dropdown:not(:last-child)::after {
+ content: '|';
+ position: absolute;
+ right: -1px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: #dee2e6;
+ font-size: 14px;
+ font-weight: normal;
+ z-index: 1;
+}
+
+/* 상단 메뉴 아이콘 스타일 */
+.top-menu-icon {
+ width: 16px;
+ height: 16px;
+ margin-right: 5px;
+ display: inline-block;
+ vertical-align: middle;
+ stroke: currentColor;
+ stroke-width: 2;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ fill: none;
+ color: inherit;
+}
+
+/* 기존 상단 메뉴 스타일 확장 */
+.top-level-menu .top-menu-item {
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ color: #495057;
+ font-weight: 500;
+ text-decoration: none;
+ height: 40px;
+ position: relative;
+ transition: color 0.2s;
+ font-size: 16px;
+}
+
+.top-level-menu .top-menu-item:hover {
+ color: #007bff;
+ text-decoration: none;
+}
+
+.top-level-menu .top-menu-item.active {
+ color: #007bff;
+ font-weight: 550;
+}
+
+.top-menu-item.active:before {
+ content: '';
+ position: absolute;
+ bottom: -15px;
+ left: 10px;
+ right: 10px;
+ height: 2px;
+ background-color: #007bff;
+}
+
+/* 메인 컨텐츠 영역 스타일 */
+.main-content-full .main {
+ flex: 1;
+ padding: 20px;
+ background-color: #f8f9fa;
+}
+
+/* 반응형 스타일 */
+@media (max-width: 992px) {
+ .header-logo {
+ margin-right: 20px;
+ }
+
+ .header-logo .logo-text {
+ font-size: 14px;
+ }
+
+ .top-level-menu .top-menu-item span {
+ display: none;
+ }
+
+ .top-level-menu .top-menu-item {
+ padding: 0 12px;
+ }
+
+ .top-menu-submenu {
+ min-width: 150px;
+ }
+}
+
/* 버튼 그룹 스타일 */
.btn-group {
padding-top: 10px;