sake/src/main/webapp/WEB-INF/views/sopmal/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-02-05 최범식 최초 생성
	2024-08-17 이대환 독립몰/통합몰 구분
--%>
<!DOCTYPE html>
<html lang="ko">

<head>
<%-- 공통 include --%>
<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
</head>

<body>
	<%-- 공통 Header --%>
	<jsp:include page="/WEB-INF/views/comm/Header.jsp"/>
	<!-- 헤더 영역(Type3) -->
	<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-wrapper">
			<div class="sub-content">
				<div class="page-title center">
					<c:choose>
						<c:when test="${integrated}">
							<h2 class="page-title__title">GC ONE(통합회원) 가입</h2>
						</c:when>
						<c:otherwise>
							<h2 class="page-title__title">회원가입</h2>
						</c:otherwise>
					</c:choose>
					<div class="ck-content">
						<c:out value='${sopmalInfo.joinGuidanceSj}' escapeXml="false"/>
					</div>
				</div>
				<div class="signUp-promotion">
					<div class="signUp-promotion__introBox first ck-content">
						<c:out value='${sopmalInfo.joinGuidanceWords}' escapeXml='false'/>
					</div>
					<c:if test="${!isAuthenticated}">
						<div class="signUp-promotion__col-2 signUpLink" style="margin-bottom: 40px;">
							<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 type="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 type="button" class="login__sns__btn naver" onclick="openSocialLoginPopup('NAVER');"><i class="icon icon_naverLogin"></i>네이버로 회원가입</button></c:if>
							</div>
						</div>
					</c:if>
					<div class="signUp-promotion__section">
						<h5 class="signUp-promotion__section__title"><c:if test="${integrated}">GC ONE (통합 회원) </c:if>주요 혜택</h5>
						<div class="signUp-promotion__col-3 ck-content">
							<c:out value='${sopmalInfo.joinBnef}' escapeXml='false'/>
						</div>
					</div>
				</div>
			</div>
		</div>
	</main>
<%-- 공통 Footer --%>
<jsp:include page="/WEB-INF/views/comm/Footer.jsp"/>
	<script type="text/javascript">

		$(document).ready(function() {
			let signUpPromo = $('.signUp-promotion__col-3.ck-content');
			let figureTable = signUpPromo.find('figure.table');
			if(figureTable.length == 4){
				signUpPromo.removeClass('signUp-promotion__col-3').addClass('signUp-promotion__col-2');
			}
		});

		/* ********************************************************
         * SNS 소셜 로그인
         ******************************************************** */
		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);

			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>
</html>