yangart / sejongOn_publish star
yanghyo 10-24
메인 팝업 추가
@d45e5938af65fe878df15bd7343a848614c74d41
4d7019c
d45e593
html/onSejong/common/main/main.html
--- html/onSejong/common/main/main.html
+++ html/onSejong/common/main/main.html
@@ -44,11 +44,82 @@
 
 		<div class="accessibility">
 
 			<a href="#skipToContents" title="콘텐츠를 바로 볼 수 있도록 건너뛰기합니다.">콘텐츠 바로가기</a>
 
 		</div>
 
-		<!-- for-teacher / for-student -->
 
+		<div class="mn-popup-area is-active">
 
+			<div class="mn-popup">
 
+				<div class="mn-pop-body wrap">
 
+					<div class="cont">
 
+						<div class="swiper-fnc">
 
+							<button type="button" class="swiper-button-prev lg circle">이전</button>
 
+							<button type="button" class="swiper-button-next lg circle">다음</button>
 
+						</div>
 
+						<div class="swiper mn-popup-swiper">
 
+							<div class="swiper-wrapper">
 
+								<div class="swiper-slide">
 
+									<div class="popup-item">
 
+										<a href="#none" class="lnk-full">상세보기</a>
 
+										<div class="pop-header">
 
+											<h2>설문조사</h2>
 
+										</div>
 
+										<div class="pop-body">
 
+											-에디터 -
 
+										</div>
 
+									</div>
 
+								</div>
 
+								<div class="swiper-slide">
 
+									<div class="popup-item">
 
+										<div class="pop-header">
 
+											<h2>공지사항 상세보기 없음</h2>
 
+										</div>
 
+										<div class="pop-body">
 
+											-에디터 -
 
+											온세종학교는 종합지원 포털 시스템 점검을 실시하고 있음을 알려드립니다. 우리 교육청 및 산하기관에서 진행 중인 구매 규격 사전 공개, 입찰 공고, 개찰 등 관련 업무는 시스템 점검(복구) 기간이 길어질 경우 해당 기간만큼 연장 될 수 있음을 사전에 알려드리니 업무에 참고하시기 바랍니다.<br><br>
 
+											온세종학교는 종합지원 포털 시스템 점검을 실시하고 있음을 알려드립니다. 우리 교육청 및 산하기관에서 진행 중인 구매 규격 사전 공개, 입찰 공고, 개찰 등 관련 업무는 시스템 점검(복구) 기간이 길어질 경우 해당 기간만큼 연장 될 수 있음을 사전에 알려드리니 업무에 참고하시기 바랍니다.<br><br>
 
+											온세종학교는 종합지원 포털 시스템 점검을 실시하고 있음을 알려드립니다. 우리 교육청 및 산하기관에서 진행 중인 구매 규격 사전 공개, 입찰 공고, 개찰 등 관련 업무는 시스템 점검(복구) 기간이 길어질 경우 해당 기간만큼 연장 될 수 있음을 사전에 알려드리니 업무에 참고하시기 바랍니다.<br><br>
 
+											온세종학교는 종합지원 포털 시스템 점검을 실시하고 있음을 알려드립니다. 우리 교육청 및 산하기관에서 진행 중인 구매 규격 사전 공개, 입찰 공고, 개찰 등 관련 업무는 시스템 점검(복구) 기간이 길어질 경우 해당 기간만큼 연장 될 수 있음을 사전에 알려드리니 업무에 참고하시기 바랍니다.<br><br>
 
+											온세종학교는 종합지원 포털 시스템 점검을 실시하고 있음을 알려드립니다. 우리 교육청 및 산하기관에서 진행 중인 구매 규격 사전 공개, 입찰 공고, 개찰 등 관련 업무는 시스템 점검(복구) 기간이 길어질 경우 해당 기간만큼 연장 될 수 있음을 사전에 알려드리니 업무에 참고하시기 바랍니다.<br><br>
 
+											온세종학교는 종합지원 포털 시스템 점검을 실시하고 있음을 알려드립니다. 우리 교육청 및 산하기관에서 진행 중인 구매 규격 사전 공개, 입찰 공고, 개찰 등 관련 업무는 시스템 점검(복구) 기간이 길어질 경우 해당 기간만큼 연장 될 수 있음을 사전에 알려드리니 업무에 참고하시기 바랍니다.<br><br>
 
+										</div>
 
+									</div>
 
+								</div>
 
+								<div class="swiper-slide">
 
+									<div class="popup-item">
 
+										<a href="#none" class="lnk-full">상세보기</a>
 
+										<div class="pop-header">
 
+											<h2>공지사항 상세보기</h2>
 
+										</div>
 
+										<div class="pop-body">
 
+											-에디터 -
 
+										</div>
 
+									</div>
 
+								</div>
 
+								<div class="swiper-slide">
 
+									<div class="popup-item">
 
+										<a href="#none" class="lnk-full">상세보기</a>
 
+										<div class="pop-header">
 
+											<h2>공지사항 제목</h2>
 
+										</div>
 
+										<div class="pop-body">
 
+											-에디터 -
 
+										</div>
 
+									</div>
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</div>
 
+					<div class="fnc">
 
+						<button type="button" class="btn overlay swiper-btn-playstop-toggle circle">중지</button>
 
+						<span class="btn overlay">
 
+							소식건수: 총<div class="swiper-total"></div>건
 
+						</span>
 
+						<button type="button" class="btn overlay" id="mnPopupAreaClose" onclick="mnPopClose()">닫기</button>
 
+						<button type="button" class="btn overlay back ico-close" onclick="mnPopClose()">오늘 하루 열지 않기</button>
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</div>
 
 		<div class="container">
 
 			<!-- 통합 헤더 및 네비게이션 -->
 
 			<header class="site-header"></header>
 
-
 
 			<div class="site-body" id="skipToContents">
 
 				<div class="mn-contents wrap">
 
 					<div class="mn-top">
@@ -447,7 +518,7 @@
 
 									<div class="profile sm">
 
 										<div class="img-area">
 
 											<figure>
 
-												<img src="../../../../resources/front/site/SITE_00000/images/common/profile/profile-chatbot.svg" alt="챗봇">
 
+												<img src="../../../../resources/front/site/SITE_00000/images/common/profile/profile-chatbot.svg" alt="챗봇" />
 
 											</figure>
 
 										</div>
 
 										<div class="txt-area">
@@ -457,7 +528,8 @@
 
 									<div class="txt-guide">
 
 										<div class="txt">
 
 											<p>
 
-												잘 이해하지 못했어요.<br>
 
+												잘 이해하지 못했어요.
 
+												<br />
 
 												온라인학교 과정, 캠퍼스공동교육과정 중에 궁금한 부분의 버튼을 눌러주시면 잘 이해할 수 있어요.
 
 											</p>
 
 											<div class="btn-group dir-col">
@@ -478,7 +550,7 @@
 
 									<div class="profile sm">
 
 										<div class="img-area">
 
 											<figure>
 
-												<img src="../../../../resources/front/site/SITE_00000/images/common/profile/profile-chatbot.svg" alt="챗봇">
 
+												<img src="../../../../resources/front/site/SITE_00000/images/common/profile/profile-chatbot.svg" alt="챗봇" />
 
 											</figure>
 
 										</div>
 
 										<div class="txt-area">
@@ -555,10 +627,13 @@
 
 		<div class="dim"></div>
 
 
 		<script>
 
-			  $(document).on('click', '.btn-float-chatbot',function() {
 
+			function mnPopClose() {
 
+				$('.mn-popup-area').removeClass('is-active');
 
+			}
 
+			$(document).on('click', '.btn-float-chatbot', function () {
 
 				$('.float-chatbot').toggleClass('is-active');
 
 			});
 
-			$(document).on('click', '.pupup-chatbot .pop-close',function() {
 
+			$(document).on('click', '.pupup-chatbot .pop-close', function () {
 
 				$('.float-chatbot').removeClass('is-active');
 
 			});
 
 		</script>
4d7019c
d45e593
html/onSejong/manager/myclass/activityReport.html
--- html/onSejong/manager/myclass/activityReport.html
+++ html/onSejong/manager/myclass/activityReport.html
@@ -201,9 +201,8 @@
 
                                 <div class="box-body">
 
                                     <ul class="chart-bar-list">
 
                                         <li>
 
-                                            
                                             <div class="chart-tit-area">
 
-                                                <div class="chart-tit">#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역</div>
 
+                                                <div class="chart-tit ellipsis">#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역</div>
 
                                             </div>
 
                                             <div class="bar-area">
 
                                                 <span class="bar" style="width:22%;"></span><small class="chart-label">22% 오답률</small>
@@ -211,7 +210,7 @@
 
                                         </li>
 
                                         <li>
 
                                             <div class="chart-tit-area">
 
-                                                <div class="chart-tit">#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역</div>
 
+                                                <div class="chart-tit ellipsis">#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역</div>
 
                                             </div>
 
                                             <div class="bar-area">
 
                                                 <span class="bar" style="width:62%;"></span><small class="chart-label">62% 오답률</small>
@@ -219,15 +218,15 @@
 
                                         </li>
 
                                         <li>
 
                                             <div class="chart-tit-area">
 
-                                                <div class="chart-tit">#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역</div>
 
+                                                <div class="chart-tit ellipsis">#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역</div>
 
                                             </div>
 
                                             <div class="bar-area">
 
                                                 <span class="bar" style="width:22%;"></span><small class="chart-label">22% 오답률</small>
 
                                             </div>
 
                                         </li>
 
                                         <li>
 
-                                            <div class="chart-tit-area ellipsis">
 
-                                                <div class="chart-tit">#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역</div>
 
+                                            <div class="chart-tit-area">
 
+                                                <div class="chart-tit ellipsis">#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역#123456 | 무엇인지 맞춰보세요. 문항의 질문이 표시되는 영역</div>
 
                                             </div>
 
                                             <div class="bar-area">
 
                                                 <span class="bar" style="width:62%;"></span><small class="chart-label">62% 오답률</small>
4d7019c
d45e593
resources/front/site/SITE_00000/css/common/component/_popup.scss
--- resources/front/site/SITE_00000/css/common/component/_popup.scss
+++ resources/front/site/SITE_00000/css/common/component/_popup.scss
@@ -397,17 +397,36 @@
 
     grid-template-rows: 1fr auto;
 
     padding:$spacing-md 0;
 
     gap:$spacing-md;
 
-    z-index: 99;
 
+    z-index: 100;
 
     &.is-active {
 
         display: grid;
 
     }
 
-    .popup {
 
+    .popup-item {
 
         max-width: initial;
 
+		height: 100%;
 
+		width: 100%;
 
+		border-radius: $radius-md;
 
+		background: $color-background-default-primary;
 
+		box-shadow: $shadow-md;
 
+		display: grid;
 
+		grid-template-rows: auto 1fr;
 
+		.pop-header {
 
+			padding: $spacing-md $spacing-lg;
 
+			border-bottom: $stroke-secondary;
 
+			h2 {
 
+				@include typo('tit-sm');	
+			}
 
+		}
 
+		.pop-body {
 
+			padding: $spacing-xlg $spacing-lg;
 
+			overflow-y: auto;
 
+		}
 
+		img {
 
+			max-width: 100%;
 
+		}
 
     }
 
-    .pop-header {
 
-        padding-right: 0;
 
-    }
 
-    .mn-pop-body {
 
+    
+    .mn-popup {
 
         display:flex;
 
         align-items: center;
 
         justify-content: center;
@@ -415,72 +434,59 @@
 
         overflow: hidden;
 
         .cont {
 
             position: relative;
 
-            height: 100%;
 
+            max-height: 100%;
 
+			height: 54rem;
 
             min-width: 0;
 
-            display:flex;
 
-            flex-direction:column;
 
-            gap:$spacing-md;
 
-            justify-content: center;
 
+			padding-left: 8rem;
 
+			padding-right: 8rem;
 
         }
 
+		.fnc {
 
+			display: flex;
 
+			gap:$spacing-xsm;
 
+			margin:$spacing-2xlg auto;
 
+			border-radius: 3em;
 
+			background: $color-black-alpha30;
 
+			backdrop-filter: blur(15px);
 
+			width: fit-content;
 
+			padding:$spacing-sm $spacing-md;
 
+			.btn {
 
+				border-radius: 3em;
 
+			}
 
+		}
 
     }
 
     .is-inactive {
 
         .swiper-wrapper {
 
             justify-content: center;
 
         }
 
     }
 
-    
-    .swiper-fnc-static {
 
-        justify-content: flex-end;
 
-        width:100%;
 
-        button {
 
-            background-color: $color-white-alpha90;
 
-        }
 
-        .swiper-button-prev.swiper-button-disabled  ~
 
-        .swiper-button-next.swiper-button-disabled ~ .swiper-btn-playstop-toggle {
 
-            opacity: .4;
 
-        }
 
-        // &:has(.swiper-button-disabled) {
 
-        //     display: none;
 
-        // }
 
-    }
 
-    .swiper {
 
-        width: 100%;
 
-        height: 100%;
 
-        max-height: 80rem;
 
-    }
 
-    // .swiper {
 
-    //     position: static;
 
-    //     width: 100%;
 
-    //     display: grid;
 
-    //     grid-template-rows: 1fr auto;
 
-    //     gap:$spacing-md;
 
-    // }
 
-    .swiper-slide  {
 
-        display: flex;
 
-        justify-content: center;
 
-        // width: 100% !important;
 
-    }
 
-    .pop-editor-cont {
 
-        img {
 
-            max-width: 100%;
 
-        }
 
-    }
 
-    .popup {
 
-        display: flex;
 
+    .swiper-btn-playstop-toggle {
 
         position: relative;
 
-        top:initial;
 
-        left:initial;
 
-        transform: initial;
 
-        max-height: 100%;
 
-        height: max-content;
 
-    }
 
-    .mn-pop-footer {
 
-        .fnc {
 
-            background-color: $color-white-alpha80;
 
-            padding:$spacing-md $spacing-lg;
 
-            border-radius: $radius-md;       
+        display: block;
 
+        text-indent: -99999px;
 
+        &:after {
 
+            content: " ";
 
+            position: absolute;
 
+            left: 50%;
 
+            top: 50%;
 
+            transform: translate(-50%, -50%);
 
+        }
 
+        &:after {
 
+            @include ico($size-icon-sm, pause, $color-icon-default-primary-inverse);
 
+        }
 
+        &.is-stop {
 
+            &:after{
 
+                @include ico($size-icon-sm, play, $color-icon-default-primary-inverse);
 
+            }
 
         }
 
     }
 
+	.swiper,
 
+	.swiper-wrapper,
 
+	.swiper-slide {
 
+		height: 100%;
 
+	}
 
+	.swiper-total {
 
+		width: initial !important;
 
+	}
 
 }
 
 @include responsive(mobile) {
 
 	.popup,
4d7019c
d45e593
resources/front/site/SITE_00000/css/custom/page/_chart.scss
--- resources/front/site/SITE_00000/css/custom/page/_chart.scss
+++ resources/front/site/SITE_00000/css/custom/page/_chart.scss
@@ -120,7 +120,9 @@
 
 	li {
 
 		display: grid;
 
 		gap:$spacing-2xsm;
 
-		padding-right: 6.4rem;
 
+		.chart-tit-area {
 
+			min-width: 0;
 
+		}
 
 		.chart-tit {
 
 			display: inline-block;
 
 			@include typo('tit-xsm');
@@ -130,6 +132,7 @@
 
 		}
 
 		.bar-area {
 
 			position: relative;
 
+			padding-right: 6.4rem;
 
 		}
 
 		.bar {
 
 			display: inline-block;
4d7019c
d45e593
resources/front/site/SITE_00000/css/style.css
--- resources/front/site/SITE_00000/css/style.css
+++ resources/front/site/SITE_00000/css/style.css
@@ -8679,18 +8679,39 @@
 
   grid-template-rows: 1fr auto;
 
   padding: 1.6rem 0;
 
   gap: 1.6rem;
 
-  z-index: 99;
 
+  z-index: 100;
 
 }
 
 .mn-popup-area.is-active {
 
   display: grid;
 
 }
 
-.mn-popup-area .popup {
 
+.mn-popup-area .popup-item {
 
   max-width: initial;
 
+  height: 100%;
 
+  width: 100%;
 
+  border-radius: 2.4rem;
 
+  background: var(--color-background-default-primary);
 
+  -webkit-box-shadow: 0rem 0.4rem 1.6rem rgba(17, 17, 17, 0.1);
 
+          box-shadow: 0rem 0.4rem 1.6rem rgba(17, 17, 17, 0.1);
 
+  display: grid;
 
+  grid-template-rows: auto 1fr;
 
 }
 
-.mn-popup-area .pop-header {
 
-  padding-right: 0;
 
+.mn-popup-area .popup-item .pop-header {
 
+  padding: 1.6rem 2.4rem;
 
+  border-bottom: 0.1rem solid var(--color-stroke-default-tertiary);
 
 }
 
-.mn-popup-area .mn-pop-body {
 
+.mn-popup-area .popup-item .pop-header h2 {
 
+  font-size: var(--font-tit-sm);
 
+  font-weight: var(--size-font-weight-xlg);
 
+  line-height: var(--size-font-lineheight-sm);
 
+}
 
+.mn-popup-area .popup-item .pop-body {
 
+  padding: 3.2rem 2.4rem;
 
+  overflow-y: auto;
 
+}
 
+.mn-popup-area .popup-item img {
 
+  max-width: 100%;
 
+}
 
+.mn-popup-area .mn-popup {
 
   display: -webkit-box;
 
   display: -ms-flexbox;
 
   display: flex;
@@ -8703,73 +8724,82 @@
 
   min-width: 0;
 
   overflow: hidden;
 
 }
 
-.mn-popup-area .mn-pop-body .cont {
 
+.mn-popup-area .mn-popup .cont {
 
   position: relative;
 
-  height: 100%;
 
+  max-height: 100%;
 
+  height: 54rem;
 
   min-width: 0;
 
+  padding-left: 8rem;
 
+  padding-right: 8rem;
 
+}
 
+.mn-popup-area .mn-popup .fnc {
 
   display: -webkit-box;
 
   display: -ms-flexbox;
 
   display: flex;
 
-  -webkit-box-orient: vertical;
 
-  -webkit-box-direction: normal;
 
-      -ms-flex-direction: column;
 
-          flex-direction: column;
 
-  gap: 1.6rem;
 
-  -webkit-box-pack: center;
 
-      -ms-flex-pack: center;
 
-          justify-content: center;
 
+  gap: 0.8rem;
 
+  margin: 4rem auto;
 
+  border-radius: 3em;
 
+  background: rgba(17, 17, 17, 0.15);
 
+  backdrop-filter: blur(15px);
 
+  width: -webkit-fit-content;
 
+  width: -moz-fit-content;
 
+  width: fit-content;
 
+  padding: 1.2rem 1.6rem;
 
+}
 
+.mn-popup-area .mn-popup .fnc .btn {
 
+  border-radius: 3em;
 
 }
 
 .mn-popup-area .is-inactive .swiper-wrapper {
 
   -webkit-box-pack: center;
 
       -ms-flex-pack: center;
 
           justify-content: center;
 
 }
 
-.mn-popup-area .swiper-fnc-static {
 
-  -webkit-box-pack: end;
 
-      -ms-flex-pack: end;
 
-          justify-content: flex-end;
 
-  width: 100%;
 
-}
 
-.mn-popup-area .swiper-fnc-static button {
 
-  background-color: rgba(255, 255, 255, 0.95);
 
-}
 
-.mn-popup-area .swiper-fnc-static .swiper-button-prev.swiper-button-disabled ~ .swiper-button-next.swiper-button-disabled ~ .swiper-btn-playstop-toggle {
 
-  opacity: 0.4;
 
-}
 
-.mn-popup-area .swiper {
 
-  width: 100%;
 
-  height: 100%;
 
-  max-height: 80rem;
 
-}
 
-.mn-popup-area .swiper-slide {
 
-  display: -webkit-box;
 
-  display: -ms-flexbox;
 
-  display: flex;
 
-  -webkit-box-pack: center;
 
-      -ms-flex-pack: center;
 
-          justify-content: center;
 
-}
 
-.mn-popup-area .pop-editor-cont img {
 
-  max-width: 100%;
 
-}
 
-.mn-popup-area .popup {
 
-  display: -webkit-box;
 
-  display: -ms-flexbox;
 
-  display: flex;
 
+.mn-popup-area .swiper-btn-playstop-toggle {
 
   position: relative;
 
-  top: initial;
 
-  left: initial;
 
-  -webkit-transform: initial;
 
-          transform: initial;
 
-  max-height: 100%;
 
-  height: -webkit-max-content;
 
-  height: -moz-max-content;
 
-  height: max-content;
 
+  display: block;
 
+  text-indent: -99999px;
 
 }
 
-.mn-popup-area .mn-pop-footer .fnc {
 
-  background-color: rgba(255, 255, 255, 0.9);
 
-  padding: 1.6rem 2.4rem;
 
-  border-radius: 2.4rem;
 
+.mn-popup-area .swiper-btn-playstop-toggle:after {
 
+  content: " ";
 
+  position: absolute;
 
+  left: 50%;
 
+  top: 50%;
 
+  -webkit-transform: translate(-50%, -50%);
 
+          transform: translate(-50%, -50%);
 
+}
 
+.mn-popup-area .swiper-btn-playstop-toggle:after {
 
+  width: var(--size-icon-sm);
 
+  height: var(--size-icon-sm);
 
+  -webkit-mask-size: cover;
 
+          mask-size: cover;
 
+  -webkit-mask-position: center;
 
+          mask-position: center;
 
+  -webkit-mask-repeat: no-repeat;
 
+          mask-repeat: no-repeat;
 
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' xml:space='preserve'%3E%3Cg fill='%23111'%3E%3Crect class='cls-2' x='14' y='2' width='5' height='20'/%3E%3Crect class='cls-2' x='5' y='2' width='5' height='20'/%3E%3C/g%3E%3C/svg%3E");
 
+          mask-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' xml:space='preserve'%3E%3Cg fill='%23111'%3E%3Crect class='cls-2' x='14' y='2' width='5' height='20'/%3E%3Crect class='cls-2' x='5' y='2' width='5' height='20'/%3E%3C/g%3E%3C/svg%3E");
 
+  background-color: var(--color-icon-default-primary-inverse);
 
+}
 
+.mn-popup-area .swiper-btn-playstop-toggle.is-stop:after {
 
+  width: var(--size-icon-sm);
 
+  height: var(--size-icon-sm);
 
+  -webkit-mask-size: cover;
 
+          mask-size: cover;
 
+  -webkit-mask-position: center;
 
+          mask-position: center;
 
+  -webkit-mask-repeat: no-repeat;
 
+          mask-repeat: no-repeat;
 
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' xml:space='preserve'%3E%3Cg fill='%23111'%3E%3Cpath d='m5,2v20l16-10L5,2Zm2,3.61l10.23,6.39-10.23,6.39V5.61Z'/%3E%3C/g%3E%3C/svg%3E");
 
+          mask-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' xml:space='preserve'%3E%3Cg fill='%23111'%3E%3Cpath d='m5,2v20l16-10L5,2Zm2,3.61l10.23,6.39-10.23,6.39V5.61Z'/%3E%3C/g%3E%3C/svg%3E");
 
+  background-color: var(--color-icon-default-primary-inverse);
 
+}
 
+.mn-popup-area .swiper,
 
+.mn-popup-area .swiper-wrapper,
 
+.mn-popup-area .swiper-slide {
 
+  height: 100%;
 
+}
 
+.mn-popup-area .swiper-total {
 
+  width: initial !important;
 
 }
 
 
 @media (max-width: 767px) {
@@ -30994,7 +31024,10 @@
 
 .chart-bar-list li {
 
   display: grid;
 
   gap: 0.4rem;
 
-  padding-right: 6.4rem;
 
+}
 
+.a-chart-area .chart-list li .chart-tit-area,
 
+.chart-bar-list li .chart-tit-area {
 
+  min-width: 0;
 
 }
 
 .a-chart-area .chart-list li .chart-tit,
 
 .chart-bar-list li .chart-tit {
@@ -31011,6 +31044,7 @@
 
 .a-chart-area .chart-list li .bar-area,
 
 .chart-bar-list li .bar-area {
 
   position: relative;
 
+  padding-right: 6.4rem;
 
 }
 
 .a-chart-area .chart-list li .bar,
 
 .chart-bar-list li .bar {
4d7019c
d45e593
resources/front/site/SITE_00000/css/style.css.map
--- resources/front/site/SITE_00000/css/style.css.map
+++ resources/front/site/SITE_00000/css/style.css.map
This diff is too big to display.
4d7019c
d45e593
resources/front/site/SITE_00000/css/style.min.css
--- resources/front/site/SITE_00000/css/style.min.css
+++ resources/front/site/SITE_00000/css/style.min.css
This diff is too big to display.
4d7019c
d45e593
resources/front/site/SITE_00000/css/style.min.css.map
--- resources/front/site/SITE_00000/css/style.min.css.map
+++ resources/front/site/SITE_00000/css/style.min.css.map
This diff is too big to display.
4d7019c
d45e593
resources/front/site/SITE_00000/js/common-custom.js
--- resources/front/site/SITE_00000/js/common-custom.js
+++ resources/front/site/SITE_00000/js/common-custom.js
@@ -161,6 +161,117 @@
 
         },
 
 
         //sj추가
 
+        mnPopupSwiper: function () {
 
+             return this.each(function () {
 
+                const $el = $(this).find('.swiper');
 
+                const $btnPrev = $(this).find('.swiper-button-prev')[0];
 
+                const $btnNext = $(this).find('.swiper-button-next')[0];
 
+                const $btnPlayStop = $(this).find('.swiper-btn-playstop-toggle')[0];
 
+                const $btnsPagination = $(this).find('.swiper-total')[0];   
+                let isPaused = false;
 
+                let slideCount = $el.find('.swiper-slide').length;
 
+        
+                // 현재 브레이크포인트에서 slidesPerView 값 설정
 
+                let getSlidesPerView = function () {
 
+                    var width = window.innerWidth;
 
+                    if (width >= 1023) return 3;
 
+                    if (width >= 767) return 2;
 
+                    return 1;
 
+                };
 
+        
+                let slidesPerView = getSlidesPerView();
 
+                let enableAutoplay = slideCount > slidesPerView;
 
+                //var enableLoop = slideCount > slidesPerView;
 
+                //var enableCenteredSlides = slideCount < slidesPerView;
 
+
 
+                if (slideCount < slidesPerView) { $el.addClass('is-inactive');};
 
+        
+                const swiper = new Swiper($el[0], {
 
+                    preloadImages: true,
 
+                    spaceBetween: 16,
 
+                    //centeredSlides: enableCenteredSlides,
 
+                    autoplay: enableAutoplay ? {
 
+                        delay: 4000,
 
+                        disableOnInteraction: false,
 
+                    } : false,
 
+                    // loop: enableLoop,
 
+                    loopedSlides: 0,
 
+                    speed: 1000,
 
+                    initialSlide: 0,
 
+                    watchSlidesProgress: true,
 
+                    navigation: {
 
+                        prevEl: $btnPrev,
 
+                        nextEl: $btnNext
 
+                    },
 
+                    breakpoints: {
 
+                        480: { 
+                            slidesPerView: 1, 
+                        },
 
+                        767: { 
+                            slidesPerView: 2, 
+
 
+                        },
 
+                        1023: { 
+                            slidesPerView: 3,
 
+                            spaceBetween: 40,
 
+                        }, 
+                    },
 
+                    pagination: {
 
+                        el: $btnsPagination,
 
+                        type: "custom", 
+                        renderCustom: function (swiper, current, total) {
 
+                            return `
 
+                                <em>${slideCount}</em>
 
+                            `;
 
+                        },
 
+                    },
 
+                });
 
+                
+                // 중지 버튼 클릭 이벤트
 
+                $($btnPlayStop).on('click', function() {
 
+                    if (isPaused) {
 
+                        // 슬라이드 재생
 
+                        swiper.autoplay.start();
 
+                        $(this).removeClass('is-stop').text('중지'); // 버튼 텍스트 변경
 
+                        isPaused = false;
 
+                    } else {
 
+                        // 슬라이드 정지
 
+                        swiper.autoplay.stop();
 
+                        $(this).addClass('is-stop').text('재생'); // 버튼 텍스트 변경
 
+                        isPaused = true;
 
+                    }
 
+                });
 
+        
+                $(window).on('resize', function () {
 
+                    var newSlidesPerView = getSlidesPerView();
 
+                    var wasAutoplayEnabled = enableAutoplay;
 
+                
+                    slidesPerView = newSlidesPerView;
 
+                    enableAutoplay = slideCount > slidesPerView;
 
+                
+                    if (slideCount < slidesPerView) {
 
+                        $el.addClass('is-inactive');
 
+                    } else {
 
+                        $el.removeClass('is-inactive');
 
+                    }
 
+                
+                    if (enableAutoplay && !wasAutoplayEnabled) {
 
+                        swiper.params.autoplay = { delay: 3000, disableOnInteraction: false };
 
+                        if (!isPaused) {
 
+                            swiper.autoplay.start();
 
+                            $($btnPlayStop).removeClass('is-stop').text('중지');
 
+                        }
 
+                    } else if (!enableAutoplay && wasAutoplayEnabled) {
 
+                        swiper.autoplay.stop();
 
+                        swiper.params.autoplay = false;
 
+                        $($btnPlayStop).addClass('is-stop').text('재생');
 
+                        isPaused = true;
 
+                    }
 
+                });
 
+                
+            });
 
+        },
 
+    
         mnVisualSwiper: function (obj) {
 
            return this.each(function () {
 
                 var $container = $(this);
@@ -1056,6 +1167,7 @@
 
 
 
     //sj추가
 
+    $('.mn-popup-area').mnPopupSwiper();
 
     $('.mn-visual').mnVisualSwiper();
 
     $('.mn-course-area .course-area').mnCourseSwiper();
 
     $('.img-swiper-area').imgSwiper();
Add a comment
List