Commit @27049aca989d895977314b84ac5b9fe4606623d5

ITN_디자인팀 2024-01-04

2024/01/04 문자온 > 선거 20건문자 사용안내 팝업 퍼블리싱

@27049aca989d895977314b84ac5b9fe4606623d5

85b1b0c

27049ac

src/main/webapp/WEB-INF/jsp/web/msgcampain/tw/MsgTWDataSMLView.jsp

--- src/main/webapp/WEB-INF/jsp/web/msgcampain/tw/MsgTWDataSMLView.jsp

+++ src/main/webapp/WEB-INF/jsp/web/msgcampain/tw/MsgTWDataSMLView.jsp

...	...	@@ -3817,28 +3817,29 @@
3817	3817	</div>
3818	3818	<!--// 주소록에 등록 팝업 -->
3819	3819
3820		- <!--선거문자 이용안내 팝업 -->
3821		- <div class="tooltip-wrap">
	3820	+ <!--선거 20건문자 이용안내 팝업 추가 -->
	3821	+ <div class="tooltip-wrap tw_wrap ">
3822	3822	<div class="popup-com ad_layer candidate_popup03" tabindex="0" data-tooltip-con="candidate_popup03" data-focus="candidate_popup03" data-focus-prev="candidate_popup03-close" style="width: 795px">
3823	3823	<div class="popup_heading">
3824		- <p>선거문자 안내</p>
	3824	+ <p>20건 문자(수동문자) 이용안내</p>
3825	3825	<button type="button" class="tooltip-close" data-focus="candidate_popup03-close"><img src="/publish/images/content/layerPopup_close.png" alt="팝업 닫기"></button>
3826	3826	</div>
3827	3827	<div class="layer_in">
3828		- <img src="/publish/images/content/candidatePop_banner.png" alt="선거문자 이용안내 배너" class="candidate_banner">
	3828	+ <img src="/publish/images/popup/tw_popup/tw_banner.png" alt="문자온에서 후보님의 당선을 지원합니다. 20건 문자(수동문자) 이용안내" class="candidate_banner">
3829	3829	<ul class="info_list">
3830	3830	<li>- 90byte 초과 시, 자동으로 장문으로 전환됩니다. 장문 문자는 최대 2,000byte까지만 작성할 수 있습니다.</li>
3831	3831	<li>- 그림문자 1건당 최대 3장까지 이미지 첨부 가능 [권장 사이즈 : <strong>640 x 960</strong>픽셀 / 최대용량 : <strong>10MB</strong> 이내]</li>
3832		- <li>- 광고성 메시지는 <span>반드시 아래 유의사항을 사전 확인</span> 후 발송해 주시기 바랍니다.</li>
3833	3832	</ul>
3834	3833	<!-- 이용방법/혜택 -->
3835	3834	<div class="cdpop_cont current" id="listTab2_1">
3836		- <div>
	3835	+ <div class="con">
3837	3836	<p class="cdpop_title">
3838		- <i class="cdpop_title_icon1"></i>선거문자 이용방법
	3837	+ <i class="tw_title01_icon"></i>20건 문자 이용절차
	3838	+ <!--
3839	3839	<span class="customReq">
3840	3840	<button type="button" onclick="goToCustom();"><i></i>선거문자 맞춤제작</button>
3841	3841	</span>
	3842	+ -->
3842	3843	</p>
3843	3844	<ul class="cdpop_info">
3844	3845	<li>
...	...	@@ -3879,80 +3880,86 @@
3879	3880	</li>
3880	3881	</ul>
3881	3882	</div>
3882		- <div>
3883		- <p class="cdpop_title"><i class="cdpop_title_icon2"></i>문자온 선거문자만의 장점 및 혜택</p>
3884		- <ul class="cdpop_benefit">
3885		- <li>
3886		- <div>
3887		- <i class="benefit1"></i>
3888		- <p>한 번에 대량으로 보내야 한다면?<span>10만건까지 동시 전송 가능</span></p>
3889		- </div>
3890		- <p>문자온의 대량전송(엑셀·TXT) 모듈을 통해
3891		- 10만건의 대량문자도 쉽고 빠르게 전송 가능합니다.</p>
3892		- </li>
3893		- <li>
3894		- <div>
3895		- <i class="benefit2"></i>
3896		- <p>수신거부 번호가 필요하세요?<span>080 수신거부 번호 무료제공</span></p>
3897		- </div>
3898		- <p>선거문자 발송규정 준수를 위해
3899		- 080 수신거부 번호를 무료로 제공해 드립니다.</p>
3900		- </li>
3901		- <li>
3902		- <div>
3903		- <i class="benefit3"></i>
3904		- <p>주소록 등록이 번거로우신가요?<span>주소록 등록 무료대행</span></p>
3905		- </div>
3906		- <p>주소록 등록파일(엑셀·TXT)을 문자온에 제공해
3907		- 주시면 무료로 빠르고 신속하게 등록해 드립니다.</p>
3908		- </li>
3909		- <li>
3910		- <div>
3911		- <i class="benefit4"></i>
3912		- <p>홍보효과를 높이고 싶다면?<span>후보자만의 그림문자 맞춤제작</span></p>
3913		- </div>
3914		- <p>선거공약, 인사말, 후보자 사진 등을 넣어 그림문자를
3915		- 맞춤 제작하여 홍보효과를 극대화할 수 있습니다.</p>
3916		- </li>
3917		- <li>
3918		- <div>
3919		- <i class="benefit5"></i>
3920		- <p>오류·실패건의 문자를 보상받고 싶다면?<span>오류·실패건 문자 100% 환불</span></p>
3921		- </div>
3922		- <p>번호오류, 수신거부, 수신실패 등으로 인해 문자전송이
3923		- 실패한 경우 100% 환불(자동충전)해 드립니다.</p>
3924		- </li>
3925		- <li>
3926		- <div>
3927		- <i class="benefit6 "></i>
3928		- <p>전송결과가 궁금하다면?<span>실시간 전송결과 확인 가능</span></p>
3929		- </div>
3930		- <p>전송결과 및 실패사유를 실시간으로 제공해드립니다.</p>
3931		- </li>
3932		- <li>
3933		- <div>
3934		- <i class="benefit7"></i>
3935		- <p>20건씩 나눠서 보내야한다면?<span>20건씩 분할 예약 전송 가능</span></p>
3936		- </div>
3937		- <p>누구나 쉽고 편리하게 20건씩 나눠서 분할 전송이 가능합니다.</p>
3938		- </li>
3939		- <li>
3940		- <div>
3941		- <i class="benefit8"></i>
3942		- <p>필요한 서류가 있다면?<span>문자온에서 간편하게 신청 가능</span></p>
3943		- </div>
3944		- <p>문자온에서 발송내역서 출력이 가능하며,
3945		- 세금계산서는 메일로 자동으로 발행됩니다.</p>
3946		- </li>
3947		- </ul>
	3883	+ <div class="con">
	3884	+ <p class="cdpop_title tw_title"><i class="tw_title02_icon"></i>후보자 등록 방법</p>
	3885	+ <div class="tw_con">
	3886	+ <ul>
	3887	+ <li>- 선거관리위원회에 등록된 후보자 정보와 세금계산서 담당자 정보를 입력합니다.</li>
	3888	+ <li class="sub_te">세금계산서 발행을 위한 정보로만 사용됩니다.</li>
	3889	+ </ul>
	3890	+ <img src="/publish/images/popup/tw_popup/tw_con_01.jpg" alt="받는 사람 목록 불러오기">
	3891	+ </div>
3948	3892	</div>
3949		- </div><!--// 이용방법/혜택 -->
	3893	+ <div class="con">
	3894	+ <p class="cdpop_title tw_title"><i class="tw_title03_icon"></i>받는 사람 목록 불러오기</p>
	3895	+ <div class="tw_con">
	3896	+ <ul>
	3897	+ <li>- 주소록 관리 메뉴에서 등록한 주소록을 불러오거나 PC에 저장된 엑셀 파일을 불러올 수 있습니다.</li>
	3898	+ <li>- 주소록 불러오기
	3899	+ <ul class="sub_li">
	3900	+ <li>① 그룹을 선택합니다.</li>
	3901	+ <li>② 체크박스 개별 또는 전체 선택을 통해 받는 사람 목록을 선택합니다.</li>
	3902	+ <li>③ 추가 버튼을 클릭합니다.</li>
	3903	+ </ul>
	3904	+ </li>
	3905	+ <li class="li_02">- 엑셀 불러오기
	3906	+ <ul class="sub_li">
	3907	+ <li>① 찾아보기를 클릭하여 불러올 엑셀 파일을 선택합니다.</li>
	3908	+ <li>② 추가 버튼을 클릭합니다.</li>
	3909	+ </ul>
	3910	+ </li>
	3911	+ </ul>
	3912	+ <img src="/publish/images/popup/tw_popup/tw_con_02.jpg" alt="받는 사람 목록 불러오기 1">
	3913	+ <ul>
	3914	+ <li class="te">- 받는 사람 목록 선택이 완료되면 20건 씩 받는 사람을 선택할 수 있도록 화면에 표시되며, 불러온 받는 사람 목록 전체에 대한 전체 받는사람 수, 전송완료 수, 잔여 받는사람 수를 확인할 수 있습니다.</li>
	3915	+ <li class="sub_te">불러온 받는 사람 목록은 재접속, 재로그인 시에도 유지되오니 목록을 삭제하고 싶은 경우에는<br>초기화 버튼을 눌러주세요.</li>
	3916	+ </ul>
	3917	+ <img src="/publish/images/popup/tw_popup/tw_con_03.jpg" alt="받는 사람 목록 불러오기 2">
	3918	+ </div>
	3919	+ </div>
	3920	+ <div class="con">
	3921	+ <p class="cdpop_title tw_title"><i class="tw_title04_icon"></i>20명 수동 선택 후 발송하기</p>
	3922	+ <div class="tw_con">
	3923	+ <ul>
	3924	+ <li>- 수동 선택 방법 (4가지 방법 가능)
	3925	+ <ul class="sub_li">
	3926	+ <li>① 체크박스를 하나씩 차례로 선택</li>
	3927	+ <li>② 받는 사람 목록 전화번호 위에서 마우스 왼쪽을 길게 누르고 드래그하여 영역 선택</li>
	3928	+ <li>③ 1명씩 선택 버튼을 계속 누르고 있으면 20명이 모두 선택</li>
	3929	+ <li>④ 전체버튼을 누르면 20명이 한번에 선택</li>
	3930	+ </ul>
	3931	+ </li>
	3932	+ <li class="te" style="margin-top: 10px;">
	3933	+ - 발송하기 버튼을 클릭하면 선택한 20건 문자가 발송되고 받는 사람 목록에 있는 다음 20건이 자동으로 화면에 표시됩니다.
	3934	+ </li>
	3935	+ </ul>
	3936	+ <img src="/publish/images/popup/tw_popup/tw_con_04.jpg" alt="20명 수동 선택 후 발송하기">
	3937	+ </div>
	3938	+ </div>
	3939	+ <div class="con">
	3940	+ <p class="cdpop_title tw_title"><i class="tw_title05_icon"></i>예약문자 발송하기</p>
	3941	+ <div class="tw_con">
	3942	+ <ul>
	3943	+ <li class="te">- 선택한 20건 문자의 발송이 예약되고 받는 사람 목록에 있는 다음 20건이 자동으로 화면에 표시됩니다.
	3944	+ <ul class="sub_li" style="margin-top: 5px;">
	3945	+ <li>① 예약 라디오 버튼을 클릭합니다.</li>
	3946	+ <li>② 예약일자 및 시간을 선택합니다.</li>
	3947	+ <li>③ 예약하기 버튼을 클릭합니다.</li>
	3948	+ </ul>
	3949	+ </li>
	3950	+ </ul>
	3951	+ <img src="/publish/images/popup/tw_popup/tw_con_05.jpg" alt="예약문자 발송하기" style="margin-bottom: 0;">
	3952	+ </div>
	3953	+ </div>
	3954	+ </div>
	3955	+ <!--// 이용방법/혜택 -->
3950	3956	</div>
3951	3957	<div class="popup_btn_wrap2" style="margin: 0 auto 30px auto;">
3952	3958	<button type="button" class="tooltip-close" data-focus="candidate_popup03-close" data-focus-next="candidate_popup03">닫기</button>
3953	3959	</div>
3954	3960	</div>
3955		- </div><!--// 선거문자 이용안내 팝업 -->
	3961	+ </div>
	3962	+ <!--//선거 20건문자 이용안내 팝업 추가 -->
3956	3963
3957	3964	<!-- 이벤트 잔여 캐시 정보 표시 팝업 -->
3958	3965	<div class="tooltip-wrap">
...	...	@@ -4072,7 +4079,7 @@
4072	4079	<h2>20건 문자(수동문자) 전송</h2>
4073	4080	<div class="election_btnWrap">
4074	4081	<button type="button" class="button2 info" onclick="infoPop('selectMsgDataView2');">발송규정</button>
4075		- <!-- <button type="button" class="button2 info" data-tooltip="candidate_popup03">사용안내</button> -->
	4082	+ <button type="button" class="button2 info" data-tooltip="candidate_popup03">사용안내</button>
4076	4083	<c:choose>
4077	4084	<c:when test="${empty LoginVO}">
4078	4085	<button type="button" class="btnType" onclick="javascript:fn_candidateLoginChk(); return false;"><i class="election_btn1"></i>후보자 등록</button>

85b1b0c

27049ac

src/main/webapp/publish/css/popupLayer.css

--- src/main/webapp/publish/css/popupLayer.css

+++ src/main/webapp/publish/css/popupLayer.css


 .toast_popup .title{font-size:16px;font-weight:500;color:#fff;line-height:1.5;}
 .toast_popup .btn_close{display:inline-block;width:20px;height:20px;background:url(/publish/images/icon_toast_close.png) no-repeat center center;}
 
+/*20건 문자(수동문자) 이용안내 팝업*/
+.tw_wrap .con .tw_title{padding: 0 0 10px 0;}
+.tw_wrap .tw_title01_icon{background-image: url(/publish/images/popup/tw_popup/title01_icon.png); width: 28px; height: 24px; margin: 0 5px 0 0;}
+.tw_wrap .con .tw_title .tw_title02_icon{background-image: url(/publish/images/popup/tw_popup/title02_icon.png); width: 28px; height: 24px; margin: 0 5px 0 0;}
+.tw_wrap .con .tw_title .tw_title03_icon{background-image: url(/publish/images/popup/tw_popup/title03_icon.png); width: 28px; height: 24px; margin: 0 5px 0 0;}
+.tw_wrap .con .tw_title .tw_title04_icon{background-image: url(/publish/images/popup/tw_popup/title04_icon.png); width: 28px; height: 24px; margin: 0 5px 0 0;}
+.tw_wrap .con .tw_title .tw_title05_icon{background-image: url(/publish/images/popup/tw_popup/title05_icon.png); width: 28px; height: 24px; margin: 2px 5px 0 0;}
+.tw_wrap .con .tw_con ul li{font-size: 17px; color: #222; font-weight: 500; line-height: 1.8;}
+.tw_wrap .con .tw_con ul .te{line-height: 1.4; text-indent: -10px; word-break: keep-all; margin: 0 0 10px 13px;}
+.tw_wrap .con .tw_con ul .sub_te{font-size: 16px; color: #666; font-weight: 400; line-height: 1.5; margin: -5px 0 0 11px;}
+.tw_wrap .con .tw_con .sub_li li{font-size: 16px; color: #666; font-weight: 400; line-height: 1.6; margin: 0 0 0 11px;}
+.tw_wrap .con .tw_con .li_02{margin: 10px 0 0 0;}
+.tw_wrap .con .tw_con img{width: 100%; margin: 22px 0 40px 0;}
+
 
 /* ie */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

Add a comment

Open 0
Closed 0

List

...	...	@@ -1132,6 +1132,20 @@
1132	1132	.toast_popup .title{font-size:16px;font-weight:500;color:#fff;line-height:1.5;}
1133	1133	.toast_popup .btn_close{display:inline-block;width:20px;height:20px;background:url(/publish/images/icon_toast_close.png) no-repeat center center;}
1134	1134
	1135	+/20건 문자(수동문자) 이용안내 팝업/
	1136	+.tw_wrap .con .tw_title{padding: 0 0 10px 0;}
	1137	+.tw_wrap .tw_title01_icon{background-image: url(/publish/images/popup/tw_popup/title01_icon.png); width: 28px; height: 24px; margin: 0 5px 0 0;}
	1138	+.tw_wrap .con .tw_title .tw_title02_icon{background-image: url(/publish/images/popup/tw_popup/title02_icon.png); width: 28px; height: 24px; margin: 0 5px 0 0;}
	1139	+.tw_wrap .con .tw_title .tw_title03_icon{background-image: url(/publish/images/popup/tw_popup/title03_icon.png); width: 28px; height: 24px; margin: 0 5px 0 0;}
	1140	+.tw_wrap .con .tw_title .tw_title04_icon{background-image: url(/publish/images/popup/tw_popup/title04_icon.png); width: 28px; height: 24px; margin: 0 5px 0 0;}
	1141	+.tw_wrap .con .tw_title .tw_title05_icon{background-image: url(/publish/images/popup/tw_popup/title05_icon.png); width: 28px; height: 24px; margin: 2px 5px 0 0;}
	1142	+.tw_wrap .con .tw_con ul li{font-size: 17px; color: #222; font-weight: 500; line-height: 1.8;}
	1143	+.tw_wrap .con .tw_con ul .te{line-height: 1.4; text-indent: -10px; word-break: keep-all; margin: 0 0 10px 13px;}
	1144	+.tw_wrap .con .tw_con ul .sub_te{font-size: 16px; color: #666; font-weight: 400; line-height: 1.5; margin: -5px 0 0 11px;}
	1145	+.tw_wrap .con .tw_con .sub_li li{font-size: 16px; color: #666; font-weight: 400; line-height: 1.6; margin: 0 0 0 11px;}
	1146	+.tw_wrap .con .tw_con .li_02{margin: 10px 0 0 0;}
	1147	+.tw_wrap .con .tw_con img{width: 100%; margin: 22px 0 40px 0;}
	1148	+
1135	1149
1136	1150	/* ie */
1137	1151	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

Delete comment