상품상세 유투브 동영상 적용

src/main/java/com/style24/front/biz/dao/TsfGoodsDao.java

@@ -14,13 +14,13 @@ import com.style24.persistence.domain.GoodsImg;
 import com.style24.persistence.domain.GoodsNotiInfo;
 import com.style24.persistence.domain.GoodsSafeNo;
 import com.style24.persistence.domain.GoodsStock;
+import com.style24.persistence.domain.GoodsVideo;
 import com.style24.persistence.domain.GoodsViewHst;
 import com.style24.persistence.domain.Measurement;
 import com.style24.persistence.domain.Notice;
 import com.style24.persistence.domain.ReinboundInform;
 import com.style24.persistence.domain.SizeInfo;
 import com.style24.persistence.domain.Tmtb;
-import com.style24.persistence.domain.VideoDisploc;
 
 /**
  * 상품 Dao
@@ -69,7 +69,7 @@ public interface TsfGoodsDao {
 	 * @author eskim
 	 * @date 2021. 2. 9
 	 */
-	Collection<VideoDisploc> getVideoList(String goodsCd);
+	Collection<GoodsVideo> getVideoList(GoodsVideo goodsVideo);
 
 	/**
 	 * 상품 정보 조회

src/main/java/com/style24/front/biz/service/TsfGoodsService.java

@@ -24,13 +24,13 @@ import com.style24.persistence.domain.GoodsNotiInfo;
 import com.style24.persistence.domain.GoodsSafeNo;
 import com.style24.persistence.domain.GoodsSearch;
 import com.style24.persistence.domain.GoodsStock;
+import com.style24.persistence.domain.GoodsVideo;
 import com.style24.persistence.domain.GoodsViewHst;
 import com.style24.persistence.domain.Measurement;
 import com.style24.persistence.domain.Notice;
 import com.style24.persistence.domain.ReinboundInform;
 import com.style24.persistence.domain.SizeInfo;
 import com.style24.persistence.domain.Tmtb;
-import com.style24.persistence.domain.VideoDisploc;
 
 import lombok.extern.slf4j.Slf4j;
 
@@ -208,8 +208,8 @@ public class TsfGoodsService {
 	 * @author eskim
 	 * @since 2021. 2. 9
 	 */
-	public Collection<VideoDisploc> getVideoList(String goodsCd) {
-		return goodsDao.getVideoList(goodsCd);
+	public Collection<GoodsVideo> getVideoList(GoodsVideo goodsVideo) {
+		return goodsDao.getVideoList(goodsVideo);
 	}
 
 	/**

src/main/java/com/style24/front/biz/web/TsfGoodsController.java

@@ -38,6 +38,7 @@ import com.style24.persistence.domain.Counsel;
 import com.style24.persistence.domain.Coupon;
 import com.style24.persistence.domain.Goods;
 import com.style24.persistence.domain.GoodsStock;
+import com.style24.persistence.domain.GoodsVideo;
 import com.style24.persistence.domain.Lookbook;
 import com.style24.persistence.domain.Measurement;
 import com.style24.persistence.domain.ReinboundInform;
@@ -167,7 +168,10 @@ public class TsfGoodsController extends TsfBaseController {
 		// 상품 이미지정보
 		mav.addObject("goodsImgList", goodsService.getGoodsImgList(paramsGoods));
 		// 상품 동영상정보
-		mav.addObject("goodsVideoList", goodsService.getVideoList(paramsGoods.getGoodsCd()));
+		GoodsVideo goodsVideo = new GoodsVideo();
+		goodsVideo.setGoodsCd(paramsGoods.getGoodsCd());
+		goodsVideo.setMaxRownum(1);
+		mav.addObject("goodsVideoList", goodsService.getVideoList(goodsVideo));
 		// 상품 공지
 		mav.addObject("goodsNoticeList", goodsService.getGoodsNoticeList(paramsGoods));
 
@@ -1124,7 +1128,10 @@ public class TsfGoodsController extends TsfBaseController {
 		// 상품 이미지정보
 		mav.addObject("goodsImgList", goodsService.getGoodsImgList(paramsGoods));
 		// 상품 동영상정보
-		mav.addObject("goodsVideoList", goodsService.getVideoList(paramsGoods.getGoodsCd()));
+		GoodsVideo goodsVideo = new GoodsVideo();
+		goodsVideo.setGoodsCd(paramsGoods.getGoodsCd());
+		goodsVideo.setMaxRownum(1);
+		mav.addObject("goodsVideoList", goodsService.getVideoList(goodsVideo));
 		// 상품 공지
 		mav.addObject("goodsNoticeList", goodsService.getGoodsNoticeList(paramsGoods));
 		// 상품 고시정보

src/main/java/com/style24/persistence/domain/GoodsVideo.java

@@ -0,0 +1,36 @@
+package com.style24.persistence.domain;
+
+import com.style24.persistence.TscBaseDomain;
+
+import lombok.Data;
+
+
+/**
+ * 상품 동영상 Domain
+ *
+ * @author eskim
+ * @since 2020. 11. 16
+ */
+@SuppressWarnings("serial")
+@Data
+public class GoodsVideo extends TscBaseDomain {
+
+	private Integer videoSq;
+	private String goodsCd;
+	private String videoGb;	// 비디오 구분 M: mp4, Y:유투브
+	private String kmcKey;	// 
+	private String kufKey;
+	private String dispYn;
+	
+	private int maxRownum;
+	
+//	private String brandEnm; // 브랜드영문명
+//	private String goodsNm;
+//	private String goodsNum;
+//	private String supplyGoodsCd;
+//	private String excelFileNm;
+//	private String stDate;
+//	private String edDate;
+	
+
+}

src/main/java/com/style24/persistence/domain/VideoDisploc.java

@@ -1,27 +0,0 @@
-package com.style24.persistence.domain;
-
-import com.style24.persistence.TscBaseDomain;
-
-import lombok.Data;
-
-/**
- * 동영상 Domain
- *
- * @author eskim
- * @since 2021. 2. 9
- */
-@SuppressWarnings("serial")
-@Data
-public class VideoDisploc extends TscBaseDomain {
-
-	private int videoSq;
-	private String videoGb;
-	private String videoVal;
-
-	private String displocGb;
-	private String displocVal;
-	private String delYn;
-
-	private String imgType;
-	private String imgPath1;
-}

src/main/java/com/style24/persistence/mybatis/shop/TsfGoods.xml

@@ -390,19 +390,21 @@
 	</select>
 	
 	<!-- 상품 동영상정보 -->
-	<select id="getVideoList" parameterType="String" resultType="VideoDisploc">
+	<select id="getVideoList" parameterType="GoodsVideo" resultType="GoodsVideo">
 		/* TsfGoods.getVideoList */
 		SELECT A.VIDEO_SQ
-		     , A.DISPLOC_VAL
-		     , B.VIDEO_GB
-		     , B.VIDEO_VAL
-		FROM TB_VIDEO_DISPLOC A
-		INNER JOIN TB_VIDEO B ON A.VIDEO_SQ = B.VIDEO_SQ
-		                      AND B.DISP_YN = 'Y'
-		WHERE A.DISPLOC_GB = 'G'
-		AND A.DISPLOC_VAL = #{goodsCd}
+		     , A.GOODS_CD
+		     , A.VIDEO_GB
+		     , A.KMC_KEY
+		     , A.KUF_KEY
+		     , A.DISP_YN
+		FROM TB_GOODS_VIDEO A
+		WHERE A.GOODS_CD = #{goodsCd} 
 		AND A.DISP_YN = 'Y'
 		ORDER BY A.VIDEO_SQ DESC
+		<if test="maxRownum != null and maxRownum > 0">
+		LIMIT #{maxRownum}
+		</if>
 	</select>
 	
 	<!-- 상품 고시정보 목록 -->

src/main/webapp/WEB-INF/views/web/goods/GoodsDetailFormWeb.html

@@ -31,32 +31,68 @@
 			<div class="cont_body">
 				<!-- CONT-BODY -->
 				<div class="item_detail">
-					<div class="area_pic">
-						<div class="thumb_nav_wrap"  th:if="${goodsImgList != null and !goodsImgList.empty}" >
+					<div class="area_pic" th:if="${(goodsImgList != null and !goodsImgList.empty) or (goodsVideoList != null and !goodsVideoList.empty)}" 
+										th:with="videoYn=${(goodsVideoList != null and !goodsVideoList.empty)? 'Y' :'N'}">
+						<div class="thumb_nav_wrap" >
 							<div class="thumbnav">
-									<div class="swiper-container">
-										<div class="swiper-wrapper">
-										<th:block th:each="goodsImg, status : ${goodsImgList}">
-											<div class="swiper-slide" th:classappend="${status.first}? 'on' : ''" 
-													th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_S1.') 
-															or #strings.contains(goodsImg.sysImgNm,'_L1.')
-															or #strings.contains(goodsImg.sysImgNm,'_L2.'))}">
-											<a th:href="${'#navLocate'+ status.count}"><span class="thumb"><img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=48'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"></span></a></div>
-										</th:block>	
+								<div class="swiper-container" >
+									<div class="swiper-wrapper">
+									<th:block th:each="goodsVideo, status : ${goodsVideoList}">
+										<div class="swiper-slide" th:classappend="${status.first}? 'on' : ''" >
+											<a th:href="${'#navLocate'+ status.count}">
+												<span class="thumb  mov">
+												<th:block th:if="${goodsVideo.videoGb == 'Y'}">
+												<img th:src="${'https://img.youtube.com/vi/'+goodsVideo.kmcKey+'/default.jpg'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
+												</th:block>
+												<th:block th:unless="${goodsVideo.videoGb == 'Y'}">
+												</th:block>
+												</span>
+											</a>
 										</div>
+									</th:block>
+									<th:block th:each="goodsImg, status : ${goodsImgList}">
+										<div class="swiper-slide" th:classappend="${status.first and videoYn == 'N'}? 'on' : ''"  th:with="count=${(videoYn == 'Y')?  (status.count +1): status.count }"
+																th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_S1.') 
+																		or #strings.contains(goodsImg.sysImgNm,'_L1.')
+																		or #strings.contains(goodsImg.sysImgNm,'_L2.'))}">
+											<a th:href="${'#navLocate'+ count}">
+												<span class="thumb">
+												<img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=48'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"></span>
+											</a>
+										</div>
+									</th:block>	
 									</div>
-									<div class="swiper-button-next"></div>
-									<div class="swiper-button-prev"></div>
 								</div>
+								<div class="swiper-button-next"></div>
+								<div class="swiper-button-prev"></div>
+							</div>
 						</div>
-						<div class="thumb_list_wrap"  th:if="${goodsImgList != null and !goodsImgList.empty}" >
+						<div class="thumb_list_wrap">
 							<ul>
-								<th:block th:each="goodsImg, status : ${goodsImgList}">
-								<li th:id="${'navLocate'+ status.count}"  th:classappend="${status.first}? 'on' : ''" 
+								<th:block th:each="goodsVideo, status : ${goodsVideoList}">
+								<li th:id="${'navLocate'+ status.count}"  th:classappend="${status.first}? 'on' : ''">
+									<div class="movbox">
+										<th:block th:if="${goodsVideo.videoGb == 'Y'}">
+										<iframe width="100%" height="100%" th:src="${'https://www.youtube.com/embed/'+goodsVideo.kmcKey+'?rel=0&autoplay=1&mute=1'}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+										</th:block>
+										<th:block th:unless="${goodsVideo.videoGb == 'Y'}">
+										</th:block>
+									</div>
+								</li>
+								</th:block>
+								<th:block th:each="goodsImg, status : ${goodsImgList}" >
+								<th:block th:with="count=${(videoYn == 'Y')?  (status.count +1): status.count }">
+								<li th:id="${'navLocate'+ count}"  th:classappend="${status.first and videoYn == 'N'}? 'on' : ''" 
 									th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_S1.') 
 												or #strings.contains(goodsImg.sysImgNm,'_L1.')
 												or #strings.contains(goodsImg.sysImgNm,'_L2.'))}">
-									<a href="javascript:void(0);"><span class="thumb"><img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"></span></a></li>
+									<a href="javascript:void(0);">
+										<span class="thumb">
+											<img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
+										</span>
+									</a>
+								</li>
+								</th:block>
 								</th:block>
 							</ul>
 						</div>
@@ -430,13 +466,24 @@
 				</div>
 				<!-- //상품설명 노출 -->
 				<!-- 관리자 에디터입력 내용   공지 html -->
+				<div class="mdhtml_box">
 					<th:block th:if="${goodsNoticeList != null and !goodsNoticeList.empty}" >
-				<div class="mdhtml_box" th:each="goodsNotice, status : ${goodsNoticeList}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsNotice.noticeContent))}"></div>
+				<th:block  th:each="goodsNotice, status : ${goodsNoticeList}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsNotice.noticeContent))}"></th:block >
 					</th:block>
 				<!-- 관리자 에디터입력 내용   공지 html -->
+				<th:block th:each="goodsVideo, status : ${goodsVideoList}">
+				<div class="movblock">
+					<th:block th:if="${goodsVideo.videoGb == 'Y'}">
+					<iframe th:src="${'https://www.youtube.com/embed/'+goodsVideo.kmcKey+'?rel=0'}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+					</th:block>
+					<th:block th:unless="${goodsVideo.videoGb == 'Y'}">
+					</th:block>
+				</div>
+				</th:block>
+				
 				<!-- 관리자 에디터입력 내용 노출  상단 html -->
-				<div class="mdhtml_box" th:if="${goodsInfo.goodsTopDesc != null  and !goodsInfo.goodsTopDesc.empty}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTopDesc))}"></div>
-					
+				<th:block  th:if="${goodsInfo.goodsTopDesc != null  and !goodsInfo.goodsTopDesc.empty}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTopDesc))}"></th:block >
+				</div>	
 				<!-- 착용컷 노출 -->
 				<div class="view_outfit_box" th:if="${#strings.contains(goodsImgList,'_M1.') 
 													or #strings.contains(goodsImgList,'_M2.')