2025_PROJECT / orgasis star
염성찬 염성찬 1 days ago
메인페이지 국문/영문 분리 및 KOR/ENG 전환 
- 영문 메인 mainPageEng.jsp 추가
- menuUserType=ENG 일 때 영문 메인 표출
- 헤더 KOR/ENG 버튼 클릭 시 해당 메인으로 이동
@8e19fc4e00fba1800b379aa719ce59323737b11b
88685e6
8e19fc4
src/main/java/kcc/web/MainController.java
--- src/main/java/kcc/web/MainController.java
+++ src/main/java/kcc/web/MainController.java
@@ -228,7 +228,12 @@
 
 		
 		/** 팝업 */
 
 		model.addAttribute("popupList", this.popupList());
 
-		
+
 
+		/** 영문 메인 */
 
+		if ("ENG".equals(request.getParameter("menuUserType"))) {
 
+			return "web/main/mainPageEng";
 
+		}
 
+
 
 		return "web/main/mainPage";
 
 	}
88685e6
8e19fc4
src/main/webapp/WEB-INF/jsp/web/com/webCommonHeader.jsp
--- src/main/webapp/WEB-INF/jsp/web/com/webCommonHeader.jsp
+++ src/main/webapp/WEB-INF/jsp/web/com/webCommonHeader.jsp
@@ -145,44 +145,29 @@
 
 					<div class="lang_switch">
 
 						<i class="icon lang"></i>
 
 						<button type="button" id="lang-kor" class="${param.menuUserType ne 'ENG' ? 'active' : ''}">KOR</button>
 
-						<%-- <button type="button" id="lang-eng" class="${param.menuUserType eq 'ENG' ? 'active' : ''}">ENG</button> --%>
 
-						<button type="button" id="lang-eng">ENG</button>
 
-						
+						<button type="button" id="lang-eng" class="${param.menuUserType eq 'ENG' ? 'active' : ''}">ENG</button>
 
+
 
 					</div>
 
 <script type="text/javascript">
 
 $(document).ready(function() {
 
-    // Language selection handling
 
-    var menuUserType = sessionStorage.getItem('menuUserType');
 
-    if (!menuUserType) {
 
-        const urlParams = new URLSearchParams(window.location.search);
 
-        menuUserType = urlParams.get('menuUserType') || 'KOR';
 
-        sessionStorage.setItem('menuUserType', menuUserType);
 
-    }
 
+    // Language selection handling (URL 파라미터 기준)
 
+    var menuUserType = '${param.menuUserType eq 'ENG' ? 'ENG' : 'KOR'}';
 
+    sessionStorage.setItem('menuUserType', menuUserType);
 
 
-    if (menuUserType === 'ENG') {
 
-        $('#lang-kor').removeClass('active');
 
-        $('#lang-eng').addClass('active');
 
-    } else {
 
-        /* $('#lang-eng').removeClass('active');
 
-        $('#lang-kor').addClass('active'); */
 
-        
-    }
 
-
 
+    // KOR : 국문 메인(mainPage.jsp), ENG : 영문 메인(mainPageEng.jsp)
 
     $('#lang-kor').on('click', function() {
 
         sessionStorage.setItem('menuUserType', 'KOR');
 
-        var url = new URL(window.location.href);
 
-        url.searchParams.set('menuUserType', 'KOR');
 
-        window.location.href = url.href;
 
+        location.href = '/web/main/mainPage.do?menuUserType=KOR';
 
     });
 
 
     $('#lang-eng').on('click', function() {
 
-        /* sessionStorage.setItem('menuUserType', 'ENG');
 
-        var url = new URL(window.location.href);
 
-        url.searchParams.set('menuUserType', 'ENG');
 
-        window.location.href = url.href; */
 
-        alert("준비중입니다.")
 
+        sessionStorage.setItem('menuUserType', 'ENG');
 
+        location.href = '/web/main/mainPage.do?menuUserType=ENG';
 
     });
 
 
+    // 로고 클릭 시 현재 언어 메인으로 이동
 
+    $('h1.logo a').attr('href', '/web/main/mainPage.do?menuUserType=' + menuUserType);
 
+
 
     // Append menuUserType to menu links
 
     var currentLang = sessionStorage.getItem('menuUserType') || 'KOR';
 
     $('a.depth02').each(function() {
 
8e19fc4
src/main/webapp/WEB-INF/jsp/web/main/mainPageEng.jsp (added)
+++ src/main/webapp/WEB-INF/jsp/web/main/mainPageEng.jsp
@@ -0,0 +1,298 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
+<%   
+	response.setHeader("Cache-Control","no-store");   
+	response.setHeader("Pragma","no-cache");   
+	response.setDateHeader("Expires",0);   
+	if (request.getProtocol().equals("HTTP/1.1")) response.setHeader("Cache-Control", "no-cache"); 
+%> 
+
+	
+<script type="text/javascript">
+$(document).ready(function (){
+	
+// 	<c:if test="${message != null}">
+// 		alert("<c:out value='${message}' />");
+// 	</c:if>
+	
+	//레이어 팝업 띄우기
+	<c:forEach var="popupListData" items="${popupList}" varStatus="status" end="10">
+			if(fnGetCookie("layer_<c:out value='${popupListData.popupId}' />") == null){
+				$("#layer_pop_<c:out value='${popupListData.popupId}' />").fadeIn();
+			};
+	</c:forEach>
+	
+	// 팝업 위치 조정
+    
+	
+	var bdWidth = $("body").width();
+	popupSet(bdWidth);
+	
+});
+
+$(window).on("resize",function(){
+	var bdWidth = $("body").width();
+	popupSet(bdWidth);
+})
+
+// 팝업 css 설정
+function popupSet(bodyWidth){
+	let offset = 30;
+	if(bodyWidth>1199){
+		$(".popup").each(function(idx,itm) {
+	        $(this).css({
+	            top: '60px', // 화면 중앙에 위치
+	            left: offset + 'px', // 각 팝업을 가로로 정렬
+	            /* transform: 'translateY(-50%)', // 세로 중앙 정렬 */
+	            position: 'absolute' // 부모 요소 기준으로 위치 설정
+	        });
+	        offset += $(this).outerWidth(true)+30; // 다음 팝업의 위치를 현재 팝업의 너비만큼 이동
+	    });	
+	}else{
+		$(".popup").each(function(idx,itm) {
+	    	var zIndex = 1000 - idx;
+			var topPosi = idx * 45;
+	        $(this).css({
+	            top: 'calc(1% + '+topPosi+'px)', // 화면 중앙에 위치
+	            left: '30px', // 각 팝업을 가로로 정렬
+	            /* transform: 'translateY(-50%)', // 세로 중앙 정렬 */
+	            position: 'absolute', // 부모 요소 기준으로 위치 설정
+	            "z-index":zIndex
+	        });
+	        offset += $(this).outerWidth(true)+30; // 다음 팝업의 위치를 현재 팝업의 너비만큼 이동
+	    });
+	}
+}
+
+
+/* ********************************************************
+* 팝업창  오픈 쿠키 정보 OPEN
+******************************************************** */
+function fnGetCookie(name) {
+	  var prefix = name + "=";
+
+	  var cookieStartIndex = document.cookie.indexOf(prefix);
+	  if (cookieStartIndex == -1) return null;
+	  var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length);
+	  if (cookieEndIndex == -1) cookieEndIndex = document.cookie.length;
+
+
+	  return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex));
+}		
+
+/* ********************************************************
+ * 쿠키설정
+ ******************************************************** */
+function fnSetCookiePopup( name, value, expiredays ) {
+	  var todayDate = new Date();
+	  todayDate.setDate( todayDate.getDate() + expiredays );
+	  document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
+}
+
+//팝업 다시보지않기
+function fnPopupCheck(popupId , typeFlag) {
+	fnSetCookiePopup( typeFlag+"_"+popupId , "done" , 1);
+	fn_layerClose(popupId);
+}
+
+//팝업 닫기 
+function fn_layerClose(popupId){
+	$("#layer_pop_"+popupId).fadeOut();	
+}
+
+function popzoneOpen(url,target){
+	var vTarget;
+	if(target != "N"){
+		vTarget = "_self";
+	}else{
+		vTarget = "_blank";
+	}
+	window.open(url,vTarget);
+}
+
+function fn_egov_inqire_notice(bbsId, nttId) {
+	document.frm.nttId.value = nttId;
+	document.frm.bbsId.value = bbsId;
+	document.frm.method = "post";
+	document.frm.action = "<c:url value='/web/cop/bbsWeb/selectBoardDetail.do'/>?pubDetail=Y";
+	document.frm.submit();
+}
+
+function commonPopWindowopenForm(surl, popupwidth, popupheight, name, frm) {
+
+	if (popupwidth > screen.width)
+		popupwidth = screen.width;
+
+	if (popupheight > screen.height)
+		popupheight = screen.height;
+
+	var top = 0;
+	var left = 0;
+
+	if (isNaN(parseInt(popupwidth))) {
+		top = (screen.availHeight - 600) / 2;
+		left = (screen.availWidth - 800) / 2;
+	} else {
+		top = (screen.availHeight - popupheight) / 2;
+		left = (screen.availWidth - popupwidth) / 2;
+	}
+
+	if (top < 0) top = 0;
+	if (left < 0) left = 0;
+
+	var option = "dependent=yes,fullscreen=no,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,left=" + left + ",top=" + top + ",width=" + popupwidth + ",height=" + popupheight;
+
+	if (name == null || name == "") { name = "Popup"; }
+	window.open("", name, option);
+	frm.attr('target', name);
+	frm.attr('action', surl);
+	frm.method = "post";
+	frm.submit();
+	// 초기화..
+	frm.attr('target', '_self');
+}
+</script>
+
+<!-- 비주얼 -->
+<c:choose>
+   <c:when test="${not empty mainzoneImg}">
+       <c:set var="backgroundUrl" value="/uss/ion/pwm/getImage.do?atchFileId=${mainzoneImg.mainzoneImageFile}" />
+   </c:when>
+   <c:otherwise>
+       <c:set var="backgroundUrl" value="/kofair_case_seed/usr/images/main/main_visual.jpg" />
+   </c:otherwise>
+</c:choose>
+	
+<%-- <div class="visual" style="
+						    width: 100%;
+						    padding: 70px 0;
+						    background: url('${backgroundUrl}') no-repeat center center;
+						    text-align: center;
+						    background-size: cover;
+					    ">
+</div> --%>
+
+<!-- ============== 메인비주얼 ============== -->
+<div class="main_visual">
+		<div class="visual_slide swiper">
+			<div class="swiper-wrapper">
+				<a href="#" class="swiper-slide" style="background: url('${backgroundUrl}') no-repeat center center;"></a>
+				<!-- <a href="#" class="swiper-slide"></a> -->
+			</div>
+		</div>
+		
+		<div class="contents">
+			<div class="inner">
+				<div class="text_area">
+					<b class="title">ORGASIS <span class="line">Organellostasis</span></b>
+					<span class="summary">
+						Developing innovative new drugs and <br />anti-aging materials with organelle homeostasis platform technology
+					</span>
+					<div class="slide_pagination">
+
+					</div>
+				</div>
+				<ul class="box_contents">
+					<li class="box purple">
+						<a href="#">
+							<b class="title">ORGanelle Platform Tech</b>
+							<span class="summary">
+								Internal and external stimuli such as pathogenesis, stress and aging damage cellular organelles,<br />
+								and the activity of selective autophagy that maintains their homeostasis declines or becomes deficient,<br />
+								leading to a variety of diseases.
+							</span>
+						</a>
+					</li>
+					<li class="box blue">
+						<a href="#">
+							<b class="title">ORGASIS Pipeline</b>
+							<span class="summary">
+								ORGASIS aims to contribute to a healthy future and a better life for humanity<br />
+								through disease-specific drug development using selective autophagy<br />
+								screening technology for damaged organelles and cellular waste.
+							</span>
+						</a>
+					</li>
+					<li class="box skyblue">
+						<a href="#">
+							<b class="title">ORGASIS Achievement</b>
+							<span class="summary">
+								ORGASIS removes damaged cellular organelles, excess pigments and aggregates<br />
+								with selective autophagy technology to realize anti-aging and Balanced Aging,<br />
+								contributing to healthy aging and human longevity.
+							</span>
+						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+</div>
+<!-- ============== 메인비주얼 끝 ============== -->
+
+
+
+
+<c:if test="${fn:length(popupList) > 0}" >
+	<style>
+	
+	    .popup {
+	        display: none; /* 처음에는 보이지 않도록 설정 */
+	        position: fixed; /* 화면에 고정 */
+	        left: 0; /* 초기 위치 설정 */
+	        top: 50%; /* 화면 중앙에 위치 */
+	        min-width: 400px; /* 팝업 너비 */
+	        height: auto; /* 높이를 내용에 맞게 자동 조정 */
+	        border: 1px solid #e5e5e5;
+	        background-color: #f4f5f6;
+	        text-align: center;
+	        z-index: 1000; /* 다른 요소들 위에 표시되도록 설정 */
+	        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 그림자 효과 */
+	    }
+	    .popup_wrap{padding:100px 30px;left:0;top:0;z-index:10;}
+	    .pop-conts{background:#fff;min-height:250px;font-size:1.4rem;justify-content:center;align-items:center;}
+	    .pop-conts a{width:100%;word-break:break-word;}
+	    .btn-r{display:flex;height:45px;padding:0 15px;justify-content:space-between;align-items:center;}
+	    .today_close{display:flex;font-size:16px;color:#222;gap:8px;align-items:center;}
+	    .today_close [type="checkbox"]{width:16px;height:16px;}
+	    .btn-layerClose{display:flex;width:30px;height:30px;margin:2px 0 0 0;justify-content:center;align-items:center;} 
+	    .icon.popup_close{width:16px;height:16px;background:url(/publish/adm/images/component/icon_x.png) no-repeat center center;background-size:100% auto;}
+	    @media screen and (max-width: 1199px){
+	    	.popup{width:95%;min-width:auto;}
+	    	.pop-conts{min-height:auto;}
+	    	.popup_wrap img{height:auto !important;object-fit:contain;}
+		}
+		@media screen and (max-width: 640px){
+	    	.popup{width:95% !important;left:50% !important;transform:translateX(-50%);}
+		}
+	</style>
+		<c:forEach var="popupListData" items="${popupList}" varStatus="status" end="4">
+		    <div id="layer_pop_<c:out value='${popupListData.popupId}' />" class="popup">
+		        <div class="pop-container">
+		            <div class="pop-conts">
+		                <c:choose>
+		                    <c:when test="${not empty popupListData.fileUrl}">
+		                        <a href="<c:out value='${popupListData.fileUrl}' />" target="_blank">
+		                            ${popupListData.nttCn}
+		                        </a>
+		                    </c:when>
+		                    <c:otherwise>
+		                        <a href="#">
+		                            ${popupListData.nttCn}
+		                        </a>
+		                    </c:otherwise>
+		                </c:choose>
+		            </div>
+		            <div class="btn-r">
+		                <div class="today_close">
+		                    <c:if test="${popupListData.stopvewSetupAt eq 'Y' }">
+		                    	<input type="checkbox" id="chkPupup_${status.count}" name="chkPopup" tabindex="1" onClick="fnPopupCheck('<c:out value='${popupListData.popupId}' />' , 'layer')" onkeypress="fnPopupCheck('<c:out value='${popupListData.popupId}' />' , 'layer')" style="display:inline">
+		                        <label for="chkPupup_${status.count}">Do not show for 24 hours</label>
+		                    </c:if>
+		                </div>
+		                <a href="#" tabindex="1" onclick="fn_layerClose('<c:out value='${popupListData.popupId}' />'); return false;" class="btn-layerClose" title="Close popup"><i class="icon popup_close"></i></a>
+		            </div>
+		        </div>
+		    </div>
+		</c:forEach>
+</c:if>		(No newline at end of file)
Add a comment
List