Code - chominsoo4245/mjon

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <!DOCTYPE html> <html lang="ko"> <head> <link rel="stylesheet" href="/publish/css/jquery.mCustomScrollbar.css"> <script src="/publish/js/jquery.mCustomScrollbar.concat.min.js"></script> <script src="/publish/js/content.js"></script> <script type="text/javascript"> $(document).ready(function (){ $('.preiew_img').hide(); $('.prePhoto').hide(); //최초 화면 문자열 길이 체크해주기 var strCon = $('#smsTxt').val(); fnByteString(strCon); // 발신자 전화번호 입력시 '-' 문자 입력해주기 /* $('#callFrom').keyup(function(e){ var callFrom = addDash($('#callFrom').val()); $('#callFrom').val(callFrom); }); */ // 수신자 전화번호 입력시 '-' 문자 입력해주기 /* $('#callTo').keyup(function(e){ var callTo = addDash($('#callTo').val()); $('#callTo').val(callTo); }); */ //일반문자, 광고문자 텍스트 내용 추가해주기 $('input[name=send_adYn]').change(function(){ advMsgInsert(); }); function advMsgInsert(){ var advStr = '<div class="ad_txt"><p>(광고)</p></div>'; var advDenyStr = '<div class="deny_txt"> <p>무료 거부 080-0000-0000</p> </div>'; var preAdvStr = '<p class="ad_tit">(광고)</p>'; var preAdvDenyStr = '<p class="deny_receipt">무료 거부 080-0000-0000</p>'; //광고 및 무료수신거부 텍스트 추가 if ($('input[name=send_adYn]:checked').val() == 'Y'){ //문자 내용에 광고 문자 추가해주기 $(advStr).insertBefore('textarea[name=smsTxt]'); $(advDenyStr).insertBefore('div[name=afterDeny]'); //미리보기에 광고 문자 추가해주기 $(preAdvStr).insertBefore('.none_txt'); $(preAdvDenyStr).insertAfter('.realtime'); //$('#smsTxt').val(advStr + "\r\n" + contents + "\r\n" + advDenyStr); }else{ //광고 및 무료수신거부 텍스트 삭제 //문자내용 광고문자 삭제하기 $('.ad_txt').remove(); $('.deny_txt').remove(); //미리보기 광고 문자 삭제하기 $('.ad_tit').remove(); $('.deny_receipt').remove(); /* contents = contents.replace(advStr + "\n","") .replace("\n" + advDenyStr, ""); $('#smsTxt').val(contents); */ } //문자 바이트수 계산하기 fnByteString($('#smsTxt').val()); } //문자 내용 입력시 바이트수 계산하기 $('#smsTxt').keyup(function(e){ var contents = $(this).val(); fnByteString(contents); });//문자 바이트수 계산하기 끝 //최초 문자샘플 탭 리스트 데이터 불러오기 fnLetterListAjax(); //문자 바이트수 계산하기 함수 function fnByteString(contents){ var totalByte = 0; var content = contents; $('#msgLeng').html(""); $('#limitLeng').html(""); var conLeng = conByteLeng(content); var photoSts = $('.delLi').length; if(photoSts > 0){ $('#msgLeng').html(conLeng + " / "); $('#limitLeng').html("2000"); $('.msg_com').html("그림"); $('#msgType').val("6"); // 메세지 타입 설정 $('.msg_com').removeClass("msg_short"); //단문 클래스 삭제하고 $('.put_left').removeClass("short"); //내용 입력 박스 클래스 삭제 $('.msg_com').removeClass("msg_long"); //장문 클래스 삭제하고 $('.put_left').removeClass("long"); //내용 입력 박스 클래스 삭제 $('.msg_com').addClass("msg_photo"); // 그림 클래스 삽입 $('.put_left').addClass("photo"); // 내용 입력 박스에 클래스 삽입 $('.put_left').css("display","block"); // 내용 입력 박스에 클래스 삽입 document.getElementById("mmsSubject").disabled = false; }else{ if(conLeng > 90){ $('#msgLeng').html(conLeng + " / "); $('#limitLeng').html("2000"); $('.msg_com').html("장문"); $('#msgType').val("6"); // 메세지 타입 설정 $('.msg_com').removeClass("msg_short"); //단문 클래스 삭제하고 $('.put_left').removeClass("short"); //내용 입력 박스 클래스 삭제 $('.msg_com').addClass("msg_long"); // 장문 클래스 삽입 $('.put_left').addClass("long"); // 내용 입력 박스에 클래스 삽입 document.getElementById("mmsSubject").disabled = false; }else{ $('#msgLeng').html(conLeng + " / "); $('#limitLeng').html("90"); $('.msg_com').html("단문"); $('#msgType').val("4"); // 메세지 타입 설정 $('.msg_com').removeClass("msg_long"); //단문 클래스 삭제하고 $('.put_left').removeClass("long"); //내용 입력 박스 클래스 삭제 $('.msg_com').addClass("msg_short"); // 장문 클래스 삽입 $('.put_left').addClass("short"); // 내용 입력 박스에 클래스 삽입 //제목 비활성화로 내용 지워주기 $('#mmsSubject').val(""); document.getElementById("mmsSubject").disabled = true; } } // 미리보기 데이터 입력해 주기 , 줄바꿈 문자 변환해주기 var repContent = ""; repContetnt = content.replace(/(?:\r\n|\r|\n)/g, '<br/>'); $('.none_txt').text(content); // 2000byte 초과시 메세지 알림 if(conLeng > 2000){ alert("문자 내용은 2000byte를 넘을 수 없습니다."); return false; } //결제 금액 계산해보기 var totalPrice = totalPriceSum(); $('#totalPrice').text(totalPrice); $('#smsLen').val(conLeng); } //문자입력창의 첨부된 이미지 순서를 바꿀 때 $(document).on('mouseup', '.thumb_wrap img', function (){ //미리보기 창의 이미지 순서를 변경한다 setTimeout(function() { var previewHtml = ""; //이미지 갯수만큼 for문 돌림 for(var i=0; i<imgCnt-1; i++) { var imgTag = $(".thumb_wrap li:eq("+i+") div").html(); // 썸네일에 있는 이미지 태그 가져오기 previewHtml += '<div class="img_box preBoxF on_scroll_img" id="preBoxF'+(i+1)+'">' previewHtml += imgTag; previewHtml += '</div>' } $('.preViewShort div').remove(); //미리보기 영역에 있던 이미지 다 지우고 $('.preViewShort').append(previewHtml); //새로 sorting된 이미지 그려주기 }, 100); }); //문자 샘플 탭, 그림문자 샘플 탭 선택시 옵션 초기화 $('.tab').click(function(){ var index = $(this).index(); var form = document.letterForm; if($(this).hasClass("active") === true){ if(index == 0){ form.pageIndex.value = 1; form.letterType.value = "S"; form.categoryCode.value = ""; form.hashTag.value = ""; }else if(index == 1){ form.pageIndex.value = 1; form.letterType.value = "P"; form.categoryCode.value = ""; form.hashTag.value = ""; }else if(index == 2){ setTimeout(function(){ map.relayout(); map.setCenter(testcoords); }, 0); } } }); //이미지 선택시 그림문자 처리 var imgCnt = 1; $(document).on('click', '.photoOnImg', function(){ /* $('.photoOnImg').click(function(){ */ $('.preShort').hide(); $('.prePhoto').show(); if($('.msg_com').hasClass("msg_short") === true){ $('.msg_com').removeClass("msg_short"); //단문 클래스 삭제하고 $('.msg_com').addClass("msg_photo"); // 그림문자용 클래스 삽입 $('.put_left').removeClass("short"); $('.put_left').addClass("photo"); $('.msg_com').html("그림"); $('#msgType').val("6"); // 메세지 타입 설정 //제목 입력 항목 활성화 document.getElementById("mmsSubject").disabled = false; }else{ $('.msg_com').removeClass("msg_long"); //장문 클래스 삭제하고 $('.msg_com').addClass("msg_photo"); // 그림문자용 클래스 삽입 $('.put_left').removeClass("long"); $('.put_left').addClass("photo"); $('.msg_com').html("그림"); $('#msgType').val("6"); // 메세지 타입 설정 //제목 입력 항목 활성화 document.getElementById("mmsSubject").disabled = false; } var imgSrc = $(this).attr("src"); var imgId = $('#photoOnImg_'+imgCnt).val(); if(imgCnt > 3){ alert("이미지는 3장만 선택할 수 있습니다."); return false; }else{ //문자 내용 상단에 이미지 이름 영역 객체 추가해주기 var imgPath = "<img src=\"" + imgSrc + "\" alt=\"thumb1\"/>"; var liPath = '<li class="delLi" id="delLi'+ imgCnt +'">' + '<div>' + imgPath + '</div>' + '<button type="button" class="file_close"><img src="/publish/images/content/thumb_del.png" alt="첨부파일 삭제"></button>' + '<button type="button" class="file_close_on"><img src="/publish/images/content/thumb_del_on.png" alt="첨부파일 삭제"></button>' + '</li>'; /* "<li class=\"delLi\"><p>" + imgPath + "</p><button type=\"button\" class=\"file_close\"><img class=\"delImg\" src=\"/publish/images/content/file_close.png\" alt=\"첨부파일 삭제\"></button></li>" */ $('.liOnImg').append(liPath); //미리보기 보여주기 $('.preiew_img').show(); var imgHtml = ""; var imgPath = "<div class=\"img_box preBoxF\" id=preBoxF"+ imgCnt +"><img src=\"" + imgSrc + "\" /></div>"; if(imgCnt == 1){ $('.preViewShort').append(imgPath); $('.photo_num_01').show(); $('.photo_num_02').hide(); $('.photo_num_03').hide(); //$(".thumb_wrap li:eq(0)").addClass("on"); }else if(imgCnt == 2){ $('.preViewShort').append(imgPath); $('.photo_num_02').show(); $(".thumb_wrap li").removeClass("on"); //$(".thumb_wrap li:eq(1)").addClass("on"); }else if(imgCnt == 3){ $('.preViewShort').append(imgPath); $('.photo_num_03').show(); $(".thumb_wrap li").removeClass("on"); //$(".thumb_wrap li:eq(2)").addClass("on"); } // 배열에 선택한 이미지 경로 저장해주기 imgFilePath.push(imgSrc); // 배열에 선택한 이미지 아이디 저장해주기 - 내 문자 보관함 저장용으로 사용 imgFileId.push(imgId); //문자 길이 및 타입 변경해주기 var contents = $('#smsTxt').val(); fnByteString(contents); //이미지 카운트 증가시키기 imgCnt ++; } var scrollHei = $(".mCustomScrollBox").height(); if(scrollHei > 488) { $(".img_box").addClass("on_scroll_img"); } }); //그림문자 이미지 삭제 처리 - 동적으로 추가한 객체는 on 함수로 불러올 수 있다. $(document).on('click', '.file_close', function(){ var delImgPath = ""; //삭제하려는 이미지 경로 받아오기 var index = $(this).index(); // 현재 선택 된 객체 인덱스 번호 받아오기 //선택한 태그의 부모 이미지 li 객체 삭제 $(this).parent(".delLi").remove(); //미리보기 화면에서의 이미지 객체 삭제 //삭제하려는 이미지 경로 받아오기 delImgPath = $('.preBoxF').eq(index).find("img").attr("src"); $('.preBoxF').eq(index).remove(); // 삭제한 이미지 경로 배열에서 삭제해 주기 for(var i=0; i < imgFilePath.length; i++){ if(imgFilePath[i] === delImgPath){ imgFilePath.splice(i, 1); //이미지 경로 삭제 imgFileId.splice(i, 1); //이미지 아이디 삭제 - 내 문자 보관함 저장용으로 사용 i--; } } imgCnt--; //미리보기 포토 1,2,3 번 번호 표시 변경 $('.photo_num_02').hide(); $('.photo_num_03').hide(); if(imgCnt > 2){ $('.photo_num_01').show(); $('.photo_num_02').show(); }else if(imgCnt > 1){ $('.photo_num_01').show(); }else{ //그림을 모두 삭제 했을때 단문으로 변경 $('.preShort').show(); $('.prePhoto').hide(); $('.msg_com').removeClass("msg_photo"); $('.msg_com').addClass("msg_short"); $('.put_left').removeClass("photo"); $('#msgType').val("4"); // 메세지 타입 설정 var contents = $('#smsTxt').val(); fnByteString(contents); } var scrollHei = $(".mCustomScrollBox").height(); if(scrollHei > 488) { $(".img_box").removeClass("on_scroll_img"); } }); // 초기화 버튼 처리 $('.btnReset').click(function(){ //일반문자 라이오 선택해 주기 $("#send_adYnN").prop("checked", true); $('.delLi').each(function(){ $(this).remove(); }); $('.preBoxF').each(function(){ $(this).remove(); }); //그림을 모두 삭제 했을때 단문으로 변경 $('.preShort').show(); $('.prePhoto').hide(); $('.msg_com').removeClass("msg_photo"); $('.msg_com').addClass("msg_short"); $('#msgType').val("4"); // 메세지 타입 설정 //메세지 내용 초기화 $('#smsTxt').val(""); fnByteString(""); }); // 동적으로 추가해주기 때문에 on 사용 $(document).on('click', '.letterMsg', function(){ //문자 템플릿 선택시 상단 문자 내용에 입력해주기 /* var smsTxt = $(this).find('.msg_text').text(); */ var smsTxtArea = $(this).find('.msg_text').html(); smsTxtArea = smsTxtArea.replace(/(<br>|<br\/>|<br \/>)/g, '\r\n'); $('#smsTxt').val(""); $('#smsTxt').val(smsTxt); fnByteString(smsTxt); var sendOfT=$('.send_top').offset().top; $('html,body').stop().animate({'scrollTop':sendOfT-60},250); }); // 동적으로 추가해주기 때문에 on 사용 $(document).on('click', '.btnSearchF', function(){ // 검색 기능 실행 var form = document.letterForm; if(form.searchKeyword.value == ""){ alert("검색어를 입력해 주세요."); return false; } //문자 리스트 불러오기 fnLetterListAjax(); }); /* 단문 / 장문 탭 옵션 선택시 실행 **/ $('.tDep1_mType').click(function(){ // 전체,기업, 개인 선택 옵션 처리 var mType = $(this).find('.on_active').text(); var form = document.letterForm; if(mType == "전체"){ form.memberType.value = ""; }else if(mType == "기업"){ form.memberType.value = "B"; }else{ form.memberType.value = "P"; } //문자 리스트 불러오기 form.letterType.value = "S"; form.categoryCode.value = ""; form.hashTag.value = ""; form.pageIndex.value = 1; //문자 리스트 불러오기 fnLetterListAjax(); }); $('.tDep1_letType').click(function(){ // 단문, 장문 선택 시 옵션처리 var letterType = $(this).find('.on').attr("value"); var form = document.letterForm; form.letterType.value = letterType; //문자 리스트 불러오기 fnLetterListAjax(); }); $('.tDep1_cateCode').click(function(){ // 카테고리 선택 시 옵션 처리 var cateCode = $(this).find('.on').attr("value"); var form = document.letterForm; if(cateCode == "all"){ //전체 선택시 cateCode = ""; } form.categoryCode.value = cateCode; form.pageIndex.value = 1; //문자 리스트 불러오기 fnLetterListAjax(); }); $('.tDep1_hashTag').click(function(){ // 해시 태그 선택 시 옵션 처리 var hashTag = $(this).find('.on').attr("value"); var form = document.letterForm; form.hashTag.value = hashTag; form.pageIndex.value = 1; //문자 리스트 불러오기 fnLetterListAjax(); }); /* 그림문자 탭 옵션 선택시 사용 */ $('.tDep2_mType').click(function(){ // 전체,기업, 개인 선택 옵션 처리 var mType = $(this).find('.on_active').text(); var form = document.letterForm; if(mType == "전체"){ form.memberType.value = ""; }else if(mType == "기업"){ form.memberType.value = "B"; }else{ form.memberType.value = "P"; } //문자 리스트 불러오기 form.letterType.value = "P"; form.categoryCode.value = ""; form.hashTag.value = ""; form.pageIndex.value = 1; fnPhotoListAjax(); }); $('.tDep2_letType').click(function(){ // 그림문자 선택 var letterType = $(this).find('.on').attr("value"); var form = document.letterForm; form.letterType.value = 'P'; //문자 리스트 불러오기 fnPhotoListAjax(); }); $('.tDep2_cateCode').click(function(){ // 그림 문자 카테고리 선택 시 옵션 처리 var cateCode = $(this).find('.on').attr("value"); var form = document.letterForm; if(cateCode == "all"){ //전체 선택시 cateCode = ""; } form.categoryCode.value = cateCode; form.pageIndex.value = 1; //문자 리스트 불러오기 fnPhotoListAjax(); }); $('.tDep2_hashTag').click(function(){ // 그림문자 해시 태그 선택 시 옵션 처리 var hashTag = $(this).find('.on').attr("value"); var form = document.letterForm; form.hashTag.value = hashTag; form.pageIndex.value = 1; //문자 리스트 불러오기 fnPhotoListAjax(); }); //받는사람 번호추가 버튼 처리 $('.addCallToF').click(function(){ var callTo = addDash($('#callTo').val()); if(callTo == ""){ alert("받는사람 번호를 입력해 주세요."); return false; }else if(!_regExp1.test(callTo)){ alert("올바른 받는사람 번호를 입력해 주세요."); $('#callTo').val(""); return false; } var isExist = false; $('.callNum_list').each(function(){ if($(this).text() == callTo){ isExist = true; return false; } }); if(!isExist){ var addCallHtml = '<div class="list_table list_body">' + '<div class="cb_wrap">' + '<label for="" class="label"></label>' + '<input type="checkbox">' + '</div>' + '<div class="list_table_num callNum_list">' + '<p>' + callTo + '</p>' + '</div>' + '<div class="list_table_name">' + '<p>홍길동</p>' + '</div>' + '</div>'; $('.callList_box').append(addCallHtml); $('#callTo').val(""); }else{ alert("이미 추가된 전화번호 입니다."); $('#callTo').val(""); return false; } //결제 금액 계산해보기 var totalPrice = totalPriceSum(); $('#totalPrice').text(totalPrice); }); $(".fontPlus").click(function () { var currentSize = $(".preview_auto").css("fontSize"); var size = parseInt(currentSize, 10) * 1.2; var unit = currentSize.slice(-2); $(".preview_auto").css("fontSize", size+unit); }); $(".fontMinus").click(function () { var currentSize = $(".preview_auto").css("fontSize"); var size = parseInt(currentSize, 10) / 1.2; var unit = currentSize.slice(-2); $(".preview_auto").css("fontSize", size+unit); }); }); function openPhotoEditor() { //만들려는 팝업의 크기 var popup_wid = '950'; var popup_ht = '760'; //중앙 정렬을 위해 윈도우 스크린의 width,height 구하는 변수 만듦 var popup_left = (window.screen.width / 2) - (popup_wid / 2); var popup_top =(window.screen.height / 2) - (popup_ht / 2); window.open('<c:url value='/web/mjon/msgdata/openImageEditorPopup.do'/>', 'a', 'width=' + popup_wid +', height='+ popup_ht +', left=' + popup_left + ', top='+ popup_top + ', scrollbar=no' ); } </script> </head> <body> <form id="msgForm" name="msgForm" method="post"> <input type="hidden" id="msgType" name="msgType" value="4" /> <input type="hidden" id="imgFilePath" name="imgFilePath" value="" /> <input type="hidden" id="imgFileId" name="imgFileId" value="" /> <input type="hidden" id="fileCnt" name="fileCnt" value="0" /> <input type="hidden" id="callToList" name="callToList" value=""/> <input type="hidden" id="eachPrice" name="eachPrice" value="0"/>  <input type="hidden" id="totPrice" name="totPrice" value="0"/>  <input type="hidden" id="smsLen" name="smsLen" value="0"/>  <div class="top_content current hascont" id="tab1_1"> <div class="heading"> <h2>문자전송</h2> <ul class="send_price"> <li><span class="type">단문</span><span class="price sPrice">8.2</span>원</li> <li class="price_line"><span class="type">장문</span><span class="price mPrice">24.6</span>원</li> <li class="price_line"><span class="type">그림</span><span class="price pPrice">57.3</span>원</li> </ul> </div> <div class="titBox"> <p>- 90byte 초과 시, 장문으로 전환됩니다. 장문 문자는 최대 2,000byte까지 작성할 수 있습니다.</p> <p>- 포토문자 1건에 포토 최대 3장 첨부가능 [권장 사이즈 : 640 x 960픽셀 / 최대용량 : 10MB]</p> <p>- 광고성 메시지는 반드시 유의사항 확인 후 발송해 주시기 바랍니다. <span> [광고문자 유의사항 보기]</span></p> <button type="button"><i></i>사용안내</button> </div> <div class="send_general"> <div class="send_left"> <table class="tType1"> <caption>일반 문자보내기 분류 번호 내용 등을 입력하는 표</caption> <colgroup> <col style="width: 100px;"> <col style="width: auto;"> </colgroup> <tbody> <tr> <th scope="row">문자분류</th> <td class="send_cf"> <input id="send_adYnN" type="radio"name="send_adYn" value="N" checked="checked"> <label for="send_adYnN">일반</label> <input id="send_adYnY" type="radio" name="send_adYn" value="Y"> <label for="send_adYnY">광고</label> </td> </tr> <tr> <th scope="row">발신번호</th> <td class="put_num"> <label for="callFrom" class="label"></label>  <select id="callFrom" class="sel_number"> <option value="010-1234-5678">010-1234-5678</option> <option value="010-1234-5678">010-1234-5678</option> <option value="010-1234-5678">010-1234-5678</option> <option value="010-1234-5678">010-1234-5678</option> </select> <button type="button" class="btnType btnType6">번호변경</button> </td> </tr> <tr> <th scope="row">제목</th> <td>  <label for="mmsSubject" class="label"></label> <input type="text" size="20" id="mmsSubject" name="mmsSubject" class="w100" placeholder="" onfocus="this.placeholder=''" >   </td> </tr>  <tr> <th scope="row">내용</th> <td class="putText"> <div class="clearfix"> <div class="put_left short">  <ul class="thumb_wrap liOnImg"></ul>   <label for="smsTxt" class="label"></label> <textarea id="smsTxt" name="smsTxt" class="put_text"> </textarea> <div class="text_length">  <div name="afterDeny"> <p> <span class="fwMd" id="msgLeng">0 /</span> <span class="c_002c9a fwMd" id="limitLeng"> 90</span>byte </p> <span class="msg_com msg_short">단문</span> </div> </div> </div> <div class="put_right"> <button type="button" class="btnType btnType7">특수문자</button> <button type="button" class="btnType btnType7">특정문구 일괄변환</button> <button type="button" class="btnType btnType7" onclick="javascript:fnGoMyMsg(); return false;">내문자함</button> <button type="button" class="btnType btnType8" onclick="openPhotoEditor();">이미지 불러오기</button> <div class="send_btnWrap"> <button type="button" class="btnType btnType9" onclick="javascript:fn_saveMyMsg(); return false;">문자저장</button> <button type="button" class="btnType btnType9 btnReset">초기화</button> </div> </div> </div> <p>* 현재 [단문] <span class="c_e40000 fwBold">120,000</span>건 발송 가능합니다.</p> </td> </tr> <tr> <th scope="row">받는사람</th> <td class="send_list"> <div class="list_left"> <div class="add_num"> <label for="callTo" class="label"></label> <input type="text" id="callTo" name="callTo" placeholder="번호를 입력하세요." onfocus="this.placeholder=''" onblur="this.placeholder='번호를 입력하세요.'"> <button type="button" class="btnType btnType6 addCallToF">번호추가</button> <span>* 중복번호는 한번만 발송됩니다.</span> </div> <div class="numOfCase"> <p>총 <span>120</span>건 /</p> <p>중복 <span>9</span>건</p> </div> <div> <div class="listType list01 callList_box"> <div class="list_table list_head"> <div class="cb_wrap"> <label for="" class="label"></label> <input type="checkbox"> </div> <div class="list_table_num"> <p>번호</p> <img src="/publish/images/sortUp.png"> <img src="/publish/images/sortDown.png"> </div> <div class="list_table_name"> <p>이름</p> <img src="/publish/images/sortUp.png"> <img src="/publish/images/sortDown.png"> </div> </div> </div> <div class="list_bottom"> <div class="remove_btnWrap"> <button type="button" class="btnType15"><i class="remove_img"></i>전체삭제</button> <button type="button" class="btnType15"><i class="remove_img"></i>선택삭제</button> <button type="button" class="btnType15"><i class="remove_img"></i>중복삭제</button> <button type="button" class="address_reg2">주소록에 등록</button> </div>  </div> </div> </div> <div class="add_remove"> <button type="button" class="add"><i></i>추가</button> <button type="button" class="remove"><i></i>삭제</button> </div> <div class="list_right"> <div style="height: 90px;"> <div class="list_btnWrap"> <button type="button" class="btnType btnType12">최근 전송내역</button> <button type="button" class="btnType btnType12">자주보내는 번호</button> <button type="button" class="btnType btnType12">그룹 보내기</button> <button type="button" class="btnType btnType13 c1">주소록 불러오기</button> <button type="button" class="btnType btnType13 c2">Txt파일 불러오기</button> <button type="button" class="btnType btnType13 c3">액셀 불러오기</button> </div> </div> <div> <div class="listType list02"> <div class="list_table list_head"> <div class="cb_wrap"> <label for="" class="label"></label> <input type="checkbox"> </div> <div class="list_table_num"> <p>번호</p> <img src="/publish/images/sortUp.png"> <img src="/publish/images/sortDown.png"> </div> <div class="list_table_name"> <p>이름</p> <img src="/publish/images/sortUp.png"> <img src="/publish/images/sortDown.png"> </div> </div> <div class="drag_drop"> <div class="drag_drop_in"> <div class="drag_top"> <i></i> <p>Drag and Drop</p> <span>파일을 여기에 끌어 놓으세요</span> </div> <div class="drag_txt"> <span>or</span> </div> <div class="drag_bottom"> <p>Ctrl+C → Ctrl+V</p> <span>복사해서 붙여넣으세요</span> </div> </div> </div> </div> <div class="list_bottom"> <div class="remove_btnWrap"> <button type="button" class="btnType15"><i class="remove_img"></i>선택삭제</button> <button type="button" class="btnType15"><i class="remove_img"></i>전체삭제</button> <button type="button" class="check_validity">유효성 검사<i></i></button> </div> </div> </div> </div> </td> </tr> <tr> <th colspan="2" class="billingAmount"> <div> <div class="final_pay clearfix"> <p>결제금액 :</p> <p class="price" ><span id="totalPrice">0</span>원<span>(부가세 포함)</span></p> <button type="button"><i></i>계산하기</button> </div> <div class="pay_type clearfix"> <div> <label for="" class="label">충전 금액</label> <input id="radio_bill_1" type="radio" name="radio_bill" checked="checked"> <label for="radio_bill_1">내 충전금 (<span>3,000</span>원)</label> </div> <div> <label for="" class="label">포인트 금액</label> <input type="text" placeholder="199,700" readonly> <button type="button" class="btnType btnType3">충전</button> </div> </div> <div class="pay_type clearfix"> <div> <input id="radio_bill_1" type="radio" name="radio_bill" checked="checked"> <label for="radio_bill_1">내 포인트 (<span>300</span>p)</label> </div> <div> <input type="text" placeholder="300" readonly> <button type="button" class="btnType btnType3">전체사용</button> </div> </div> </div> </th> </tr> <tr> <th scope="row">추천인 ID</th> <td class="check_num"> <input id="radio5" type="radio"name="recom" checked="checked"> <label for="radio5">없음</label> <input id="radio6" type="radio" name="recom"> <label for="radio6">있음</label> <div> <label for="id" class="label"></label> <input type="text" size="20" id="id" placeholder="추천인 아이디 입력" onfocus="this.placeholder=''" onblur="this.placeholder='추천인 아이디 입력'"> <button type="button" class="btnType btnType9">확인</button> </div> </td> </tr> </tbody> </table> </div> <div class="send_right"> <div class="phone"> <div class="phoneIn"> <div> <p><img src="/publish/images/search.png">미리보기</p> <div class="text_length2 clearfix preShort"> <span class="msg_com msg_short">단문</span> <div> <span>글자크기</span> <button type="button" class="fontPlus"><img src="/publish/images/content/font_plus.png"></button> <button type="button" class="fontMinus"><img src="/publish/images/content/font_minus.png"></button> </div> </div> <div class="text_length2 clearfix prePhoto"> <span class="msg_com msg_photo">포토</span> <ul class="photo_msg_num"> <li class="photo_num_01" onclick="imgClick(0);"><a href="#none">1</a></li> <li class="photo_num_02" onclick="imgClick(1);"><a href="#none">2</a></li> <li class="photo_num_03" onclick="imgClick(2);"><a href="#none">3</a></li> </ul> <div> <span>글자크기</span> <button type="button" class="fontPlus"><img src="/publish/images/content/font_plus.png"></button> <button type="button" class="fontMinus"><img src="/publish/images/content/font_minus.png"></button> </div> </div>  <div class="text_preview"> <div class="preiew_img preViewShort"></div> <div class="preview_auto">  <p class="none_txt"></p> <p class="realtime"></p>  </div> </div>  </div> </div> <p class="addText">※ 단말기 설정에 따라 다르게 보일 수 있습니다</p> </div> <div class="phone_bottom"> <div class="send_rev"> <div class="rev_radio"> <input id="radio7" type="radio"name="reser" checked="checked"> <label for="radio7">즉시</label> <input id="radio8" type="radio" name="reser"> <label for="radio8">예약</label> </div> <div> <div class="rev_top"> <span>날짜 :</span> <div class="calendar"> <input type="text" title="예약 전송 시 날짜 선택"><button id="txtDate1" value="" title="캘린더 팝업 열기" onclick="fnPopUpCalendar(txtDate1,txtDate1,'yyyy/mm/dd')" class="text_box1 calInput"><img src="/publish/images/calendar/calendarIcon2.png"></button> </div> <label for="" class="label">시 선택</label> <div class="selBox"> <select class="selType1"> <option>00시</option> <option>10시</option> <option>20시</option> </select> <label for="" class="label">분 선택</label> <select class="selType1"> <option>00분</option> <option>25분</option> <option>50분</option> </select> </div> </div> <div class="rev_bottom"> <input type="checkbox"> <label for="">분할전송</label> <select class="selType1"> <option>00시</option> <option>10시</option> <option>20시</option> </select> <label for="">건</label> <select class="selType1"> <option>00분</option> <option>25분</option> <option>50분</option> </select> <label>간격</label> </div> </div> </div> <div class="send_btn"> <button type="button" class="btnType btnType10">테스트 발송<img src="/publish/images/content/qmIcon.png"></button> <button type="button" class="btnType btnType11" onclick="javascript:fn_sendMsgData(); return false;">발송하기</button> </div> </div> </div> </div> </div> </form> </body> </html>