js 파일들 정리

src/main/java/com/ns/mobile/website/web/controller/home/HomeController.java

@@ -21,6 +21,7 @@ public class HomeController extends BaseController {
 
 	private final LaneduProperties laneduProperties;
 	
+	
 	@PublicAccess
 	@RequestMapping(value = {"home"})
 	String home(Model model, HttpServletRequest request, HttpSession session

src/main/resources/static/res/front/css/default.css

@@ -0,0 +1,46 @@
+@charset "utf-8";
+
+#wrapper {
+    overflow-x: hidden;
+}
+
+#sidebar-wrapper {
+    min-height: 100vh;
+    margin-left: -15rem;
+    -webkit-transition: margin .25s ease-out;
+    -moz-transition: margin .25s ease-out;
+    -o-transition: margin .25s ease-out;
+    transition: margin .25s ease-out;
+}
+
+#sidebar-wrapper .sidebar-heading {
+    padding: 0.875rem 1.25rem;
+    font-size: 1.2rem;
+}
+
+#sidebar-wrapper .list-group {
+    width: 15rem;
+}
+
+#page-content-wrapper {
+    min-width: 100vw;
+}
+
+body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
+    margin-left: 0;
+}
+
+@media (min-width: 768px) {
+    #sidebar-wrapper {
+        margin-left: 0;
+    }
+
+    #page-content-wrapper {
+        min-width: 0;
+        width: 100%;
+    }
+
+    body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
+        margin-left: -15rem;
+    }
+}

src/main/resources/static/res/front/js/biz/home/home-common-lanedu.js

@@ -1,568 +0,0 @@
-let appVueUserSelect = new Vue({
-	mixins: [PAGING, MIXIN],
-	el: '#POPUP_USER_SELECT',
-	data: {
-		viewMode: 'USER_SELECT',//USER_SELECT:사용자선택
-		allList: [],
-		ingList: [],
-		ingFirst: {},
-		ingMoreList: [],
-		reqList: [],
-		returnUrl: ''           //사용자선택후 포탈진입시 들어가는 URL
-	},
-	created: function () {
-	},
-	mounted: function () {
-		this.init();
-	},
-
-	computed: {
-		isViewModeAddOrg: function () {
-			return this.viewMode === 'ADD_ORG';
-		},
-		isViewModeUserSelect: function () {
-			return this.viewMode === 'USER_SELECT';
-		}
-	},
-
-	methods: {
-		init: function () {
-			let $this = this;
-		},
-
-		bindList: function () {
-		},
-
-		setViewModeUserSelect: function () {
-			this.viewMode = 'USER_SELECT';
-		},
-
-		setPortalReturnUrl: function (returnUrl) {
-			this.returnUrl = returnUrl;
-		},
-
-		setVeiwModeAddOrg: function () {
-			this.viewMode = 'ADD_ORG';
-		},
-
-		onClickCafeUserIdLogin: function (x) {
-
-			let $this = this;
-			let reUrl = $('script[data-url][data-url!=null]').attr('data-url');
-			if (!isEmpty(reUrl)) {
-				$this.returnUrl = reUrl;
-			}
-			let cafeUserId = x.id;
-
-			let parameter = {
-				cafeUserId: cafeUserId
-			};
-
-			lanedu.front.api.user.loginCafeUserId(parameter, function (success, message, body, data) {
-				if (!success) {
-					alert(message);
-					return false;
-				}
-
-				if ($this.returnUrl !== '') {
-					location.href = $this.returnUrl;
-				} else {
-					location.href = '/portal';
-				}
-
-			});
-			return false;
-		},
-
-		setOrgSelectAction: function () {
-			this.viewMode = 'ADD_ORG';
-		}
-	}
-});
-
-let captchaReload = function () {
-	event.preventDefault();
-	event.stopPropagation();
-
-	if (captcharReloadYnCk()) {
-		return false;
-	}
-	g_getCaptch();
-
-	return false;
-};
-
-//캡차 다시보기 연속클릭방지
-let captcharReloadYn = false;
-
-function captcharReloadYnCk() {
-	if (captcharReloadYn) {
-		return captcharReloadYn;
-	} else {
-		captcharReloadYn = true;
-		return false;
-	}
-}
-
-let captchaPlaySound = function () {
-	event.preventDefault();
-	event.stopPropagation();
-
-	var agent = navigator.userAgent;
-	var sndUrl = $("#captchaSoundUrl").val();
-
-	if (agent.indexOf("Trident") > -1 || agent.indexOf("MSIE") > -1) {
-		$('#hdn_captcha_soundPlayer').html("<embed src=\"" + sndUrl + "&agent=msie\" type=\"audio/wav\">");
-	} else if (!!document.createElement('audio').canPlayType) {
-		try {
-			new Audio(sndUrl).play();
-		} catch (e) {
-			$('#hdn_captcha_soundPlayer').html("<bgsound src=\"" + sndUrl + "\">");
-		}
-	} else window.open(sndUrl, '', 'width=1,height=1');
-
-	return false;
-};
-
-var g_showLoginOnlyPopup = function (returnUrl) {
-	event.preventDefault();
-	event.stopPropagation();
-
-	returnUrl = returnUrl || '';
-	
-	g_getCaptch();
-
-	$('#popupLoginForm').off('submit').on('submit', function () {
-		let $thisForm = $(this);
-		let pp = encRSA($thisForm.find('input[name=password]').val());
-		//다른 기기에서 로그인한 사용자가 있는지 확인
-		let parameter = {
-			siteType: g_siteType,
-			siteId: g_siteId,
-			phone: btoa($thisForm.find('input[name=phone]').val()),
-			password: pp,
-			captchaValue: $thisForm.find('input[name=captchaValue]').val(),
-			captchaInsId: $thisForm.find('#captchaInsId').val()
-		};
-
-		lanedu.front.api.user.existLogin(parameter, function (success, message, body, data) {
-
-			if (!success) {
-				captchaReload();
-
-				if (data.header.errCode == 'LOGIN_FAIL_EXIST_LOGINUSER') {
-					if (!confirm('다른 기기에서 로그인 중입니다. 해당 기기에서 로그아웃하고 로그인 하시겠습니까?')) {
-						return false;
-					}
-
-				} else {
-					alert(message);
-					return false;
-				}
-			}
-
-			lanedu.front.api.user.login(parameter, function (success, message, body, data) {
-				if (!success) {
-					if (data.header.errCode == 'LOGIN_FAIL_NOTHING_ACCOUNT') {
-						layerPop('', '#layerLogin');
-
-						let user = body || {};
-						g_userId = user.id;
-						$('body').addClass('logined');
-
-						appVueUserSelect.setVeiwModeAddOrg();
-
-						//로그인 아이디 저장
-						if ($('#savedLoginId')[0].checked) {
-							localStorage.setItem("LOGIN_ID", atob(parameter.phone));
-						}
-						if (returnUrl != '') {
-							location.href = returnUrl;
-						}
-					} else if (data.header.errCode == 'LOGIN_FAIL_SELECT_ACCOUNT') {
-
-						let cafeUsers = body || [];
-						if (cafeUsers.length > 0) {
-							g_userId = cafeUsers[0].userId;
-							$('body').addClass('logined');
-						}
-
-						layerPop('', '#layerLogin');
-						//로그인 아이디 저장
-						if ($('#savedLoginId')[0].checked) {
-							localStorage.setItem("LOGIN_ID", atob(parameter.phone));
-						}
-						if (returnUrl != '') {
-							location.href = returnUrl;
-						}
-
-					} else {
-						captchaReload();
-						alert(message);
-					}
-					return false;
-				}
-
-				/*if (data.header.errCode == 'LOGIN_OK_GO_CAFE') {
-					location.href = '/portal';
-					return false;
-				}*/
-
-				g_userId = body.id;
-				g_cafeId = body.cafeId;
-				$('body').addClass('logined');
-				layerPop('', '#layerLogin');
-
-				//로그인 아이디 저장
-				if ($('#savedLoginId')[0].checked) {
-					localStorage.setItem("LOGIN_ID", atob(parameter.phone));
-				}
-
-			});
-
-		});
-		return false;
-	});
-
-	//저장된 아이디 확인
-	(function () {
-		let loginId = (localStorage.getItem("LOGIN_ID") || '').trim();
-		if (loginId !== '') {
-			$('#savedLoginId')[0].checked = true;
-			$('#popupLoginForm').find('input[name=phone]').val(loginId);
-		}
-	})();
-
-	layerPop('open', '#layerLogin');
-	return false;
-};
-
-var g_getCaptch = function () {
-
-	lanedu.front.api.user.captchaCall({}, function (success, message, body, data) {
-		//console.log(body.capUrl);
-		//capHtml: "\r\n\r\n  <link type=\"text/css\" rel=\"stylesheet\" href=\"/botdetectcaptcha?get=layout-stylesheet&amp;t=1639616400\" />\r\n  <div class=\"BDC_CaptchaDiv \" id=\"captcha_CaptchaDiv\" style=\"width: 280px !important; height: 50px !important; \"><!--\r\n --><div class=\"BDC_CaptchaImageDiv\" id=\"captcha_CaptchaImageDiv\" style=\"width: 250px !important; height: 50px !important;\"><!--\r\n   --><a href=\"//captcha.org/captcha.html?java\" title=\"What is BotDetect Java CAPTCHA Library?\" id=\"captcha_HelpLink\"><img class=\"BDC_CaptchaImage\" id=\"captcha_CaptchaImage\" src=\"/botdetectcaptcha?get=image&amp;c=captcha&amp;t=e832c3b3c7c54746bf39737cd4fbd6a3\" alt=\"Retype the CAPTCHA code from the image\" style=\"display: none !important\" /></a><!--\r\n --></div><!--\r\n --><div class=\"BDC_CaptchaIconsDiv\" id=\"captcha_CaptchaIconsDiv\" style=\"width: 24px !important;\"><!--\r\n   --><a class=\"BDC_ReloadLink\" id=\"captcha_ReloadLink\" href=\"#\" title=\"Change the CAPTCHA code\"><img class=\"BDC_ReloadIcon\" id=\"captcha_ReloadIcon\" src=\"/botdetectcaptcha?get=reload-icon\" alt=\"Change the CAPTCHA code\" /></a><!--\r\n   --><a rel=\"nofollow\" class=\"BDC_SoundLink\" id=\"captcha_SoundLink\" href=\"/botdetectcaptcha?get=sound&amp;c=captcha&amp;t=e832c3b3c7c54746bf39737cd4fbd6a3\" title=\"Speak the CAPTCHA code\"><img class=\"BDC_SoundIcon\" id=\"captcha_SoundIcon\" src=\"/botdetectcaptcha?get=sound-icon\" alt=\"Speak the CAPTCHA code\" /></a><!--\r\n   --><div class=\"BDC_Placeholder\" id=\"captcha_AudioPlaceholder\">&nbsp;</div><!-- --></div>\r\n   <script src=\"/botdetectcaptcha?get=script-include&amp;t=1639618589\" type=\"text/javascript\"></script>\r\n   <script src=\"/botdetectcaptcha?get=init-script-include&amp;c=captcha&amp;t=e832c3b3c7c54746bf39737cd4fbd6a3\" type=\"text/javascript\"></script>\r\n   <input type=\"hidden\" id=\"BDC_VCID_captcha\" name=\"BDC_VCID_captcha\" value=\"e832c3b3c7c54746bf39737cd4fbd6a3\" />\r\n   <input type=\"hidden\" id=\"BDC_BackWorkaround_captcha\" name=\"BDC_BackWorkaround_captcha\" value=\"0\" />\r\n\r\n  </div>\r\n"
-		//capInsId: "e832c3b3c7c54746bf39737cd4fbd6a3"
-		//capSoundUrl: "/botdetectcaptcha?get=sound&c=captcha&t=e832c3b3c7c54746bf39737cd4fbd6a3"
-		//capUrl:
-		$('#captchaSoundUrl').val(body.capSoundUrl);
-		$('#captcha').html('<img src="' + body.capUrl + '"/>');
-		$('#captchaInsId').val(body.capInsId);
-	});
-
-	setTimeout(function () {
-		captcharReloadYn = false;
-	}, 3000);
-
-};
-
-// home login 처리
-var g_showLoginPopup = function (returnUrl) {
-	event.preventDefault();
-	event.stopPropagation();
-
-	returnUrl = returnUrl || '';
-
-	g_getCaptch();
-
-	$('#popupLoginForm').off('submit').on('submit', function () {
-		let $thisForm = $(this);
-		let pp = encRSA($thisForm.find('input[name=password]').val());
-		let parameter = {
-			siteType: g_siteType,
-			siteId: g_siteId,
-			phone: btoa($thisForm.find('input[name=phone]').val()),
-			password: pp,
-			captchaValue: $thisForm.find('input[name=captchaValue]').val(),
-			captchaInsId: $thisForm.find('#captchaInsId').val()
-		};
-		lanedu.front.api.user.existLogin(parameter, function (success, message, body, data) {
-			if (!success) {
-				captchaReload();
-
-				if (data.header.errCode == 'LOGIN_FAIL_EXIST_LOGINUSER') {
-					if (!confirm('다른 기기에서 로그인 중입니다. 해당 기기에서 로그아웃하고 로그인 하시겠습니까?')) {
-						return false;
-					}
-
-				} else {
-					alert(message);
-					return false;
-				}
-			}
-
-			lanedu.front.api.user.login(parameter, function (success, message, body, data) {
-				if (!success) {
-					if (data.header.errCode == 'LOGIN_FAIL_NOTHING_ACCOUNT') {
-						layerPop('', '#layerLogin');
-						//layerPop('open', '#LOGIN_FAIL_NOTHING_ACCOUNT');
-
-						let user = body || {};
-						g_userId = user.id;
-						$('body').addClass('logined');
-
-						appVueUserSelect.setVeiwModeAddOrg();
-						layerPop('open', '#POPUP_USER_SELECT');
-
-						//로그인 아이디 저장
-						if ($('#savedLoginId')[0].checked) {
-							localStorage.setItem("LOGIN_ID", atob(parameter.phone));
-						}
-
-					} else if (data.header.errCode == 'LOGIN_FAIL_SELECT_ACCOUNT') {
-
-						let cafeUsers = body || [];
-						if (cafeUsers.length > 0) {
-							g_userId = cafeUsers[0].userId;
-							$('body').addClass('logined');
-						}
-
-						layerPop('', '#layerLogin');
-						//layerPop('open' , '#layerAccount');
-						g_showPopupOrgSelect('', returnUrl);
-
-						//로그인 아이디 저장
-						if ($('#savedLoginId')[0].checked) {
-							localStorage.setItem("LOGIN_ID", atob(parameter.phone));
-						}
-
-					} else {
-						captchaReload();
-						alert(message);
-					}
-					return false;
-				}
-
-				if (data.header.errCode == 'LOGIN_OK_GO_CAFE') {
-					if(returnUrl == ''){
-						location.href = '/portal';
-					}else{
-						location.href = returnUrl;
-					}
-					return false;
-				}
-
-				g_userId = body.id;
-				g_cafeId = body.cafeId;
-				$('body').addClass('logined');
-				layerPop('', '#layerLogin');
-
-				//로그인 아이디 저장
-				if ($('#savedLoginId')[0].checked) {
-					localStorage.setItem("LOGIN_ID", atob(parameter.phone));
-				}
-
-			});
-
-		});
-
-		return false;
-	});
-
-	//저장된 아이디 확인
-	(function () {
-		let loginId = (localStorage.getItem("LOGIN_ID") || '').trim();
-		if (loginId !== '') {
-			$('#savedLoginId')[0].checked = true;
-			$('#popupLoginForm').find('input[name=phone]').val(loginId);
-		}
-	})();
-	let parameter = {};
-	lanedu.front.api.user.getRSA(parameter, function (success, message, body, data) {
-		if (success) {
-			$("#RSAModulus").val(body.detail.rsaModulus);
-			$("#RSAExponent").val(body.detail.rsaExponent);
-		}
-	});
-	layerPop('open', '#layerLogin');
-	return false;
-};
-
-var g_showPopupOrgSelect = function (viewMode, returnUrl) {
-
-	viewMode = viewMode || '';
-	returnUrl = returnUrl || '';
-	let parameter = {
-		siteType: g_siteType,
-		siteId: g_siteId
-	};
-	lanedu.front.api.user.myCafeList(parameter, function (success, message, body) {
-		if (!success) {
-			alert(message);
-			return false;
-		}
-
-		body = body || {};
-		body.allList = body.allList || [];
-		body.ingList = body.ingList || [];
-		body.reqList = body.reqList || [];
-
-		appVueUserSelect.setPortalReturnUrl(returnUrl);
-
-		//현재 사용가능한 회원이 한개도 없을 때
-		if (viewMode === 'ADD_ORG' || body.ingList.length < 1) {
-			appVueUserSelect.setVeiwModeAddOrg();
-		} else {
-			appVueUserSelect.setViewModeUserSelect();
-		}
-
-		Vue.set(appVueUserSelect, 'allList', body.allList);
-		Vue.set(appVueUserSelect, 'ingList', body.ingList);
-		Vue.set(appVueUserSelect, 'reqList', body.reqList);
-		if (body.ingList.length > 0) {
-			Vue.set(appVueUserSelect, 'ingFirst', body.ingList[0]);
-			if (body.ingList.length > 1) {
-				let moreList = [];
-				for (let i = 1; i < body.ingList.length; i++) {
-					moreList.push(body.ingList[i]);
-				}
-				Vue.set(appVueUserSelect, 'ingMoreList', moreList);
-			}
-		}
-
-		layerPop('open', '#POPUP_USER_SELECT');
-	});
-	return false;
-};
-
-var g_goPortal = function () {
-	event.stopPropagation();
-	event.preventDefault();
-
-	if (g_userId < 1) {
-		g_showLoginPopup();
-		return false;
-	}
-
-	if (g_cafeId < 1) {
-		g_showPopupOrgSelect();
-		return false;
-	}
-
-	location.href = '/portal';
-};
-
-var g_goQuick = function () {
-	event.stopPropagation();
-	event.preventDefault();
-
-	location.href = '/'+g_siteId+'/home/quick/quick-meeting-start';
-};
-
-var g_goQuickMake = function (loginYn) {
-	event.stopPropagation();
-	event.preventDefault();
-	if(loginYn == 'Y'){
-		location.href = '/'+g_siteId+'/home/quick/quick-meeting-make';
-	}else{
-		g_showLoginPopup('/'+g_siteId+'/home/quick/quick-meeting-make')
-	}
-};
-
-//퀵모임 분기 onclick="g_goQuickMeeting(${loginUser.adminOrHostYn})"
-var g_goQuickMeeting = function (adminYn) {
-	event.stopPropagation();
-	event.preventDefault();
-	let url = (adminYn) ? '/home/quick/quick-meeting-make' : '/home/quick/quick-meeting';
-
-	if (g_userId < 1) {
-		g_showLoginPopup(url);
-		return false;
-	}
-
-	if (g_cafeId < 1) {
-		g_showPopupOrgSelect('USER_SELECT', url);
-		return false;
-	}
-
-	location.href = url;
-
-};
-
-//클라우드 용량 추가 구매페이지
-var g_goCloudVolumeAdd = function () {
-	let url = '/home/user/org/storage-add?beforeSite=cloud';
-	event.stopPropagation();
-	event.preventDefault();
-
-	if (g_userId < 1) {
-		g_showLoginPopup(url);
-		return false;
-	} else if (g_cafeId < 1) {
-		g_showPopupOrgSelect('', url);
-		return false;
-	}
-	location.href = url;
-};
-
-//클라우드 용량 추가 구매페이지
-var g_showPriceSimulation = function (url) {
-	event.stopPropagation();
-	event.preventDefault();
-
-	if (g_userId < 1) {
-		g_showLoginOnlyPopup(url);
-		return false;
-	}
-
-	location.href = url;
-};
-
-/*
-* 로그아웃
-*/
-function logout() {
-	alert("로그아웃 되었습니다.");
-	location.href = "/home/user/logout";
-}
-
-
-// rsa 암호화
-function encRSA(pw) {
-	var rsa = new RSAKey();
-	rsa.setPublic($('#RSAModulus').val(), $('#RSAExponent').val());
-	return rsa.encrypt(String(pw));
-}
-
-function goMyPage(cnt) {
-	if (cnt > 0) {
-		if (g_cafeId < 1) {
-			g_showPopupOrgSelect('USER_SELECT', '/portal/mypage');
-			return false;
-		} else {
-			location.href = "/portal/mypage";
-		}
-	} else {
-		location.href = "/home/user/mypage";
-	}
-};
-
-//약관조회해서 뿌리기
-function selectTerms(t) {
-	lanedu.front.api.cms.selectTermsList({termType: t,}, function (success, message, data) {
-		if (!success) {
-			console.log('개인정보 약관 조회 실패');
-			return;
-		}
-		$('#termVer_' + t).empty();
-		if (data.length > 0) {
-			data.forEach(function (e) {
-				let option = $("<option value='" + e.id + "'>" + $("#termType_" + t).text() + e.termVer + "</option>");
-				$('#termVer_' + t).append(option);
-			});
-			$('#termCont_' + t).html(data[0].contents);
-		}
-	});
-}
-
-//약관조회해서 뿌리기
-function selTermsVer(t, id) {
-	lanedu.front.api.cms.selectTerms({id: id,}, function (success, message, data) {
-		if (!success) {
-			console.log('개인정보 약관 조회 실패');
-			return;
-		}
-		$('#termCont_' + t).html(data.contents);
-
-	});
-}

src/main/webapp/WEB-INF/view/home/index.jsp

@@ -5,29 +5,63 @@
 <!DOCTYPE html>
 <html lang="ko">
 <head>
-
+	<jsp:include page="/WEB-INF/view/include/inc_head.jsp"/>
 </head>
 <body>
-	<!-- wrap : s -->
+	 <div class="d-flex" id="wrapper">
-	<div class="wrap"id ="vueApp">
+            <!-- Sidebar-->
-		
+            <div class="border-end bg-white" id="sidebar-wrapper">
-		<div class="container">
+                <div class="sidebar-heading border-bottom bg-light">Start Bootstrap</div>
-			<div id="contents">
+                <div class="list-group list-group-flush">
-				<!-- 상세 : s -->
+                    <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Dashboard</a>
-				<div class="mainWrap">
+                    <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Shortcuts</a>
-					<div class="container">
+                    <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Overview</a>
-					
+                    <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Events</a>
-					</div>
+                    <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Profile</a>
-				</div>
+                    <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Status</a>
-				<!-- 상세 : e -->
+                </div>
-			</div>
+            </div>
-		</div>
+            <!-- Page content wrapper-->
-
+            <div id="page-content-wrapper">
-		<!-- footer : s -->
+                <!-- Top navigation-->
-		<!-- footer : e -->
+                <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
-	</div>
+                    <div class="container-fluid">
-	<!-- wrap : e -->
+                        <button class="btn btn-primary" id="sidebarToggle">Toggle Menu</button>
-	<script src="/res/front/js/biz/home/index.js?v=${timestamp}"></script>
+                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
-	<script src="/res/front/js/biz/home/home-common.js?v=${timestamp}"></script>
+                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                            <ul class="navbar-nav ms-auto mt-2 mt-lg-0">
+                                <li class="nav-item active"><a class="nav-link" href="#!">Home</a></li>
+                                <li class="nav-item"><a class="nav-link" href="#!">Link</a></li>
+                                <li class="nav-item dropdown">
+                                    <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+                                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
+                                        <a class="dropdown-item" href="#!">Action</a>
+                                        <a class="dropdown-item" href="#!">Another action</a>
+                                        <div class="dropdown-divider"></div>
+                                        <a class="dropdown-item" href="#!">Something else here</a>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </nav>
+                <!-- Page content-->
+                <div class="container-fluid">
+                    <h1 class="mt-4">Simple Sidebar</h1>
+                    <p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
+                    <p>
+                        Make sure to keep all page content within the
+                        <code>#page-content-wrapper</code>
+                        . The top navbar is optional, and just for demonstration. Just create an element with the
+                        <code>#sidebarToggle</code>
+                        ID which will toggle the menu when clicked.
+                    </p>
+                </div>
+            </div>
+        </div>
+        <!-- Bootstrap core JS-->
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+        <!-- Core theme JS-->
+        <script src="js/scripts.js"></script>
 </body>
 </html>

src/main/webapp/WEB-INF/view/include/inc_body_footer.jsp

@@ -0,0 +1,9 @@
+<%@ page contentType="text/html;charset=UTF-8" %>
+<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+
+<footer class="hidden-xs">
+    <div class="container">
+        <h6>Copyright© 2023 kuhan. All rights reserved.</h6>
+    </div>
+</footer>

src/main/webapp/WEB-INF/view/include/inc_body_header.jsp

@@ -0,0 +1,43 @@
+<%@ page contentType="text/html;charset=UTF-8" %>
+<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
+
+ <!-- Sidebar-->
+ <div class="border-end bg-white" id="sidebar-wrapper">
+     <div class="sidebar-heading border-bottom bg-light">Start Bootstrap</div>
+     <div class="list-group list-group-flush">
+         <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Dashboard</a>
+         <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Shortcuts</a>
+         <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Overview</a>
+         <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Events</a>
+         <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Profile</a>
+         <a class="list-group-item list-group-item-action list-group-item-light p-3" href="#!">Status</a>
+     </div>
+ </div>
+
+<!-- header : s -->
+
+<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
+    <div class="container-fluid">
+        <button class="btn btn-primary" id="sidebarToggle">Toggle Menu</button>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav ms-auto mt-2 mt-lg-0">
+                <li class="nav-item active"><a class="nav-link" href="#!">Home</a></li>
+                <li class="nav-item"><a class="nav-link" href="#!">Link</a></li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
+                        <a class="dropdown-item" href="#!">Action</a>
+                        <a class="dropdown-item" href="#!">Another action</a>
+                        <div class="dropdown-divider"></div>
+                        <a class="dropdown-item" href="#!">Something else here</a>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+
+<!-- header : e -->

src/main/webapp/WEB-INF/view/include/inc_body_sidebar.jsp

@@ -0,0 +1,5 @@
+<%@ page contentType="text/html;charset=UTF-8" %>
+<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
+

src/main/webapp/WEB-INF/view/include/inc_head.jsp

@@ -0,0 +1,19 @@
+<%@ page contentType="text/html;charset=UTF-8"  %>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+<title>타이틀</title>
+
+<link rel="stylesheet" type="text/css" href="/res/front/css/bootstrap.min.css?v=<%=java.time.LocalDateTime.now()%>">
+<link rel="stylesheet" type="text/css" href="/res/front/css/default.css?v=<%=java.time.LocalDateTime.now()%>">
+
+<script type="text/javascript" src="/res/front/js/lib/axios.min.js"></script>
+<script type="text/javascript" src="/res/front/js/lib/axios-config.js?v=1"></script>
+<script type="text/javascript" src="/res/front/js/lib/vue.js?v=<%=java.time.LocalDateTime.now()%>"></script>
+<script type="text/javascript" src="/res/front/js/lib/vue.common.js?v=<%=java.time.LocalDateTime.now()%>"></script>
+<script type="text/javascript" src="/res/front/js/lib/bootstrap.min.js?v=<%=java.time.LocalDateTime.now()%>"></script>
+<script type="text/javascript" src="/res/front/js/lib/jquery-3.5.1.min.js?v=<%=java.time.LocalDateTime.now()%>"></script>
+
+<script src="/res/front/js/biz/common/common.js"></script>
+<script src="/res/front/js/biz/api/phone-service.js?v=${timestamp}"></script>