디자인 수정 반영

2025-10-15 14:43:56 +09:00
parent a95069a5cd
commit 4c84ae5db2
8 changed files with 775 additions and 690 deletions
--- a/WebContent/WEB-INF/view/main/contentsFS.jsp
+++ b/WebContent/WEB-INF/view/main/contentsFS.jsp
@@ -1,20 +1,5 @@
-<frameset cols="197px,1px,*" border="0" id="parentsObj">
-	
-	<frame src="/main/menu.do" name="menu_page"/>
-	<frame src="/main/toggle.do" name="fToggle" style="border-right: 1px solid #b4b4b4;" scrolling="no"/>
-	<frame src="/main/mainContents.do" name="contents_page" />
-	<!--
-	<frame src="/dashboard/dashboardMyTask.do" name="contents_page" />
-	 
-	<frame src="/dashboard/dashboard.do" name="contents_page" />
+<frameset cols="197px,14px,*" border="0" id="parentsObj">
+	<frame src="/main/menu.do"  name="menu_page">
+	<frame src="/main/toggle.do" name="toggle_page"/>
 	<frame src="/main/mainContents.do" name="contents_page"/>
-	 -->
 </frameset>
-
-<!-- 
-<script>
-$(document).ready(function(){
-		parent.frames["headerFS"].fn_goMyTask();
-});		
-</script>	
- -->
--- a/WebContent/WEB-INF/view/main/header.jsp
+++ b/WebContent/WEB-INF/view/main/header.jsp
@@ -11,7 +11,7 @@ ArrayList userMenuList = new ArrayList();
 userMenuList = (ArrayList)request.getAttribute("userMenuList");
 %>
 <!DOCTYPE html>
-<html>
+<html style="height: 100%; overflow: hidden; margin: 0; padding: 0;">
 <head>
 <meta charset="utf-8">
 <title><%=Constants.SYSTEM_NAME %></title>
@@ -26,17 +26,25 @@ userMenuList = (ArrayList)request.getAttribute("userMenuList");
 	}
 	 */
 	.menu_off{
-		color:#000;  
-		font-size:14px;
-		font-weight:normal;
+		color:#fff !important; padding: 2px 3px; font-size:9px; background-color:#0011ff; border-radius:2px; 
+		display: inline-block; min-width: 40px; text-align: center; margin: 0px;
+		transition: all 0.3s ease; text-decoration: none !important; border: none;
+		cursor: pointer;
 	}
 	.menu_on{
-		color:#B3A7A7;
-		font-size:15px;
-		font-weight:bold;  
+		color:#fff !important; padding: 2px 3px; font-size:9px; background-color:#c4c4f4; border-radius:2px;
+		display: inline-block; min-width: 40px; text-align: center; margin: 0px;
+		transition: all 0.3s ease; text-decoration: none !important; border: none;
+		cursor: pointer;
+	}
+	.menu_off:hover {
+		background-color: #c4c4f4 !important;
+		text-decoration: none !important;
+		color: #fff !important;
 	}
 </style>
 <link rel="stylesheet" href="/css/basic.css">
+
 <script src="/js/jquery-1.11.3.min.js"></script>
 <script src="/js/html5shiv.js"></script>
 <!-- //datepicker -->
@@ -83,16 +91,51 @@ $(function(){
 		fn_registDetailPopup(userId);
 	});

-	$(".menu").click(function(){
-		var menuObjid = $(this).attr("menuObjid");
-
-		$(".menu_on").removeClass('menu_on').addClass('menu_off');	//이전 클릭한 메뉴 원복
-		$(this).removeClass('menu_off');
-		$(this).addClass('menu_on');
+		$(".menu").click(function(){
+			// 모든 메뉴를 off 스타일로 변경
+			$(".menu").css({
+				'background-color': '#0011ff',
+				'color': '#fff'
+			}).removeClass('menu_on').addClass('menu_off');
+			
+			// 클릭된 메뉴를 on 스타일로 변경
+			$(this).css({
+				'background-color': '#c4c4f4',
+				'color': '#fff'
+			}).removeClass('menu_off').addClass('menu_on');
+			
+			var menuObjid = $(this).attr("menuObjId");
+			
+			// 안전하게 메뉴 처리
+			try {
+				if(parent.frames["contentsFS"] && parent.frames["contentsFS"].frames["menu_page"]) {
+					var menuFrame = parent.frames["contentsFS"].frames["menu_page"];
+					if(menuFrame.fn_initMenuArea && menuFrame.add_menu) {
+						menuFrame.fn_initMenuArea();
+						menuFrame.add_menu(menuObjid);
+					}
+				}
+			} catch(e) {
+				console.log("Menu frame not ready:", e);
+			}
+			
+			
+		});
 		
-		parent.frames["contentsFS"].frames["menu_page"].fn_initMenuArea();
-		parent.frames["contentsFS"].frames["menu_page"].add_menu(menuObjid);
-	});
+		// 메뉴 hover 효과
+		$(".menu").hover(
+			function() {
+				if (!$(this).hasClass('menu_on')) {
+					$(this).css('background-color', '#E08550');
+				}
+			},
+			function() {
+				if (!$(this).hasClass('menu_on')) {
+					$(this).css('background-color', '#F29661');
+				}
+			}
+		);
+	
 	
 	$(".btnApprovalList").click(function(){
 		fn_goMyTaskMyApproval();
@@ -162,7 +205,31 @@ function fn_goFirstMenu(){
 	if($(".menu") && $(".menu").eq(0)){
 		var menuObjId = $(".menu").eq(0).attr("menuObjId");
 		//alert(menuObjId);	-84984128(scm)
-		fn_goMenu(menuObjId);
+		
+		// 모든 메뉴를 off 스타일로 변경
+		$(".menu").css({
+			'background-color': '#0011ff',
+			'color': '#fff'
+		}).removeClass('menu_on').addClass('menu_off');
+		
+		// 첫 번째 메뉴를 on 스타일로 변경
+		$(".menu").eq(0).css({
+			'background-color': '#c4c4f4',
+			'color': '#fff'
+		}).removeClass('menu_off').addClass('menu_on');
+		
+		// 안전하게 메뉴 처리
+		try {
+			if(parent.frames["contentsFS"] && parent.frames["contentsFS"].frames["menu_page"]) {
+				var menuFrame = parent.frames["contentsFS"].frames["menu_page"];
+				if(menuFrame.fn_initMenuArea && menuFrame.add_menu) {
+					menuFrame.fn_initMenuArea();
+					menuFrame.add_menu(menuObjId);
+				}
+			}
+		} catch(e) {
+			console.log("Menu frame not ready:", e);
+		}
 	}
 }
 function fn_goMyTask(subMenuObjid, onlyViewMenu){
@@ -175,37 +242,43 @@ function fn_goDashboard(subMenuObjid, onlyViewMenu){
 	fn_goMenu(menuobjid, subMenuObjid, onlyViewMenu);
 }
 function sel_menu(menuobjid, subMenuObjid, onlyViewMenu){
-	parent.frames["contentsFS"].frames["menu_page"].sel_menu(menuobjid, subMenuObjid, onlyViewMenu);
+	// 왼쪽 프레임 제거로 인해 더 이상 사용하지 않음
+	// parent.frames["contentsFS"].frames["menu_page"].sel_menu(menuobjid, subMenuObjid, onlyViewMenu);
+	console.log("sel_menu 호출됨 - 드롭다운 메뉴 방식으로 변경됨");
 }
 function fn_goMenu(menuobjid, subMenuObjid, onlyViewMenu){
 	
 	if(fnc_isEmpty(menuobjid)){
 		return;
 	}
-	//$(".menu[menuobjid="+menuobjid+"]").trigger("click");
+	
 	fn_selTopMenu(menuobjid);
 	
-	/* 
-	if(parent && parent.parent && parent.parent.frames["headerFS"] && typeof(parent.parent.frames["headerFS"].fn_goMyTask) == "function" ){
-		parent.parent.frames["headerFS"].fn_goMyTask();	
-	}
-	 */
+	// 드롭다운 메뉴 방식으로 변경 - 왼쪽 프레임 제거됨
+	// 메뉴 클릭시 해당 메뉴의 첫 번째 하위 메뉴로 이동하거나 기본 페이지로 이동
+	$(".menu[menuObjId='" + menuobjid + "']").trigger("click");
+	
+	/* 기존 왼쪽 프레임 방식 제거
 	parent.frames["contentsFS"].frames["menu_page"].fn_initMenuArea();
 	parent.frames["contentsFS"].frames["menu_page"].add_menu(menuobjid, subMenuObjid, onlyViewMenu);
-	
-	//top.frames["contentsFS"].frames["menu_page"].fn_initMenuArea();
-	//top.frames["contentsFS"].frames["menu_page"].add_menu(menuobjid, subMenuObjid, onlyViewMenu);
+	*/
 }

+var menuLoaded = false;
+
 function fn_firstCallMenu(){
-	if(	   parent
-		&& parent.frames["contentsFS"] 
-		&& parent.frames["contentsFS"].frames["menu_page"]
-		&& parent.frames["contentsFS"].frames["menu_page"].fn_initMenuArea ){
-		//fn_goMyTask();
-		//alert('1');
-		fn_goFirstMenu();
-		clearInterval(_intervalId);
+	// 이미 로드되었으면 중복 실행 방지
+	if(menuLoaded) return;
+	
+	// 왼쪽 프레임이 복구되었으므로 기존 방식으로 첫 번째 메뉴 호출
+	if(parent && parent.frames["contentsFS"] && parent.frames["contentsFS"].frames["menu_page"]){
+		// 메뉴 프레임이 완전히 로드될 때까지 기다림
+		var menuFrame = parent.frames["contentsFS"].frames["menu_page"];
+		if(menuFrame.fn_initMenuArea && menuFrame.add_menu) {
+			fn_goFirstMenu();
+			clearInterval(_intervalId);
+			menuLoaded = true;
+		}
 	}
 }

@@ -259,6 +332,7 @@ function openAdminMngPop(){
 	window.open("/admin/adminMainFS.do","<%=Constants.SYSTEM_NAME %>","width=1630,height=950,menuBar=no,status=no");
 }

+
 //결재건수조회
 function fn_setApprovalCnt(){
 	$.ajax({
@@ -285,72 +359,63 @@ function fn_setApprovalCnt(){
 </script>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 </head>
-<body style="height:100%;overflow-y: hidden;">
+<body style="height:100%;overflow: hidden; margin: 0; padding: 0;">
 	<form name="HeaderForm" action="" method="post">
 		<input type="hidden" name="action" id="action">
 		
-		<header>
-			<div style="height:35px;">
+		<header style="background-color: #fff; border-bottom: 1px solid #ddd; padding: 0; height: 50px; overflow: hidden;">
+			<div style="height:50px; display: flex; align-items: center;">
 				
-				<h1><a href="#" id="logo" class="mainLogo_new"></a></h1> 
+				<h1 style="margin: 0; padding: 0 20px;"><a href="#" id="logo" class="mainLogo_new"></a></h1> 
 				
-			      <table>
+			      <table style="width: 100%; border-collapse: collapse;">
 			      	<colgroup>
-			      		<col width="*%"/>
-			      		<col width="*%"/>
-			      		<col width="*%"/>
-			      		<col width="*%"/>
-			      		<col width="*%"/>
+			      		<col width="*"/>
+			      		<col width="400px"/>
 			      	</colgroup>
-			        <tr>
+			        <tr style="height: 50px; vertical-align: middle;">
 			        	
-			        	<%
-				     		for(int i=0;i<userMenuList.size();i++){
-				     			HashMap menuMap = (HashMap)userMenuList.get(i);
-				     		    String menuDesc = CommonUtils.checkNull(menuMap.get("MENU_DESC")); 
-				     			String menuKorName = CommonUtils.checkNull(menuMap.get("MENU_NAME_KOR"));
-				     			String menuObjid = CommonUtils.checkNull(menuMap.get("OBJID"));
-				     			String parentObjid = CommonUtils.checkNull(menuMap.get("PARENT_OBJ_ID"));
-				     			String menuUrl = CommonUtils.checkNull(menuMap.get("MENU_URL"));
-				     			String lev = CommonUtils.checkNull(menuMap.get("LEV"));
-								/* String menuSeq = CommonUtils.checkNull(menuMap.get("SEQ")); */     			
-								/* String menuMaxSeq = CommonUtils.checkNull(menuMap.get("MAX_SEQ"));     			
-								String menuMinSeq = CommonUtils.checkNull(menuMap.get("MIN_SEQ")); */
-								
-								if("2".equals(lev)){
-							%>
-								<%-- 
-								<td style=""><a href="#" style="" class="menu menu_off" menuObjId="<%=menuObjid%>"><%=menuKorName%></a></td>
-									<div class="main_menu" menuObjId="<%=menuObjid%>"><span><a href="#" url="<%=menuUrl%>" objType="menuObj" menuObjId="<%=menuObjid%>"><%=menuKorName%></a></span></div>
-								 --%>	
-							<%
-								}
-				     		 }
-							%>		
-			        
-				        <td class="work_notice" style="position:relative;">
-					        <span id="blink" style="padding: 2px 10px 5px 10px;border-radius:0;" class="btnApprovalList blink_none">
-					        <span class="bell_back"><img src="" height='20' width='20' /></span> 
-					        <label class="notice_no">0</label>&nbsp;개의 결재가 있습니다.</span>
-				        </td>
-			        
-			            <!-- 
-			            <td style="font-size:11px; "><a href="#" onclick="javascript:fn_openBoardList('notice');" style="color:#fff;background-color:#676868; border-radius:0; padding:4px 10px 5px 10px;">공지사항</a></td>
-			             -->
-			            <td style="font-size:11px; "><a href="#" onclick="javascript:fn_openBoardList('qna');" style="color:#fff;background-color:#676868; border-radius:0; padding:4px 10px 5px 10px;">Q&A</a></td>
-			            <td style="font-size:11px; "><a href="#" id="manualDownload" style="color:#fff;background-color:#676868; border-radius:0; padding:4px 10px 5px 10px;">Manual Download</a></td>
-						<%-- 
-						<td class="admin"><%if("plm_admin".equals(userId)){%><a href="#" onclick="javascript:openAdminMngPop();" style="color:#fff; padding: 5px 10px; font-size:11px; background-color:#75a0b6; border-radius:3px;">Admin</a><%}%></td>
-						<td class="admin"><a href="#" class="" data-USER_ID="<%=userId %>"><img src="/images/top-icon05.png"><%=person.getDeptName() %> <%=person.getUserName() %> <%=person.getPositionName() %></a></td>
-						 --%>
-			            <td class="crew" style="">
-							<a href="#" class="btnDetail" data-USER_ID="<%=userId %>">
-								<span style=" color:#fff; padding: 4.5px 10px; font-size:11px; background-color:#676868; border-radius:0;">
+			        	<!-- 메뉴 영역 -->
+			        	<td style="text-align: left; padding-left: 10px;">
+			        		<%
+					     		for(int i=0;i<userMenuList.size();i++){
+					     			HashMap menuMap = (HashMap)userMenuList.get(i);
+					     		    String menuDesc = CommonUtils.checkNull(menuMap.get("MENU_DESC")); 
+					     			String menuKorName = CommonUtils.checkNull(menuMap.get("MENU_NAME_KOR"));
+					     			String menuObjid = CommonUtils.checkNull(menuMap.get("OBJID"));
+					     			String parentObjid = CommonUtils.checkNull(menuMap.get("PARENT_OBJ_ID"));
+					     			String menuUrl = CommonUtils.checkNull(menuMap.get("MENU_URL"));
+					     			String lev = CommonUtils.checkNull(menuMap.get("LEV"));
+									/* String menuSeq = CommonUtils.checkNull(menuMap.get("SEQ")); */     			
+									/* String menuMaxSeq = CommonUtils.checkNull(menuMap.get("MAX_SEQ"));     			
+									String menuMinSeq = CommonUtils.checkNull(menuMap.get("MIN_SEQ")); */
+									
+									if("2".equals(lev)){
+								%>
+									<a href="#" class="menu menu_off" menuObjId="<%=menuObjid%>" style="background-color: #0015ff; color: #fff; padding: 3px 6px; font-size: 10px; border-radius: 3px; text-decoration: none; display: inline-block; min-width: 50px; text-align: center; margin-right: 4px;"><%=menuKorName%></a>
+								<%
+									}
+					     		 }
+								%>
+			        	</td>
+			        	
+			        	<!-- 우측 버튼 영역 -->
+			        	<td style="text-align: right; padding-right: 10px;">
+			        		<span id="blink" style="padding: 3px 6px; border-radius:3px; font-size:10px; background-color:#ff6b35; color:#fff; cursor:pointer; margin-right: 5px;" class="btnApprovalList blink_none">
+					        결재 <label class="notice_no">0</label>건</span>
+					        
+					        <a href="#" onclick="javascript:fn_openBoardList('qna');" style="color:#fff;background-color:#676868; border-radius:2px; padding:2px 4px; text-decoration: none; display: inline-block; font-size:9px; margin-right: 5px;">Q&A</a>
+					        
+					        <a href="#" id="manualDownload" style="color:#fff;background-color:#676868; border-radius:2px; padding:2px 4px; text-decoration: none; display: inline-block; font-size:9px; margin-right: 5px;">Manual Download</a>
+					        
+					        <a href="#" class="btnDetail" data-USER_ID="<%=userId %>" style="text-decoration: none; margin-right: 5px;">
+								<span style="color:#fff; padding: 2px 4px; font-size:9px; background-color:#676868; border-radius:2px; display: inline-block;">
 									<%=person.getDeptName() %> <%=person.getUserName() %> <%=person.getPositionName() %>
 								</span>
 							</a>
-						</td>
-						<td style=""><a href="#" style="color:#fff; padding: 4.5px 10px; font-size:11px; background-color:#676868; border-radius:0;" class="btnLogout">Logout</a></td>
+							
+							<a href="#" style="color:#fff; padding: 2px 4px; font-size:9px; background-color:#676868; border-radius:2px; text-decoration: none; display: inline-block;" class="btnLogout">Logout</a>
+			        	</td>
 						<%-- 
 						<td style=""><a href="#" id="manualDownload" style="color:#fff; padding: 5px 10px; font-size:11px; background-color:#38426b; border-radius:3px;">Manual Download</a></td>
 						<td class="admin"><%if("plm_admin".equals(userId)){%><a href="#" onclick="javascript:openAdminMngPop();" style="color:#fff; padding: 5px 10px; font-size:11px; background-color:#75a0b6; border-radius:3px;">Admin</a><%}%></td>
@@ -384,8 +449,10 @@ function fn_setApprovalCnt(){
 								if("2".equals(lev)){
 							%>
 							<li class="" data-menu-id="417" data-menu-target="Current" data-menu-alias="" data-menu-alias2="" data-menu-url="">
-								<a href="#" style="" class="menu menu_off" menuObjId="<%=menuObjid%>"><%=menuKorName%></a>
-									<%-- <div class="main_menu" menuObjId="<%=menuObjid%>"><span><a href="#" url="<%=menuUrl%>" objType="menuObj" menuObjId="<%=menuObjid%>"><%=menuKorName%></a></span></div> --%>
+								<a href="#" class="menu menu_off waves-effect waves-light" menuObjId="<%=menuObjid%>">
+									<span><%=menuKorName%></span>
+								</a>
+								<%-- 하위 메뉴는 Materialize 드롭다운으로 동적 로드됨 --%>
 							</li>
 							<%
 								}
--- a/WebContent/WEB-INF/view/main/menu.jsp
+++ b/WebContent/WEB-INF/view/main/menu.jsp
@@ -28,13 +28,46 @@
 		 */
 		color:#373740;  /* dark gray로 변경 */
 		font-size:13px;
+		transition: color 0.3s ease;
 	}
 	.menus_on{
 		color:#B3A7A7;
 		font-size:13.1px;
+		transition: color 0.3s ease;
 	}
 	.smenu{
-		font-weight:bold;  
+		font-weight:bold;
+		transition: all 0.3s ease;
+	}
+	
+	/* 메뉴 hover 효과 */
+	.main_menu:hover .smenu,
+	.menu2:hover .smenu {
+		color: #1159bc !important;
+		background-color: rgba(17, 89, 188, 0.1);
+		padding: 2px 5px;
+		border-radius: 3px;
+	}
+	
+	/* 메뉴 컨테이너 스타일 */
+	#menu {
+		transition: opacity 0.3s ease;
+	}
+	
+	/* 메뉴 아이템 애니메이션 */
+	.main_menu, .menu2 {
+		transition: all 0.3s ease;
+		cursor: pointer;
+	}
+	
+	.main_menu:hover, .menu2:hover {
+		background-color: rgba(245, 245, 245, 0.8);
+		border-radius: 3px;
+	}
+	
+	/* 메뉴 영역 전체 스타일 */
+	body {
+		transition: all 0.3s ease;
 	}
 </style>

@@ -85,6 +118,31 @@ $(function(){
 			//var firstLink = $('#menu a').first();
 			fnm_changeContentsLocation($(this).attr("url"), $(this).attr("menuObjId"), this);
 		});
+		
+		// 메뉴 영역에서 마우스가 벗어났을 때 자동 숨김 (애니메이션 적용)
+		var hideMenuTimer;
+		$(document).mouseleave(function(e) {
+			// 마우스가 메뉴 프레임을 벗어났을 때
+			clearTimeout(hideMenuTimer);
+			hideMenuTimer = setTimeout(function() {
+				try {
+					if(parent && parent.frames && parent.frames["toggle_page"]) {
+						var toggleFrame = parent.frames["toggle_page"];
+						if(toggleFrame.fntg_changeSizeWithAnimation) {
+							toggleFrame.fntg_changeSizeWithAnimation();
+						}
+					}
+				} catch(e) {
+					console.log("Toggle frame not accessible:", e);
+				}
+			}, 500); // 1.5초 후 자동 숨김
+		});
+		
+		// 메뉴 영역에 마우스가 다시 들어왔을 때 타이머 취소
+		$(document).mouseenter(function() {
+			clearTimeout(hideMenuTimer);
+		});
+		
 	});
 });

@@ -121,9 +179,12 @@ function fnm_changeContentsLocation(url, menuObjId, obj){

 function add_menu(objid, subMenuObjid, onlyViewMenu){
 	//Swal.fire("add_menu : " + objid + ":" + subMenuObjid + ":" + onlyViewMenu);
+	console.log("=== add_menu 함수 시작 ===");
+	console.log("Parameters:", {objid: objid, subMenuObjid: subMenuObjid, onlyViewMenu: onlyViewMenu});
 	
 	var menu ="";
 	if(fnc_isNotEmpty(objid)){
+		console.log("objid가 비어있지 않음, AJAX 호출 시작");
 		$.ajax({
 			url:"/main/getmenu.do",
 			type:"POST",
@@ -131,7 +192,9 @@ function add_menu(objid, subMenuObjid, onlyViewMenu){
 			dataType:"json",
 			async:false,
 			success:function(data){	
-				if(data.RESULT.length>0){
+				console.log("AJAX 응답 성공:", data);
+				if(data.RESULT && data.RESULT.length>0){
+					console.log("메뉴 아이템 개수:", data.RESULT.length);
 					for(var i=0;i<data.RESULT.length;i++){
 						//menu +="<div class='main_menu' menuObjId="+data.RESULT[i].OBJID+"><span><a href='javascript:fnm_changeContentsLocation(\""+data.RESULT[i].MENU_URL+"\",\""+data.RESULT[i].OBJID+"\")' url='"+data.RESULT[i].MENU_URL+"' objType='menuObj' menuObjId='"+data.RESULT[i].OBJID+"'>"+data.RESULT[i].MENU_NAME_KOR+"</a></span></div>";	
 						 /* 
@@ -141,30 +204,137 @@ function add_menu(objid, subMenuObjid, onlyViewMenu){
 						  }else{
 						 */	 
 							 var lev = data.RESULT[i].LEVEL;
-							 var menuClass = "main_menu";
+							 var menuClass = "main_menu"; // 모든 메뉴를 main_menu로 생성
 							 var menuUrl = fnc_checkNull(data.RESULT[i].MENU_URL);
-									 
-							 //console.log(lev);
+							 
+
 							 if(fnc_isNotEmpty(lev) && Number(lev) < 2){
 								 menuClass = "main_menu";
 								 menu +="<div class='"+menuClass+"' menuObjId="+data.RESULT[i].OBJID+" parentObjid="+data.RESULT[i].PARENT_OBJ_ID+"><span><a href='javascript:fnm_changeContentsLocation(\""+data.RESULT[i].MENU_URL+"\",\""+data.RESULT[i].OBJID+"\", this)' class='smenu menus_off' url='"+data.RESULT[i].MENU_URL+"' objType='menuObj' menuObjId='"+data.RESULT[i].OBJID+"'>"+data.RESULT[i].MENU_NAME_KOR+"</a></span></div>";
 							 }else{
 								 menuClass = "menu2";
-								 menu +="<div class='"+menuClass+"' menuObjId="+data.RESULT[i].OBJID+" parentObjid="+data.RESULT[i].PARENT_OBJ_ID+"><span><a href='javascript:fnm_changeContentsLocation(\""+data.RESULT[i].MENU_URL+"\",\""+data.RESULT[i].OBJID+"\", this)' class='smenu menus_off' url='"+data.RESULT[i].MENU_URL+"' objType='menuObj' menuObjId='"+data.RESULT[i].OBJID+"'>"+data.RESULT[i].MENU_NAME_KOR+"</a></span></div>";	 
+								 menu +="<div class='"+menuClass+"' menuObjId="+data.RESULT[i].OBJID+" parentObjid="+data.RESULT[i].PARENT_OBJ_ID+"><span><a href='javascript:fnm_changeContentsLocation(\""+data.RESULT[i].MENU_URL+"\",\""+data.RESULT[i].OBJID+"\", this)' class='smenu menus_off' url='"+data.RESULT[i].MENU_URL+"' objType='menuObj' menuObjId='"+data.RESULT[i].OBJID+"'>"+data.RESULT[i].MENU_NAME_KOR+"</a></span></div>";
 							 }
+
+							 console.log("메뉴 생성:", data.RESULT[i].MENU_NAME_KOR, "Level:", lev);
 							 //menu +="<div class='main_menu' menuObjId="+data.RESULT[i].OBJID+"><span><a href='' class='smenu menus_off' url='"+data.RESULT[i].MENU_URL+"' objType='menuObj' menuObjId='"+data.RESULT[i].OBJID+"'>"+data.RESULT[i].MENU_NAME_KOR+"</a></span></div>";
 						//}
 					}
 				}
+				console.log("생성된 메뉴 HTML 길이:", menu.length);
+				console.log("생성된 메뉴 HTML:", menu.substring(0, 200) + "...");
 			},		
 			error: function(jqxhr, status, error){
+				console.log("AJAX 오류:", error);
 	      	}
 		});
+	} else {
+		console.log("objid가 비어있음, sel_menu 호출");
 	}
 	
+	console.log("DOM 추가 전 - 메뉴 HTML 길이:", menu.length);
 	$('#menu').addClass('clickable');
 	$("#menu").append(menu);
 	
+	// 메뉴를 강제로 표시 (원래 위치에 맞게)
+	if(menu.length > 0) {
+		// 기존 메뉴 프레임의 위치 정보 가져오기
+		var menuFrame = window.frameElement;
+		var frameRect = menuFrame ? menuFrame.getBoundingClientRect() : {left: 0, top: 0};
+		
+		// body에 메뉴 추가 (원래 디자인에 맞게)
+		$('body').append('<div id="forced-menu" style="position:absolute; top:10px; left:25px; background:white; padding:0; z-index:1000; width:170px; border:none;">' + menu + '</div>');
+		
+		// 메뉴 아이템 스타일 적용 (원래 디자인)
+		$('#forced-menu .main_menu').css({
+			'display': 'block',
+			'padding': '0',
+			'margin': '0',
+			'cursor': 'pointer',
+			'border': 'none',
+			'background': 'transparent',
+			'width': '100%'
+		});
+		
+		// 메뉴 앞에 화살표 아이콘 추가
+		$('#forced-menu .main_menu').each(function() {
+			var $link = $(this).find('.smenu');
+			var linkText = $link.text();
+			$link.html('▶ ' + linkText);
+		});
+		
+		// 메뉴 링크 스타일 (원래 디자인)
+		$('#forced-menu .main_menu .smenu').css({
+			'display': 'block',
+			'padding': '8px 10px',
+			'color': '#373740',
+			'font-size': '13px',
+			'text-decoration': 'none',
+			'border-bottom': '1px solid #eee',
+			'transition': 'color 0.3s ease'
+		});
+		
+		// 메뉴 hover 효과 (원래 디자인)
+		$('#forced-menu .main_menu').hover(
+			function() {
+				$(this).find('.smenu').css({
+					'color': '#1159bc',
+					'background-color': 'rgba(17, 89, 188, 0.1)'
+				});
+			},
+			function() {
+				$(this).find('.smenu').css({
+					'color': '#373740',
+					'background-color': 'transparent'
+				});
+			}
+		);
+		
+		console.log("강제 메뉴 표시 완료");
+	}
+	
+	console.log("DOM 추가 완료");
+	
+	// 메뉴 컨테이너도 보이도록 설정
+	$('#menu').css({
+		'display': 'block !important',
+		'visibility': 'visible !important',
+		'opacity': '1 !important',
+		'position': 'static !important',
+		'top': 'auto !important',
+		'left': 'auto !important',
+		'margin-top': '10px !important',
+		'height': 'auto !important',
+		'min-height': '200px !important',
+		'overflow': 'visible !important',
+		'z-index': '9999 !important'
+	});
+	console.log("메뉴 컨테이너 CSS 설정 완료");
+	
+	// 메뉴가 그려진 후 main_menu는 보이게 하고, menu2는 숨김
+	$(".main_menu").show().css({
+		'display': 'block !important',
+		'visibility': 'visible !important',
+		'opacity': '1 !important',
+		'position': 'relative !important',
+		'margin': '2px 0 !important',
+		'padding': '5px !important',
+		'height': 'auto !important',
+		'width': '100% !important',
+		'cursor': 'pointer !important'
+	});
+	$(".menu2").hide();
+	
+	console.log("메뉴 요소 개수 확인:");
+	console.log("- #menu 요소:", $('#menu').length);
+	console.log("- .main_menu 요소:", $('.main_menu').length);
+	console.log("- .menu2 요소:", $('.menu2').length);
+	console.log("메뉴 가시성 확인:");
+	console.log("- #menu visible:", $('#menu').is(':visible'));
+	console.log("- .main_menu visible:", $('.main_menu').is(':visible'));
+	console.log("메뉴 위치 정보:", $('#menu').offset());
+	console.log("메뉴 크기:", $('#menu').width(), "x", $('#menu').height());
+	
 	//var firstLink = $('#menu a').first();
 	//fnm_changeContentsLocation(firstLink.attr("url"));
 	
@@ -191,13 +361,31 @@ function add_menu(objid, subMenuObjid, onlyViewMenu){
 			fnm_changeContentsLocation(url, menuObjId, this);
 			
 			if(url.toUpperCase().indexOf('/DASHBOARD.DO') > -1){	//대시보드 전체화면
-				parent.frames["fToggle"].fntg_changeSizeS();
+				try {
+					if(parent && parent.frames && parent.frames["toggle_page"]) {
+						parent.frames["toggle_page"].fntg_changeSizeS();
+					}
+				} catch(e) {
+					console.log("Toggle frame error:", e);
+				}
 			}else{
-				parent.frames["fToggle"].fntg_changeSizeM();
+				try {
+					if(parent && parent.frames && parent.frames["toggle_page"]) {
+						parent.frames["toggle_page"].fntg_changeSizeM();
+					}
+				} catch(e) {
+					console.log("Toggle frame error:", e);
+				}
 			}
 		}else{
 			//alert('bb');
-			parent.frames["fToggle"].fntg_changeSizeM();
+			try {
+				if(parent && parent.frames && parent.frames["toggle_page"]) {
+					parent.frames["toggle_page"].fntg_changeSizeM();
+				}
+			} catch(e) {
+				console.log("Toggle frame error:", e);
+			}
 			var menu2 = $("[parentObjid="+menuObjId+"]")[0];
 			smenu = $(menu2).find(".smenu");
 			$(menu2).trigger("click");
@@ -232,8 +420,23 @@ function add_menu(objid, subMenuObjid, onlyViewMenu){
 	}else{
 		sel_menu(objid, subMenuObjid, onlyViewMenu);
 	}
+	
+	// 메뉴 그리기 완료 후 자동 숨김 처리 (애니메이션 적용)
+	setTimeout(function() {
+		try {
+			if(parent && parent.frames && parent.frames["toggle_page"]) {
+				var toggleFrame = parent.frames["toggle_page"];
+				if(toggleFrame.fntg_changeSizeWithAnimation) {
+					toggleFrame.fntg_changeSizeWithAnimation();
+				}
+			}
+		} catch(e) {
+			console.log("Toggle frame not accessible:", e);
+		}
+	}, 300);
 }

+
 function sel_menu(objid, subMenuObjid, onlyViewMenu){
 	
 	//Swal.fire("sel_menu - " + objid + ":" + subMenuObjid + ":" + onlyViewMenu);
@@ -254,6 +457,7 @@ function sel_menu(objid, subMenuObjid, onlyViewMenu){
 	}
 }

+
 </script>
 </head>
 <body id="menuback_w" style="height:100%;overflow-y: hidden;">
@@ -276,31 +480,8 @@ function sel_menu(objid, subMenuObjid, onlyViewMenu){
 		<div style="float:left;width:20px;height:100%;background:#606060;">
 		</div>
 		
-		<div id="menu" style="float:;width:100%;margin-left:5px">
-				<%-- <%
-	     		for(int i=0;i<userMenuList.size();i++){
-	     			HashMap menuMap = (HashMap)userMenuList.get(i);
-	     		    String menuDesc = CommonUtils.checkNull(menuMap.get("menu_desc")); 
-	     			String menuKorName = CommonUtils.checkNull(menuMap.get("menu_name_kor"));
-	     			String menuObjid = CommonUtils.checkNull(menuMap.get("objid"));
-	     			String parentObjid = CommonUtils.checkNull(menuMap.get("parent_obj_id"));
-	     			String menuUrl = CommonUtils.checkNull(menuMap.get("menu_url"));
-	     			String lev = CommonUtils.checkNull(menuMap.get("lev"));
-					/* String menuSeq = CommonUtils.checkNull(menuMap.get("SEQ")); */     			
-					/* String menuMaxSeq = CommonUtils.checkNull(menuMap.get("MAX_SEQ"));     			
-					String menuMinSeq = CommonUtils.checkNull(menuMap.get("MIN_SEQ")); */
-					
-					if("2".equals(lev)){
-				%>
-						<div class="main_menu" menuObjId="<%=menuObjid%>"><span><a href="#" url="<%=menuUrl%>" objType="menuObj" menuObjId="<%=menuObjid%>"><%=menuKorName%></a></span></div>
-				<%
-					}else if("3".equals(lev)){
-				%>		
-						<div class="menu2" parentObjid="<%=parentObjid%>" menuType="12"><a href="#" url="<%=menuUrl%>" objType="menuObj" menuObjId="<%=menuObjid%>"><%=menuKorName%></a></div>
-				<%
-					}
-	     		}
-				%>		 --%>
+		<div id="menu" style="float:left;width:100%;margin-left:5px">
+	
 		</div>	
 	</div>
 </form>
--- a/WebContent/WEB-INF/view/main/toggle.jsp
+++ b/WebContent/WEB-INF/view/main/toggle.jsp
@@ -9,15 +9,45 @@
 	<title><%=Constants.SYSTEM_NAME%></title> 
 	<script>
    	function fntg_changeSize(){
+    		var frameset = parent.document.getElementById('parentsObj');
+    		var frameVal = frameset.cols;
+    		var animating = false;
    		
-    		var frameVal = parent.document.getElementById('parentsObj').cols;
+    		if (animating) return;
+    		animating = true;
    		
-    		if("0px,8px,*" == frameVal){
-    			parent.document.getElementById('parentsObj').cols = "197px,8px,*";
-    		}else{
-    			parent.document.getElementById('parentsObj').cols = "0px,8px,*";
+    		var startWidth, endWidth;
+    		if("0px,14px,*" == frameVal || "0px,8px,*" == frameVal){
+    			startWidth = 0;
+    			endWidth = 197;
+    		} else {
+    			startWidth = 197;
+    			endWidth = 0;
    		}
    		
+    		var duration = 300;
+    		var startTime = Date.now();
+    		
+    		function animate() {
+    			var elapsed = Date.now() - startTime;
+    			var progress = Math.min(elapsed / duration, 1);
+    			
+    			// easeInOut 이징
+    			progress = progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2;
+    			
+    			var currentWidth = Math.round(startWidth + (endWidth - startWidth) * progress);
+    			var cols = currentWidth === 0 ? '0px,14px,*' : currentWidth + 'px,14px,*';
+    			
+    			frameset.cols = cols;
+    			
+    			if (progress < 1) {
+    				requestAnimationFrame(animate);
+    			} else {
+    				animating = false;
+    			}
+    		}
+    		
+    		animate();
    	}
    	
 		function fntg_changeSizeS(){
@@ -28,6 +58,86 @@
   			parent.document.getElementById('parentsObj').cols = "197px,1px,*";
    	}
    	
+    	// 애니메이션과 함께 메뉴 숨기기
+    	function fntg_changeSizeWithAnimation(){
+    		var frameset = parent.document.getElementById('parentsObj');
+    		var frameVal = frameset.cols;
+    		var animating = false;
+    		
+    		if (animating) return;
+    		animating = true;
+    		
+    		// 현재 메뉴가 보이는 상태라면 숨김
+    		if(frameVal !== "0px,14px,*" && frameVal !== "0px,1px,*") {
+    			var startWidth = 197;
+    			var endWidth = 0;
+    			
+    			var duration = 400;
+    			var startTime = Date.now();
+    			
+    			function animate() {
+    				var elapsed = Date.now() - startTime;
+    				var progress = Math.min(elapsed / duration, 1);
+    				
+    				// easeInOut 이징
+    				progress = progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2;
+    				
+    				var currentWidth = Math.round(startWidth + (endWidth - startWidth) * progress);
+    				var cols = currentWidth === 0 ? '0px,14px,*' : currentWidth + 'px,14px,*';
+    				
+    				frameset.cols = cols;
+    				
+    				if (progress < 1) {
+    					requestAnimationFrame(animate);
+    				} else {
+    					animating = false;
+    				}
+    			}
+    			
+    			animate();
+    		}
+    	}
+    	
+    	// 애니메이션과 함께 메뉴 보이기
+    	function fntg_showMenuWithAnimation(){
+    		var frameset = parent.document.getElementById('parentsObj');
+    		var frameVal = frameset.cols;
+    		var animating = false;
+    		
+    		if (animating) return;
+    		animating = true;
+    		
+    		// 현재 메뉴가 숨겨진 상태라면 보임
+    		if(frameVal === "0px,14px,*" || frameVal === "0px,1px,*") {
+    			var startWidth = 0;
+    			var endWidth = 197;
+    			
+    			var duration = 400;
+    			var startTime = Date.now();
+    			
+    			function animate() {
+    				var elapsed = Date.now() - startTime;
+    				var progress = Math.min(elapsed / duration, 1);
+    				
+    				// easeInOut 이징
+    				progress = progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2;
+    				
+    				var currentWidth = Math.round(startWidth + (endWidth - startWidth) * progress);
+    				var cols = currentWidth === 0 ? '0px,14px,*' : currentWidth + 'px,14px,*';
+    				
+    				frameset.cols = cols;
+    				
+    				if (progress < 1) {
+    					requestAnimationFrame(animate);
+    				} else {
+    					animating = false;
+    				}
+    			}
+    			
+    			animate();
+    		}
+    	}
+    	
    	$(document).ready(function(){
    	
    		$("#side1 img").hover(function() {
@@ -36,6 +146,24 @@
    				$(this).css("opacity","1").stop().attr("src", "/images/toggle.png");
    			});
    		
+    		// 토글 영역에 마우스 오버 시 메뉴 표시 (애니메이션 적용)
+    		$("#side1").mouseenter(function() {
+    			fntg_showMenuWithAnimation();
+    		});
+    		
+    		// 메뉴 영역에서 마우스가 벗어났을 때 다시 숨김 (선택적)
+    		// 필요에 따라 주석 해제하여 사용
+    		/*
+    		$(document).mouseleave(function(e) {
+    			// 마우스가 메뉴 영역을 완전히 벗어났을 때 숨김
+    			if(e.pageX < 220) return; // 메뉴 영역 너비 고려
+    			
+    			setTimeout(function() {
+    				fntg_changeSizeS();
+    			}, 1000); // 1초 후 자동 숨김
+    		});
+    		*/
+    		
    	});
    </script>
 </head> 
--- a/WebContent/WEB-INF/view/mainFS.jsp
+++ b/WebContent/WEB-INF/view/mainFS.jsp
@@ -1,4 +1,4 @@
-<frameset rows="78px,*" border="0">
-	<frame src="/main/header.do" id="headerFS" name="headerFS">
-	<frame src="/main/contentsFS.do" id="contentsFS" name="contentsFS">
+<frameset rows="51px,*" border="0" frameborder="0" framespacing="0">
+	<frame src="/main/header.do" id="headerFS" name="headerFS" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">
+	<frame src="/main/contentsFS.do" id="contentsFS" name="contentsFS" frameborder="0" marginwidth="0" marginheight="0">
 </frameset>