카카오 친구톡 발송화면 개발 진행 중

src/main/java/itn/let/kakao/user/kakaoFt/web/KakaoFriendsTalkSendController.java

@@ -25,6 +25,7 @@ import itn.com.utl.fcc.service.EgovStringUtil;
 import itn.let.kakao.kakaoComm.KakaoSendUtil;
 import itn.let.kakao.kakaoComm.KakaoVO;
 import itn.let.kakao.kakaoComm.kakaoApi.service.KakaoApiService;
+import itn.let.kakao.user.kakaoFt.service.KakaoFriendsTalkTemplateService;
 import itn.let.mjo.msgdata.service.MjonMsgDataService;
 import itn.let.mjo.msgdata.service.MjonMsgDataVO;
 import itn.let.mjo.symbol.service.MjonSymbolService;
@@ -47,6 +48,9 @@ public class KakaoFriendsTalkSendController {
 	@Resource(name = "MjonMsgDataService")
 	private MjonMsgDataService mjonMsgDataService;
 	
+	@Resource(name = "kakaoFriendsTalkTemplateService")
+	private KakaoFriendsTalkTemplateService kakaoFtTemplateService;
+	
 	@Autowired
 	KakaoSendUtil kakaoSendUtil;
 	
@@ -134,6 +138,21 @@ public class KakaoFriendsTalkSendController {
 				
 				// 사용자 정의 단가 정보 불러오기(시스템 단가 혹은 협의 단가)
 				model.addAttribute("sendPrice", kakaoSendUtil.selectSendPriceOfKakaoAtAndSmsAndMms(userId));
+				
+				
+				//사용자 템플릿 정보 조회
+				String friendId = kakaoVO.getFriendId();
+				KakaoVO resultTemplateVO = new KakaoVO();
+				
+				if(!friendId.equals("") || friendId != null) {
+					
+					System.out.println("+++++++++++++++++++++++ friendId ::: "+friendId);
+					
+					resultTemplateVO = kakaoFtTemplateService.selectKakaoFriendsTemplateDetail(kakaoVO);
+					
+				}
+				
+				model.addAttribute("resultTemplateVO", resultTemplateVO);
 			
 			}
 			

src/main/webapp/WEB-INF/jsp/web/kakao/include/KaKaoAlimtalkTopMenuTap.jsp

@@ -60,6 +60,7 @@ function fnLinkPageTopTab(tabInfo){
 	}else if(tabInfo == 'tabFriend'){
 		
 		/* alert("친구톡 메뉴는 현재 개발이 진행 중입니다."); */
+		$("input[name=friendId]").val("");
 		url = "<c:url value='/web/mjon/kakao/friendstalk/kakaoFriendsTalkMsgDataView.do'/>";
 		
 	}else if(tabInfo == 'tabAlimtalkIntrd'){

src/main/webapp/WEB-INF/jsp/web/kakao/msgdata/ft/KakaoFriendsTalkMsgDataView.jsp

@@ -6,6 +6,10 @@
 
 <script src="/js/kakao/templateComm.js"></script>
 
+<script type="text/javascript" src="<c:out value='/js/kakao/at/tabulator.js' />"></script>
+<script type="text/javascript" src="<c:out value='/js/kakao/at/addr.js' />"></script>
+<script type="text/javascript" src="<c:out value='/js/common/popup.js' />"></script>
+<script type="text/javascript" src="<c:out value='/js/kakao/at/friendstalkExcel.js' />"></script>
 
 <script type="text/javascript">
 /* 파일등록 */
@@ -15,21 +19,8 @@ var fileExt = ""; // 첨부파일 확장자
 
 $(document).ready(function (){
 	
-	//광고성 정보 포함 선택에 따른 텍스트 표시 부분 처리
+	//화면 초기 로딩시 화면 처리해주기 - 템플릿 불러오기 했을 경우를 위함
-	$(".inputAdFlag").change(function(){
+	initFormChk();
-		var adFlagVal = $(this).val();
-		if(adFlagVal == 'N'){//광고 표시 숨김처리
-			$('.adFlag').hide();
-			$('.kakao_block_text').hide();
-			$('#adFlagFront').hide();
-			$('.adFlagAfter').hide();
-		}else{
-			$('.adFlag').show();
-			$('.kakao_block_text').show();
-			$('#adFlagFront').show();
-			$('.adFlagAfter').show();
-		}
-	});
 	
 	//이모티콘 삽입 기능 처리
 	$(".symbolButton, .changeWord").on('click', function(){
@@ -58,6 +49,59 @@ $(document).ready(function (){
 	});
 });
 
+function initFormChk(){
+	
+	//첫로딩시 우측 미리보기 화면 숨김처리
+	$('.emphasis_title_text').hide();	//강조유형 타이틀
+	$('.emphasis_side_text').hide();	//강조유형 보조문구
+	//$('.template_text').hide();			//내용 미리보기
+	$('.side_info_text').hide();		//부가정보 내용
+	$('.channel_info_text').hide();		//채널추가 텍스트 내용
+	$('.btnAd').hide();					//샘플 채널추가 버튼
+	$('.btnEmpty').hide();				//샘플 버튼
+	
+	//채널ID 정보 미리보기에 표시해주기
+	fnAgentCodeChg();
+	
+	//템플릿 등록 이미지가 있는 경우 이미지 정보 표시해 주기
+	var imgType = $("input[name=img_file_add]:checked").val();
+	
+	if(!imgType == ''){
+		
+		if($("input[name='img_file_add']:checked").attr("id")=="img_file_1"){
+			$(".basic_img_add_wrap").show().siblings(".img_add_info_wrap").hide();
+			$(".img_file_add_wrap").show();
+		}else if($("input[name='img_file_add']:checked").attr("id")=="img_file_2"){
+			$(".wide_img_add_wrap").show().siblings(".img_add_info_wrap").hide();
+			$(".img_file_add_wrap").show();
+		} else{
+			$(".img_add_info_wrap, .img_file_add_wrap").hide();
+		}
+		
+	}else{
+		
+		$("#img_file_0").prop('checked',true);
+		
+	}
+	var imageFileName = '${resultTemplateVO.imageFileName}';
+	$("#imgNm").text(imageFileName);
+	
+	//미리보기에 이미지 표시해주기
+	var imgUrl = '${resultTemplateVO.templateImageUrl}';
+	$('.kakao_image').css("display", "block");
+	$("#kakaoImg").attr("src", imgUrl);
+	
+	
+	//초기 템플릿 내용 글자수 처리해주기
+	var tmpContents = $('#inputTemplateContent').val();
+	setContentsLengForFriends(tmpContents);
+	
+	//초기 광고포함 여부 처리
+	var adFlagVal = $("input[name=ad_flag]:checked").val();
+	advTextChange(adFlagVal);
+	
+}
+
 //우측 미리보기 화면 채널 아이디 정보 변경해 주기
 function fnAgentCodeChg(){
 	var yellowIdVal = $("#selectAgentCode option:checked").val();
@@ -288,6 +332,16 @@ function fnImageDel(){
 		
 	}
 	
+	var tmpFriendId = $("#tmpFriendId").val();
+	
+	if(tmpFriendId != ''){
+		
+		if(!confirm("불러온 템플릿의 이미지도 함께 삭제 됩니다. 계속하시겠습니까?")){
+			return false;
+		}
+		
+	}
+	
 	var data = new FormData(bizForm);
 	
 	if(confirm("등록된 이미지를 삭제하시겠습니까?")){
@@ -348,6 +402,190 @@ function fnContentsReset(){
 	$('.nowChar').text("0 /");
 }
 
+//저장 템플릿 불러오기 선택시 
+function myTemplateSelect(ftId){
+	
+	//alert(ftId);
+	console.log(ftId);
+	
+	var form = document.templateForm;
+	
+	form.friendId.value = ftId;
+	
+	form.action="/web/mjon/kakao/friendstalk/kakaoFriendsTalkMsgDataView.do";
+	form.submit();
+	
+	
+}
+
+//광고성 정보 포함 선택에 따른 텍스트 표시 부분 처리
+$(document).on('change', '.inputAdFlag', function(){
+	
+	var adFlagVal = $(this).val();
+	advTextChange(adFlagVal);
+	
+});
+
+function advTextChange(adFlagVal){
+	
+	if(typeof adFlagVal == "undefined" || adFlagVal == null || adFlagVal == ""){
+		
+		$("#ad_Y").prop('checked',true);
+		
+	}else if(adFlagVal == 'N'){//광고 표시 숨김처리
+		
+		$('.adFlag').hide();
+		$('.kakao_block_text').hide();
+		$('#adFlagFront').hide();
+		$('.adFlagAfter').hide();
+		
+	}else{
+		$('.adFlag').show();
+		$('.kakao_block_text').show();
+		$('#adFlagFront').show();
+		$('.adFlagAfter').show();
+	}
+	
+}
+
+
+//친구톡 내용 템플릿으로 저장하기 - 내용 저장하기
+function myTemplateSave(){
+
+	var selectAgentCode = $("select[name='selectAgentCode']").val();	// 선택 채널ID
+	var yellowId = $("select[name='selectAgentCode'] option:selected").text().replaceAll('@','');			// 선택 채널명
+	var inputTemplateName = $("#inputTemplateName").val();				// 입력 템플릿 이름
+	var imageType = $("input[name=img_file_add]:checked").val();		// 첨부 이미지 종류(없음, 일반, 와이드 이미지)
+	var imageTitle = $("#imgTitle").val();								//첨부이미지 제목
+	var imageLink = $("#imgLink").val();								//첨부이미지 클릭시 이동 링크 주소
+	var inputTemplateAd = $("input[name=ad_flag]:checked").val();	// 광고성메시지 선택 여부
+	var inputTemplateContent = $("#inputTemplateContent").val();		// 템플릿 내용
+	
+	var inputTemplateImageName = $("#templateImageName").val();	// 템플릿 이미지 파일명
+	var inputTemplateImageUrl = $("#templateImageUrl").val();		// 템플릿 이미지 링크
+	
+	// 공통 유효성 검사 조회
+	if(selectAgentCode == null || selectAgentCode == ""){
+		alert("채널ID를 선택해 주세요");
+		return;
+	};
+	
+	if(inputTemplateName == null || inputTemplateName == ""){
+		alert("템플릿 명을 입력해 주세요");
+		$("#inputTemplateName").focus();
+		return;
+	};
+	
+	if(imageType == 'I' || imageType == 'W'){
+		
+		if(imageTitle == ''){
+			
+			alert("이미지 제목을 입력해 주세요.");
+			return false;
+			
+		}
+		
+		if(imageLink == ''){
+			
+			alert("이미지 클릭시 이동할 URL을 입력해 주세요.");
+			return false;
+			
+		}else{
+			
+			if(imageLink.search("http://") == -1 && imageLink.search("https://") == -1){
+				
+				alert("이미지 URL 주소에는 http:// 또는 https://를 포함하여 입력해야 합니다.");
+				return false;
+				
+			}
+			
+		}
+		
+		if(inputTemplateImageUrl == ''){
+			
+			alert("이미지를 선택해 주세요.");
+			return false;
+			
+		}
+		
+	}
+	
+	
+	if(inputTemplateContent == null || inputTemplateContent == ""){
+		alert("템플릿 내용을 입력해 주세요.");
+		return;
+	};
+	
+	var bizForm = document.bizForm;
+	bizForm.senderKey.value = selectAgentCode;
+	//bizForm.yellowId.value = yellowId;
+	bizForm.templateName.value = inputTemplateName;
+	//bizForm.imageType.value = imageType;
+	//bizForm.imgTitle.value = imageTitle;
+	//bizForm.imgLink.value = imageLink;
+	bizForm.adFlag.value = inputTemplateAd;
+	bizForm.templateContent.value = inputTemplateContent;
+	
+	var data = new FormData(bizForm);
+	
+	if(confirm("템플릿을 저장하시겠습니까?")){
+		
+		$.ajax({
+			type: "POST"
+			, url: "/web/mjon/kakao/template/insertKakaoFriendsTemplateDataAjax.do"
+			, data: data
+			, dataType: 'json'
+			, async: false
+			, processData: false
+			, contentType: false
+			, cache: false
+			, success: function (returnData, status) {
+				
+				var result = returnData.result;
+				
+				if(result == "loginFail") {//차단 발신번호인 경우 등록 불가
+					alert("로그인후 진행이 가능합니다.");
+				}else if(returnData.result == "success") {
+					alert("템플릿 저장이 완료되었습니다.");
+					return false;
+				}else{
+					
+					alert("템플릿 저장에 오류가 발생하였습니다.");
+					return false;
+					
+				}
+			}
+			,error: function (e) {
+				console.log("ERROR : ", e);
+				alert("템플릿 저장에 오류가 발생하였습니다.");
+			}
+		});
+		
+	}
+	
+}
+
+//주소록 불러오기 버튼 클릭시
+$('.popupAddr').click(function(){
+	
+	if(loginVO == "" || loginVO == null){
+		alert("주소록 불러오기 서비스는 로그인 후 이용 가능합니다.");
+		location.href="<c:url value='/web/user/login/login.do'/>";
+		return false;
+	}
+	
+	$("#addrGroupLoad").load("/web/mjon/msgdata/selectAddrGroupListAjax.do", "" ,function(response, status, xhr){
+		//리스트 스크롤 처리해주기
+		$(".adr_pop_list").mCustomScrollbar({
+			axis: 'y',
+			scrollbarPosition: "outside",
+			theme: "dark",
+			autoHideScrollbar: false
+		});
+	});
+	
+});
+
 </script>
 
 <!-- 로딩바 -->
@@ -379,10 +617,14 @@ function fnContentsReset(){
 			
 			<form id="bizForm" name="bizForm" method="multipart/form-data">
 				<input type="hidden" id="menuTopTab" name="menuTopTab" value="tabFriend">
-				<input type="hidden" id="imageType" name="imageType" value=""/>
+				<input type="hidden" id="imageType" name="imageType" value="<c:out value='${resultTemplateVO.imageType}'/>"/>
-				<input type="hidden" id="inputSenderKey" name="senderKey" value=""/>
+				<input type="hidden" id="inputSenderKey" name="senderKey" value="<c:out value='${resultTemplateVO.senderKey}'/>"/>
-				<input type="hidden" id="imageFileName" name="imageFileName" value="">
+				<input type="hidden" id="imageFileName" name="imageFileName" value="<c:out value='${resultTemplateVO.imageFileName}'/>">
-				<input type="hidden" id="templateImageUrl" name="templateImageUrl" value="">
+				<input type="hidden" id="templateImageUrl" name="templateImageUrl" value="<c:out value='${resultTemplateVO.templateImageUrl}'/>">
+				<input type="hidden" id="tmpFriendId" name="friendId" value="<c:out value='${resultTemplateVO.friendId}'/>">
+				<input type="hidden" id="templateName" name="templateName" value=""/>
+				<input type="hidden" id="adFlag" name="adFlag" value=""/>
+				<input type="hidden" id="templateContent" name="templateContent" value=""/>
 				
 				<div class="send_general friend_talk_wrap kakao_wrap">
 					<div class="send_left">
@@ -399,18 +641,25 @@ function fnContentsReset(){
 										<select class="select_gray_type" name="selectAgentCode" id="selectAgentCode" onchange="javascript:fnAgentCodeChg();">
 											<option value="">채널ID 선택</option>
 											<c:forEach var="kakaoProfileInfo" items="${resultProfileList}" varStatus="status">
-												<option value="${kakaoProfileInfo.senderKey}"><c:out value='${kakaoProfileInfo.yellowId}'/></option>
+												<option value="${kakaoProfileInfo.senderKey}" <c:if test="${kakaoProfileInfo.senderKey eq resultTemplateVO.senderKey}">selected</c:if> ><c:out value='${kakaoProfileInfo.yellowId}'/></option>
 											</c:forEach>
 										</select>
 									</td>
 								</tr>
 								<tr>
+	                                <th>템플릿명</th>
+	                                <td>
+	                                    <input type="text" class="template_name" id="inputTemplateName" name="inputTemplateName" value="<c:out value='${resultTemplateVO.templateName}'/>" placeholder="템플릿명을 입력해주세요. (최대 50자)">
+	                                    <p class="template_name_cf">최대 50자, 템플릿 관리용</p>
+	                                </td>
+	                            </tr>
+								<tr>
 									<th>이미지 첨부</th>
 									<td>
 										<div class="img_sort_wrap">
-											<input type="radio" name="img_file_add" id="img_file_0" value="" checked> <label for="img_file_0">첨부안함</label>
+											<input type="radio" name="img_file_add" id="img_file_0" value="" <c:if test="${resultTemplateVO.imageType eq ''}">checked</c:if> > <label for="img_file_0">첨부안함</label>
-											<input type="radio" name="img_file_add" id="img_file_1" value="I"> <label for="img_file_1">이미지 첨부</label>
+											<input type="radio" name="img_file_add" id="img_file_1" value="I" <c:if test="${resultTemplateVO.imageType eq 'I'}">checked</c:if> > <label for="img_file_1">이미지 첨부</label>
-											<input type="radio" name="img_file_add" id="img_file_2" value="W"> <label for="img_file_2">와이드 이미지 첨부</label>
+											<input type="radio" name="img_file_add" id="img_file_2" value="W" <c:if test="${resultTemplateVO.imageType eq 'W'}">checked</c:if> > <label for="img_file_2">와이드 이미지 첨부</label>
 											<div class="img_add_info_wrap basic_img_add_wrap">
 												<p class="info_title_text"><span class="c_e40000">*</span> 이미지 첨부 안내</p>
 												<ul class="info_text">
@@ -434,11 +683,11 @@ function fnContentsReset(){
 											<ul class="img_file_info_wrap">
 												<li>
 													<p>이미지 제목</p>
-													<input type="text" id="imgTitle" name="imgTitle" class="img_url" maxLength="50">
+													<input type="text" id="imgTitle" name="imgTitle" value="<c:out value='${resultTemplateVO.imgTitle}'/>" class="img_url" maxLength="50">
 												</li>
 												<li>
 													<p>이미지 클릭시 이동할 URL</p>
-													<input type="text" id="imgLink" name="imgLink" placeholder="http://" class="img_url" maxLength="1000">
+													<input type="text" id="imgLink" name="imgLink" value="<c:out value='${resultTemplateVO.imgLink}'/>" placeholder="http://" class="img_url" maxLength="1000">
 												</li>
 												<li>
 													<p class="file_name"  id="imgNm" name="imgNm">첨부파일 이미지</p>
@@ -455,21 +704,20 @@ function fnContentsReset(){
 								<tr>
 									<th>광고포함 여부</th>
 									<td>
-										<input type="radio" class="inputAdFlag" name="ad_flag" id="ad_Y" value="Y" checked><label for="ad_Y">광고성 정보 포함</label>
+										<input type="radio" class="inputAdFlag" name="ad_flag" id="ad_Y" value="Y" <c:if test="${resultTemplateVO.adFlag eq 'Y'}">checked</c:if> ><label for="ad_Y">광고성 정보 포함</label>
-										<input type="radio" class="inputAdFlag" name="ad_flag" id="ad_N" value="N"><label for="ad_N">포함 안함</label>
+										<input type="radio" class="inputAdFlag" name="ad_flag" id="ad_N" value="N" <c:if test="${resultTemplateVO.adFlag eq 'N'}">checked</c:if> ><label for="ad_N">포함 안함</label>
 									</td>
 								</tr>
 								<tr>
 									<th>내용</th>
 									<td class="kakao_template_text">
 										<div class="put_left short">
-											<input type="text" class="template_name" placeholder="템플릿명을 입력해주세요. (최대 50자)">
 											<div class="put_text_wrap">
 												<div class="ad_txt">
 													<p><span id="adFlagFront">(광고)</span> <span id="yellowIdCon" >채널ID</span></p>
 												</div>
 												<label for="inputTemplateContent" class="label"></label>
-												<textarea id="inputTemplateContent" name="inputTemplateContent" class="put_text" placeholder="내용을 입력해주세요."></textarea>
+												<textarea id="inputTemplateContent" name="inputTemplateContent" class="put_text" placeholder="내용을 입력해주세요."><c:out value="${resultTemplateVO.templateContent}"/></textarea>
 												<div class="text_length">
 													<div>
 														<p class="adFlagAfter">수신거부 : 홈 > 채널차단</p>
@@ -598,7 +846,7 @@ function fnContentsReset(){
 												<button type="button" class="btnType btnType8" onclick="window.open('/web/mjon/kakao/template/selectKakaoFriendsTemplateListPopupAjax.do','_blank','width=930, height=780, top=100, left=100, fullscreen=no, menubar=no, status=no, toolbar=no, titlebar=yes, location=no, scrollbars=yes')">템플릿 불러오기</button>
 											</div>
 											<div class="send_btnWrap">
-												<button type="button" class="btnType btn_text_save">내용 저장하기</button>
+												<button type="button" class="btnType btn_text_save" onclick="javascript:myTemplateSave();">내용 저장하기</button>
 												<button type="button" class="btnType btnType9" onclick="javascript:fnContentsReset();">초기화</button>
 											</div>
 										</div>
@@ -619,7 +867,132 @@ function fnContentsReset(){
 											<span class="c_e40000 fwBold">*</span> 버튼 타입중 <span class="c_e40000">봇키워드, 메시지전달</span>은 <span class="c_222">카카오톡 채널 관리자센터(https://center-pf.kakao.com)</span>에서 설정을 직접 한 후 이용하셔야 동작합니다. (최대 5개까지 등록가능)
 										</p>
 										<div class="button_add_wrap">
-										</div>
+	                                    	<c:forEach var="buttonList" items="${resultTemplateVO.buttonVOList}" varStatus="status">
+	                                    	
+	                                    		<c:if test="${buttonList.linkType eq 'DS'}">
+	                                    			<!-- 배송조회 버튼  -->
+			                                    	<dl class="button_type_wrap type1">
+				                                    	<dt>배송조회</dt>
+				                                    	<dd class="button_type_input">
+				                                    		<input type="hidden" id="buttonLikeTypeDeliv" name="buttonVOList[${status.index}].linkType" value="DS"/>
+				                                    		<input type="text" id="btnNmDeliv" name="buttonVOList[${status.index}].name" value="<c:out value='${buttonList.name}'/>" placeholder="버튼명 입력(최대 14자)">
+				                                    		<p class="cf_text">*이용가능 택배사 : KG로지스, 우체국택배,일양로지스, GTX로지스, FedEx, 경동택배, 합동택배, 롯데택배</p>
+				                                    	</dd>
+				                                    	<dd>
+				                                    		<button type="button" class="btn_del" onclick="buttonTypeDel(this);"><img src="/publish/images/btn_delete.png" alt=""></button>
+				                                    	</dd>
+			                                    	</dl>
+	                                    		</c:if>
+		                                    	
+		                                    	<c:if test="${buttonList.linkType eq 'WL'}">
+			                                    	<!-- 웹링크 버튼 -->
+			                                    	<dl class="button_type_wrap type2">
+			                                    		<dt>웹링크</dt>
+			                                    		<dd class="button_type_input">
+			                                    			<ul>
+			                                    				<li>
+			                                    					<input type="hidden" id="buttonLikeTypeWeb" name="buttonVOList[${status.index}].linkType" value="WL"/>
+			                                    					<input type="text" id="btnNmWeb" name="buttonVOList[${status.index}].name" value="<c:out value='${buttonList.name}'/>" placeholder="버튼명 입력(최대 14자)">
+			                                    				</li>
+			                                    				<li>
+			                                    					<input type="text" id="buttonLinkMo" name="buttonVOList[${status.index}].linkMo" value="<c:out value='${buttonList.linkMo}'/>" placeholder="모바일 링크 입력">
+			                                    				</li>
+			                                    				<li>
+			                                    					<input type="text" id="buttonLinkPc" name="buttonVOList[${status.index}].linkPc" value="<c:out value='${buttonList.linkPc}'/>" placeholder="PC 링크 입력">
+			                                    				</li>
+			                                    			</ul>
+			                                    		</dd>
+			                                    		<dd>
+			                                    			<button type="button" class="btn_del" onclick="buttonTypeDel(this);"><img src="/publish/images/btn_delete.png" alt=""></button>
+			                                    		</dd>
+			                                    	</dl>
+		                                    	</c:if>
+		                                    	
+		                                    	<c:if test="${buttonList.linkType eq 'AL'}">
+			                                    	<!-- 앱링크 버튼 -->
+			                                    	<dl class="button_type_wrap type3">
+			                                    		<dt>앱링크</dt>
+			                                    		<dd class="button_type_input">
+			                                    			<ul>
+			                                    				<li>
+			                                    					<input type="hidden" id="buttonLikeTypeApp" name="buttonVOList[${status.index}].linkType" value="AL"/>
+			                                    					<input type="text" id="btnNmApp" name="buttonVOList[${status.index}].name" value="<c:out value='${buttonList.name}'/>" placeholder="버튼명 입력(최대 14자)">
+			                                    				</li>
+			                                    				<li>
+			                                    					<input type="text" id="buttonLinkAnd" name="buttonVOList[${status.index}].linkAnd" value="<c:out value='${buttonList.linkAnd}'/>" placeholder="Android 링크 입력">
+			                                    				</li>
+			                                    				<li>
+			                                    					<input type="text" id="buttonLinkIos" name="buttonVOList[${status.index}].linkIos" value="<c:out value='${buttonList.linkIos}'/>" placeholder="IOS 링크 입력">
+			                                    				</li>
+			                                    			</ul>
+			                                    		</dd>
+			                                    		<dd>
+			                                    			<button type="button" class="btn_del" onclick="buttonTypeDel(this);"><img src="/publish/images/btn_delete.png" alt=""></button>
+			                                    		</dd>
+			                                    	</dl>
+		                                    	</c:if>
+		                                    	
+		                                    	<c:if test="${buttonList.linkType eq 'BK'}">
+			                                    	<!-- 봇키워드 -->
+			                                    	<dl class="button_type_wrap type4">
+			                                    		<dt>봇키워드</dt>
+		                                    			<dd class="button_type_input">
+		                                    				<input type="hidden" id="buttonLikeTypeBot" name="buttonVOList[${status.index}].linkType" value="BK"/>
+		                                    				<input type="text" id="btnNmBot" name="buttonVOList[${status.index}].name" value="<c:out value='${buttonList.name}'/>" placeholder="버튼명 입력(최대 14자)">
+		                                    			</dd>
+		                                    			<dd><button type="button" class="btn_del" onclick="buttonTypeDel(this);"><img src="/publish/images/btn_delete.png" alt=""></button></dd>
+			                                    	</dl>
+		                                    	</c:if>
+		                                    	
+		                                    	<c:if test="${buttonList.linkType eq 'MD'}">
+			                                    	<!-- 메시지 전달 -->
+			                                    	<dl class="button_type_wrap type5">
+													   <dt>메시지전달</dt>
+													   <dd class="button_type_input">
+													      <input type="hidden" id="buttonLikeTypeMsg" name="buttonVOList[${status.index}].linkType" value="MD" />
+													      <input type="text" id="btnNmMsg" name="buttonVOList[${status.index}].name" value="<c:out value='${buttonList.name}'/>" placeholder="버튼명 입력(최대 14자)">
+													   </dd>
+													   <dd>
+													      <button type="button" class="btn_del" onclick="buttonTypeDel(this);">
+													         <img src="/publish/images/btn_delete.png" alt="">
+													      </button>
+													   </dd>
+													</dl>
+												</c:if>	                                    	
+		                                    	
+		                                    	<c:if test="${buttonList.linkType eq 'BC'}">
+			                                    	<!-- 상담톡 전환 -->
+													<dl class="button_type_wrap type6">
+													   <dt>상담톡전환</dt>
+													   <dd class="button_type_input">
+													      <input type="hidden" id="buttonLikeTypeCons" name="buttonVOList[${status.index}].linkType" value="BC" />
+													      <input type="text" id="btnNmCons" name="buttonVOList[${status.index}].name" value="<c:out value='${buttonList.name}'/>" placeholder="버튼명 입력(최대 14자)">
+													   </dd>
+													   <dd>
+													      <button type="button" class="btn_del" onclick="buttonTypeDel(this);">
+													         <img src="/publish/images/btn_delete.png" alt="">
+													      </button>
+													   </dd>
+													</dl>
+												</c:if>
+												
+												<c:if test="${buttonList.linkType eq 'BT'}">
+													<!-- 챗봇전환 -->
+													<dl class="button_type_wrap type7">
+													   <dt>챗봇전환</dt>
+													   <dd class="button_type_input">
+													      <input type="hidden" id="buttonLikeTypeBotChg" name="buttonVOList[${status.index}].linkType" value="BT" />
+													      <input type="text" id="btnNmBotChg" name="buttonVOList[${status.index}].name" value="" placeholder="버튼명 입력(최대 14자)">
+													   </dd>
+													   <dd>
+													      <button type="button" class="btn_del" onclick="buttonTypeDel(this);">
+													         <img src="/publish/images/btn_delete.png" alt="">
+													      </button>
+													   </dd>
+													</dl>
+												</c:if>
+											</c:forEach>
+	                                    </div>
 									</td>
 								</tr>
 								<tr>
@@ -655,7 +1028,7 @@ function fnContentsReset(){
 												</div>
 												<div class="put_right">
 													<div class="btn_popup_wrap spc_wrap">
-														<button type="button" data-tooltip="popup06" class="btnType btnType7">주소록 불러오기</button>
+														<button type="button" data-tooltip="popup06" class="btnType btnType7 popupAddr">주소록 불러오기</button>
 													</div>
 													<div class="btn_popup_wrap">
 														<button type="button" data-tooltip="popup02" class="btnType btnType7">엑셀 불러오기</button>
@@ -802,7 +1175,9 @@ function fnContentsReset(){
 										</div>
 										<p class="template_text">내용 미리보기</p>
 										<div class="btnViewArea">
-											<button type="button" class="btn_kakao_type"  style="display:none;">문자온 바로가기</button>
+											<c:forEach var="buttonList" items="${resultTemplateVO.buttonVOList}" varStatus="status">
+	                                    		<button type="button" class="btn_kakao_type"  style="display:block;"><c:out value="${buttonList.name}"/></button>
+	                                    	</c:forEach>
 										</div>
 									</div>
 									<p class="kakao_block_text">수신거부 : 홈 > 채널차단</p>
@@ -891,4 +1266,111 @@ function fnContentsReset(){
 			</form>
 		</div>
 	</div>
-</div>
+</div>
+
+<!-- 주소록 불러오기 -->
+<div class="tooltip-wrap">
+	<div class="popup-com import_layer popup06" tabindex="0" data-tooltip-con="popup06" data-focus="popup06" data-focus-prev="popup06-close" style="width: 1000px">
+		<div class="popup_heading">
+			<p><span>주소록 불러오기</p>
+			<button type="button" onClick="javascript:addrClose(); return false;">
+			<img src="/publish/images/content/layerPopup_close.png" alt="팝업 닫기"></button>
+		</div>
+		<div class="layer_in">
+			<div class="titBox titBox_pad">
+				<p>- 주소록 수정 및 변경은 <span>[주소록 관리]</span>에서만 가능합니다.</p>
+				<button type="button" class="adr_admin" onClick="location.href='/web/mjon/addr/selectAddrList.do'">주소록 관리</button>
+			</div>
+			<div class="adr_wrap">
+				<form id="searchAddrGrpForm" name="searchAddrGrpForm" method="post" style="display: flex; justify-content: space-between;">
+					<input type="hidden" id="searchAddrGrpId" name="searchAddrGrpId" value=""/>
+					<input type="hidden" id="type" name="type" value="all"/>
+					<input type="hidden" id="searchKeyword" name="searchKeyword" value=""/>
+					<input type="hidden" name="searchCondition" id="searchCondition" value="0" />
+					<div class="adr_pop_left">
+						<div class="adr_left_search">
+							<label for="searchKeyword" class="label">그룹명 검색</label>
+							<input type="text" name="searchGrpKeyword" id="searchGrpKeyword"  placeholder="그룹명 검색" onfocus="this.placeholder=''" onblur="this.placeholder='그룹명 검색'" class="inputLight">
+							<button type="button" onClick="javascrit:fnAddrGrpSearch(); return false;"><img src="/publish/images/popup/search.png" alt="검색"></button>
+						</div>
+						<div class="adr_pop_box">
+							<div id="addrGroupLoad">
+							</div>
+						</div>
+						<!-- <div class="popup_btn">
+							<button type="button" class="btnType" onClick="javascript:fnSelectAddrGrpList(); return false;">선택 그룹 추가</button>
+						</div> -->
+					</div>
+					<div class="adr_pop_right">
+						<div class="clearfix">
+							<div class="btnWrap_last">
+								<label for="searchAddrCondition" class="label">카테고리 선택</label>
+								<select id="searchAddrCondition" name="searchAddrCondition" class="selType2">
+									<option value='0'>전체</option>
+									<option value='1'>그룹명</option>
+									<option value='2'>이름</option>
+									<option value='3'>핸드폰번호</option>
+								</select>
+								<label for="searchAddrKeyword" class="label">검색어 입력</label>
+								<input type="text" id="searchAddrKeyword" name="searchAddrKeyword" placeholder="검색어를 입력하세요"  onfocus="this.placeholder=''" onblur="this.placeholder='검색어를 입력하세요'" >
+								<button type="button" class="btnType btnType17"  onClick="javascrit:fnAddrSearch(); return false;">검색</button>
+							</div>
+							<!-- table -->
+							<div class="adr_excel adr_pop_list2 callAddr_box">
+							</div>
+							<!--// table -->
+						</div>
+						<div class="popup_btn_wrap2">
+							<button type="button" onClick="javascript:addrToList(); return false;">추가</button>
+							<button type="button" onClick="javascript:addrClose(); return false;">닫기</button>
+						</div>
+						<%-- 주소록 레이어 팝업 닫기 실행 코드 --%>
+						<input type="hidden" name="btnAddrClose" id="btnAddrClose" class="tooltip-close closeAddr" data-focus="popup06-close" />         
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
+</div>
+<!--// 주소록 불러오기 -->
+
+<!-- 엑셀 불러오기 -->
+<form id="excelToolTipForm" name="excelToolTipForm" method="post">
+	<div class="tooltip-wrap">
+		<div class="popup-com import_layer popup02" tabindex="0" data-tooltip-con="popup02" data-focus="popup02" data-focus-prev="popup02-close">
+			<div class="popup_heading">
+				<p><span>엑셀</span> 불러오기</p>
+				<button type="button" class="tooltip-close" data-focus="popup02-close"><img src="/publish/images/content/layerPopup_close.png" alt="팝업 닫기"></button>
+			</div>
+			<div class="layer_in">
+				<!-- 엑셀파일 불러오기 -->
+				<div class="hascont">
+					<div class="titBox">
+						<p>- 최대 2만 건까지 등록할 수 있습니다.</p>
+						<p>- [엑셀 불러오기]시 문서의 A, B열을 불러옵니다.(지원하는 파일 형식 : xls, xlsx)</p>
+						<p>- 휴대폰 항목은 숫자, 하이픈(-)만 인식하며, 번호 앞에 0이 생략되어도 정상 등록됩니다.
+						</p>
+						<!-- <button type="button" class="excel_btn" onclick="location.href='/cmm/fms/FileDown.do?atchFileId=FILE_000000000011651&fileSn=1'"><i></i>샘플파일 다운로드</button> -->
+						<button type="button" class="excel_btn" onclick="location.href='/download/msg/엑셀주소록_등록양식.xlsx'"><i class="downroad"></i>샘플파일 다운로드</button>
+					</div>
+					<div class="attachedFile">
+						<label for="" class="attachedFile_label">첨부파일</label>
+						<input type="text" id="excelNm" value="" readonly>
+						<input type="file" id="excelFile" accept=".xls, .xlsx" onchange="excelExport(event); return false;" style="display:none"/>
+						<button type="button" class="btnType btnType6 c1">찾아보기</button>
+<!-- 						<p><span class="vMiddle">*</span> 첨부된 파일은 <span class="c_e40000">[추가]버튼을 클릭</span>하셔야 받는 사람에 등록됩니다.</p> -->
+						<p><span class="vMiddle">*</span> 첨부된 파일은 <span class="c_e40000">[추가]버튼을 클릭</span>하셔야 받는 사람에 등록됩니다.</p>
+					</div>
+				</div><!--// 엑셀파일 불러오기 -->
+				<div class="popup_btn_wrap2">
+					<button type="button" class="tooltip-close" data-focus="popup02-close"  data-focus-next="popup02" onclick="excelAdd()">추가</button>
+					<button type="button" class="tooltip-close" data-focus="popup02-close"  data-focus-next="popup02">닫기</button>                      
+				</div>
+			</div>
+		</div>
+	</div><!--// 엑셀 불러오기 -->
+</form>
+
+<form id="templateForm" name="templateForm" method="post">
+	<input type="hidden" id="friendId" name="friendId" value="<c:out value='${resultTemplateVO.friendId}'/>"/>
+</form>

src/main/webapp/WEB-INF/jsp/web/kakao/template/ft/KakaoFriendstalkTemplateListPopupAjax.jsp

@@ -112,6 +112,13 @@
 		form.submit();
 		
 	}
+	
+	function fnTemplateDetail(ftId){
+		
+		opener.parent.myTemplateSelect(ftId);
+		self.close();
+		
+	}
 
 
 </script>
@@ -144,10 +151,10 @@
 			                        <div class="kakao_template_wrap">
 			                            <div class="template_cont">
 			                                <div class="title">
-			                                    <div class="check">
+			                                    <%-- <div class="check">
 			                                        <input type="checkbox" name="inputTemplateId" id="inputTemplateId" value="<c:out value='${templatInfoList.friendId}'/>">
-			                                    </div>
+			                                    </div> --%>
-			                                    <p title="친구톡 템플릿 내용" onclick="javascript:fnTemplateDetail('<c:out value="${templatInfoList.friendId}"/>'); return false;" style="cursor:pointer;">
+			                                    <p title="친구톡 템플릿 내용">
 						                           	<c:if test="${templatInfoList.adFlag eq 'Y'}">(광고)</c:if>
 						                           	<c:out value="${fn:replace(templatInfoList.yellowId, '@', '')}"/>
 					                           	</p>
@@ -158,7 +165,7 @@
 					                                <img src="<c:url value='${templatInfoList.templateImageUrl}'/>" alt="">
 					                            </div>
 				                        	</c:if>
-			                                <div class="text_box" onclick="javascript:fnTemplateDetail('<c:out value="${templatInfoList.friendId}"/>'); return false;" style="cursor:pointer;">
+			                                <div class="text_box">
 			                                    <p><c:out value="${fn:replace(fn:replace(templatInfoList.templateContent, newLineChar, '<br/>'), newLineChar2, '<br/>')}" escapeXml="false"/></p>
 			                                    <!-- 채널 추가형을 선택한 경우 자동으로 버튼이 하나 추가됨, 버튼을 추가한 경우 버튼 정보 표시 -->
 					                            <c:forEach var="templatInfoButtonList" items="${templatInfoList.buttonVOList}" varStatus="status">
@@ -170,7 +177,10 @@
 					                    	<p class="cf_text">수신거부 ｜ 홈 > 채널차단</p>
 					                    </c:if>
 			                        </div>
-			                        <div class="kakao_template_info">
+			                        <div class="btn_wrap">
+			                            <button type="button" class="btnType btnType3 btn_template_use" onClick="fnTemplateDetail('<c:out value="${templatInfoList.friendId}"/>'); return false;">템플릿 사용하기</button>
+			                        </div>
+			                        <%-- <div class="kakao_template_info">
 			                        	<dl>
 				                            <dt>템플릿명</dt>
 				                            <dd>
@@ -181,7 +191,7 @@
 			                                <dt>등록일</dt>
 			                                <dd><c:out value="${templatInfoList.frstRegistPnttm}"/></dd>
 			                            </dl>
-			                        </div>
+			                        </div> --%>
 			                    </li>
 		                    </c:forEach>
 	                	</c:when>

src/main/webapp/WEB-INF/jsp/web/kakao/template/ft/KakaoFriendstalkTemplateRegist.jsp

@@ -611,7 +611,7 @@ $(document).on('click', '.symbolButton, .changeWord', function (){
 	                                <th>템플릿명</th>
 	                                <td>
 	                                    <input type="text" class="template_name" id="inputTemplateName" name="inputTemplateName" placeholder="템플릿 명을 입력해주세요" maxLength="100">
-	                                    <p class="template_name_cf">최대 100자, 템플릿 관리용</p>
+	                                    <p class="template_name_cf">최대 50자, 템플릿 관리용</p>
 	                                </td>
 	                            </tr>
 	                            <tr>

src/main/webapp/js/kakao/at/friendstalkExcel.js

@@ -0,0 +1,180 @@
+/**
+ * 
+ * @author 		: 우영두
+ * @fileName 	: friendstalkExcel.js
+ * @date 		: 2024.01.08
+ * @description : 친구톡 excel 관련된 fuction .js
+ * =========================================================== 
+ * DATE          AUTHOR   NOTE 
+ * ----------------------------------------------------------- *
+ * 2024.01.08    우영두          최초 생성
+ * 
+ * 
+ * 
+ */
+
+
+$(document).ready(function(){
+
+	//치환문자 없는 엑섹불러오기 버튼 클릭시 파일 첨부 실행
+	$('.c1').click(function(){ // 엑셀파일 불러오기 선택 시
+		
+		$("#excelFile").click();
+		
+	});
+		
+});
+	
+
+//엑셀 파일 불러오기
+function excelExport(event){
+	
+	var fileValue = $("#excelFile").val().split("\\");
+	var fileName = fileValue[fileValue.length-1];
+	
+	var fileExt = fileName.split('.').pop().toLowerCase();
+
+	if(fileExt.length > 0){
+		if($.inArray(fileExt, ['txt','xls','xlsx']) == -1) {
+
+			alert('txt, xls, xlsx 파일만 업로드 할수 있습니다.');
+			return false;
+
+	   	}
+		
+		//$("#excelFile").val("");
+		//선택 파일명 화면에 표시해주기
+	    $("#excelNm").val(fileName);
+		
+	}
+	
+}
+
+
+//엑셀파일 자료 데이터베이스에 입력해주기
+function fnInsertAttchFileData(){
+	
+	var data = new FormData(document.excelForm);
+	data.append("file0", $('#excelFile').prop('files')[0]);
+	
+	var fileValue = $("#excelFile").val().split("\\");
+	var fileName = fileValue[fileValue.length-1];
+	
+	var fileExt = fileName.split('.').pop().toLowerCase();
+	
+	var url = "";
+	
+	if(fileExt == "xls" || fileExt == "xlsx"){
+		
+		//url = "/web/mjon/msgcampain/insertExelFileTWCallToAjax.do";
+		
+	}else if(fileExt = "txt"){
+		
+		//url = "/web/mjon/msgcampain/insertTxtFileTWCallToAjax.do";
+		
+	}else{
+		
+		alert('txt, xls, xlsx 파일만 업로드 할수 있습니다.');
+		return;
+		
+	}
+	
+	//엑셀 데이터 변수에 자료가 있으면 지워준다.
+   	if(excelAddr.length > 0){
+    	
+    	excelAddr = [];
+    	
+    }
+	
+	$.ajax({
+        type: "POST",
+        enctype: 'multipart/form-data',
+        url: url,
+        data: data,
+        dataType:'json',
+        async: true,
+        processData: false,
+        contentType: false,
+        cache: false,
+        //timeout: 600000,
+        success: function (returnData, status) {
+			if(status == 'success'){ // status 확인 필요한가. 석세스 안뜨면 에러 가지 않나
+				
+				if(returnData.success){
+					
+					var data = returnData.data;
+					var message = returnData.message;
+					
+					if(message != '' ){
+						alert(returnData.message);
+					}
+					
+					
+					if(data != null){
+						
+						$.each(data, function(i, item){
+							
+							//form 데이터 callSeq에 순번 입력해주기
+							$("#callSeq").val(item.callSeq);
+							
+						});
+
+					}
+					
+					//입력된 데이터베이스에서 받는사람 20건 불러와서 화면에 표시해주기
+					var callSeq = $("#callSeq").val();
+					if(callSeq > 0){
+						
+						//첨부파일로 불러온 데이터를 받는사람 목록에 추가해 준다.
+						addTWCallToInfo();
+						
+						//첨부파일 초기화 시켜주기
+					    $("#excelFile").val("");
+					    $("#excelNm").val("");
+						
+					}else{
+						
+						alert("추가 엑셀 데이터가 없습니다.");
+						return false;
+						
+					}
+					
+				}else{
+					alert(returnData.message);
+					excelAddr = []; //엑셀 데이터 저장 변수 초기화
+	        		$("#excelFile").val(""); //첨부파일 input 초기화
+	        	    $("#excelNm").val("");  // 첨부파일 명 초기화
+	        	    fileName = "";
+					return;
+					
+				}
+			} else if(status== 'fail'){
+				alert("첨부파일 불러오는 중 오류가 발생하였습니다.");
+				console.log("status : fail ~");
+			}
+		},
+		error: function (e) { 
+        	alert("첨부파일 불러오는 중 오류가 발생하였습니다."); 
+        	console.log("ERROR : ", e); 
+        },
+		beforeSend : function(xmlHttpRequest) {
+        	//로딩창 show
+        	$('.loading_layer').addClass('active');				
+		},	        	        
+        complete : function(xhr, textStatus) {
+        	//로딩창 hide
+        	$('.loading_layer').removeClass('active');
+		}
+    });
+	
+}
+
+//엑셀 불러오기 팝업의 추가 버튼 처리
+$("#excelAdd").click(function(){
+	
+	var callSeq = $("#callSeq").val();
+	
+	//엑셀파일 자료 데이터베이스에 입력해주기
+	fnInsertAttchFileData();
+	
+});