라이믹스/모듈/Reaction 편집하기

{{XE모듈
|XE 모듈 = 라이믹스 모듈 
|제목 = Reaction
|그림 = [[파일:rx_module_da_reaction.png]]
|제작자 = [[kkigomi]]
|첫 업로드 일자 = {{날짜/출력|2025-03-11}}
|최신 버전 = [https://github.com/damoang-users/rx-da_reaction/releases/tag/v1.0.0 1.0.0] ({{날짜/출력|2025-03-11}})
|라이센스 = GPL v2
|유·무료 여부 = 무료
|소개 페이지 = [https://rhymix.org/pds/1902871 라이믹스 자료실]
|깃허브 저장소 = {{깃허브/저장소|damoang-users|rx-da_reaction}}
|XE 호환 버전 = '''호환 안됨'''
|라이믹스 블랙리스트 등재 여부 = 아니요
|의존 프로그램 = 없음
}}

== 개요 ==
[[라이믹스]]에서 글과 댓글에 반응을 남길 수 있는 모듈이다. 디스코드나 카카오톡의 공감 기능처럼 이모지나 이모티콘을 활용해 간단히 새로운 반응을 남기거나, 다른 사람의 반응에 공감을 더할 수 있다.

== 폴더 구조 ==
모듈의 폴더 구조는 다음과 같다:

<syntaxhighlight lang="text">
modules
  └── da_reaction
    ├── .github *
    ├── conf
    ├── docs *
    ├── lang
    ├── public
    ├── schemas
    ├── src
    ├── vendor
    ├── .editorconfig *
    ├── .gitattributes *
    ├── .gitignore *
    ├── CHANGELOG.md *
    ├── composer.json
    ├── composer.lock
    ├── config.sample.php
    ├── LICENSE *
    ├── package-lock.json
    ├── package.json
    ├── phpstan-baseline.neon
    ├── phpstan-bootstrap.php
    ├── phpstan.dist.neon
    └── README.md *
</syntaxhighlight>

<sup>*</sup> 표시가 있는 폴더와 파일은 비필수 요소로, 깃 관련 코드나 에디터 설정 파일 등을 포함한다.

== 설치 환경 ==
[[라이믹스/사양|라이믹스 설치 조건]]을 만족하면 사용가능하다. 다만 라이믹스 버전은 [[라이믹스/릴리즈 노트/2.1.21]] 이상이어야 한다. 구체적인 사양은 다음과 같다:

* 라이믹스 2.1.21+
* PHP 7.4+
* MySQLi 확장
* PDO MySQL 확장
* MySQL 5.7.8+

== 설치 방법 ==

=== 깃허브 clone ===
[[라이믹스]] 서드파티 설치 시 권장하는 방식이다. <code>라이믹스 설치 폴더/modules</code>에서 다음 명령어를 입력한다:

<syntaxhighlight lang="console">
root@server:/var/www/html# git clone https://github.com/damoang-users/rx-da_reaction da_reaction
</syntaxhighlight>

=== 압축 해제 ===
[https://github.com/damoang-users/rx-da_reaction/releases/latest 최신 버전]을 다운로드한 후, [[FTP 클라이언트]]를 사용해 <code>라이믹스 설치 폴더/modules</code>에 업로드한다. 폴더명은 반드시 <code>da_reaction</code>으로 설정한다.

=== 업로드 후 설정 ===
업로드가 끝난 후 관리자 페이지<ref>http(s)://{라이믹스 설치 도메인}/admin</ref>에 접속한다. 관리자 페이지에서 'DB 테이블 생성'과 '설정 완료하기' 버튼을 눌러 설치를 마무리한다.

== 프론트엔드 ==
모듈의 프론트엔드는 [[Alpine.js]]를 사용한다. 다른 모듈이나 위젯과의 충돌을 방지하기 위해 스크립트 중복 로드 방지 옵션이 있다:

{| class="wikitable" style="text-align: center;"
! 옵션명 !! 기본값 !! 설명
|-
| <code><nowiki>$_ENV['DA_ALPINEJS']</nowiki></code> || 없음 || Alpine.js 스크립트 중복 로드 방지
|}

== 커스텀 ==

=== 아이콘 추가 ===
<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>

== 각주 ==
<references />

<!-- 분류 -->
[[분류:라이믹스]] [[라이믹스/모듈]]