메인전시관리 임시커밋

src/main/java/com/style24/admin/biz/dao/TsaDisplayDao.java

@@ -217,4 +217,28 @@ public interface TsaDisplayDao {
 	 */
 	void updateCategoryGoodsDispOrd(CategoryGoods categoryGoods);
 
+	/**
+	 * 메인전시관리 카테고리 목록
+	 * @param category - 카테고리 정보
+	 * @return
+	 * @author bin2107
+	 * @since 2021. 2. 22
+	 */
+	Collection<Category> getMainCategoryList(Category category);
+
+	/**
+	 * 메인전시 레이아웃 목록
+	 * @return
+	 * @author bin2107
+	 * @since 2021. 2. 22
+	 */
+	Collection<MainDisplay> getMainLayoutList(MainDisplay mainDisplay);
+
+	/**
+	 * 메인전시 레이아웃 삭제
+	 * @return
+	 * @author bin2107
+	 * @since 2021. 2. 22
+	 */
+	void deleteMainLayout(MainDisplay mainDisplay);
 }

src/main/java/com/style24/admin/biz/service/TsaDisplayService.java

@@ -405,4 +405,46 @@ public class TsaDisplayService {
 		}
 	}
 
+	/**
+	 * 메인전시관리 카테고리 목록
+	 * @param category - 카테고리 정보
+	 * @return
+	 * @author bin2107
+	 * @since 2021. 2. 22
+	 */
+	public Collection<Category> getMainCategoryList(Category category) {
+		return displayDao.getMainCategoryList(category);
+	}
+
+	/**
+	 * 메인전시 레이아웃 목록
+	 * @return
+	 * @author bin2107
+	 * @since 2021. 2. 22
+	 */
+	public Collection<MainDisplay> getMainLayoutList(MainDisplay mainDisplay) {
+		return displayDao.getMainLayoutList(mainDisplay);
+	}
+
+	/**
+	 * 메인전시 레이아웃 저장
+	 * @return
+	 * @author bin2107
+	 * @since 2021. 2. 22
+	 */
+	@Transactional("shopTxnManager")
+	public void saveMainLayout(Collection<MainDisplay> mainDisplayList) {
+		for(MainDisplay mainDisplay: mainDisplayList){
+			log.info("mainDisplay.getContentsLoc()::::{}",mainDisplay.getContentsLoc());
+			if(mainDisplay != null && mainDisplay.getContentsLoc() != null){
+				displayDao.deleteMainLayout(mainDisplay);
+				break;
+			}
+		}
+
+		for(MainDisplay mainDisplay: mainDisplayList){
+			log.info("mainDisplay.getCateNo()::::{}",mainDisplay.getCateNo());
+
+		}
+	}
 }

src/main/java/com/style24/admin/biz/web/TsaDisplayController.java

@@ -4,6 +4,7 @@ import java.util.Collection;
 
 import com.gagaframework.web.parameter.GagaMap;
 import com.gagaframework.web.util.GagaDateUtil;
+import com.style24.admin.biz.service.TsaBusinessService;
 import com.style24.admin.support.security.session.TsaSession;
 import com.style24.persistence.TscPageRequest;
 import com.style24.persistence.domain.*;
@@ -43,6 +44,9 @@ public class TsaDisplayController extends TsaBaseController {
 	@Autowired
 	private TsaDisplayService displayService;
 
+	@Autowired
+	private TsaBusinessService businessService;
+
 	/**
 	 * 카테고리관리 화면
 	 * @return
@@ -485,4 +489,64 @@ public class TsaDisplayController extends TsaBaseController {
 		displayService.updateCategoryGoodsDispOrd(categoryGoods);
 		return super.ok(message.getMessage("SUCC_0009"));
 	}
+
+	/**
+	 * 메인전시관리 화면
+	 * @return
+	 * @author bin2107
+	 * @since 2021. 2. 22
+	 */
+	@GetMapping("/main/form")
+	public ModelAndView mainListForm() {
+		ModelAndView mav = new ModelAndView();
+		Category category = new Category();
+		Brand brand = new Brand();
+		category.setClsLvl(1);
+		mav.addObject("mainCategoryList", displayService.getMainCategoryList(category));
+		brand.setUseYn("Y");
+		brand.setSelfYn("Y");
+		mav.addObject("brandCdList", businessService.getBrandList(brand));
+		mav.addObject("contentsLocList", rendererService.getAvailCommonCodeList("G028"));
+
+		mav.setViewName("display/MainListForm");
+		return mav;
+	}
+
+	/**
+	 * 메인전시 카테고리 목록
+	 * @return
+	 * @author bin2107
+	 * @since 2021. 2. 22
+	 */
+	@PostMapping("/main/category/list")
+	@ResponseBody
+	public Collection<Category> getMainCategoryList(@RequestBody Category category) {
+		return displayService.getMainCategoryList(category);
+	}
+
+	/**
+	 * 메인전시 레이아웃 목록
+	 * @return
+	 * @author bin2107
+	 * @since 2021. 2. 22
+	 */
+	@PostMapping("/main/layout/list")
+	@ResponseBody
+	public Collection<MainDisplay> getMainLayoutList(@RequestBody MainDisplay mainDisplay) {
+		return displayService.getMainLayoutList(mainDisplay);
+	}
+
+	/**
+	 * 메인전시 레이아웃 저장
+	 * @return
+	 * @author bin2107
+	 * @since 2021. 2. 22
+	 */
+	@PostMapping("/main/layout/save")
+	@ResponseBody
+	public GagaResponse saveMainLayout(@RequestBody Collection<MainDisplay> mainDisplayList) {
+		log.info("controller saveMainLayout mainDisplayList::: {}",mainDisplayList);
+		displayService.saveMainLayout(mainDisplayList);
+		return super.ok(message.getMessage("SUCC_0001"));
+	}
 }

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

@@ -35,7 +35,7 @@ public class Category extends TscBaseDomain {
 	private String dispYn;		// 노출여부
 	private String useYn;		// 사용여부
 
-//	private String clocPrefix;      // 메인전시 컨텐츠 위치 프리픽스
+	private String clocPrefix;      // 메인전시 컨텐츠 위치 프리픽스
 //	private String brandGrpNm;
 
 	// 검색조건

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

@@ -0,0 +1,22 @@
+package com.style24.persistence.domain;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
+import com.style24.persistence.TscBaseDomain;
+import lombok.Data;
+import sun.applet.Main;
+
+import java.util.List;
+
+@SuppressWarnings("serial")
+@Data
+public class MainDisplay extends TscBaseDomain {
+    private Integer cateNo;
+    private String contentsLoc;
+    private Integer dispOrd;
+    private String contentsYn;
+    private Integer colCnt;
+    private Integer colNo;
+    private String orgFileNm;
+    private String sysFileNm;
+    private String newSysFileNm;
+}

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

@@ -1159,4 +1159,64 @@
 		WHERE	CATE_NO = #{cateNo}
 		AND 	GOODS_CD = #{goodsCd}
 	</update>
+
+	<!-- 메인전시관리 카테고리 리스트 -->
+	<select id="getMainCategoryList" parameterType="Category" resultType="Category">
+		/* TsaDisplay.getMainCategoryList */
+		SELECT	CATE_NO
+			 ,CATE_NM
+			 ,DISP_ORD
+			 ,LEAF_YN
+			 ,CLOC_PREFIX
+		FROM(
+		<choose>
+			<when test="clsLvl==1">
+				SELECT	CATE1_NO	AS CATE_NO
+						,CATE1_NM	AS CATE_NM
+						,MIN(DISP_ORD) AS DISP_ORD
+						,MIN(CASE WHEN LEAF_CATE_NO = CATE1_NO THEN 'Y' ELSE 'N' END) AS LEAF_YN
+						,CLOC_PREFIX
+				FROM	VW_MAIN_CATEGORY
+				GROUP BY CATE1_NO, CATE1_NM, CLOC_PREFIX
+			</when>
+			<when test="clsLvl==2">
+				SELECT	CATE2_NO	AS CATE_NO
+						,CATE2_NM	AS CATE_NM
+						,MIN(DISP_ORD) AS DISP_ORD
+						,MIN(CASE WHEN LEAF_CATE_NO = CATE2_NO THEN 'Y' ELSE 'N' END) AS LEAF_YN
+						,CLOC_PREFIX
+				FROM	VW_MAIN_CATEGORY
+				WHERE	CATE1_NO = #{cateNo}
+				GROUP BY CATE2_NO, CATE2_NM, CLOC_PREFIX
+			</when>
+		</choose>
+		) A
+		ORDER BY DISP_ORD, CATE_NO
+	</select>
+
+	<!-- 메인전시관리 레이아웃 -->
+	<select id="getMainLayoutList" parameterType="MainDisplay" resultType="MainDisplay">
+		/* TsaDisplay.getMainLayoutList */
+		SELECT	CATE_NO
+				,CONTENTS_LOC
+				,DISP_ORD
+				,CONTENTS_YN
+				,COL_CNT
+				,COL_NO
+				,ORG_FILE_NM
+				,SYS_FILE_NM
+		FROM	TB_MAIN_LAYOUT
+		WHERE	CATE_NO = #{cateNo}
+		ORDER BY DISP_ORD, COL_NO
+	</select>
+
+	<!-- 메인전시관리 삭제 -->
+	<delete id="deleteMainLayout" parameterType="MainDisplay">
+		/* TsaDisplay.deleteMainLayout */
+		DELETE FROM TB_MAIN_LAYOUT
+		WHERE CATE_NO = #{cateNo}
+		<if test='contentsLoc!=null and contentsLoc!=""'>
+			AND SUBSTR(CONTENTS_LOC, 0, 4) = SUBSTR(#{contentsLoc}, 0, 4)
+		</if>
+	</delete>
 </mapper>

src/main/webapp/WEB-INF/views/display/MainListForm.html

@@ -0,0 +1,533 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : MainListForm.html
+ * @desc    : 메인전시관리 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.2.22    bin2107     최초 작성
+ *******************************************************************************
+ -->
+	<div id="main">
+		<!-- 메인타이틀 영역 -->
+		<div class="main-title">
+		</div>
+		<!-- //메인타이틀 영역 -->
+		
+		<!-- 메뉴 설명 -->
+		<div class="infoBox menu-desc">
+		</div>
+		<!-- //메뉴 설명 -->
+		
+		<!-- 검색조건 영역 START -->
+		<div class="panelStyle">
+			<form id="searchForm" name="searchForm" action="#">
+				<table class="frmStyle">
+					<colgroup>
+						<col style="width: 25%;"/>
+						<col style="width: 25%;"/>
+						<col style="width: 25%;"/>
+						<col style="width: 25%;"/>
+					</colgroup>
+					<tr>
+						<th>대분류</th>
+						<td>
+							<select name="cate1No" id="cate1No" onchange="fnGetMainDisplayList('cate1');">
+								<option value="">[선택]</option>
+								<option th:if="${mainCategoryList}" th:each="oneData, status:${mainCategoryList}" th:value="${oneData.cateNo+','+oneData.leafYn}" th:text="${'['+oneData.cateNo+']'+oneData.cateNm}"></option>
+							</select>
+						</td>
+						<th>중분류</th>
+						<td>
+							<select name="cate2No" id="cate2No" onchange="fnGetMainDisplayList('cate2');">
+								<option value="">[선택]</option>
+							</select>
+						</td>
+					</tr>
+				</table>
+			</form>
+		</div>
+		<!-- 검색조건 영역 END -->
+
+		<!-- 리스트 영역 START -->
+		<div class="panelStyle">
+			<div class="boxTitle"></div>
+			<form id="mainDisplayForm">
+				<ul class="boxContent">
+					<li class="boxContentTop">
+						<div class="panelContent" style="overflow: hidden;">
+							<th:block th:if="${sessionInfo.roleCd == 'G001_0000'}">
+								<ul class="panelBar">
+									<li>
+										<span class="btnLeft" style="">
+											<span style="padding:5.5px 15px; background:#d8eafc !important; border-top:1px solid #ddd; border-bottom:0.5px solid #dae0fd; font-weight: bold;">추가 열</span>
+											<select id="addColCnt" required="required">
+												<th:block th:each="num: ${#numbers.sequence(1,10)}">
+												<option th:value="${num}"  th:text="${num}"></option>
+												</th:block>
+											</select>
+											<button type="button" class="btn btn-base btn-lg" id="btnAddRow">행 추가</button>
+										</span>
+									</li>
+									<li class="right">
+										<span class="btnRight" style="">
+											<span><button type="button" class="btn btn-success btn-lg" id="btnSave">레이아웃 저장</button></span>
+										</span>
+									</li>
+								</ul>
+							</th:block>
+							<ul class="panelBar">
+								<th:block th:if="${sessionInfo.roleCd == 'G001_0000'}">
+									<li>
+										<span class="cBlue">* 마우스 드래그&드랍으로 레이아웃 순서 변경 가능하며 X 버튼으로 삭제 가능합니다.</span>
+									</li>
+								</th:block>
+								<li id="viewUl">
+
+								</li>
+								<th:block th:if="${sessionInfo.roleCd == 'G001_0000'}">
+									<li class="right">
+										<span class="cRed">* 레이아웃 저장 버튼 클릭 시 수정 및 삭제 된 레이아웃이 즉시 적용 됩니다.</span>
+									</li>
+								</th:block>
+							</ul>
+						</div>
+						<table class="frmStyle" id="mainSortable">
+							<tbody>
+								<tr style="height:150px;">
+									<td colspan="8" style="text-align: center">
+										<span>카테고리를 선택해 주세요.</span>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</li>
+				</ul>
+			</form>
+		</div>
+		<!-- 리스트 영역 END -->
+	</div>
+
+<script th:inline="javascript">
+/*<![CDATA[*/
+	var roleCd = [[${sessionInfo.roleCd}]];
+	var tdWidth = 800;
+	//var mainCategoryList = [[${mainCategoryList}]];
+	var brandCdList = [[${brandCdList}]];
+	var contentsLocArr = gagajf.convertToArray([[${contentsLocList}]]);
+
+	/**
+	* 대분류/중분류 선택시
+	*/
+	var fnGetMainDisplayList = function (cate){
+		if(cate=='cate1'){
+			$("#cate2No").html('<option value="">[선택]</option>');
+		}
+
+		var val = $("#cate1No").val();
+		if(gagajf.isNull(val)||val.split(',')[0]=='0'){
+			var html = '<tbody><tr style="height:170px;"><td colspan="8" style="text-align:center;"><span>카테고리를 선택해 주세요</span></td></tr></tbody>';
+			$("#mainSortable").html(html);
+		}else{
+			$("#mainSortable").html('');
+			if(val.split(',')[1]=='N' && gagajf.isNull($("#cate2No").val())){
+				$("cate2No").html('<option value="">[선택]</option>');
+				var data = {
+					cateNo : val.split(',')[0]
+					,clsLvl : 2
+				};
+				var jsonData = JSON.stringify(data);
+				gagajf.ajaxJsonSubmit('/display/main/category/list', jsonData, fnCate2NoCallBack);
+			}else{
+				var cateNo = val.split(',')[0];
+				if(!gagajf.isNull($("#cate2No").val())){
+					cateNo = $("#cate2No").val().split(',')[0];
+				}
+				var data = {
+					cateNo : cateNo
+				};
+				var jsonData = JSON.stringify(data);
+				// 레이아웃 조회 로직
+				gagajf.ajaxJsonSubmit('/display/main/layout/list', jsonData, fnLayoutCallBack);
+			}
+		}
+	}
+
+	/**
+	 * 레이아웃 조회
+	 */
+	var fnLayoutCallBack = function (result){
+		var html = '';
+		var imgSrc = '';
+		var orgFileNm = '';
+		var sysFileNm = '';
+		var onOff = 'off';
+		var cate1No = $("#cate1No").val().split(',')[0];
+
+		for(var i=0; i<result.length; i++){
+			var colCnt = result[i].colCnt;
+			var colNo = result[i].colNo
+			var colspan = parseInt(5/Number(colCnt), 10);
+			var colspanAdd = 5 - (colspan * colCnt);
+			var tdSize = 10;
+
+			if(colCnt>5){
+				tdSize = parseInt((colCnt/2), 10)+1;
+				colspan = parseInt(5/(colCnt/2), 10);
+				colspanAdd = 5 - (colspan * parseInt((colCnt/2), 10));
+			}
+
+			if(colCnt==1 || colNo==1){
+				html += '<tbody><tr style="height:170px;">';
+			}else if(colNo==tdSize){
+				html += '<tr style="height:170px;">';
+			}
+
+			if(colNo>=tdSize){
+				colspanAdd = (5 - (colspan * Math.round(colCnt/2))) + parseInt(colCnt/2, 10);
+			}
+			html += '<td colspan="';
+			colspanAdd -= (colNo-1);
+			if(colspanAdd>0){
+				html += colspan + 1;
+			}else{
+				html += colspan;
+			}
+
+			var maxWidth = parseInt(tdWidth/Number(colCnt), 10);
+			if(colCnt>5){
+				maxWidth = parseInt(tdWidth/(Number(colCnt)/tdSize), 10);
+			}
+			html += '" style="text-align:center; max-width:'+maxWidth+'px;">';
+			html += '<div><span style="font-weight:bold">'+result[i].contentsLoc+'</span></div><div><span>[ '+gagaAgGrid.lookupValue(contentsLocArr, result[i].contentsLoc)+' ]</span></div>';
+			if(result[i].contentsYn=='C'){
+				html += '<button type="button" class="btn btn-success btn-lg" onclick="fnChangeContents(this);">수정</button>';
+				html += '<button type="button" class="btn btn-default btn-lg" onclick="fnUpdateContents(\''+result[i].contentsLoc+'\');">적용</button>';
+			}else if(result[i].contentsYn=='G' || result[i].contentsYn=='A'){
+				if(result[i].contentsYn=='A'){
+					html += '<button type="button" class="btn btn-success btn-lg" onclick="fnChangeContents(this);">수정</button>';
+					html += '<button type="button" class="btn btn-default btn-lg" onclick="fnUpdateContents(\''+result[i].contentsLoc+'\');">적용</button>';
+					html += '<br/>';
+				}
+				html += '<button type="button" class="btn btn-success btn-lg" onclick="fnSearchCategory(\''+result[i].contentsLoc+'\');">상품관리</button>';
+			}
+			html += '<input type="hidden" name="contentsLoc" value="'+result[i].contentsLoc+'"/>';
+			html += '<input type="hidden" name="colCnt" value="'+result[i].colCnt+'"/>';
+			html += '<input type="hidden" name="colNo" value="'+result[i].colNo+'"/>';
+			html += '<input type="hidden" name="contentsYn" value="'+result[i].contentsYn+'"/>';
+			html += '</td>';
+			if(colNo=='1'){
+				if(result[i].orgFileNm!=null && result[i].orgFileNm!='null' && result[i].orgFileNm!="" ){
+					orgFileNm = result[i].orgFileNm;
+					sysFileNm = result[i].sysFileNm;
+					imgSrc = $("#uploadDefaultUrl").val()+orgFileNm;
+					onOff = 'on';
+				}else{
+					orgFileNm = '';
+					sysFileNm = '';
+					imgSrc = '';
+					onOff = 'off';
+				}
+			}
+			if(tdSize==10){
+				if(colCnt==1 || colNo==colCnt){
+					html += '<td name="imgTd" style="width:300px;">';
+					html += '<div id="imgView_'+i+'" class="'+onOff+'">';
+					html += '<img id="bannerPreViewUrl_'+i+'" src="'+imgSrc+'" style="width:300px; height:120px"  onclick="cfnOpenImagePreViewPopup(\'bannerPreimgViewPop\',\''+imgSrc+'\');"/>';
+					html += '</div>';
+					html += '<div class="uFile w300">';
+					html += '<input id="file_'+i+'" name="file" type="file" class="uFileInput w300" onchange="fnFileUpload(this, '+i+');"/>';
+					html += '<label for="file_'+i+'" class="uFileLabel">파일선택</label>';
+					html += '<input type="hidden" name="orgFileNm" value="'+orgFileNm+'"/>';
+					html += '<input type="hidden" name="sysFileNm" value="'+sysFileNm+'"/>';
+					html += '<input type="hidden" name="newSysFileNm" value=""/>';
+					html += '</div>';
+					html += '</td>';
+					html += '<td name="deleteTd" style="max-width:50px;">';
+					if(roleCd=='G001_0000'){
+						html += '<button type="button" class="btn icn" onclick="fnDeleteRow(this);"><i class="fa fa-times" aria-hidden="true"></i></button>';
+					}
+					html += '</td></tr></tbody>';
+				}
+			}else{
+				if(colNo==(tdSize-1)){
+					html += '<td name="imgTd" rowspan="2" style="width:300px;">';
+					html += '<div id="imgView_'+i+'" class="'+onOff+'">';
+					html += '<img id="bannerPreViewUrl_'+i+'" src="'+imgSrc+'" style="width:300px; height:120px"  onclick="cfnOpenImagePreViewPopup(\'bannerPreimgViewPop\',\''+imgSrc+'\');"/>';
+					html += '</div>';
+					html += '<div class="uFile w300">';
+					html += '<input id="file_'+i+'" name="file" type="file" class="uFileInput w300" onchange="fnFileUpload(this, '+i+');"/>';
+					html += '<label for="file_'+i+'" class="uFileLabel">파일선택</label>';
+					html += '<input type="hidden" name="orgFileNm" value="'+orgFileNm+'"/>';
+					html += '<input type="hidden" name="sysFileNm" value="'+sysFileNm+'"/>';
+					html += '<input type="hidden" name="newSysFileNm" value=""/>';
+					html += '</div>';
+					html += '</td>';
+					html += '<td name="deleteTd" rowspan="2" style="max-width:50px;">';
+					if(roleCd=='G001_0000'){
+						html += '<button type="button" class="btn icn" onclick="fnDeleteRow(this);"><i class="fa fa-times" aria-hidden="true"></i></button>';
+					}
+					html += '</td></tr>';
+				}else if(colNo==colCnt){
+					html += '</tr></tbody>';
+				}
+			}
+		}
+
+		$("#mainSortable").html(html);
+		if(roleCd=='G001_0000'){
+			$("#mainSortable").sortable();
+		}
+	}
+
+	/**
+	 * 중분류 리스트
+	 */
+	var fnCate2NoCallBack = function (result){
+		var html = '<option value="">[선택]</option>';
+		for (var i=0; i<result.length; i++){
+			html += '<option value="'+result[i].cateNo+','+result[i].leafYn+'">['+result[i].cateNo+']'+result[i].cateNm+'</option>';
+		}
+		$("#cate2No").html(html);
+		// grid 높이 조절
+		//uifnFitGrid();
+	}
+
+	/**
+	* 레이아웃 행추가 버튼
+	*/
+	$("#btnAddRow").on("click", function (){
+		console.log('[행추가 start]');
+		var val = $("#cate1No").val();
+		var cate1No = val.split(',')[0];
+		//console.log('val>>'+val);
+		//console.log('cate1No>>'+cate1No);
+		//console.log('leafYn>>>'+val.split(',')[1]);
+
+		if(gagajf.isNull(val) || cate1No=='0' || val.split(',')[1]=='N' && gagajf.isNull($("#cate2No").val())){
+			mcxDialog.alert('카테고리를 선택해 주세요.');
+			return;
+		}
+
+		var html = '';
+		var colCnt = $("#addColCnt").val();
+		var colspan = parseInt(5/Number(colCnt), 10);
+		var tdSize = 10;
+		if(colCnt>5){
+			tdSize = parseInt(colCnt/2, 10) + 1;
+			colspan = parseInt(5/parseInt(colCnt/2, 10), 10);
+		}
+		var contentsLocHtml = '<option value="">[선택]</option>';
+		var contentsLocList = [[${contentsLocList}]];
+		var clocPrefix ='';
+		var mainCategoryList = [[${mainCategoryList}]];
+
+		$.each(mainCategoryList, function(idx, data) {
+			if(cate1No==data.cateNo){
+				clocPrefix = data.clocPrefix;
+			}
+		});
+
+		if(cate1No=='100'){
+			contentsLocHtml += '<option value="SGNB001">[SGNB001] STYLE24MALL > GNB > TOP배너</option>';
+			contentsLocHtml += '<option value="STAB001">[STAB001] STYLE24MALL > GNB > 카테고리탭</option>';
+			contentsLocHtml += '<option value="SKEY001">[SKEY001] STYLE24MALL > GNB > 검색어</option>';
+		}
+		if(cate1No=='101'){
+			contentsLocHtml += '<option value="SGNB002">[SGNB001] STYLE24MALL > GNB > TOP배너(모바일)</option>';
+			contentsLocHtml += '<option value="STAB001">[STAB001] STYLE24MALL > GNB > 카테고리탭</option>';
+			contentsLocHtml += '<option value="SKEY001">[SKEY001] STYLE24MALL > GNB > 검색어</option>';
+		}
+		for(var i=0; i<contentsLocList.length; i++){
+			var contentsLocCd = contentsLocList[i].cd;
+			contentsLocCd = contentsLocCd.replace(/[0-9]/g, "");
+			if(contentsLocCd==clocPrefix){
+				contentsLocHtml += '<option value="'+contentsLocList[i].cd+'">['+contentsLocList[i].cd+'] '+contentsLocList[i].cdNm+'</option>';
+			}
+		}
+
+		for(var j=0; j<colCnt; j++){
+			var colNo = (j+1);
+			var colspanAdd = 5 - (colspan * colCnt);
+			var maxWidth = parseInt(tdWidth/Number(colCnt), 10);
+			if(colCnt>5){
+				maxWidth = parseInt(tdWidth/(Number(colCnt)/tdSize), 10);
+				colspanAdd = 5 - (colspan * parseInt(colCnt/2, 10));
+			}
+			if(colCnt==1 || colNo==1){
+				html += '<tbody><tr style="height:170px;">';
+			}else if(colNo==tdSize){
+				html += '<tr style="height:170px;">';
+			}
+			if(colNo>=tdSize){
+				colspanAdd = (5 - (colspan * Math.round(colCnt/2))) + parseInt(colCnt/2, 10);
+			}
+			html += '<td colspan="';
+			colspanAdd -= j;
+			if(colspanAdd>0){
+				html += colspan + 1;
+			}else{
+				html += colspan;
+			}
+
+			html += '" style="text-align:center; max-width:'+maxWidth+'px;">';
+			html += '<div>';
+			html += '<select name="contentsLocEdit" required="required" style="max-width:80px;" data-valid-name="컨텐츠 위치">'+contentsLocHtml+'</select>';
+			html += '</div>';
+			html += '<select name="contentsYn" required="required" style="max-width:80px;" data-valid-name="컨텐츠 타입"><option value="C">[C] 컨텐츠</option><option value="G">[G] 상품</option><option value="A">[A] 컨텐츠 + 상품</option></select>';
+			html += '<input type="hidden" name="contentsLoc" value=""/>';
+			html += '<input type="hidden" name="colCnt" value="'+colCnt+'"/>';
+			html += '<input type="hidden" name="colNo" value="'+colNo+'"/>';
+			html += '<input type="hidden" name="contentsYn" value=""/>';
+			html += '</td>';
+			var i = $("#mainSortable tbody").length;
+			if(tdSize==10){
+				if(colCnt==1 || colNo==colCnt){
+					html += '<td name="imgTd" style="width:300px;">';
+					html += '<div class="uFile w300">';
+					html += '<input id="file_'+i+'" name="file" type="file" class="uFileInput w300" onchange="fnFileUpload(this, '+i+');"/>';
+					html += '<label for="file_'+i+'" class="uFileLabel">파일선택</label>';
+					html += '<input type="hidden" name="orgFileNm"/>';
+					html += '<input type="hidden" name="sysFileNm"/>';
+					html += '<input type="hidden" name="newSysFileNm"/>';
+					html += '</div>';
+					html += '<div id="imgView_'+i+'" class="off">';
+					html += '<img id="bannerPreViewUrl_'+i+'" src="" style="width:300px; height:120px"/>';
+					html += '</div>';
+					html += '</td>';
+					html += '<td name="deleteTd" style="max-width:50px;">';
+					if(roleCd=='G001_0000'){
+						html += '<button type="button" class="btn icn" onclick="fnDeleteRow(this);"><i class="fa fa-times" aria-hidden="true"></i></button>';
+					}
+					html += '</td></tr><tbody>';
+				}
+			}else{
+				if(colNo==(tdSize-1)){
+					html += '<td name="imgTd" rowspan="2" style="width:300px;">';
+					html += '<div class="uFile w300">';
+					html += '<input id="file_'+i+'" name="file" type="file" class="uFileInput w300" onchange="fnFileUpload(this, '+i+');"/>';
+					html += '<label for="file_'+i+'" class="uFileLabel">파일선택</label>';
+					html += '<input type="hidden" name="orgFileNm"/>';
+					html += '<input type="hidden" name="sysFileNm"/>';
+					html += '<input type="hidden" name="newSysFileNm" value=""/>';
+					html += '</div>';
+					html += '<div id="imgView_'+i+'" class="off">';
+					html += '<img id="bannerPreViewUrl_'+i+'" src="" style="width:300px; height:120px"/>';
+					html += '</div>';
+					html += '</td>';
+					html += '<td name="deleteTd" rowspan="2" style="max-width:50px;">';
+					if(roleCd=='G001_0000'){
+						html += '<button type="button" class="btn icn" onclick="fnDeleteRow(this);"><i class="fa fa-times" aria-hidden="true"></i></button>';
+					}
+					html += '</td></tr>';
+				}else if(colNo==colCnt){
+					html += '</tr></tbody>';
+				}
+			}
+		}
+		$("#mainSortable").prepend(html);
+		if(roleCd=='G001_0000'){
+			$("#mainSortable").sortable();
+		}
+		//uifnFitGrid();
+	});
+
+	/**
+	 * 레이아웃 저장
+	 */
+	$("#btnSave").on("click",function(){
+		var val = $("#cate1No").val();
+		if(gagajf.isNull(val) || (val.split(',')[1]=='N' && gagajf.isNull($("#cate2No").val())) ){
+			mcxDialog.alert('카테고리를 선택해 주세요.');
+			return;
+		}
+		if(!gagajf.validation("#mainDisplayForm")){
+			return;
+		}
+		var cateNo = '';
+		var cateNm = '';
+		if(val.split(',')[1]=='Y'){
+			cateNo = val.split(',')[0];
+		}else{
+			cateNo = $("#cate2No").val().split(',')[0];
+		}
+		var dataArr = [];
+		var contentLocArr = [];
+		var contentLocCheck = true;
+		$("#mainSortable tbody").each(function(ind){
+			var orgFileNm = $(this).find('input:hidden[name="orgFileNm"]').val();
+			var sysFileNm = $(this).find('input:hidden[name="sysFileNm"]').val();
+			var newSysFileNm = $(this).find('input:hidden[name="newSysFileNm"]').val();
+			$(this).find('td').each(function(index){
+				if($(this).attr("name")!="imgTd" && $(this).attr("name")!="deleteTd"){
+					if($(this).find('input:hidden[name="contentsLoc"]').val()==''){
+						if(contentLocArr.indexOf($(this).find('select[name="contentsLocEdit"]').val())>-1){
+							$(this).find('select[name="contentsLocEdit"]').focus();
+							contentLocCheck = false;
+							return;
+						}else{
+							$(this).find('input:hidden[name="contentsLoc"]').val($(this).find('select[name="contentsLocEdit"]').val());
+							contentLocArr.push($(this).find('input:hidden[name="contentsLoc"]').val());
+						}
+					}else{
+						if(contentLocArr.indexOf($(this).find('input:hidden[name="contentsLoc"]').val())>-1){
+							contentLocCheck = false;
+							return;
+						}else{
+							contentLocArr.push($(this).find('input:hidden[name="contentsLoc"]').val());
+						}
+					}
+					if($(this).find('input:hidden[name="contentsYn"]').val()==''){
+						$(this).find('input:hidden[name="contentsYn"]').val($(this).find('select[name="contentsYn"]').val());
+					}
+					var data = {cateNo : cateNo
+						, contentsLoc : $(this).find('input:hidden[name="contentsLoc"]').val()
+						, colCnt : $(this).find('input:hidden[name="colCnt"]').val()
+						, colNo : $(this).find('input:hidden[name="colNo"]').val()
+						, contentsYn : $(this).find('input:hidden[name="contentsYn"]').val()
+						, dispOrd : (ind+1)
+						, orgFileNm : orgFileNm
+						, sysFileNm : sysFileNm
+						, newSysFileNm : newSysFileNm
+					};
+					dataArr.push(data);
+				}
+			});
+			if(!contentLocCheck){
+				return;
+			}
+		});
+		if(!contentLocCheck){
+			mcxDialog.alert('위치코드가 중복 되었습니다.');
+			return;
+		}
+		if(dataArr.length==0){
+			mcxDialog.alert("저장할 데이터가 없습니다.");
+			return;
+		}
+
+		var jsonData = JSON.stringify(dataArr);
+		mcxDialog.confirm('레이아웃을 저장 하시겠습니까?', {
+			cancelBtnText: "취소",
+			sureBtnText: "확인",
+			sureBtnClick: function(){
+				gagajf.ajaxJsonSubmit('/display/main/layout/save', jsonData, fnGetMainDisplayList);
+			}
+		});
+	});
+
+	$(document).ready(function() {
+		// Create a agGrid
+		$("#mainSortable").disableSelection();
+		//uifnFitGrid();
+	});
+/*]]>*/
+</script>
+
+</html>