Reaction Menu Maker

방송용 리액션 메뉴판을 편집하고, 미리보기와 GIF/PNG 출력까지 할 수 있는 Next.js 기반 웹 서비스입니다.

현재 기능

• 테이블 기반 리액션 항목 편집
  • 리액션 개수
  • 리액션 텍스트
  • 개수 색상
  • 텍스트 색상
  • 템플릿 / 사용자 정의 배지
  • 배지 모양, 색상, 아이콘, 크기 편집
• 드래그 앤 드롭 순서 변경
• 전체 선택 / 개별 선택 / 선택 삭제
• 선택 행 복제
• 개수 / 텍스트 / 배지 검색 및 필터
• 항목 편집 실행 취소 / 다시 실행
• 스크롤 중에도 유지되는 상단 작업 도구
• 상단 접이식 일괄 적용 패널
• localStorage 자동 저장 (상단 저장 상태 표시)
• 실시간 미리보기 사이드바 도킹
  • 100% / 150% / 200% 확대
  • 투명 격자 / 검정 / 흰색 배경 테스트
• 라이트 / 다크 테마 (편집 화면과 Docs 공통)
• 여기어때 잘난체 / 잘난체 고딕, 배민 한나체 Pro / 주아체 프리셋 선택
• 출력 정렬
  • 1번 왼쪽 정렬
  • 2번 오른쪽 정렬
• 숫자/텍스트 간격 자동 계산
• 기본 간격 / 행 높이 조절
• 상세 설정
  • 최소 간격
  • 최대 간격
  • 상하 여백
• 텍스트 stroke 굵기 조절 (슬라이더)
• 그림자 / 네온 / 이중 외곽선 / 입체 그림자 글자 효과
• 단색 / 그라데이션 색상 적용
  • 가로 그라데이션
  • 세로 그라데이션
• 선택 항목 또는 전체 항목 색상 일괄 적용
  • 개수만 적용
  • 텍스트만 적용
  • 둘 다 적용
• 색상 스타일 프리셋 적용
• 새 창 미리보기
  • 자동 페이지 전환
  • 열린 미리보기 창 자동 갱신
• GIF 저장
  • 투명 배경
  • 페이지 단위 슬라이드 출력
  • 콘텐츠 기준 좌우 크롭
• PNG 저장
  • 전체 메뉴 컬럼 전개형 출력
  • 페이지 표시 개수 기준 열 분할
• CSV 업로드 / 다운로드
  • 상단 행 도구에서 전체 목록 교체
  • UTF-8 BOM CSV 다운로드와 예시 파일 제공
• OBS 브라우저 소스용 투명 오버레이 링크
  • 현재 메뉴 설정을 압축해 링크에 포함
  • 페이지 자동 전환

배지 출력 규칙

• 1번 왼쪽 정렬: 배지가 오른쪽 끝에 위치
• 2번 오른쪽 정렬: 배지가 왼쪽 시작에 위치
• 배지 간격은 기본 간격 옵션을 따라가도록 렌더링

출력 동작

• GIF
  • 페이지별 메뉴를 순서대로 전환
  • 투명 배경으로 저장
  • 콘텐츠 기준으로 불필요한 좌우 여백을 줄여서 저장
• PNG
  • 전체 리스트를 한 장으로 저장
  • 페이지 표시 개수 기준으로 한 열씩 나누고, 다음 열을 오른쪽으로 전개

기술 스택

• Next.js 16 App Router
• TypeScript
• Tailwind CSS
• @dnd-kit/core
• @dnd-kit/sortable
• gif.js
• HTML Canvas API

로컬 실행

npm install
npm run dev

브라우저에서 http://127.0.0.1:3000 또는 http://localhost:3000 을 열면 됩니다.

빌드

npm run build

배포

Vercel production 배포를 기준으로 운영합니다.