- - - 카카오톡아래 예제(JSP)를 참고하시어 쉽고 편리하게 API를 연동할 수 있습니다.
+ - - 아래 예제(JSP)를 참고하시어 쉽고 편리하게 API를 연동할 수 있습니다.
- - JSP 외 타 예제는 계속해서 업데이트 될 예정입니다.
diff --git a/src/main/webapp/publish/css/content.css b/src/main/webapp/publish/css/content.css
index 0eed8c51..1528821f 100644
--- a/src/main/webapp/publish/css/content.css
+++ b/src/main/webapp/publish/css/content.css
@@ -1639,6 +1639,8 @@ button.check_validity:hover {border: 1px solid #a3a3a3;box-shadow: 0px 0px 5px
.kakaotalkset_cont .template_sample_content_wrap .pagination{margin-top: 40px;}
.kakaotalkset_cont .send_general.kakao_wrap{padding: 50px 0 0 0;}
+.kakaotalkset_cont .friend_talk_wrap .template_name_wrap input{width:340px;}
+.kakaotalkset_cont .friend_talk_wrap .template_name_wrap button{padding:0 15px;font-weight:400;}
.kakao_wrap .tType1_title{font-size: 24px;}
.kakao_wrap .template_name{width: 340px;}
.kakao_wrap .template_name_cf{display: inline-block; color: #666; padding: 0 0 0 15px; vertical-align: inherit;}
@@ -1646,13 +1648,19 @@ button.check_validity:hover {border: 1px solid #a3a3a3;box-shadow: 0px 0px 5px
.kakao_wrap .img_add_info_wrap .info_title_text{font-size: 15px; font-weight: 500;}
.kakao_wrap .img_add_info_wrap .info_text{font-size: 15px; color: #555;}
.kakao_wrap .img_add_info_wrap .info_text li{margin: 3px 0 0 0;}
-.kakao_wrap .img_file_add_wrap .btn_img_upload{width: 251px; margin: 10px 0 15px 0;}
+.kakao_wrap .img_file_add_wrap .info_title_text{font-weight: 500;margin:0 0 5px 0;}
+.kakao_wrap .img_file_add_wrap .btn_img_upload{width: 251px;}
.kakao_wrap .img_file_add_wrap .img_file_info_wrap{width: 100%; max-width: 623px; border: 1px solid #e5e5e5; border-radius: 5px;}
.kakao_wrap .img_file_add_wrap .img_file_info_wrap li{display: flex;min-height: 60px;padding: 10px 20px; border-bottom: 1px solid #e5e5e5;justify-content: space-between; align-items: center; box-sizing: border-box;}
.kakao_wrap .img_file_add_wrap .img_file_info_wrap li:last-child{border-bottom: 0;}
.kakao_wrap .img_file_add_wrap .file_name{font-size: 16px; font-weight: 500;}
.kakao_wrap .img_file_add_wrap .btn_del{width: 30px;height: 30px;border: 1px solid #002c9a;border-radius: 5px;}
.kakao_wrap .img_file_add_wrap .img_url{width: calc(100% - 190px);}
+.kakao_wrap .img_file_add_wrap .info_text{margin:0 0 10px 0;}
+.kakao_wrap .img_file_add_wrap .info_text li{list-style:1.4;}
+.kakao_wrap .img_file_add_wrap .img_file_wrap{display:inline-flex;width:calc(100% - 200px);}
+.kakao_wrap .img_file_add_wrap .img_file_wrap .file_name{width:calc(100% - 28px);}
+.kakao_wrap .img_file_add_wrap .img_file_wrap .file_name.file_none{color:#666;font-weight:300;line-height:1.8;}
.kakaotalkset_cont .kakao_wrap .template_category{width: 270px;}
.kakaotalkset_cont .kakao_wrap .emphasis_select{width: 250px;}
@@ -1683,6 +1691,7 @@ button.check_validity:hover {border: 1px solid #a3a3a3;box-shadow: 0px 0px 5px
.kakaotalkset_cont .kakao_wrap .put_right .btn_close{width: calc(100% - 20px); height: 36px; background-color: #999; color: #fff; font-size: 15px; border-radius: 5px; margin-top: 5px;}
.kakaotalkset_cont .kakao_wrap .put_right .send_btnWrap{position: absolute; width: 100%; bottom: 0;}
.kakaotalkset_cont .kakao_wrap .put_right .send_btnWrap button{width: 100%; max-width: 100%;}
+.kakaotalkset_cont .friend_talk_wrap .phone_bottom{bottom:17px;}
.kakaotalkset_cont .kakao_wrap .button_type_wrap{display: flex; border: 1px solid #e5e5e5; border-radius: 5px; padding: 10px 20px; margin: 10px 0 0 0;}
.kakaotalkset_cont .kakao_wrap .button_type_wrap dt{width: 110px; font-weight: 400; padding: 8px 0 0 0;}
.kakaotalkset_cont .kakao_wrap .button_type_wrap .button_type_input{width: 483px;}
@@ -1724,7 +1733,7 @@ button.check_validity:hover {border: 1px solid #a3a3a3;box-shadow: 0px 0px 5px
.kakaotalkset_cont .kakao_wrap .send_right .phone_bottom .cancel{width: calc((100% - 10px));}
.kakao_wrap .replace_send_wrap{display: none; border: 1px solid #000; border-radius: 8px;padding: 0 20px; margin: 0 0 20px 0;}
.kakao_wrap .replace_send_wrap .tType1 tr:first-child{border-top: 0;}
-.kakao_wrap .replace_send_wrap .tType1 tbody tr td.putText .put_right .btnType9{position: absolute; max-width: 100%; bottom: 0;}
+.kakao_wrap .replace_send_wrap .tType1 tbody tr td.putText .put_right .btnType9{position: absolute; max-width: 100%; bottom: 0; left: 0;}
.kakao_wrap .replace_send_th{height: auto; padding: 20px 0 0 0;}
.kakao_wrap .replace_send_th .title_th{margin: 0 0 20px 0;}
.kakao_wrap .replace_send_th .title_th p{display: inline-block; width: 90px;}
@@ -1759,7 +1768,7 @@ button.check_validity:hover {border: 1px solid #a3a3a3;box-shadow: 0px 0px 5px
.kakaotalksend_cont .kakao_wrap .kakao_template_text {display: flex;justify-content: space-between;}
.kakaotalksend_cont .kakao_wrap .put_right .btn_popup_wrap{margin: 0 0 5px 0;}
.kakaotalksend_cont .kakao_wrap .replace_send_wrap .put_left{height: 234px;}
-.kakaotalksend_cont .kakao_wrap .replace_send_wrap .put_left.short textarea{height: calc(100% - 58px);}
+.kakaotalksend_cont .kakao_wrap .replace_send_wrap .put_left.short textarea{height: calc(100% - 79px);}
.kakaotalksend_cont .kakao_wrap .button_type_wrap{display: flex; border: 1px solid #e5e5e5; border-radius: 5px; padding: 10px 20px; margin: 10px 0 0 0;}
.kakaotalksend_cont .kakao_wrap .button_type_wrap dt{width: 110px; font-weight: 400; padding: 8px 0 0 0;}
.kakaotalksend_cont .kakao_wrap .button_type_wrap .button_type_input{width: 483px;}
@@ -1798,13 +1807,16 @@ button.check_validity:hover {border: 1px solid #a3a3a3;box-shadow: 0px 0px 5px
.friend_talk_wrap .put_text_wrap .put_text{height: calc(100% - 40px); border: 0; background-color: transparent; padding: 14px 0 0 0px;}
.friend_talk_wrap .put_text_wrap .text_length{position: absolute; display: flex; width: calc(100% - 40px); justify-content: space-between; align-items: center; left: 20px; box-sizing: border-box;}
.friend_talk_wrap .put_text_wrap .ad_txt{padding: 0;margin: 0;}
-.friend_talk_wrap .put_right .btn_popup_wrap>button,.friend_talk_wrap .put_right .send_btnWrap>button{width: 100%; max-width: 100%; height: 40px;}
+.friend_talk_wrap .put_right .btn_popup_wrap>button{width: 100%; max-width: 100%; height: 40px;}
.friend_talk_wrap .put_right .btn_popup_wrap>button:last-child,.friend_talk_wrap .put_right .send_btnWrap>button:last-child{margin: 0;}
-.friend_talk_wrap .put_right .btn_text_save{background-color: #fff; border: 1px solid #002c9a; color: #002c9a; margin: 0 0 8px 0;}
+.friend_talk_wrap .put_right .send_btnWrap{display:flex;gap:6px;}
+.friend_talk_wrap .put_right .send_btnWrap .btnType9{width:40%;}
+.friend_talk_wrap .put_right .send_btnWrap .btn_text_save{width:60%;}
+
.friend_talk_wrap .template_button .cf_text{margin: 10px 0 0 0; font-size: 14px; color: #666;}
.friend_talk_wrap .friend_talk_title{margin: 0 0 10px 0; font-size: 15px; color: #222;}
.friend_talk_wrap .friend_talk_title span{color: #777;}
-.friend_talk_wrap .send_right .phone .phoneIn .text_preview .allimtalk_content{border-radius: 5px;}
+.friend_talk_wrap .send_right .phone .phoneIn .text_preview .allimtalk_content{border-radius: 5px;overflow:hidden;}
.friend_talk_wrap .send_right .phone .phoneIn .text_preview .allimtalk_content .template_text{font-size: 15px; font-weight: 300; color: #555;}
.friend_talk_wrap .send_right .kakao_block_text{width: calc(100% - 20px); text-align: right; font-size: 13px; font-weight: 300; color: #555; margin: 10px 0 0 0;}
.friend_talk_wrap .put_left {position: relative;width: calc(100% - 175px);height: 260px;}
@@ -1812,8 +1824,11 @@ button.check_validity:hover {border: 1px solid #a3a3a3;box-shadow: 0px 0px 5px
.friend_talk_wrap .put_right{width: 165px;}
.friend_talk_wrap .put_right .send_btnWrap {position: absolute;width: 100%;bottom: 0;}
.kakaotalksend_cont .friend_talk_wrap{padding: 0;}
-.kakaotalksend_cont .friend_talk_wrap .put_left {height: 307px;}
-.kakaotalksend_cont .friend_talk_wrap .put_text_wrap{height: calc(100% - 48px); margin: 10px 0 0 0;}
+.kakaotalksend_cont .friend_talk_wrap .put_left {height: 259px;}
+.kakaotalksend_cont .friend_talk_wrap .template_name_wrap{display:flex;gap:10px;}
+.kakaotalksend_cont .friend_talk_wrap .template_name_wrap input{width:340px;}
+.kakaotalksend_cont .friend_talk_wrap .template_name_wrap button{padding:0 15px;font-weight:400;}
+/* .kakaotalksend_cont .friend_talk_wrap .put_text_wrap{height: calc(100% - 48px); } */
.kakaotalksend_cont .friend_talk_wrap .put_right {position: relative;width: 165px;}
.kakaotalksend_cont .tType1 tbody tr td.putText .put_right .btn_popup_wrap button:not(.btn_close){margin: 0 0 0 10px;}
diff --git a/src/main/webapp/publish/images/content/kakao_img_basic.jpg b/src/main/webapp/publish/images/content/kakao_img_basic.jpg
new file mode 100644
index 00000000..37f5b3e3
Binary files /dev/null and b/src/main/webapp/publish/images/content/kakao_img_basic.jpg differ
diff --git a/src/main/webapp/publish/images/content/kakao_img_wide.jpg b/src/main/webapp/publish/images/content/kakao_img_wide.jpg
new file mode 100644
index 00000000..2694cd28
Binary files /dev/null and b/src/main/webapp/publish/images/content/kakao_img_wide.jpg differ
diff --git a/src/main/webapp/publish/info_popup.html b/src/main/webapp/publish/info_popup.html
index 2a68c655..83ad9c98 100644
--- a/src/main/webapp/publish/info_popup.html
+++ b/src/main/webapp/publish/info_popup.html
@@ -429,6 +429,25 @@