sake/src/main/webapp/WEB-INF/views/sopmal_m/mbr/JoinGuidanceR.jsp

<%@ 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="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui"%>
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld"%>

<%--
	Class Name : JoinGuidanceR.jsp
	Description : 회원가입 안내(모바일)
	Modification Information

	수정일 수정자 수정내용
	------- -------- ---------------------------
	2024-09-04 이대환 최초 생성
--%>
<!DOCTYPE html>
<html lang="ko">
<head>
<%-- 공통 include --%>
<jsp:include page="/WEB-INF/views/comm/mobile/Include.jsp"/>
</head>

<script>
	$(document).ready(function() {
		let signUpPromo = $('.signUp-promotion__section__content');
		let figureTable = signUpPromo.find('figure.table').length;

		if(figureTable) {
			if (figureTable % 3 == 0) {
				signUpPromo.addClass('signUp-promotion__col-3');
			} else if (figureTable % 2 == 0) {
				signUpPromo.addClass('signUp-promotion__col-2');
			}
		}
	});

	/* ********************************************************
	 * SNS 소셜 로그인
	 ******************************************************** */
	// 웹뷰 환경 감지 함수 추가
	function isWebView() {
		const ua = navigator.userAgent.toLowerCase();
		return ua.includes('wv') ||
				ua.includes('webview') ||
				window.ReactNativeWebView !== undefined ||
				(window.webkit && window.webkit.messageHandlers);
	}

	const openSocialLoginPopup = (provider) => {
		var accessUrl = '${accessUrl}';
		var redirectUri = accessUrl + '/sopmal/mbr/selectJoinAgreeTermsForm';

		var width = 600;
		var height = 600;
		var left = (screen.width / 2) - (width / 2);
		var top = (screen.height / 2) - (height / 2);
		var url = '${ssoUrl}/oauth2/authorization/' + $('#sopmalCd').val() + "-" + provider
				+ '?redirect_uri=' + encodeURIComponent(redirectUri) + '&oauth2_type=join&access_url='+ encodeURIComponent(accessUrl);

		// 웹뷰 환경 체크 후 분기 처리
		if (isWebView()) {
			console.log('웹뷰 환경');
			// 웹뷰에서는 현재 창에서 직접 이동
			window.location.href = url;
		} else {
			console.log('일반 브라우저 환경');
			// 일반 브라우저에서는 팝업 창으로 열기
			window.open(url, 'SocialLoginPopup', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left);
		}
	}

	const receiveMessage = (event) => {
		if(event.origin !== "${ssoUrl}") {
			return;
		}
		if(event.data.type === 'LOGIN_SUCCESS') {
			var tempForm = $('<form>', {
				method: 'post',
				action: event.data.redirectUrl
			});
			$.each(event.data, function(key, value) {
				$('<input>', {
					type: 'hidden',
					name: key,
					value: value
				}).appendTo(tempForm);
			});
			tempForm.appendTo('body');
			tempForm.submit();
			tempForm.remove();
		}
	}

	window.addEventListener('message', receiveMessage, false);
</script>

<body>
<div class="screen-wrap">
	<!-- 헤더 영역 -->
	<header class="header header--sub">
		<jsp:include page="/WEB-INF/views/comm/mobile/Header.jsp"/>
	</header>

	<!-- 하단 탭바 -->
	<jsp:include page="/WEB-INF/views/comm/mobile/TabBar.jsp"/>

	<!-- 메인 컨텐츠 -->
	<div class="content-wrap">
		<main class="main">
			<c:set var="sopmalInfo" value="${resultMap.sopmalInfo}" />
			<c:set var="integrated" value="${sopmalInfo.sopmalTyCd == '01'}" />
			<input type="hidden" id="sopmalCd" value="<c:out value="${sopmalInfo.sopmalCd}"/>">
			<div class="sub-page">
				<div class="signUp-promotion">
					<div class="sub-box">
						<div class="signUp-promotion__introBoxWrapper">
							<div class="signUp-promotion__introBox ck-content">
								<c:out value='${sopmalInfo.joinGuidanceWords}' escapeXml='false'/>
							</div>
						</div>
						<c:if test="${!isAuthenticated}">
							<div class="signUpLink">
								<a href="<c:url value='/sopmal/mbr/selectJoinAgreeTermsForm'/>" class="btn lg theme">바로 가입 할래요</a>
								<%--<a class="btn lg outline" onclick="$('html, body').animate({scrollTop: $('.signUp-promotion__section').offset().top}, 0);return false;" style="cursor: pointer;">가입시 혜택부터 볼래요</a>--%>
								<div class="login__sns">
									<c:if test="${sopmalInfo.kakaoIntrlckAt == 'Y'}"><button class="login__sns__btn kakao" onclick="openSocialLoginPopup('KAKAO');"><i class="icon icon_kakaoLogin"></i>카카오로 회원가입</button></c:if>
									<c:if test="${sopmalInfo.naverIntrlckAt == 'Y'}"><button class="login__sns__btn naver" onclick="openSocialLoginPopup('NAVER');"><i class="icon icon_naverLogin"></i>네이버로 회원가입</button></c:if>
								</div>
							</div>
						</c:if>
					</div>
					<div class="sub-box">
						<div class="signUp-promotion__section">
							<h5 class="signUp-promotion__section__title"><c:if test="${integrated}">GC ONE (통합 회원) </c:if>주요 혜택</h5>
							<div class="signUp-promotion__section__content ck-content">
								<c:out value='${sopmalInfo.joinBnef}' escapeXml='false'/>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Top 버튼 -->
			<div class="quick-menu__to-top">
				<button><i class="icon icon_quick-to-top"></i>
					<span class="visually-hidden">위로 가기</span>
				</button>
			</div>
		</main>
	</div>
</div>

</body>
</html>