[김은해] 카카오톡 채팅 연결하기 수정 - 220516

src/assets/css/seller_common.css

@@ -284,15 +284,22 @@
 }
 
 .seller-detail-header .link-kakako-chat {
+  display:block;
+  width:100%;
+  height: 44px;
+  padding: 14px 0 13px 0;
+  border-radius: 4px;
+  box-shadow: -4px -6px 10px 0 rgba(255, 255, 255, 0.83), 4px 7px 10px 0 #d3d3d3;
+  background-color: #efeff1;
   font-size: 1.3rem;
 }
 
 .seller-detail-header .link-kakako-chat:before {
   content: '';
   display: inline-block;
-  width: 20px;
-  height: 18px;
-  background: url(../img/seller/ico_kakao@2x.png) no-repeat 0 0;
+  width:17px;
+  height:17px;
+  background: url(../img/seller/icon_chat@2x.png) no-repeat 0 0;
   background-size: 100% 100%;
   vertical-align: top;
   margin-right: 4px;

src/assets/html/seller_heder_modify.html

@@ -61,7 +61,7 @@
                         <!-- //Swiper -->
                     </div>
                     <!-- //key visual -->
-                    <a href="#none" class="link-kakako-chat" target="_blank">카카오톡 채팅 연결하기</a>
+                    <button type="button" class="link-kakako-chat" target="_blank" data-modal=".modal-chat">1:1 채팅 구매 상담  |  09시 ~ 24시</button>                
                 </div>
 
                 <!-- s: 색상선택 -->
@@ -1234,6 +1234,33 @@
     </div>
     <!-- 우편번호 검색 레이어 팝업 -->
 
+    <!-- 1:1 채팅 구매상담 모달 팝업 -->
+    <!-- [D] 오픈시 div.modal에 display:block, body에 j-noscroll클래스 추가 -->
+    <div class="modal modal-chat" role="dialog" aria-modal="true" style="display:none;">
+      <div class="modal-dialog" role="document">
+        <div class="modal-body">
+          <div class="modal-header">
+            <h1 class="modal-title">알림</h1>
+          </div>
+
+          <div class="modal-content">
+            <p class="paragraph">3G/LTE/5G 망 사용 시 <br />데이터 요금이 발생됩니다.</p>
+          </div>
+
+          <div class="modal-footer">
+            <span class="group-l">
+              <button type="button" class="btn-default-text js-modal-close">취소</button>
+            </span>
+            <span class="group-r">
+              <button type="button" class="btn-secondary-text">확인</button>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="dimmed"></div>
+    </div>
+    <!-- //1:1 채팅 구매상담 모달 팝업 -->				
+
     <script src="../js/jquery.min.js"></script>
     <script src="../js/swiper.min.js"></script>
     <script src="../js/tdirect-ui.js"></script>

src/assets/html/seller_heder_modify_f.html

@@ -61,7 +61,7 @@
                         <!-- //Swiper -->
                     </div>
                     <!-- //key visual -->
-                    <a href="#none" class="link-kakako-chat" target="_blank">카카오톡 채팅 연결하기</a>
+                    <button type="button" class="link-kakako-chat" target="_blank" data-modal=".modal-chat">1:1 채팅 구매 상담  |  09시 ~ 24시</button>     
                 </div>
 
                 <!-- s: 색상선택 -->
@@ -1339,6 +1339,33 @@
     </div>
     <!-- 우편번호 검색 레이어 팝업 -->
 
+    <!-- 1:1 채팅 구매상담 모달 팝업 -->
+    <!-- [D] 오픈시 div.modal에 display:block, body에 j-noscroll클래스 추가 -->
+    <div class="modal modal-chat" role="dialog" aria-modal="true" style="display:none;">
+      <div class="modal-dialog" role="document">
+        <div class="modal-body">
+          <div class="modal-header">
+            <h1 class="modal-title">알림</h1>
+          </div>
+
+          <div class="modal-content">
+            <p class="paragraph">3G/LTE/5G 망 사용 시 <br />데이터 요금이 발생됩니다.</p>
+          </div>
+
+          <div class="modal-footer">
+            <span class="group-l">
+              <button type="button" class="btn-default-text js-modal-close">취소</button>
+            </span>
+            <span class="group-r">
+              <button type="button" class="btn-secondary-text">확인</button>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="dimmed"></div>
+    </div>
+    <!-- //1:1 채팅 구매상담 모달 팝업 -->			
+
     <script src="../js/jquery.min.js"></script>
     <script src="../js/swiper.min.js"></script>
     <script src="../js/tdirect-ui.js"></script>

src/assets/html/seller_process1.html

@@ -57,7 +57,7 @@
                         <!-- //Swiper -->
                     </div>
                     <!-- //key visual -->
-                    <a href="#none" class="link-kakako-chat" target="_blank">카카오톡 채팅 연결하기</a>
+                    <button type="button" class="link-kakako-chat" target="_blank" data-modal=".modal-chat">1:1 채팅 구매 상담  |  09시 ~ 24시</button>   
                 </div>
 
                 <!-- s: 색상선택 -->
@@ -1282,6 +1282,33 @@
     </div>
     <!-- 우편번호 검색 레이어 팝업 -->
 
+    <!-- 1:1 채팅 구매상담 모달 팝업 -->
+    <!-- [D] 오픈시 div.modal에 display:block, body에 j-noscroll클래스 추가 -->
+    <div class="modal modal-chat" role="dialog" aria-modal="true" style="display:none;">
+      <div class="modal-dialog" role="document">
+        <div class="modal-body">
+          <div class="modal-header">
+            <h1 class="modal-title">알림</h1>
+          </div>
+
+          <div class="modal-content">
+            <p class="paragraph">3G/LTE/5G 망 사용 시 <br />데이터 요금이 발생됩니다.</p>
+          </div>
+
+          <div class="modal-footer">
+            <span class="group-l">
+              <button type="button" class="btn-default-text js-modal-close">취소</button>
+            </span>
+            <span class="group-r">
+              <button type="button" class="btn-secondary-text">확인</button>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="dimmed"></div>
+    </div>
+    <!-- //1:1 채팅 구매상담 모달 팝업 -->			
+
     <script src="../js/jquery.min.js"></script>
     <script src="../js/swiper.min.js"></script>
     <script src="../js/tdirect-ui.js"></script>