style24
/
STYLE24


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsImageMassForm.html
 * @desc    : 상품 이미지 대량 관리 화면(자사)
 *============================================================================
 * SISUN
 * Copyright(C) 2019 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.11.27   eskim       최초 작성
  *******************************************************************************
 -->
	<div class="modalPopup" >
		<!-- PANELSTYLE -->
			<div class="panelStyle">
				<!-- TITLE -->
				<div class="panelTitle">
					<h2>상품 이미지 수정</h2>
					<button type="button" class="close" onclick="fnGoodsImgFormClose()"><i class="fa fa-times"></i></button>
				</div>
				<!-- //TITLE -->
				<!-- CONTENT -->
				<div class="panelContent">

					<ul class="notice">
						<li>[업로드/수정] 버튼 클릭 하면 프론트에 바로 적용되므로 최종 확인 후 전송을 권장합니다.</li>
						<li>이미지 미리보기 리스트는 <em>업로드 후</em> 확인 할 수 있습니다.</li>
						<li>이미지보기 버튼은 이미지 파일 <em>등록 후</em> 확인 할 수 있습니다. 이미 <em>업로드 된</em> 파일은 확인 할 수 없습니다.(파일 크기 옆 화살표로 구분 가능합니다.)</li>
					</ul>

					<table class="frmStyle">
						<colgroup>
							<col width="100px"/>
							<col/>
							<col width="100px"/>
							<col/>
							<col width="100px"/>
							<col/>
						</colgroup>
						<tr>
							<th>컬러명</th>
							<td>PINK</td>
							<td colspan="4"></td>
							<!-- <th>대표 이미지순번</th>
							<td><input type="text" value="1"/></td>
							<th>마우스오버 이미지순번</th>
							<td><input type="text" value="2"/></td> -->
						</tr>
						<tr>
							<th>이미지등록</th>
							<td class="dexterArea">

								<!-- 덱스터 테이블 영역 -->
								<ul class="dexterTable">
									<li class="dexterNo">
										<!-- 덱스터 테이블 번호 -->
										<div>1</div><div>2</div><div>3</div><div>4</div>
										<!-- //덱스터 테이블 번호 -->
									</li>
									<li>
									<!-- 덱스터 테이블 삽입 -->
										덱스터 테이블 삽입<br/>공간은 테이블 넓이에 따라 자동으로 넓어집니다.<br/>
										(최소 넓이 : 350px로 설정됨)<br/>
									<!-- //덱스터 테이블 -->
									<li>
								</ul>
								<!-- //덱스터 테이블 영역 -->

							</td>
							<td colspan="4" class="verticalTop">

								<!-- 이미지 카드 영역 -->
								<div class="cardArea">
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
									<!-- 이미지 카드 -->
									<div class="imgCard">
										<button type="button" class="cardClose">닫기</button>
										<ul>
											<li>
												<img src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" widht="70" height="70">
											</li>
											<li>이미지1</li>
										</ul>
										<p>G2019052800040_023_4(170330).jpg</p>
									</div>
									<!-- //이미지 카드 -->
								</div>
								<!-- //이미지 카드 영역 -->

							</td>
						</tr>
					</table>
				</div>
				<!-- 버튼 배치 영역 -->
				<ul class="panelBar marT10">
					<li class="center">
						<button type="button" class="btn btn-base btn-lg">파일 추가</button>
						<button type="button" class="btn btn-default btn-lg">선택 삭제</button>
						<button type="button" class="btn btn-default btn-lg">전체 삭제</button>
						<button type="button" class="btn btn-info btn-lg">뒤로 이동</button>
						<button type="button" class="btn btn-info btn-lg">아래로 이동</button>
						<button type="button" class="btn btn-base btn-lg">이미지 보기</button>
						<button type="button" class="btn btn-base btn-lg">업로드/수정</button>
						<button type="button" class="btn btn-base btn-lg">저장하기</button>
					</li>
				</ul>
				<!-- //버튼 배치 영역 -->
			</div>
	</div>
<script th:inline="javascript">
/*<![CDATA[*/
	var fileExtension = [[${@environment.getProperty('upload.goods.allow.extension')}]];

	//상품이미지 저정버튼 클릭 시
	$('#btnGoodsDetailImgSave').click(function(e) {
		if ($("#goodsImgForm").find("#goodsImgList tr").length == 0){
			/* mcxDialog.alert('', function(){

			});
			return false; */
		}
		var optCheck = false;
		var imgType = $('#goodsImgForm input[name=imgType]').val();
		
		$("#goodsImgForm").find("#goodsImgList tr").each(function() {
			var size = 30;

			for(i=0;i<size;i++){
				var imgVal = $("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1) +"]").val();
				
				if(!gagajf.isNull(imgVal)){
					var reg = "\.("+fileExtension+")$";
					if(!(new RegExp(reg, "i")).test(imgVal)) {
						optCheck = true;
						mcxDialog.alertC('이미지는 ['+ fileExtension + '] 파일만 가능합니다.', {
							sureBtnText: "확인",
							sureBtnClick: function() {
								$("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1)+"]").focus();
							}
						});
						return false;
					}

					if (imgVal.indexOf('\\"') > -1){
							optCheck = true;
							mcxDialog.alertC('["]는 입력할 수 없습니다.', {
								sureBtnText: "확인",
								sureBtnClick: function() {
									$("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1)+"]").focus();
								}
							});
							return false;
					}
					if (imgVal.indexOf("\\'") > -1){
							optCheck = true;
							mcxDialog.alertC("[\\']는 입력할 수 없습니다.", {
								sureBtnText: "확인",
								sureBtnClick: function() {
									$("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1)+"]").focus();
								}

							});
							return false;
					}
					if (imgType == "A"){
						if (imgVal.indexOf("http") > -1){
							optCheck = true;
							mcxDialog.alertC("이미지 도메인은 입력할 수 없습니다.", {
								sureBtnText: "확인",
								sureBtnClick: function() {
									$("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1)+"]").focus();
								}

							});
							return false;
						}
					}else{
						if (imgVal.indexOf("https") <= -1){
							optCheck = true;
							mcxDialog.alertC("이미지 도메인을 입력해 주세요.", {
								sureBtnText: "확인",
								sureBtnClick: function() {
									$("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1)+"]").focus();
								}

							});
							return false;
						}
					}
				}else{
					if(i == 0){
						optCheck = true;
						mcxDialog.alertC("필수 상품이미지 입니다.", {
							sureBtnText: "확인",
							sureBtnClick: function() {
								$("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1)+"]").focus();
							}

						});
						return false;
					}
				}
			}
		});

		if(optCheck) {
			return false;
		}

		mcxDialog.confirm('저장하시겠습니까?', {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function(){
				gagajf.ajaxFormSubmit("/goods/img/save", "#goodsImgForm", fnGoodsImgFormClose);
			}
		});
	});

	//창종료
	var fnGoodsImgFormClose = function(){
		uifnPopupClose('popupGoodsImage');
	}

	//안내팝업
	var fnOpenCommentPopup = function(id) {
		var str = '<div class="popupWrap" id="'+id+'" style="z-index:30">';
		str = str + '<div class="popup modeless ui-widget-content ui-draggable ui-draggable-handle" style="display: block;  position: relative;">';
		str = str + '<button type="button" class="close" onclick="uifnPopClose(\''+id+'\')"><i class="fa fa-times"></i></button>';
		str = str + '<div class="mdPopContent">';
		str = str + '<ul class="notice ">';
		str = str + '<em><b>* 이미지 타입</b></em>';
		str = str + '<li> <b>A</b> : <b>자사전용</b>(이미지 도메인명 없음)</li>';
		str = str + '  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ex) /P/PQS/PQS11TM24M_BU/1000/PQS11TM24M_BU_01.jpg';
		str = str + '<li> <b>B</b> : <b>입점전용</b>(https를 포함한 이미지 전체 경로)</li>';
		str = str + '  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ex) <em>https:</em>//pastel.jpg2.kr/goods/LCCAJ334_IV_1.jpg';
		str = str + '<li><b>IMG_PATH1 (<em>필수</em>)</b> : 상품코드_<b>01.jpg</li>';
		str = str + '<li><b>IMG_PATH2 ~ IMG_PATH5</b> (선택) : 상품코드_<b>02</b>.jpg ~ 상품코드_<b>05</b>.jpg</li>';
		str = str + '<li><b>IMG_PATH6 ~ IMG_PATH10</b> (선택, 화보컷) : 상품코드_<b>M1</b>.jpg ~ 상품코드_<b>M5</b>.jpg</li>';
		str = str + '<li><b>IMG_PATH11 ~ IMG_PATH25</b> (선택, 상세컷) : 상품코드_<b>D1</b>.jpg ~ 상품코드_<b>D15</b>.jpg</li>';
		str = str + '<li><b>IMG_PATH26 ~ IMG_PATH27</b> (선택, 라벨컷) : 상품코드_<b>R1</b>.jpg ~ 상품코드_<b>R2</b>.jpg</li>';
		str = str + '<li><b>IMG_PATH28 ~ IMG_PATH30</b> (선택, 기타컷) : 상품코드_<b>E1</b>.jpg ~ 상품코드_<b>E3</b>.jpg</li>';
		str = str + '</ul>';
		str = str + '</div></div></div>';

		if ($('#'+ id).length == 0) {
			$('body').append(str);
		}
		$("#"+id).css({display:"block"});
	}
/*]]>*/
</script>
</html>