쇼핑몰 > 연령확인 팝업

(cherry picked from commit f3918ed7b1)

src/main/java/com/wb/domainserver/domain/sopmal/main/controller/MainController.java

@@ -1015,4 +1015,14 @@ public class MainController {
         );
 	}
 
+    /**
+     * 연령확인 팝업
+     * @return
+     */
+    @Policy(AuthPolicy.PUBLIC)
+    @RequestMapping(value="/sopmal/main/selectAgeChkPopup", produces = MediaType.APPLICATION_JSON_VALUE)
+    public String selectAgeChkPopup(HttpServletRequest request) {
+        return Util.getDeviceType(request)+"/main/AgeChkPopupR";
+    }
+
 }

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">

src/main/webapp/WEB-INF/views/sopmal/main/AgeChkPopupR.jsp

@@ -0,0 +1,40 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
+<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
+<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui" %>
+<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
+<%--
+	Class Name : NtcntalkAtmcSndngTmplatUpdtPopupU.jsp
+	Description : 메시지 자동 발송 상세
+	Modification Information
+
+	수정일 수정자 수정내용
+	------- -------- ---------------------------
+	2024.05.16 이대환 최초 생성
+--%>
+<script>
+    const fn_ageChk_yes = function() {
+        document.cookie = "ageChk=true; path=/; max-age=86400";
+    }
+
+    const fn_ageChk_no = function() {
+        window.location.href = "https://search.naver.com/search.naver?query=사케일잔";
+    }
+</script>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Noto+Sans+JP&display=swap" rel="stylesheet">
+<div id="ageChkPopup" class="modal alert" style="max-width: 800px; font-family: 'Noto Sans JP', 'Noto Sans KR', sans-serif;">
+    <div class="alert-content">
+        <p class="alert-content__text" style="font-size: 35px;">
+            満20歳以上ですか?<br>
+            (만20세 이상입니까?)
+        </p>
+        <p class="alert-content__text--sm" style="font-size: 25px;">
+            20歳未満の飲酒は法律で禁止されています。<br>
+            (20세 미만의 음주는 법으로 금지되어 있습니다.)
+        </p>
+    </div>
+    <div class="alert-btn-container">
+        <a href="javascript:void(0);" onclick="fn_ageChk_yes();" rel="modal:close" class="alert-btn alert-btn--confirm" style="font-size: 20px;">はい (예)</a>
+        <a href="javascript:void(0);" onclick="fn_ageChk_no();" rel="modal:close" class="alert-btn alert-btn--confirm" style="font-size: 20px;">いいえ (아니오)</a>
+    </div>
+</div>