라이믹스/모듈/Reaction

라이믹스 모듈 Reaction
제작자	kkigomi
첫 업로드 일자	2025년 3월 11일
최신 버전	1.0.0 (2025년 3월 11일)
라이센스	GPL v2
유·무료 여부	무료
소개 페이지	라이믹스 자료실
깃허브 저장소	rx-da_reaction
세부 정보 XE 호환 버전 호환 안됨 라이믹스 블랙리스트 등재 여부 아니요 의존 프로그램 없음

개요

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

폴더 구조

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

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 *

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

설치 환경

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

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

설치 방법

깃허브 clone

라이믹스 서드파티 설치 시 권장하는 방식이다. 라이믹스 설치 폴더/modules에서 다음 명령어를 입력한다:

root@server:/var/www/html# git clone https://github.com/damoang-users/rx-da_reaction da_reaction

압축 해제

최신 버전을 다운로드한 후, FTP 클라이언트를 사용해 라이믹스 설치 폴더/modules에 업로드한다. 폴더명은 반드시 da_reaction으로 설정한다.

업로드 후 설정

업로드가 끝난 후 관리자 페이지에 접속한다. 관리자 페이지에서 'DB 테이블 생성'과 '설정 완료하기' 버튼을 눌러 설치를 마무리한다.

프론트엔드

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

옵션명	기본값	설명
$_ENV['DA_ALPINEJS']	없음	Alpine.js 스크립트 중복 로드 방지

커스텀

아이콘 추가

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

• .jpg
• .jpeg
• .gif
• .png
• .webp
• .svg

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

파일

사용 가능한 문자

파일명에 사용 가능한 문자는 알파벳, 숫자, -, _이다. 그 외 문자는 제거된다. 이로 인해 파일명은 다르지만 처리 후 동일해지는 경우, 먼저 처리된 이미지가 사용된다.

파일 삭제

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

출력 위치 조정

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

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

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

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

옵션 설명

옵션명	타입	기본값	설명
button	boolean	'end'	리액션 추가 버튼의 위치 및 비활성 * 'start': 리액션 목록 앞에 버튼 추가 * 'end': 리액션 목록 뒤에 버튼 추가 * false: 버튼 표시 안 함

버튼 대체하기

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

예시

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

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

옵션 설명

옵션명	타입	기본값	설명
placement	string	'prepend'	커스텀 버튼 사용 시 리액션 목록 추가 위치 * 'prepend': 커스텀 버튼 앞에 출력 * 'append': 커스텀 버튼 뒤에 출력

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

리액션 버튼 커스텀하기

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

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

버튼 위치 변경하기

button 옵션을 변경해 리액션 버튼 위치를 조정할 수 있다.

예시

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

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

커스텀 버튼의 위치

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

예시

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

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

영역 밖에 리액션 버튼 사용하기

영역 밖 버튼을 사용할 때는 x-init, x-bind 속성을 사용한다. x-bind="daReactionButton('대상ID')"처럼 대상 ID를 지정해야 한다.

예시

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

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

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