모바일 기초작업

src/main/webapp/js/app/stinfo/ITP_STINFO03010.js

@@ -552,6 +552,7 @@ let createObj = {
 			const formId = '#ITP_FORM_STINFO03010_DETAIL';
 			itp_fn_form_clear_validate(null, formId);
 			if (createObj.isValid(formId)) {
+				itp_fn_grid_save_rows(STINFO03010_DETAIL_GRID_ID);
 				let gridInsertData = [];
 				let gridUpdateData = [];
 				let gridDeleteData = [];

src/main/webapp/mobile/app/login.html

@@ -5,43 +5,56 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>로그인</title>
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="../css/style.css">
+
+    <script>
+      const VIEW_PAGE = 'LOGIN'; //config.js 에서 로그인 페이지 인지 아닌지 확인하기 위한 변수
+      var CONN_KEY; //Jwt 토큰을 담기위한 변수
+    </script>
+
+    <script src="../js/properties.js"></script>
+    <script src="../../js/require.min.js" data-main="../js/config.js"></script>
   </head>
     <div id="ITP_LOGIN">
+      <form id="ITP_FORM_MOBILE_LOGIN" class="form-horizontal" action="" method="post" onsubmit="return false;">
+        <input id="userId" name="userId" type="hidden" value="" />
+        <input id="password" name="password" type="hidden" value="" />
+        <!--<input id="brandId" name="brandId" type="hidden" value="" />-->
       <div class="login_popup">
         <div class="login_info">
           <h1>서비스<br>VISUAL IMAGE</h1>
         </div>
         <div class="num_area">
           <div class="input_area">
-            <input type="text" name="id" id="id"  required>
-            <label for="id">사업자번호</label>
-            <button>연결</button>
+            <input type="text" name="bsnsRegNo" id="ITP_FORM_LOGIN_BSNS_REG_NO" required>
+            <label for="ITP_FORM_LOGIN_BSNS_REG_NO">사업자번호</label>
+            <button type="button" id="ITP_BTN_LOGIN_BSNS_REG_NO">연결</button>
           </div>
           <div class="brand_list">
-            <select name="" id="">
-              <option>브랜드 리스트</option>
-              <option>asdfasdf</option>
+            <select name="brandId" id="ITP_FORM_LOGIN_BRAND_ID">
+              <option value="">선택</option>
             </select>
           </div>
         </div>
         <div class="login_page">
           <div class="input_area">
-            <input type="text" name="id" id="id"  required>
-            <label for="id">아이디</label>
+            <input type="text" id="ITP_FORM_LOGIN_USER_ID"  required>
+            <label for="ITP_FORM_LOGIN_USER_ID">아이디</label>
           </div>
           <div class="input_area">
-            <input type="password" name="pw" id="pw"  required>
-            <label for="pw">비밀번호</label>
+            <input type="password" id="ITP_FORM_LOGIN_USER_PW"  required>
+            <label for="ITP_FORM_LOGIN_USER_PW">비밀번호</label>
           </div>
         </div>
         <div class="error">
           <label>사업자번호와 관련된 브랜드 정보가 없습니다.</label>
         </div>
-      </div> 
+      </div>
       <div class="login_btn">
-        <button>로그인</button>
+        <button type="submit" id="login_btn" class="btn btn-primary btn-lg itp_btn">로그인</button>
       </div>
-    </div>   
+      </form>
+    </div>
+  <script src="../js/app/login.js?version=20210826"></script>
 </html>
 

src/main/webapp/mobile/app/main.html

@@ -5,15 +5,42 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>모바일 수발주</title>
-	<link rel="stylesheet" href="/style.css">
+	<link rel="stylesheet" href="../css/style.css">
+	<style>
+
+		/* ITP_SIDEBAR */
+		#ITP_SIDEBAR {width:0px; float:left; margin-left:-2px; height:calc(100vh - 68px); background:#ddd; transition:all .25s ease; border-style:solid; border-color:#ddd; border-width:0 1px 1px 1px;}
+		#ITP_SIDEBAR.itp_open_nav {width:360px;}
+		#ITP_SIDEBAR .itp_nav {list-style:none; margin:0; padding:0; height:100%; overflow-y:scroll; overflow-x:hidden; visibility:hidden;}
+		#ITP_SIDEBAR.itp_open_nav .itp_nav {visibility:visible;}
+		#ITP_SIDEBAR .itp_nav.panel-group .panel+.panel {margin-top:0;}
+		#ITP_SIDEBAR .itp_nav .panel-heading {padding:0;}
+		#ITP_SIDEBAR .itp_nav .panel-title {line-height:1.1; border-bottom:1px solid #ddd;}
+		#ITP_SIDEBAR .itp_nav .panel-title a {font-size:14px; display:block; padding:13px 15px; color:#333;}
+		#ITP_SIDEBAR .itp_nav .panel-title a .glyphicon {font-size:12px;}
+		#ITP_SIDEBAR .itp_nav .panel-default {margin-bottom:0; border:none;}
+		#ITP_SIDEBAR .itp_nav * {border-radius:0; border-width:1px 0 1px 0;}
+		#ITP_SIDEBAR .itp_nav .itp_svgs_body {padding:0; border-top:0; border-bottom:1px solid #ddd;}
+		#ITP_SIDEBAR .itp_nav .itp_svgs {list-style:none; margin:0; padding:0;}
+		#ITP_SIDEBAR .itp_nav .itp_svgs .itp_svg_in {position:relative;}
+		#ITP_SIDEBAR .itp_nav .itp_svgs li a {display:block; width:100%; color:#333; padding:5px 10px 5px 17px;}
+		#ITP_SIDEBAR .itp_nav .itp_svgs li:first-child a {padding-top:10px;}
+		#ITP_SIDEBAR .itp_nav .itp_svgs li:last-child a {padding-bottom:10px;}
+		#ITP_SIDEBAR .itp_nav .itp_svgs li a:hover, #ITP_SIDEBAR .itp_nav .itp_svgs li a:active {color:#000; font-weight:bold;}
+		#ITP_SIDEBAR .itp_nav .itp_svgs li a .glyphicon {font-size:9px; float:left; margin:4px 6px 0 0;}
+		#ITP_SIDEBAR .itp_nav .itp_svgs li a .itp_icon {font-size:9px; float:left; margin:4px 6px 0 15px;}
+		#ITP_SIDEBAR .itp_nav .itp_svgs li a .itp_icon_5 {font-size:9px; float:left; margin:4px 6px 0 25px;}
+		#ITP_SIDEBAR .itp_nav .itp_svgs li a .itp_tt {float:left;}
+
+	</style>
 </head>
 	<body>
 		<div id="ITP_WRAPPER">
 			<header>
 				<div class="header_wrap">
 					<div class="menu_logo">
-						<button id="ITP_BTN_MENU"><img src="/img/menu.png" alt=""></button>
-						<button id="ITP_BTN_HOME"><img src="/img/home.png" alt=""></button>
+						<button id="ITP_BTN_MENU"><img src="../img/menu.png" alt=""></button>
+						<button id="ITP_BTN_HOME"><img src="../img/home.png" alt=""></button>
 					</div>
 					<div class="logout">
 						<button id="ITP_BTN_LOGOUT">로그<br>아웃</button>
@@ -31,14 +58,68 @@
 					</div>
 				</div>
 			</header>
-			<div id="ITP_MENU" style="display: block;">
+
+			<nav id="ITP_SIDEBAR" class="itp_open_nav">
+
+				<ul class="panel-group itp_nav"></ul>
+
+				<textarea id="ITP_AJAX_MAIN_SIDE_LEVEL2_ROWCOPY" rows="0" cols="0" style="display:none;">
+				<li class="panel panel-default">
+					<div class="panel-heading">
+						<div class="panel-title">
+							<a class="accordion-toggle" data-toggle="collapse" href="">
+								<span class="fnMenuNm">메뉴명</span>
+								<i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
+							</a>
+						</div>
+					</div>
+					<div class="panel-collapse collapse" id="">
+						<div class="panel-body itp_svgs_body">
+							<ul class="itp_svgs fnLevelBottomList"></ul>
+						</div>
+					</div>
+				</li>
+				</textarea>
+				<textarea id="ITP_AJAX_MAIN_SIDE_LEVEL3_ROWCOPY" rows="0" cols="0" style="display:none;">
+				<li>
+					<div class="itp_svg_in">
+						<a href="javascript:void(0)" data-itp-nav-id="" data-conn-url="" id="" class="itp_nav_link fix">
+							<i class="glyphicon glyphicon-chevron-right"></i>
+							<span class="itp_tt fnMenuNm">메뉴명</span>
+						</a>
+					</div>
+				</li>
+				</textarea>
+				<textarea id="ITP_AJAX_MAIN_SIDE_LEVEL4_ROWCOPY" rows="0" cols="0" style="display:none;">
+				<li>
+					<div class="itp_svg_in">
+						<a href="javascript:void(0)" data-itp-nav-id="" data-conn-url="" id="" class="itp_nav_link fix">
+							<i class="itp_icon">└</i>
+							<span class="itp_tt fnMenuNm">메뉴명</span>
+						</a>
+					</div>
+				</li>
+				</textarea>
+				<textarea id="ITP_AJAX_MAIN_SIDE_LEVEL5_ROWCOPY" rows="0" cols="0" style="display:none;">
+				<li>
+					<div class="itp_svg_in">
+						<a href="javascript:void(0)" data-itp-nav-id="" data-conn-url="" id="" class="itp_nav_link fix">
+							<i class="itp_icon_5">＊</i>
+							<span class="itp_tt fnMenuNm">메뉴명</span>
+						</a>
+					</div>
+				</li>
+				</textarea>
+			</nav>
+
+			<!--<div id="ITP_MENU" style="display: block;">
 				<div class="menu_area">
-					<button class="ITP_BTN_CLOSE"><img src="/img/close2.png"></button>
+					<button class="ITP_BTN_CLOSE"><img src="../img/close2.png"></button>
 				</div>
 				<div class="menu_bar">
 					<div class="menu_header">
 						<div class="brand_img">
-							<img src="/img/naver.png">
+							<img src="../img/naver.png">
 						</div>
 						<div class="user_info">
 							<div class="">홍길동</div>
@@ -46,7 +127,7 @@
 							<div class="id">asdf1234</div>
 						</div>
 						<div class="setting">
-							<button><img src="/img/gear.png"></button>
+							<button><img src="../img/gear.png"></button>
 						</div>
 					</div>
 					<div class="menu_select">
@@ -59,25 +140,25 @@
 									<ul>
 										<li>
 											<div class="itp_svg_in">
-												<i><img src="/img/arrow_right.png"></i>
+												<i><img src="../img/arrow_right.png"></i>
 												<span class="fnMenuNm">구매요청생성</span>
 											</div>
 										</li>
 										<li>
 											<div class="itp_svg_in">
-												<i><img src="/img/arrow_right.png"></i>
+												<i><img src="../img/arrow_right.png"></i>
 												<span class="fnMenuNm">구매요청현황</span>
 											</div>
 										</li>
 										<li>
 											<div class="itp_svg_in">
-												<i><img src="/img/arrow_right.png"></i>
+												<i><img src="../img/arrow_right.png"></i>
 												<span class="fnMenuNm">입고처리</span>
 											</div>
 										</li>
 										<li>
 											<div class="itp_svg_in">
-												<i><img src="/img/arrow_right.png"></i>
+												<i><img src="../img/arrow_right.png"></i>
 												<span class="fnMenuNm">입고현황</span>
 											</div>
 										</li>
@@ -92,31 +173,31 @@
 									<ul>
 										<li>
 											<div class="itp_svg_in">
-												<i><img src="/img/arrow_right.png"></i>
+												<i><img src="../img/arrow_right.png"></i>
 												<span class="fnMenuNm">반품요청</span>
 											</div>
 										</li>
 										<li>
 											<div class="itp_svg_in">
-												<i><img src="/img/arrow_right.png"></i>
+												<i><img src="../img/arrow_right.png"></i>
 												<span class="fnMenuNm">반품요청현황</span>
 											</div>
 										</li>
 										<li>
 											<div class="itp_svg_in">
-												<i><img src="/img/arrow_right.png"></i>
+												<i><img src="../img/arrow_right.png"></i>
 												<span class="fnMenuNm">반품발주현황</span>
 											</div>
 										</li>
 										<li>
 											<div class="itp_svg_in">
-												<i><img src="/img/arrow_right.png"></i>
+												<i><img src="../img/arrow_right.png"></i>
 												<span class="fnMenuNm">반품처리</span>
 											</div>
 										</li>
 										<li>
 											<div class="itp_svg_in">
-												<i><img src="/img/arrow_right.png"></i>
+												<i><img src="../img/arrow_right.png"></i>
 												<span class="fnMenuNm">반품현황</span>
 											</div>
 										</li>
@@ -143,7 +224,11 @@
 						</ul>
 					</div>
 				</div>
+			</div>-->
+			<div id="ITP_CONTAINER">
+
 			</div>
+			<script src="../js/app/main.js?version=20210826"></script>
 		</div>
 	</body>
 </html>

src/main/webapp/mobile/css/style.css

@@ -1,4 +1,4 @@
-@font-face { font-family: 'NanumBarunGothic';src: url('/fonts/NanumBarunGothic.eot');src: url('/fonts/NanumBarunGothic.eot') format('embedded-opentype'),url('/fonts/NanumBarunGothic.woff') format('woff');}
+@font-face { font-family: 'NanumBarunGothic';src: url('../fonts/NanumBarunGothic.eot');src: url('../fonts/NanumBarunGothic.eot') format('embedded-opentype'),url('../fonts/NanumBarunGothic.woff') format('woff');}
 * {margin: 0; padding: 0; box-sizing: border-box; text-align: center; font-family: 'NanumBarunGothic', 'serif'; list-style: none;}
 section {}
 body{background: #fff; position: relative; width: 100%; height: 500px;}
@@ -101,7 +101,7 @@ body.eee {height: 700px; background: #eee;}
 #ITP_LOGIN .login_popup .num_area .input_area {margin-bottom: 10px;}
 #ITP_LOGIN .login_popup .num_area .input_area input {width:52%; font-size: 0.8rem; }
 #ITP_LOGIN .login_popup .num_area .input_area button {font-weight: 700; margin-left: 0.1%; width: 16.5%; height: 40px; background-color: blue; color: #eee; font-size: 1rem; padding: 0;}
-#ITP_LOGIN .login_popup .num_area .brand_list select {padding-left: 10px; width: 70%; height: 40px; font-size: 0.8rem; background: url(/img/down.png)no-repeat 100% 50%/40px auto; -webkit-appearance:none; appearance:none;} 
+#ITP_LOGIN .login_popup .num_area .brand_list select {padding-left: 10px; width: 70%; height: 40px; font-size: 0.8rem; background: url(../img/down.png)no-repeat 100% 50%/40px auto; -webkit-appearance:none; appearance:none;}
 #ITP_LOGIN .login_popup .num_area .brand_list select option {text-align: left; width: 70%; height: 50px; border: 1px solid #000; font-size: 20px;} 
 
 #ITP_LOGIN .login_page {position: relative; width: 100%;  margin-bottom: 30px;}

src/main/webapp/mobile/js/app/login.js

@@ -8,25 +8,29 @@ require(['config'], function() {
 	    }
 
 		// itp_fn_login_init();
-		
+
 		$('#ITP_LOGIN').on('keyup', 'input, textarea', function() {
 			var $th = $(this);
-	        $th.val($th.val().replace(/(<([^>]+)>)/ig, function() {return '';}));
+			$th.val($th.val().replace(/(<([^>]+)>)/ig, function() {return '';}));
+		});
+
+		$('#ITP_BTN_LOGIN_BSNS_REG_NO').on('click', function() {
+			itp_fn_login_reg_no();
 		});
-		
+
 		$('#login_btn').click(function() {
 			if(itp_fn_login_validate()) {
 				itp_fn_login_proc();
 			}
 		});
-		
-		var callbackFn = function(result) {
-			POP_LIST = result.popList;
-			fn_proc_popup_view('L');
-		};
-		const key = {sViewTargetCd: 'L'};
-		var param = $.param(key);
-		fn_ajax_call('/api/pop/open-pop', param, callbackFn, 'GET');
+
+		// var callbackFn = function(result) {
+		// 	POP_LIST = result.popList;
+		// 	fn_proc_popup_view('L');
+		// };
+		// const key = {sViewTargetCd: 'L'};
+		// var param = $.param(key);
+		// fn_ajax_call('/api/pop/open-pop', param, callbackFn, 'GET');
 	});
 });
 
@@ -36,20 +40,34 @@ function itp_fn_login_init() {
     if (save_id !== null) {
     	$('#ITP_FORM_LOGIN_USER_ID').val(save_id);
     }
-};
+}
+
+function itp_fn_login_reg_no() {
+	if ($('#ITP_FORM_LOGIN_BSNS_REG_NO').val() === '') {
+		$('#ITP_FORM_LOGIN_ERROR_REG_NO').show();
+	} else {
+		$('#ITP_FORM_LOGIN_ERROR_REG_NO').hide();
+
+		var callbackFn = function(result) {
+			fn_make_select_brand(result.gridRows, 'ITP_FORM_LOGIN_BRAND_ID');
+		};
+		var param = {'bsnsRegNo': $('#ITP_FORM_LOGIN_BSNS_REG_NO').val()};
+		fn_ajax_call('/api/member/brand-list-app', $.param(param), callbackFn, 'GET');
+	}
+}
 
 function itp_fn_login_validate() {
 	$('#ITP_FORM_LOGIN_USER_ID').closest('.form-group').removeClass('has-error');
 	$('#ITP_FORM_LOGIN_USER_PW').closest('.form-group').removeClass('has-error');
 	$('#ITP_FORM_LOGIN_ERROR').text(ITP_MSG_LOCALE.message.login.help);
 
-	if ($('#ITP_FORM_LOGIN_USER_ID').val() == '') {
+	if ($('#ITP_FORM_LOGIN_USER_ID').val() === '') {
 		$('#ITP_FORM_LOGIN_USER_ID').closest('.form-group').addClass('has-error');
 		$('#ITP_FORM_LOGIN_ERROR').text(ITP_MSG_LOCALE.message.login.needId);
 		return false;
 	}
 
-	if ($('#ITP_FORM_LOGIN_USER_PW').val() == '') {
+	if ($('#ITP_FORM_LOGIN_USER_PW').val() === '') {
 		$('#ITP_FORM_LOGIN_USER_PW').closest('.form-group').addClass('has-error');
 		$('#ITP_FORM_LOGIN_ERROR').text(ITP_MSG_LOCALE.message.login.needPw);
 		return false;
@@ -64,15 +82,17 @@ function itp_fn_login_validate() {
 	}
 
 	return true;
-};
+}
 
 function itp_fn_login_proc() {
 	var callbackFn = function(result) {
 		var hashed = fnHashed(result.hashed);
 		$('#userId').val(CryptoJS.AES.encrypt($('#ITP_FORM_LOGIN_USER_ID').val(), hashed));
 		$('#password').val(CryptoJS.AES.encrypt($('#ITP_FORM_LOGIN_USER_PW').val(), hashed));
+		// $('#brandId').val(CryptoJS.AES.encrypt($('#ITP_FORM_LOGIN_BRAND_ID').val(), hashed));
+		console.log('USER_ID ===> ' + CryptoJS.AES.encrypt($('#ITP_FORM_LOGIN_USER_ID').val(), hashed));
 	    var loginFn = function(result) {
-			// alert('SIGN-IN RESULT : ' + JSON.stringify(result));		
+			alert('SIGN-IN RESULT : ' + JSON.stringify(result));
 			sessionStorage.setItem('itp_login_info', JSON.stringify({
 				timestamp: new Date(),
 		        connKey: result.connKey		// Jwt키를 가져와서 세션 스토리지에 저장
@@ -80,7 +100,8 @@ function itp_fn_login_proc() {
 	    	$(location).attr('href', MOBILE_CONTEXTPATH + '/app/main.html');
 		};
 		var params = $('#ITP_FORM_MOBILE_LOGIN').serializeObject();
-		fn_ajax_call('/api/member/sign-in', JSON.stringify(params), loginFn, 'POST'); //암호화 해서 보내는 경우 먼저 해시키를 가져와서 암호화해서 보낸다
+		console.log(JSON.stringify(params));
+		fn_ajax_call('/api/member/sign-in-app', JSON.stringify(params), loginFn, 'POST'); //암호화 해서 보내는 경우 먼저 해시키를 가져와서 암호화해서 보낸다
 	};
 	fn_ajax_call('/api/session/hashed', null, callbackFn, 'GET'); //Crypto 암호화를 위한 해쉬키.. 로그인 후에는 Jwt 포함인 /api/session/hashedKey 이걸로 호출해서 사용한다.
 	

src/main/webapp/mobile/js/app/main.js

@@ -26,6 +26,13 @@ require(['config'], function() {
 	    	// // Barcode
 			// itp_fn_barcode.init();
 
+			$('#ITP_BTN_MENU').on('click', function() {
+				console.log('aaaaaaaaaaaaaa');
+				// $('#ITP_MENU').toggle();
+				$('#ITP_MENU').toggleClass('itp_open_nav');
+				// $('#ITP_CONTAINER').toggleClass('itp_open_conts');
+				itp_fn_fire_window_resize();
+			});
 		}, 100);
 				
 	});