Dragond

Dragond로 드래그 한 후 도우미 디바이스를 표시합니다.

03.29, 20215 min read

WebVueComponentNPMJS

---

개요

개인적으로 개발중이던 웹 소설 서비스를 진행하다가 제작하게된 컴포넌트입니다. 마우스로 드래그한후, 선택한 문자에 대한 처리를 위한 기능이 필요했는데요.

필요한 기능들을 popup 으로 띄우는 디바이스(dialog 라는 표현이 더 어울릴지도 모르겠습니다)를 구현하기로 했던 것입니다. 본 프로젝트에만 적용하기에는 활용성이 커보이는 기능이기도 하여 프로젝트를 따로 떼어와 진행하게 되었습니다.

진행하던 프로젝트가 Vue 였기에 본 프로젝트 역시 동일하게 Vue로 진행했습니다. 기회가 된다면 React로도 진행해볼지 모르겠습니다.

NPM 배포 방식에 대해선 간단하게라도 알고있었는데.. 여러개의-컴포넌트-배포 방식은 단일-컴포넌트-배포 방식과는 다르더군요. 덕분에 애를 조금 먹었습니다 ㅎㅎ.. 한글로 자세한 포스팅은 찾기 힘들어 보이니 차후에 포스팅하고자 합니다.

링크

Dragond 의 모든 내용/사용법에 대해서는 Docs 를 살펴보세요. 한국어 버전도 준비되어있습니다.

• Dragond 데모 및 사용법

👀 사용하기

<DragondDevice/>

드래그 한후 보여지는 디바이스를 선언합니다. 공용으로 사용할 상위 컴포넌트에 작성해주세요.

<dragondDevice> ... </dragondDevice>

@:darkmode

dragond는 다크모드(나이트모드)도 지원합니다. @:darkmode를 이용해 다크모드 On/Off를 사용하세요. 색상 변경은 css 로 작성하셔도 됩니다.

<dragondDevice v-bind:darkmode="true || false"> ... </dragondDevice>

<Dragond/>

[ Dragond 영역 ]

드래그를 인식할 공간을 이 컴포넌트로 생성해줍니다.

<dragond @dragondData="dragondData"> ... </dragond>

아래 함수를 통해 드래그 되어 선택된 데이터(selection)을 얻어올 수 있습니다.

methods: {
    dragondData: function (data) {
        this.msg = data;
    }
}

@:기타기능

Docs를 통해 확인해주세요.

<DragondMenu/>

dragondDevice는 dragondMenu를 통해 정리할 수 있습니다. 필수는 아니지만 dragondMenu를 사용하는것이 편리하고 깔끔합니다.

<dragondDevice>
  <dragondMenu>drag</dragondMenu>
  <dragondMenu>...</dragondMenu>
</dragondDevice>

@:기타기능

Docs를 통해 확인해주세요.

<DragondLine/>

DragondMenu 사이에 선을 긋고자 한다면 이 컴포넌트를 사용해주세요.

<dragondDevice>
  <dragondMenu>drag</dragondMenu>
  <dragondLine></dragondLine>
  <!-- Like this -->
  <dragondMenu>ond</dragondMenu>
</dragondDevice>

@:기타기능

Docs를 통해 확인해주세요.

<DragondIcon/>

아이콘을 사용하고자 한다면 이 컴포넌트를 사용해주세요.

내장된 아이콘을 사용할수도, 직접 path의 d 값을 입력해 그릴수도 있습니다.

<dragondMenu>
  <dragondIcon v-bind:icon="' ... '"></dragondIcon>
  <!-- search, share, copy, etc... -->
</dragondMenu>

@:기타기능

Docs를 통해 확인해주세요.

마치면서..

정말 엄청난 기능이거나 멋진 모듈은 아닐지 모르겠습니다만, 첫 NPM 배포라는 경험을 안겨준 프로젝트라는 점에서 나름 애정이 가는 프로젝트입니다. 전부터 어떤 모듈을 배포해볼까 하고 고민만 했었는데 생각치 못한 곳에서 기회를 얻게 되었네요.