[[라이믹스]]에서 글과 댓글에 반응을 남길 수 있는 모듈이다. 디스코드나 카카오톡의 공감 기능처럼 이모지나 이모티콘을 활용해 간단히 새로운 반응을 남기거나, 다른 사람의 반응에 공감을 더할 수 있다.
'''DA Reaction'''은 [[라이믹스]]의 글과 댓글에 이모지·이모티콘 반응을 남기는 모듈이다. 현재 제작자 저장소는 <code>rhymix-guide/module-da_reaction</code>으로 연결된다. 2026년 10월 17일 확인한 최신 릴리즈는 '''1.2.0'''이며, 배포 메타데이터의 날짜는 '''2025-03-29'''이다.<ref>[https://github.com/rhymix-guide/module-da_reaction/releases 제작자 릴리즈 목록]</ref><ref>[https://github.com/rhymix-guide/module-da_reaction/blob/main/conf/info.xml 배포 메타데이터]</ref>
== 폴더 구조 ==
== 최근 변경 사항 ==
모듈의 폴더 구조는 다음과 같다:
1.2.0은 글·댓글 삭제 시 반응 데이터 정리와 글 이동 시 데이터 처리, 횟수 제한 및 대상 ID 생성 오류 등을 보완했다. 1.1.0에서는 모듈·게시판별 설정과 그룹 제한 관련 수정이 이루어졌다.<ref>[https://github.com/rhymix-guide/module-da_reaction/releases/tag/v1.2.0 1.2.0 변경 기록]</ref><ref>[https://github.com/rhymix-guide/module-da_reaction/releases/tag/v1.1.0 1.1.0 변경 기록]</ref>
<syntaxhighlight lang="text">
== 설치와 업데이트 ==
modules
모듈 경로는 저장소의 이름과 별개로 <code>modules/da_reaction/</code>을 사용한다. 현재 <code>composer.json</code>의 PHP 제약은 <code>>=7.4</code>이며, 코어·DB의 요구 사항도 함께 충족해야 한다.<ref>[https://github.com/rhymix-guide/module-da_reaction/blob/main/composer.json Composer 설정]</ref> 자세한 배포·설치 조건은 [https://rhymix-guide.github.io/module-da_reaction/ 제작자 사용 설명서]와 [[라이믹스/매뉴얼/설치 환경]]을 함께 확인한다.
└── 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> 표시가 있는 폴더와 파일은 비필수 요소로, 깃 관련 코드나 에디터 설정 파일 등을 포함한다.
# [[라이믹스/매뉴얼/백업과 복원|파일·DB를 백업]]한다. 개발 브랜치와 정식 릴리즈를 구분하여 배포 파일을 선택한다.
# <code>modules/da_reaction/</code> 아래에 배치하고 관리자 화면의 DB 설치·업데이트와 설정을 마친다.
# 활성화할 게시판과 그룹 제한을 확인한 뒤 스킨에서 표시와 동작을 시험한다.
# 글·댓글 삭제, 글 이동, 비로그인·권한 없는 계정, 반응 추가·취소를 각각 확인한다.
== 설치 환경 ==
== 화면과 사용자 지정 ==
[[라이믹스/사양|라이믹스 설치 조건]]을 만족하면 사용가능하다. 다만 라이믹스 버전은 [[라이믹스/릴리즈 노트/2.1.21]] 이상이어야 한다. 구체적인 사양은 다음과 같다:
프론트엔드는 Alpine.js를 사용한다. 사이트가 다른 기능으로 같은 라이브러리를 로드한다면 중복 실행이나 초기화 순서를 확인한다. 내부 속성과 JavaScript 예시는 버전에 맞는 제작자 설명서를 사용한다. 과거 문서의 서로 다른 <code>x-reaction-print</code>·<code>x-da-reaction</code> 예시를 임의로 섞지 않는다.
* 라이믹스 2.1.21+
사용자 지정 이미지·스킨을 모듈 폴더 안에서 직접 바꿨다면 업데이트에 덮어써질 수 있으므로 별도로 보관하고 변경 내역을 기록한다. 화면 위치를 바꾼 뒤에는 모바일·다크모드·키보드 조작, 글과 댓글의 대상 연결도 확인한다. [[라이믹스/매뉴얼/테마 제작]]과 [[라이믹스/매뉴얼/프론트엔드 라이브러리]] 참고.
* PHP 7.4+
* MySQLi 확장
* PDO MySQL 확장
* MySQL 5.7.8+
== 설치 방법 ==
== 같이 보기 ==
* [[XpressEngine/모듈]]
* [[라이믹스/매뉴얼/서드파티 자료 호환성 체크리스트]]
* [[라이믹스/매뉴얼/확장 기능 보안 점검]]
=== 깃허브 clone ===
== 출처 ==
[[라이믹스]] 서드파티 설치 시 권장하는 방식이다. <code>라이믹스 설치 폴더/modules</code>에서 다음 명령어를 입력한다:
[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> 옵션을 사용한다.
| <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>이다.
DA Reaction은 라이믹스의 글과 댓글에 이모지·이모티콘 반응을 남기는 모듈이다. 현재 제작자 저장소는 rhymix-guide/module-da_reaction으로 연결된다. 2026년 10월 17일 확인한 최신 릴리즈는 1.2.0이며, 배포 메타데이터의 날짜는 2025-03-29이다.[1][2]
모듈 경로는 저장소의 이름과 별개로 modules/da_reaction/을 사용한다. 현재 composer.json의 PHP 제약은 >=7.4이며, 코어·DB의 요구 사항도 함께 충족해야 한다.[5] 자세한 배포·설치 조건은 제작자 사용 설명서와 라이믹스/매뉴얼/설치 환경을 함께 확인한다.
프론트엔드는 Alpine.js를 사용한다. 사이트가 다른 기능으로 같은 라이브러리를 로드한다면 중복 실행이나 초기화 순서를 확인한다. 내부 속성과 JavaScript 예시는 버전에 맞는 제작자 설명서를 사용한다. 과거 문서의 서로 다른 x-reaction-print·x-da-reaction 예시를 임의로 섞지 않는다.
사용자 지정 이미지·스킨을 모듈 폴더 안에서 직접 바꿨다면 업데이트에 덮어써질 수 있으므로 별도로 보관하고 변경 내역을 기록한다. 화면 위치를 바꾼 뒤에는 모바일·다크모드·키보드 조작, 글과 댓글의 대상 연결도 확인한다. 라이믹스/매뉴얼/테마 제작과 라이믹스/매뉴얼/프론트엔드 라이브러리 참고.
