release 수정 내역

모바일css/layout.css

@@ -1371,6 +1371,85 @@ p.essen {font-size: 12px; margin: 8px 0}
1371 100% { opacity: 0; }
1372 }
1373
1374+/* 2607 site loading Type 03 */
1375+.progress-loading {
1376+ display: flex;
1377+ align-items: center;
1378+ justify-content: center;
1379+ position: fixed;
1380+ top: 0;
1381+ right: 0;
1382+ bottom: 0;
1383+ left: 0;
1384+ z-index: 500;
1385+}
1386+
1387+.progress-loading__inner {
1388+ position: relative;
1389+ width: 99px;
1390+ text-align: center;
1391+}
1392+
1393+.progress-loading__logo {
1394+ display: block;
1395+ position: relative;
1396+ width: 99px;
1397+ height: 14px;
1398+ margin: 0 auto;
1399+ background-color: #000;
1400+ z-index: 1;
1401+ -webkit-mask: url('../images/loading_type03_logo.svg') no-repeat center / contain;
1402+ mask: url('../images/loading_type03_logo.svg') no-repeat center / contain;
1403+}
1404+
1405+.progress-loading__track {
1406+ position: relative;
1407+ width: 100%;
1408+ height: 2px;
1409+ margin-top: 10px;
1410+ overflow: hidden;
1411+ background-color: #b7b7b7;
1412+ box-sizing: border-box;
1413+ z-index: 1;
1414+}
1415+
1416+.progress-loading__bar {
1417+ display: block;
1418+ width: 0;
1419+ height: 100%;
1420+ background-color: #f53b30;
1421+ animation: progressLoadingBar 2s linear infinite;
1422+}
1423+
1424+.progress-loading--dimd-full {
1425+ background-color: rgba(255, 255, 255, 0.8);
1426+}
1427+
1428+.progress-loading--circle .progress-loading__inner {
1429+ width: 80px;
1430+}
1431+
1432+.progress-loading--circle .progress-loading__inner::before {
1433+ content: '';
1434+ position: absolute;
1435+ top: 50%;
1436+ left: 50%;
1437+ width: 110px;
1438+ height: 110px;
1439+ border-radius: 50%;
1440+ background-color: rgba(255, 255, 255, 0.7);
1441+ transform: translate(-50%, -50%);
1442+}
1443+
1444+.progress-loading--circle .progress-loading__logo {
1445+ width: 80px;
1446+}
1447+
1448+@keyframes progressLoadingBar {
1449+ 0% { width: 0; }
1450+ 100% { width: 100%; }
1451+}
1452+

모바일html/circle.html

@@ -491,6 +491,14 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
491 }
492 </style>
493 <body>
494+ <div class="progress-loading progress-loading--circle" role="status" aria-label="페이지 로딩 중">
495+ <div class="progress-loading__inner">
496+ <span class="progress-loading__logo" aria-hidden="true"></span>
497+ <div class="progress-loading__track" aria-hidden="true">
498+ <span class="progress-loading__bar"></span>
499+ </div>
500+ </div>
501+ </div>
502 <div class="root">
503 <div
504 id="mainHeaderWrap"
@@ -576,6 +584,8 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
584
585 <h2 class="txt" onclick="goLink('/category/newsports')">SPORTS</h2>
586 <style>
587+ /* 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요 */
588+ /*
589 .loading_box{
590 background-color: transparent !important;
591 }
@@ -588,6 +598,7 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
598 .loading_box .loading_txt_box .loading_move p{
599 background-color: #000;
600 }
601+ */
602 </style>
603 <div class="search-holder">
604 <i class="_img">search</i>
@@ -704,10 +715,11 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
715 </script>
716 <script>
717 function showLoadingBox() {
707- if ($('.loading_box').length === 0) {
708- $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body);
709- }
710- $('.loading_box').show();
718+ // 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요
719+ // if ($('.loading_box').length === 0) {
720+ // $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body);
721+ // }
722+ // $('.loading_box').show();
723 }
724 </script>
725 <main>
@@ -1535,10 +1547,11 @@ $(document).ready(function(){
1547 }
1548
1549 function showLoadingBox() {
1538- if ($('.loading_box').length === 0) {
1539- $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body);
1540- }
1541- $('.loading_box').show();
1550+ // 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요
1551+ // if ($('.loading_box').length === 0) {
1552+ // $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body);
1553+ // }
1554+ // $('.loading_box').show();
1555 }
1556 </script>
1557 </div>
@@ -11334,7 +11347,8 @@ $(document).ready(function(){
11347
11348 swipeMenu(".best-category2");
11349 setHeaderBackgroundWhite();
11337- $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body);
11350+ // 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요
11351+ // $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body);
11352 </script>
11353 <!-- 240924 카테고리 수정 -->
11354 <script>

모바일html/dimdFull.html

@@ -491,6 +491,14 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
491 }
492 </style>
493 <body>
494+ <div class="progress-loading progress-loading--dimd-full" role="status" aria-label="페이지 로딩 중">
495+ <div class="progress-loading__inner">
496+ <span class="progress-loading__logo" aria-hidden="true"></span>
497+ <div class="progress-loading__track" aria-hidden="true">
498+ <span class="progress-loading__bar"></span>
499+ </div>
500+ </div>
501+ </div>
502 <div class="root">
503 <div
504 id="mainHeaderWrap"
@@ -576,6 +584,8 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
584
585 <h2 class="txt" onclick="goLink('/category/newsports')">SPORTS</h2>
586 <style>
587+ /* 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요 */
588+ /*
589 .loading_box{
590 background-color: transparent !important;
591 }
@@ -588,6 +598,7 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
598 .loading_box .loading_txt_box .loading_move p{
599 background-color: #000;
600 }
601+ */
602 </style>
603 <div class="search-holder">
604 <i class="_img">search</i>
@@ -704,10 +715,11 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
715 </script>
716 <script>
717 function showLoadingBox() {
707- if ($('.loading_box').length === 0) {
708- $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body);
709- }
710- $('.loading_box').show();
718+ // 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요
719+ // if ($('.loading_box').length === 0) {
720+ // $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body);
721+ // }
722+ // $('.loading_box').show();
723 }
724 </script>
725 <main>
@@ -1535,10 +1547,11 @@ $(document).ready(function(){
1547 }
1548
1549 function showLoadingBox() {
1538- if ($('.loading_box').length === 0) {
1539- $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body);
1540- }
1541- $('.loading_box').show();
1550+ // 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요
1551+ // if ($('.loading_box').length === 0) {
1552+ // $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body);
1553+ // }
1554+ // $('.loading_box').show();
1555 }
1556 </script>
1557 </div>
@@ -11334,7 +11347,8 @@ $(document).ready(function(){
11347
11348 swipeMenu(".best-category2");
11349 setHeaderBackgroundWhite();
11337- $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body);
11350+ // 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요
11351+ // $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body);
11352 </script>
11353 <!-- 240924 카테고리 수정 -->
11354 <script>

모바일html/dimdNot.html

@@ -491,6 +491,14 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
491 }
492 </style>
493 <body>
494+ <div class="progress-loading progress-loading--dimd-not" role="status" aria-label="페이지 로딩 중">
495+ <div class="progress-loading__inner">
496+ <span class="progress-loading__logo" aria-hidden="true"></span>
497+ <div class="progress-loading__track" aria-hidden="true">
498+ <span class="progress-loading__bar"></span>
499+ </div>
500+ </div>
501+ </div>
502 <div class="root">
503 <div
504 id="mainHeaderWrap"
@@ -576,6 +584,8 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
584
585 <h2 class="txt" onclick="goLink('/category/newsports')">SPORTS</h2>
586 <style>
587+ /* 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요 */
588+ /*
589 .loading_box{
590 background-color: transparent !important;
591 }
@@ -588,6 +598,7 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
598 .loading_box .loading_txt_box .loading_move p{
599 background-color: #000;
600 }
601+ */
602 </style>
603 <div class="search-holder">
604 <i class="_img">search</i>
@@ -704,10 +715,11 @@ groobee("serviceKey", "b5f0d6a3640e43a5ba78da779afdb0f5");
715 </script>
716 <script>
717 function showLoadingBox() {
707- if ($('.loading_box').length === 0) {
708- $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body);
709- }
710- $('.loading_box').show();
718+ // 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요
719+ // if ($('.loading_box').length === 0) {
720+ // $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body);
721+ // }
722+ // $('.loading_box').show();
723 }
724 </script>
725 <main>
@@ -1535,10 +1547,11 @@ $(document).ready(function(){
1547 }
1548
1549 function showLoadingBox() {
1538- if ($('.loading_box').length === 0) {
1539- $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body);
1540- }
1541- $('.loading_box').show();
1550+ // 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요
1551+ // if ($('.loading_box').length === 0) {
1552+ // $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body);
1553+ // }
1554+ // $('.loading_box').show();
1555 }
1556 </script>
1557 </div>
@@ -11334,7 +11347,8 @@ $(document).ready(function(){
11347
11348 swipeMenu(".best-category2");
11349 setHeaderBackgroundWhite();
11337- $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body);
11350+ // 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요
11351+ // $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body);
11352 </script>
11353 <!-- 240924 카테고리 수정 -->
11354 <script>

모바일js/common.js

@@ -5,7 +5,8 @@ var commonFunc = function(){};
5 let isFirst = true;
6
7 // 로딩
8-var $loading = $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body).hide();
8+// 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요
9+// var $loading = $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body).hide();
10
11 var api_domain = location.protocol+"//"+location.hostname+":"+location.port;
12
@@ -387,13 +388,14 @@ var keymall = {
388
389 var option = args.option != undefined ? args.option : {};
390 var loading = option.loading != undefined ? option.loading : false;
390- if($(".loading_box").length <= 0){
391- $loadDiv = $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body).hide();
392- }
393- else
394- {
395- $loadDiv = $(".loading_box");
396- }
391+ // 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요
392+ // if($(".loading_box").length <= 0){
393+ // $loadDiv = $('<div class="loading_box"><div class="loading_txt_box"><div class="loading_move"><p class="move01"></p><p class="move02"></p><p class="move03"></p></div><p class="loading_txt">LOADING</p></div></div>').appendTo(document.body).hide();
394+ // }
395+ // else
396+ // {
397+ // $loadDiv = $(".loading_box");
398+ // }
399
400 var ajaxArgs = {
401 url : args.url,
@@ -404,13 +406,14 @@ var keymall = {
406 cache : false,
407 crossDomain : true,
408 beforeSend: function beforeSend(xhr) {
407- if (isMobile && loading) {
408- $loadDiv.show().fadeIn('fast');
409- }
409+ // 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요
410+ // if (isMobile && loading) {
411+ // $loadDiv.show().fadeIn('fast');
412+ // }
413 //로딩바 사용 유무에 따라
411- if(args.useLoadingBar){
412- $('.loading_box').css("display","block");
413- }
414+ // if(args.useLoadingBar){
415+ // $('.loading_box').css("display","block");
416+ // }
417
418 if(args.type == 'POST' || args.type == 'post') {
419 let csrfVal = args.csrf;
@@ -432,13 +435,14 @@ var keymall = {
435 }
436 },
437 complete: function complete(status) {
435- if (isMobile && loading) {
436- $loadDiv.fadeOut();
437- }
438+ // 기존 AJAX 로딩 선택자 .loading_box를 신규 .progress-loading으로 변경하고, JS에서 생성하는 기존 로딩 마크업 제거 또는 신규 구조로 교체 필요
439+ // if (isMobile && loading) {
440+ // $loadDiv.fadeOut();
441+ // }
442 //로딩바 사용 유무에 따라
439- if(args.useLoadingBar){
440- $('.loading_box').css("display","none");
441- }
443+ // if(args.useLoadingBar){
444+ // $('.loading_box').css("display","none");
445+ // }
446 },
447 success : function(data) {
448 //console.log('success callback');