주요 기능 소개(메인 Page)
- 로그인 이전에는 헤더에 로그인 / 회원 가입을 보여주고, 로그인을 했을 때는 Session ID / 로그 아웃 / 마이 페이지을 띄워줌
- 로그 아웃을 클릭 시 로그인 이전의 Main 페이지로 이동
main.jsp
<!-- main.jsp 188번째 줄 -->
<!-- 현우(세션작업_2022.05.20) -->
<div class="util-area">
<div class="left-link">
<a href="https://www.megabox.co.kr/benefit/viplounge" title="VIP LOUNGE">VIP LOUNGE</a>
<a href="https://www.megabox.co.kr/benefit/membership" title="멤버십">멤버십</a>
<a href="http://localhost:8080/movie/list" title="고객센터">고객센터</a>
</div>
<!-- 로그인 전 후 띄우기 -->
<!-- 로그인 전 : 로그인/회원가입 -->
<!-- 로그인 후 : xx님 환영합니다 / 로그아웃 / 마이 페이지 -->
<div class="right-link">
<!--
세션 id가 없을 때 로그인/회원가입 을 보여주고
다른상황(otherwise)일때는 세션id / 로그아웃 / 마이 페이지를 보여줌
-->
<c:choose>
<c:when test="${empty sessionScope.customInfo.id }">
<a href="<%=cp%>/movie/login" title="로그인">로그인</a>
<a href="<%=cp%>/movie/join" title="회원가입">회원가입</a>
</c:when>
<c:otherwise>
<a href="">${sessionScope.customInfo.id }님</a>
<a href="<%=cp%>/movie/logout" title="로그아웃">로그아웃</a>
<a href="<%=cp%>/movie/mypage" title="마이페이지">마이페이지</a>
</c:otherwise>
</c:choose>
</div>
<!-- end 로그인 -->
</div>Image
- Main 페이지 상단에 영화 포스터를 5초마다 다른 포스터로 바뀜
- User가 양쪽에 있는 화살표 버튼을 클릭해서 수동으로 넘길 수 있고, 마우스를 좌우로 드래그를 해서 넘길 수 있음
main.jsp
<!-- main.jsp 1134번째 줄 -->
<script>
//배너 이미지 슬라이드
var swiper = new Swiper('.swiper-container',{
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: {
delay: 5000,
},
});
</script>Image
- 박스 오피스 / 상영 예정작 / 특별 상영 / 필름소사이어티 버튼을 클릭 시 그에 맞는 분류의 영화 포스터를 보여줌
- User가 마우스를 좌우로 드래그를 해서 영화 포스터를 넘길 수 있음
- 예매 버튼을 클릭 시 예매 페이지로 이동 ( 박스 오피스 분류만 구현 완료)
- 박스 오피스는 DB에 저장된 영화 목록을 뿌려줌
main.jsp
<!-- 박스오피스 뿌려줌(종원) -->
<section id="movie">
<div class="container">
<div class="row">
<h2 class="ir_so">영화 예매</h2>
<div class="movie">
<div class="movie_title">
<ul class="clearfix">
<li class="active"><a href="#">박스오피스</a></li>
<li><a href="#">상영예정작</a></li>
<li><a href="#">특별상영</a></li>
<li><a href="#">필름소사이어티</a></li>
</ul>
</div>
<div class="movie_chart">
<div class="swiper-container2">
<div class="chart_cont1 swiper-wrapper">
<!-- 박스오피스(DB) -->
<c:forEach var="dto" items="${lists}">
<div>
<div class="poster">
<figure> <img src="resources/main/poster/${dto.num }.jpg"
alt="${dto.name }"/> </figure>
<div class="rank">
<strong>${dto.num }</strong>
</div>
<div class="mx">
<span class="icon m ir_pm">MX</span> <span
class="icon b ir_pm">Boutique</span>
</div>
</div>
<div class="infor">
<h3>
<span class="icon all ir_pm">${dto.vcnum}</span> <strong>${dto.name }</strong>
</h3>
<div class="infor_btn">
<a href="#">상세정보</a>
<a href="http://localhost:8080/booking_1">예매하기</a>
<!-- 클릭 시 booking_1 (예매)로 이동(현우) -->
</div>
</div>
</div>
</c:forEach>
</div>
</div>
<!-- //chart_cont1-->Image
- 하단의 동영상 재생 버튼을 클릭 시 Modal창을 띄워 YouTube 동영상을 보여줌
main.jsp
<!-- YouTube API연결 - data-youtube뒤에 영상 id 넣어준다. -->
<div class="new_left">
<div class="play" id="showTrailer" data-youtube="s9FBF6oJzfQ">
<!-- 재생버튼( <svg> ) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;" xml:space="preserve">
<circle class="st0" cx="60" cy="60.4" r="56"/>
<path class="st1" d="M81,65.4c4.8-2.8,4.8-7.2,0-10L53.5,39.6c-4.8-2.8-8.7-0.5-8.7,5v31.7c0,5.5,3.9,7.8,8.7,5L81,65.4z"/>
</svg>
</div>
</div>movie.js
(function($){
/* 트레일러 영상 플레이어를 활성화 */
/* YouTube iframe API: https://developers.google.com/youtube/player_parameters */
(function handleTrailer() {
// 셀렉터 캐시
var $selector = {
body: $( "body" ),
overlay: $( "#blackout" ),
modal: $( "#trailerModal" ),
showButton: $( "#showTrailer" ),
hideButton: $( "#hideTrailer" ),
};
// 플레이어
var player = {
obj: null, // 플레이어 오브젝트
query : {
theme: "dark",
color: "white",
controls: 1,
autoplay: 1,
enablejsapi: 1,
modestbranding: 0, // YouTube 로고 감춤
rel: 0, // 관련 동영상 표시
showinfo: 0, // 제목, 업로더 감춤
iv_load_policy: 3 // 특수효과 감춤
},
visible: false
};
// 보이기, 숨기기 버튼 활성화
$selector.showButton.on( "click", showPlayer );
$selector.hideButton.on( "click", hidePlayer );
// YouTube API를 이용해 iframe을 생성
function setPlayer( id ) {
player.obj = new YT.Player( "trailer", {
width: 480,
height: 282,
videoId: id,
playerVars: player.query
});
// 처음 플레이어 크기 설정
resizePlayer();
// 리사이즈나 화면 회전시 플레이어 크기 다시 설정
$( window ).on( "resize orientationchange", function() {
resizePlayer();
});
}
// 화면 크기에 비례해 iframe의 크기 조절
function resizePlayer() {
var viewport = {}, frame = {}, modal = {};
viewport.width = $( window ).width();
viewport.height = $( window ).height();
frame.width = viewport.width;
frame.height = frame.width / 1.6; // 16 : 10
modal.top = ( ( viewport.height - frame.height ) / 2 ) + "px";
modal.left = "0px";
$selector.modal.css( modal );
player.obj.setSize( frame.width, frame.height );
}
// iframe 보이기
function showPlayer() {
// 처음 클릭시 iframe을 생성
if ( !player.obj ) {
setPlayer( $selector.showButton.data("youtube") );
}
$selector.body.addClass("modal_on");
$selector.overlay.show();
player.visible = true;
}
// iframe 감추기
function hidePlayer() {
player.obj.stopVideo();
$selector.overlay.hide();
$selector.body.removeClass("modal_on");
player.visible = false;
}
})();
})(jQuery); YouTube 영상 연결
YouTube 영상 종료
