쇼핑몰 > 연령확인 팝업

src/main/webapp/WEB-INF/views/comm/Include.jsp

@@ -372,9 +372,8 @@
     fn_reflesh_cart_cnt()
 
 
-    /*비밀번호 변경 알림 여부 확인*/
     $(document).ready(function () {
-
+        /*비밀번호 변경 알림 여부 확인*/
         const url = '<c:url value="/sopmal/mbr/selectPasswordChng"/>';
         const originalUrl = window.location.href;
         let passwordAt = '<%=(String)session.getAttribute("passwordChngDeAt")%>'
@@ -383,6 +382,15 @@
             location.href = url + '?originalUrl=' + encodeURIComponent(originalUrl);
         }
 
+        /*연령확인 여부 확인*/
+        let ageChked = getCookieValue("ageChk");
+        if(!ageChked) {
+            fn_open_modal(
+                '#ageChkPopupDiv',
+                '#ageChkPopup',
+                '/sopmal/main/selectAgeChkPopup'
+            );
+        }
     })
 
 
@@ -398,6 +406,7 @@
     }%>
 <input type="hidden" id="adscriptMbrId" value="${adscriptMbrId}"/>
 <div id="mbrMarktClauseAgreeDiv"></div>
+<div id="ageChkPopupDiv"></div>
 
 <script>
 
@@ -466,6 +475,14 @@
 
     }
 
+    //쿠키 값 가져오기
+    const getCookieValue = function(name) {
+        let matches = document.cookie.match(
+                new RegExp('(?:^|; )' + name + '=([^;]*)')
+        );
+        return matches ? matches[1] : null;
+    }
+
 </script>
 
 <!--로딩영역-->

src/main/webapp/WEB-INF/views/comm/mobile/Include.jsp

@@ -90,6 +90,9 @@
 <%--theme적용--%>
 <link rel="stylesheet" type="text/css" href="<c:out value="${sopmallInfo.themaPath}"/>">
 
+<%--font적용--%>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Noto+Sans+JP&display=swap" rel="stylesheet">
+
 <%--Web-App연동 스크립트--%>
 <script src="/mobile/js/bnft/common/Common_app.js" defer=""></script>
 
@@ -361,6 +364,8 @@
         loadRecentSearches();
 
         passwordChngDeAt();
+
+        ageChkAt();
 		
 		fn_save_mbrdvc_info(${isAuthenticated});
     });
@@ -470,6 +475,31 @@
         }
     }
 
+    /*연령확인 여부 확인 */
+    function ageChkAt() {
+        let ageChked = getCookieValue("ageChk");
+        if(!ageChked) {
+            openModal('confirm_ageChk_alert');
+        }
+    }
+
+    const fn_ageChk_yes = function() {
+        closeModal('confirm_ageChk_alert')
+        document.cookie = "ageChk=true; path=/; max-age=86400";
+    }
+
+    const fn_ageChk_no = function() {
+        window.location.href = "https://m.search.naver.com/search.naver?query=사케일잔";
+    }
+
+    //쿠키 값 가져오기
+    const getCookieValue = function(name) {
+        let matches = document.cookie.match(
+                new RegExp('(?:^|; )' + name + '=([^;]*)')
+        );
+        return matches ? matches[1] : null;
+    }
+
     // 최근 검색어 저장
     function saveSearch(param) {
         let searches = JSON.parse(localStorage.getItem('recentSearches')) || [];
@@ -755,6 +785,32 @@
     </div>
 </div>
 
+<%--연령확인 모달--%>
+<div class="microModal microAlert" id="confirm_ageChk_alert" aria-hidden="true" style="font-family: 'Noto Sans JP', 'Noto Sans KR', sans-serif;">
+    <div class="microModal__overlay" tabindex="-1">
+        <div class="microModal__container" role="dialog" aria-modal="true" style="width: 350px;">
+            <div class="microModal__body">
+                <div class="microModal__top">
+                    <p class="alert-content__text" style="font-size: 20px;">
+                        満20歳以上ですか?<br>
+                        (만20세 이상입니까?)
+                    </p>
+                    <br>
+                    <p class="alert-content__text--sm" style="font-size: 15px;">
+                        20歳未満の飲酒は法律で禁止されています。<br>
+                        (20세 미만의 음주는 법으로 금지되어 있습니다.)
+                    </p>
+                    <br>
+                </div>
+            </div>
+            <div class="microModal__btnContainer">
+                <button class="microModal__btn microModal__btn-primary" onclick="fn_ageChk_yes();">はい (예)</button>
+                <button class="microModal__btn" onclick="fn_ageChk_no()">いいえ (아니오)</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <%--cutom 확인 모달--%>
 <div class="microModal microAlert" id="custom_confirm_alert" aria-hidden="true" style="position: relative; z-index: 1010;">
     <div class="microModal__overlay" tabindex="-1">