휘파람보드 1.1.3

- 소셜 SNS 공유 아이콘 변경

_src/common/js/global.js

@@ -98,7 +98,7 @@ $('[data-toggle="btn-popup-close"]').click(function(e){
 /**
  * SNS 공유
  */
-$("a[data-toggle='sns-share']").click(function(e){
+$("a[data-toggle='sns-share']").not('[data-service="link"]').click(function(e){
     e.preventDefault();
 
     var _this = $(this);
@@ -141,3 +141,14 @@ $("a[data-toggle='sns-share']").click(function(e){
     APP.POPUP({ url : loc});
     return false;
 });
+
+$(function(){
+    var clipboard = new ClipboardJS('a[data-toggle="sns-share"][data-service="link"]', {
+        text: function(trigger) {
+            return trigger.getAttribute('data-url');
+        }
+    });
+    clipboard.on('success', function(){
+        alert('현재 URL이 복사되었습니다.');
+    });
+});

_src/desktop/scss/pages/_social.scss

@@ -5,57 +5,54 @@
   background-color:#fff;
 
   .sns-share-list {
+    @include display-flex();
+    justify-content: center;
+    align-items: center;
+    margin:0 auto;
+    flex-wrap:wrap;
+    padding:0;
     margin:0;
-    padding:0px;
-    list-style:none;
-    white-space:nowrap;
-    display:inline-block;
-    vertical-align:middle;
-    height:32px;
-    float:right;
-
-    &:after {
-      clear:both; content:''; display:table;
-    }
 
     li {
-      display:block; width:32px; height:32px; float:left;
+      display:block;
+      padding:0px 5px;
 
-      + li {
-        margin-left:5px;
+      @media screen and (max-width:$break-desktop) {
+        width:25%;
+        margin-bottom:15px;
       }
-
-      a {
-        display:block;
-        width:32px;
-        height:32px;
-        text-indent:-9999px;
-        overflow:hidden;
-        background-image:url('../images/social/sns_buttons.png');
-        background-repeat:no-repeat;
-        background-size:cover;
-
-        &[data-service="facebook"] {
-          background-position-x:0px;
-        }
-
-        &[data-service="google"] {
-          background-position-x:-32px;
-        }
-        &[data-service="kakaostory"] {
-          background-position-x:-64px;
-        }
-        &[data-service="band"] {
-          background-position-x:-96px;
-        }
-        &[data-service="naver"] {
-          background-position-x:-128px;
-        }
-
-      } // a
-
-    } // li
-
-  } // .sns-share-list
+    }
+    [data-toggle="sns-share"] {
+      text-indent:-9999px;
+      width:40px;
+      height:40px;
+      display:block;
+      margin:auto;
+    }
+    [data-toggle="sns-share"][data-service="pinterest"] {
+      background-image:url(../images/social/sns_pinterest.png);
+    }
+    [data-toggle="sns-share"][data-service="facebook"] {
+      background-image:url(../images/social/sns_facebook.png);
+    }
+    [data-toggle="sns-share"][data-service="google"] {
+      background-image:url(../images/social/sns_google.png);
+    }
+    [data-toggle="sns-share"][data-service="band"] {
+      background-image:url(../images/social/sns_band.png);
+    }
+    [data-toggle="sns-share"][data-service="kakaostory"] {
+      background-image:url(../images/social/sns_kakao.png);
+    }
+    [data-toggle="sns-share"][data-service="naver"] {
+      background-image:url(../images/social/sns_naver.png);
+    }
+    [data-toggle="sns-share"][data-service="line"] {
+      background-image:url(../images/social/sns_line.png);
+    }
+    [data-toggle="sns-share"][data-service="link"] {
+      background-image:url(../images/social/sns_link.png);
+    }
+  }
 
 } //.sns-share-wrap

gulpfile.js

@@ -40,6 +40,7 @@ var theme = {
         ]
     },
     commonJs : [
+        "node_modules/clipboard/dist/clipboard.js",
         "_src/plugins/jquery-blockUI/jquery.blockUI.js",
         "_src/plugins/jquery-cookie/jquery.cookie.js",
         "_src/plugins/toastr/toastr.js",

package-lock.json

@@ -4,6 +4,43 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "clipboard": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.1.tgz",
+      "integrity": "sha512-7yhQBmtN+uYZmfRjjVjKa0dZdWuabzpSKGtyQZN+9C8xlC788SSJjOHWh7tzurfwTqTD5UDYAhIv5fRJg3sHjQ==",
+      "requires": {
+        "good-listener": "1.2.2",
+        "select": "1.1.2",
+        "tiny-emitter": "2.0.2"
+      },
+      "dependencies": {
+        "good-listener": {
+          "version": "1.2.2",
+          "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+          "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+          "requires": {
+            "delegate": "3.2.0"
+          },
+          "dependencies": {
+            "delegate": {
+              "version": "3.2.0",
+              "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+              "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+            }
+          }
+        },
+        "select": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+          "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+        },
+        "tiny-emitter": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz",
+          "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow=="
+        }
+      }
+    },
     "gulp": {
       "version": "3.9.1",
       "resolved": "https://registry.npmjs.org/gulp/-/gulp-3.9.1.tgz",

package.json

@@ -20,5 +20,7 @@
     "gulp-sass": "^3.2.1",
     "gulp-size": "^3.0.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "clipboard": "^2.0.1"
+  }
 }

wheeparam/views/skins/board/view/basic/view.php

@@ -35,11 +35,14 @@
 
             <div class="sns-share-wrap">
                 <ul class="sns-share-list">
-                    <li><a href="#" data-toggle="sns-share" data-service="facebook" data-url="<?=current_url()?>" data-title="<?=$this->site->meta_title?>">페이스북 공유하기</a></li>
-                    <li><a href="#" data-toggle="sns-share" data-service="google" data-url="<?=current_url()?>" data-title="<?=$this->site->meta_title?>">구글+ 공유하기</a></li>
-                    <li><a href="#" data-toggle="sns-share" data-service="kakaostory" data-url="<?=current_url()?>" data-title="<?=$this->site->meta_title?>">카카오 스토리 공유하기</a></li>
-                    <li><a href="#" data-toggle="sns-share" data-service="band" data-url="<?=current_url()?>" data-title="<?=$this->site->meta_title?>">밴드 공유하기</a></li>
-                    <li><a href="#" data-toggle="sns-share" data-service="naver" data-url="<?=current_url()?>" data-title="<?=$this->site->meta_title?>">네이버 공유하기</a></li>
+                    <li><a href="javascript:;" data-toggle="sns-share" data-service="facebook" data-url="<?=current_url()?>" data-title="<?=$this->site->meta_title?>">페이스북 공유하기</a></li>
+                    <li><a href="javascript:;" data-toggle="sns-share" data-service="google" data-url="<?=current_url()?>" data-title="<?=$this->site->meta_title?>">구글+ 공유하기</a></li>
+                    <li><a href="javascript:;" data-toggle="sns-share" data-service="pinterest" data-url="<?=current_url()?>" data-title="<?=$this->site->meta_title?>">핀터레스트 공유하기</a></li>
+                    <li><a href="javascript:;" data-toggle="sns-share" data-service="kakaostory" data-url="<?=current_url()?>" data-title="<?=$this->site->meta_title?>">카카오 스토리 공유하기</a></li>
+                    <li><a href="javascript:;" data-toggle="sns-share" data-service="band" data-url="<?=current_url()?>" data-title="<?=$this->site->meta_title?>">밴드 공유하기</a></li>
+                    <li><a href="javascript:;" data-toggle="sns-share" data-service="naver" data-url="<?=current_url()?>" data-title="<?=$this->site->meta_title?>">네이버 공유하기</a></li>
+                    <li><a href="javascript:;" data-toggle="sns-share" data-service="line" data-url="<?=current_url()?>" data-title="<?=$this->site->meta_title?>">네이버 라인 공유하기</a></li>
+                    <li><a href="javascript:;" data-toggle="sns-share" data-service="link" data-url="<?=current_url()?>" data-title="<?=$this->site->meta_title?>">현재 링크 복사하기</a></li>
                 </ul>
             </div>
         </div>