🥲 주저리주저리

취업한 지 벌써 6개월이라는 시간이 지났다. 나에게도 어드민 페이지를 만드는 날이 오다니 싶었다. 퍼블리셔로 취업을 했기 때문에 카페24만 주구장창 만들 줄 알았는데, 하드코딩으로 웹페이지도 만들었다. 그러다가 결국 어드민 페이지를 만들게 되었는데... 페이지가 겁나게 많다. 하지만 다행인 점은 디자인이 없어서 그런지 내 마음대로 만들어도 된다는 것... 부트스트랩으로 후다닥 만들었다. 근데 단점은 기획서도 없고, 와이어프레임도 뭣도 없어서 스프레드시트로 만들어진 IA만 보고 만들어야 한다는 것... 글로만 된 것들을 읽으면서 만들었어야 한다는 것 정도...?

내가 보고 만든 스프레시트다... ㅋ 아무튼 저것들을 보고 만들다가 해시태그를 이용하는 페이지가 있길래 읭 스러웠다. 해시태그 기능을 내가 만들어야 한다고? 싶었다. 근데 다행이도 라이브러리가 있지 뭐야?

🧠해더에 박아준다.

  <script src="https://unpkg.com/@yaireo/tagify"></script>
  <script src="https://gcore.jsdelivr.net/npm/@yaireo/tagify@latest"></script>
  <script src="https://unpkg.com/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
  <link href="https://unpkg.com/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

🦾 HTML

  <tags class="tagify tagify--focus tagify--noTags tagify--empty" tabindex="-1">
    ​<input  name="tags" placeholder="해시태그를 입력해 주세요" tabindex="-1">
  </tags>

👣 JS

  <script>
    // 태그 넣는 코드 시작
    const input = document.querySelector('input[name=tags]');
    const tagify = new Tagify(input);

    tagify.on('add', function (e) {
      console.log('Tag added:', e.detail.data.value);
    });

    tagify.on('remove', function (e) {
      console.log('Tag removed:', e.detail.data.value);
    });

    function changingStatus() {
      let curatorStatus = $('#curatorStatus').val();
      if (curatorStatus) {
        const currentUrl = window.location.href;
        location.href = updateUrlParameter(currentUrl, 'curatorStatus', curatorStatus);
      } else {
        const urlObject = new URL(window.location.href);
        urlObject.searchParams.delete('curatorStatus');
        location.href = urlObject.toString();
      }
    }
 </script>

이렇게만 해 주면, 해시태그 기능이 뚝딱~