[PM의 개발일지] JS | URL 공유하기 기능 구현

프론트의 일을 어깨너머로 배워가고 있는 PM, 안나입니다.

오늘은 개발자님이 바쁘신 것같아서, URL공유하기 버튼을 직접 넣어보았습니다.

버튼을 디자인하는 것(HTML, CSS)부터, 기능구현까지 어떻게 진행했는지 공유해드릴게요 :>

우선 완성작은 아래와 같습니다.

* 카카오톡 공유하기 버튼은 익일 진행 예정입니다 :>

#기본프론트: 공유하기버튼 디자인하기

우선 제 URL 복사하기 버튼의 경우,

"공유하기"를 상징하는 아이콘을 클릭 시, "URL 복사"와 "카카오톡 공유"가 뜨는 방식입니다.

하단은 공유하기 버튼의 HTML입니다.

<div class="ws_btn">
        <li class="art_v_share">
            <div class="ov ani">
                <div class="v1">URL 복사</div>
                <div class="v2">카카오톡 공유</div>
            </div>
        </li>
</div>

하단은 공유하기 버튼의 CSS입니다.
공유하기 아이콘을 "relative"로 두고,
아래 펼쳐지는 회색상자(art_v_share on)를 "absolute"로 둠으로써, 반응형에서도 아이콘과 회색상자가 자연스럽게 따라다닐 수 있게 구성했습니다.

.ws_btn {
  top: 2.75rem;
  right: 1rem;
  margin-left: auto;
}

.ws_btn li {
  float: left;
  width: 45px;
  height: 45px;
  background-color: #262626;
  border-radius: 100%;
  cursor: pointer;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.5rem;
}

.art_v_share {
  background-image: url("/img/art_v_share.png");
  list-style-type: none;
}

.art_v_share.on {
  background-image: url("img/art_v_share_on2.png");
}

.art_v_share .ov {
  position: absolute;
  opacity: 0;
  top: 3rem;
  right: -1.5rem;
  width: 6rem;
  padding: 0.5rem 0;
  text-align: center;
  background: #343434;
  box-shadow: rgb(124 122 115 / 50%) 0px 20px 30px -10px;
  border-radius: 1.5rem;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

.art_v_share .ov .v1,
.art_v_share .ov .v2 {
  display: block;
  font-size: 0.8rem;
  color: #f7f7f7;
  padding: 1rem 0;
}

.art_v_share.on .ov {
  opacity: 1;
}

URL복사에 마우스커서를 올리면 효과가 나타날 수 있게 효과를 추가해보았어요.

.art_v_share .ov .v1:hover,
.art_v_share .ov .v2:hover {
  color: #d3bc94;
  text-decoration: underline;
}

CSS를 보시면 "on"이 있는데요, 여기에는 약간의 자바스크립트가 들어갑니다.
버튼을 클릭 시에 art_v_share 클래스는 art_v_share on으로 변환이 됩니다.

$로 클래스를 잡아준 후, 토글클래스 중 "on"을 넣기만 하면 되는 간단한 함수입니다.

    $(".art_v_share").click(function(){
        $(this).toggleClass('on');
    });

공유하기 버튼을 디자인하는 것만으로도 이렇게 사실은 간단하지 않은 절차가 필요한데요.
이렇게 디자인을 다 하고 나면 실제 기능 구현에 또 머리가 아파집니다. ㅋㅋㅋㅋ

#심화프론트: 공유하기버튼 기능 구현하기

기능을 구현하기 위해서 정말 여기저기 돌아다니면서 공부한 것같아요.

저는 평생 개발을 모르다가, PM일을 하며,
프론트개발자님, 백앤드 개발자님의 프로그래밍을 어깨넘어서 보게 되었어요.

소통을 하다보니, 어느새 저도 코딩과는 조금 가까워진 것같습니다. ㅋㅋ

뭐 하나는 제대로 알고 있는 것같아요.

"유저가 보기에 당연하고, 간단해보이는 기능들이
사실은 정말 만들기 힘들다는 것.."

그럼 다시 진행해보도록 할게요!
우선 코드는 아래와 같아요.

    $(".art_v_share .v1").on('click', function(){
      var url = '';
      var textarea = document.createElement("textarea");
      document.body.appendChild(textarea);
      url = window.document.location.href;
      textarea.value = url;
      textarea.select();
      document.execCommand("copy");
      document.body.removeChild(textarea);
    });

한 줄로 마무리 될 것같았던 기능이 이렇게나 길어졌습니다.

현재페이지의 링크를 잡아서 복사하는 기능.

1.
우선 $로 "art_v_share .v1" class를 잡습니다.
(자손인 v1을 잡기 위해서 띄어쓰기를 하나 넣어야겠죠!)
여기서 주의해야할 점은 "art_v_share.on .v1"이라고 적으면 안 된다는 것이었어요.
on 아들 요소를 넣는 즉시, on가 뜨는 것은 창이 꺼지는 것을 의미하기 때문에, javascript는 v1을 찾지 못하게 됩니다.

2.
function을 통해 새로운 함수를 만들어요.
url을 빈 칸으로 ' ' 정의하고.
textarea에 <textarea></textarea>와 같은 요소를 생성하는 것으로 정의합니다.
현 위치에 있는 url을 잡아 textarea에 넣어줍니다.
<textarea> url </textarea> 속 url만 잡아서 복사를 하게 합니다.

3.
임의로 생성되었던 <textarea></textarea>는 제거합니다.




정말 간단해보였던 디자인, 그리고 동작들이 생각보다 많은 시간이 필요한 작업이었습니다.
그래도 오늘도 해냈고, 앞으로 더 멋지게 많은 것들을 해내고 싶습니다.
모든 개발자분들도, 화이팅!