라이믹스/모듈/Reaction 편집하기 (부분)

== 커스텀 ==

=== 아이콘 추가 ===
<code>modules/da_reaction/public/emoticon-images</code> 경로에 이미지 파일을 업로드하면 자동으로 인식한다. 지원하는 이미지 형식은 다음과 같다:

* <code>.jpg</code>
* <code>.jpeg</code>
* <code>.gif</code>
* <code>.png</code>
* <code>.webp</code>
* <code>.svg</code>

<code>import-image:{이미지 파일명}</code> 형식으로 리액션 이모티콘에 추가된다.

==== 파일 ====

===== 사용 가능한 문자 =====
파일명에 사용 가능한 문자는 '''알파벳''', '''숫자''', '''-''', '''_'''이다. 그 외 문자<ref>예: 한글, 특수문자(@, #, $, % 등), 공백 등</ref>는 제거된다. 이로 인해 파일명은 다르지만 처리 후 동일해지는 경우<ref>예: '''hello.jpg'''와 '''h안녕ello.jpg'''는 모두 '''hello.jpg'''로 처리됨, '''test-file.png'''와 '''test파일file.png'''는 '''test-file.png'''로 처리됨</ref>, 먼저 처리된 이미지가 사용된다.

===== 파일 삭제 =====
이미지 파일을 이름 변경하거나 삭제하면 이미 기록된 리액션도 표시되지 않는다.

=== 출력 위치 조정 ===
현재는 위치를 자동으로 출력한다. 하지만 스킨에 따라 출력이 다를 수 있고, 사용자마다 원하는 위치가 다를 수 있다. 위치 커스텀으로 다음을 수행할 수 있다:

* 리액션 버튼을 리액션 목록 앞으로 옮기기
* 리액션 버튼을 감추고 직접 꾸민 버튼으로 대체하기
* 원하는 위치에 리액션 버튼 추가하기

<syntaxhighlight lang="html">
<div
    class="da-reaction"
    x-reaction-print
    x-data="daReaction('대상ID', { options })"
>
</div>
</syntaxhighlight>

위 코드를 원하는 위치에 배치하면 된다.

{| class="wikitable"
|+ 옵션 설명
|-
! 옵션명 !! 타입 !! 기본값 !! 설명
|-
| <code><nowiki>button</nowiki></code> || <code><nowiki>string</nowiki></code> \| <code><nowiki>boolean</nowiki></code> || <code><nowiki>'end'</nowiki></code> || 리액션 추가 버튼의 위치 및 비활성<br>* <code><nowiki>'start'</nowiki></code>: 리액션 목록 앞에 버튼 추가<br>* <code><nowiki>'end'</nowiki></code>: 리액션 목록 뒤에 버튼 추가<br>* <code><nowiki>false</nowiki></code>: 버튼 표시 안 함
|}

=== 버튼 대체하기 ===
기본 리액션 버튼을 대체하거나 원하는 위치에 버튼을 추가할 수 있다. <code>button: false</code> 옵션으로 기본 버튼을 감추고, 추가하려는 버튼에 <code>x-bind="daReactionButton"</code> 속성을 사용해 원하는 위치에 배치한다. <code>button</code> 옵션의 <code>start</code>, <code>end</code>처럼 커스텀 버튼 위치를 지정할 때는 <code>placement</code> 옵션을 사용한다.

==== 예시 ====
커스텀 버튼 뒤쪽으로 리액션 목록을 출력하는 예시이다:

<syntaxhighlight lang="html">
<div
    class="da-reaction"
    x-reaction-print
    x-data="daReaction('대상ID', { button: false, placement: 'append' })"
>
    <button x-bind="daReactionButton">+ 반응</button>
</div>
</syntaxhighlight>

{| class="wikitable"
|+ 옵션 설명
|-
! 옵션명 !! 타입 !! 기본값 !! 설명
|-
| <code>placement</code> || <code>string</code> || <code>'prepend'</code> || 커스텀 버튼 사용 시 리액션 목록 추가 위치<br>* <code>'prepend'</code>: 커스텀 버튼 앞에 출력<br>* <code>'append'</code>: 커스텀 버튼 뒤에 출력
|}

리액션 영역 외부에도 버튼을 추가할 수 있다. 외부 버튼에는 <code>x-bind="daReactionButton('대상ID')"</code>처럼 대상 ID를 지정해야 한다.

=== 리액션 버튼 커스텀하기 ===
기본 리액션 버튼은 리액션 목록 끝에 표시된다. 기본 버튼 대신 커스텀 버튼을 추가하거나, 영역 밖에 버튼을 사용할 수 있다.

<syntaxhighlight lang="html">
<div
    class="da-reaction"
    x-reaction-print
    x-data="daReaction('대상ID', { button: false })"
>
    <button x-bind="daReactionButton">+ 반응</button>
</div>
</syntaxhighlight>

=== 버튼 위치 변경하기 ===
<code>button</code> 옵션을 변경해 리액션 버튼 위치를 조정할 수 있다.

==== 예시 ====
기본 버튼을 리액션 목록 앞에 표시하는 예시이다:

<syntaxhighlight lang="html">
<div
    class="da-reaction"
    x-da-reaction
    x-data="daReaction('대상ID', { button: 'start' })"
></div>
</syntaxhighlight>

=== 커스텀 버튼의 위치 ===
커스텀 버튼 사용 시 리액션 목록을 버튼 앞/뒤에 표시할지 설정할 수 있다. <code>placement</code> 옵션의 기본값은 <code>prepend</code>이다.

==== 예시 ====
커스텀 버튼 뒤에 리액션 목록을 표시하는 예시이다:

<syntaxhighlight lang="html">
<div
    class="da-reaction"
    x-da-reaction
    x-data="daReaction('대상ID', { placement: 'append' })"
>
    <button x-bind="daReactionButton">+ 반응</button>
</div>
</syntaxhighlight>

=== 영역 밖에 리액션 버튼 사용하기 ===
영역 밖 버튼을 사용할 때는 <code>x-init</code>, <code>x-bind</code> 속성을 사용한다. <code>x-bind="daReactionButton('대상ID')"</code>처럼 대상 ID를 지정해야 한다.

==== 예시 ====
기본 버튼을 감추고 <code>.da-reaction</code> 영역 밖 버튼을 사용하는 예시이다:

<syntaxhighlight lang="html">
<div
    class="da-reaction"
    x-da-reaction
    x-data="daReaction('대상ID', { button: false })"
></div>

<button
    x-init
    x-bind="daReactionButton('대상ID')"
>+ 반응</button>
</syntaxhighlight>