"댓글 새로고침" 애드온 -v0.5.0

애드온 명 : 댓글 새로고침 애드온

설치 경로  : ./addons/bsplus_comment_refresh

라이믹스 버전 2.1 ~ 2.1.35

php 버전 7.4 ~ 8.5

 

다운로드 : bsplus_comment_refresh-v0.1.6.zip

2차 다운로드 : bsplus_comment_refresh-v0.4.2.zip

3차 다운로드 : bsplus_comment_refresh-v0.5.0.zip

 

 

3차 패치에 추가 된 기능 미리보기

새 댓글 알림 과 확인 주기 입니다 트래픽이 발생하는 요인이여서

기본은 사용 안함으로 하였습니다.

 

미리보기

이렇게 글을 ㅇㅇ 라고 쓴것을  새로고침을 누르면?

 

이렇게 바뀝니다. 또한 새 댓글이 작성되어도 새로고침 누르면 바로 반영 됩니다.

 

애드온 설정 페이지 모습

댓글 새로고침 스타일도  여러가지 있습니다.

 

=================== 패치리스트 ===================

# bsplus_comment_refresh 변경 이력

## v0.5.0 (2026-07-21) — 새 댓글 알림 배지 (opt-in)

### 기능
버튼 옆에 작은 빨간 배지를 추가. 주기적으로 백그라운드에서 댓글 수를
확인해서, 새 댓글이 달리면 `+N` 형태로 표시한다. 배지를 눌러도 새로고침
버튼과 동일하게 동작한다.

- 실제 댓글 개수는 `findCommentBlock()`과 같은 규칙(`comment_숫자` 패턴만
  인정)으로 세기 때문에, "댓글 허용" 체크박스 같은 오탐 요소는 세지 않는다
  (v0.2.3에서 잡은 버그와 같은 원리)
- 댓글이 삭제돼서 개수가 줄어든 경우는 "새 댓글"로 취급하지 않고 기준만
  조용히 맞춘다

### 트래픽 관련 논의 — 기본값은 "사용 안 함"
사용자가 먼저 "이거 웹호스팅 트래픽 유발하는거 아니냐"고 지적함 — 맞는
지적이었음. 방문자가 페이지를 열어둔 동안 계속 서버에 요청이 발생하는
구조라(기본 30초마다 1번), 기존 "버튼 눌렀을 때만 요청" 방식과는 성격이
다름. 그래서:
- **기본값을 "사용 안 함"으로** 설정 (opt-in). 관리자 설정 페이지에서
  게시판별로 필요할 때만 켜도록 함
- 확인 주기 최소값을 10초로 강제해서, 실수로 너무 짧게 설정해 트래픽이
  과도하게 발생하는 걸 방지
- **탭이 보이지 않을 때(다른 탭 보는 중) 폴링을 완전히 멈춤**
  (`visibilitychange` 이벤트) — 안 보는 탭에서 계속 요청 나가는 낭비를 막음
- `layout=none`을 그대로 재사용해 헤더/푸터/사이드바 없이 최대한 가볍게 받아옴

### 변경 파일
`conf/info.xml`, `admin/index.html`(새 댓글 알림 Y/N + 확인 주기 필드),
`bsplus_comment_refresh.addon.php`(설정값을 JS 설정 객체로 전달),
`js/comment_refresh.js`(`countCommentItems`, `startPolling`, 배지 로직),
`css/comment_refresh.css`(배지 스타일)

---

## v0.4.2 (2026-07-21) — 로딩 스피너 속도/크기 조정

회전 속도가 너무 빠르다는 피드백에 따라 `.6s` → `1s`로 느리게 조정하고,
크기도 8px → 11px(테두리 1.5px → 2px)로 살짝 키움.

---

## v0.4.1 (2026-07-21) — 로딩 아이콘을 진짜 스피너로 변경

기존엔 로딩 중일 때 점이 커졌다 작아졌다 하는 pulse 효과였는데, 링의
한쪽만 색을 칠해서 빙글빙글 도는 진짜 로딩 스피너 느낌으로 교체.
`border-top-color: currentColor`를 써서 스타일마다(미니멀=회색,
솔리드=흰색 등) 버튼 글자색에 맞춰 스피너 색이 자동으로 맞춰진다.
7개 스타일 전부 공통 적용 (고스트에서 특히 잘 보임).

---

## v0.4.0 (2026-07-21) — 버튼 스타일 3종 추가 (총 7종)

기존 미니멀/아웃라인/솔리드/파스텔에 이어 3종 추가:
- **고스트**: 테두리·배경이 완전히 없음 — 글자와 아이콘만 보이다가 hover
  시에만 색이 살짝 진해짐 (요청받은 필수 스타일)
- **언더라인**: 배경/테두리 없이 밑줄만 있는 링크 느낌
- **그림자**: 흰 배경 + 은은한 box-shadow로 살짝 떠 있는 느낌, hover 시
  그림자가 진해지며 위로 살짝 이동

`conf/info.xml`(select 옵션) / `admin/index.html`(커스텀 설정 페이지
select 옵션) / `bsplus_comment_refresh.addon.php`(허용값 검증) /
`js/comment_refresh.js`(허용값 검증) / `css/comment_refresh.css`
(스타일 3종 추가, 공통 transition에 box-shadow·transform 추가) 전부 반영.

---

## v0.3.0 (2026-07-21) — 커스텀 설정 페이지로 전환 ("대상" 접기 최종 해결)

### 배경
v0.2.1~v0.2.5에 걸쳐 라이믹스 기본 설정 템플릿(`modules/addon/tpl/setup_addon.html`)에
스크립트를 몰래 끼워넣는 방식으로 "대상" 섹션 접기를 시도하다가 계속
실패해서(근본 원인: 관리자 페이지 레이아웃은 `addHtmlFooter` 내용을 아예
출력하지 않음) v0.2.5에서 포기하고 되돌렸었음.

### 해결 — lua_external_file과 동일한 패턴 적용
남의 템플릿에 뭔가를 끼워넣으려 하지 않고, `setTemplatePath()`/`setTemplateFile()`로
이 애드온만의 커스텀 설정 페이지(`admin/index.html`)를 통째로 만들어 교체함.
lua_external_file이 이미 이 방식으로 "적용 대상 모듈" 섹션을 성공적으로
접어두고 있어서, 그 구조를 그대로 가져와 4개 설정 필드(버튼 문구/위치/정렬/
스타일)와 "대상" 섹션을 옮겨 담음.

- **`bsplus_comment_refresh.addon.php`**: `after_module_proc`에서
  `act===dispAddonAdminSetup && selected_addon===bsplus_comment_refresh`일 때
  `setTemplatePath()`/`setTemplateFile()`로 커스텀 템플릿 교체
- **`admin/index.html` 신규**: 버전/작성자 정보 표, 4개 설정 필드, 그리고
  순수 HTML `<details>`/`<summary>` 태그로 감싼 "적용 대상 모듈" 섹션
  (JS 전혀 불필요 — 브라우저 기본 기능이라 addHtmlFooter 문제 자체가
  발생할 수 없는 구조)

### 교훈
공유 코어 템플릿에 스크립트를 "몰래" 끼워넣는 접근은 여러 층의 숨겨진 타이밍/
출력 경로 문제(DOMContentLoaded 타이밍, 여러 번 호출, admin 레이아웃의
addHtmlFooter 미출력)를 만났다. 반면 애드온이 자기 설정 페이지를 통째로
소유하는 방식은 그런 문제가 애초에 존재하지 않는다 — 처음부터 이 방식을
택했어야 했음.

---

## v0.2.5 (2026-07-21) — "대상" 섹션 접기 기능 되돌림

v0.2.1~v0.2.4에 걸쳐 애드온 설정 페이지의 "대상" 섹션을 기본 접힘으로
만들려던 시도(모듈 조건 → 타이밍 → 중복 삽입 → addHtmlFooter 자체가
관리자 페이지에서 출력 안 되는 근본 원인까지)를 전부 되돌림. 버튼
정렬/스타일 기능(v0.2.0)은 그대로 유지. `js/admin_setup.js` 파일 삭제.

필요하면 나중에 다시 시도할 수 있음 — v0.2.4에서 찾은 진짜 원인
(`Context::addHtmlFooter()`는 관리자 페이지 레이아웃에서 출력되지 않고,
`Context::loadFile()`로 실제 JS 파일을 로드해야 한다는 것)은 여전히
유효하니, 나중에 재시도한다면 그 방식부터 다시 쓰면 됨.

---

## v0.2.4 (2026-07-21) — 진짜 근본 원인: 관리자 페이지에선 addHtmlFooter가 아예 출력 안 됨

### 문제
v0.2.1~v0.2.3까지 세 번을 고쳤는데도 계속 안 됐음. 사용자가 "너무 많은 걸
고친 거 아니냐"고 지적한 게 정확했음 — 근거 없이 추측만 반복하고 있었음.

### 진짜 원인
`Context::addHtmlFooter()`로 넣은 내용은 `common/tpl/common_layout.html`
(프론트엔드 레이아웃)에서만 `Context::getHtmlFooter()`로 꺼내서 출력한다.
관리자 페이지 레이아웃(`modules/admin/tpl/layout.html`, `_footer.html`)은
이 호출이 아예 없어서, addHtmlFooter로 넣은 스크립트는 무슨 내용이든
관리자 페이지에서는 브라우저로 전송조차 안 됐다. v0.2.1~v0.2.3에서 고친
module 조건, DOMContentLoaded 타이밍, 중복 삽입 가드는 전부 "브라우저에
도달하지도 못하는 코드"를 고치고 있었던 것 — 실제로 안 될 수밖에 없었음.

### 해결
`Context::addHtmlFooter()` 대신 `Context::loadFile()`로 별도 JS 파일
(`js/admin_setup.js`)을 정식 로드하도록 변경. 이 방식은 관리자 페이지에도
실제로 적용되고(프론트엔드 댓글 새로고침 버튼도 이미 이 방식을 쓰고 있었음),
파일 경로 기준으로 라이믹스가 중복 로드도 자동으로 막아줘서 v0.2.3의
`$GLOBALS` 가드도 더 이상 필요 없어졌다.

---

## v0.2.3 (2026-07-21) — "대상" 섹션이 클릭해도 안 펼쳐지던 버그 수정

### 증상
접힌 상태로는 시작하는데, 클릭해서 펼치려고 해도 반응이 없음.

### 원인
관리자 페이지는 사이드바 메뉴 등 다른 모듈도 같이 처리되면서 `after_module_proc`이
한 요청 안에서 여러 번 호출될 수 있는데, `act`/`selected_addon` 조건은 그
여러 번 모두에서 계속 참이라 가드 없이는 스크립트가 여러 번 삽입됐다.
그 결과 같은 h1에 클릭 리스너가 여러 개 붙어서, 하나가 펼치면 바로 다른
하나가 다시 접어버려 "클릭해도 안 바뀌는" 것처럼 보였다.

### 해결
`$GLOBALS`로 한 요청에 스크립트가 한 번만 삽입되도록 가드 추가.

---

## v0.2.2 (2026-07-21) — "대상" 섹션 접기 스크립트 타이밍 버그 수정

### 원인
v0.2.1로 `module` 조건은 고쳤는데도 여전히 안 먹혔음. 원인은 스크립트를
`Context::addHtmlFooter()`로 `</body>` 바로 앞에 삽입하는데, 그 안에서
`document.addEventListener('DOMContentLoaded', ...)`로 이벤트를 기다리고
있었던 것. 스크립트가 실행되는 시점엔 DOM이 이미 다 만들어진 뒤라
DOMContentLoaded는 이미 지나간 이벤트라, 그 뒤에 등록한 리스너는 영영
호출되지 않는다 (하드 리프레시/캐시와 무관한 순수 JS 타이밍 문제).

### 해결
DOMContentLoaded를 기다리지 않고 즉시실행함수(IIFE)로 바로 실행하도록 변경.

---

## v0.2.1 (2026-07-21) — "대상" 섹션 접기 스크립트가 아예 안 걸리던 버그 수정

### 원인
v0.2.0에서 조건에 `Context::get('module') === 'addon'`을 넣었는데, 실제
애드온 설정 페이지는 관리자 메뉴를 통해 `module=admin&act=dispAddonAdminSetup`
형태로 접근된다 (module 값이 'addon'이 아니라 'admin'). 조건이 항상
거짓이 돼서 스크립트 자체가 전혀 주입되지 않고 있었음 — 쿠키나 캐시
문제가 아니라 단순 조건 오류.

### 해결
불필요한 `module` 체크를 제거하고 `act`/`selected_addon` 조건만 남김.

---

## v0.2.0 (2026-07-21) — 버튼 정렬/스타일 선택 + 설정 페이지 UX 개선

### 추가된 기능
- **버튼 정렬(좌/중앙/우)**: 관리자 설정에 "버튼 정렬" 옵션 추가. 버튼을
  직접 감싸는 `.bsplus-comment-refresh-wrap` flex 컨테이너를 새로 두고,
  버튼 자체가 아니라 이 wrap의 `justify-content`로 정렬한다 (버튼에
  `text-align`/`margin`으로 직접 정렬을 주면 스킨 CSS와 충돌할 여지가
  있어서 독립된 컨테이너로 분리)
- **버튼 스타일 4종**: 미니멀(회색, 기존 기본값) / 아웃라인(테두리만 색상) /
  솔리드(채워진 색상) / 파스텔(은은한 색상 배경). 흰 배경 사이트에 무난하게
  어울리도록 전부 라이트 톤으로 설계
- **애드온 설정 페이지 UX**: 라이믹스 기본 애드온 설정 템플릿
  (`modules/addon/tpl/setup_addon.html`, 모든 애드온이 공유하는 코어
  파일이라 직접 수정하지 않음)이 그리는 "대상"(적용 모듈 선택) 섹션이
  기본으로 펼쳐져 있던 것을, 이 애드온의 설정 페이지에서만 작은 스크립트를
  주입해 접힌 상태로 시작하도록 변경 (클릭하면 펼쳐짐)

---

## v0.1.6 (2026-07-21) — "comment_status" 오탐 수정 (관리자/작성자 계정 전용 버그)

### 문제
일반 계정으로는 정상 동작하는데, 게시글 작성자나 관리자 계정으로 로그인해서
새로고침을 누르면 댓글 목록 대신 엉뚱한 빈 상자가 나타나는 현상.

### 원인
SketchBook5 스킨의 글쓰기/수정 폼(`write_form.html`)에 "댓글 허용" 체크박스가
`id="comment_status"`로 있었음. 이 폼은 `$grant->manager`(관리자 또는 게시글
작성자 본인)에게만 노출되는 영역이라 일반 계정으로는 재현이 안 됐음.
탐지 로직이 `[id^="comment_"]`로 "comment_"로 시작하기만 하면 다 잡다 보니,
진짜 댓글(`comment_1234`)이 아니라 이 체크박스를 먼저 찾아버린 것.

### 해결
`id`가 `comment_` + 숫자로만 이루어진 패턴(`/^comment_\d+$/`)인지 정확히
검사하도록 수정. 후보 요소들을 전부 모은 뒤 이 정규식을 만족하는 첫 번째
요소만 진짜 댓글로 인정한다.

---

## v0.1.5 (2026-07-21) — layout=none 최적화

라이믹스 코어 개발자(kijin)가 공개한 공식 AJAX 댓글 예제를 참고해서, 새로고침 시
페이지 전체(헤더/푸터/사이드바 포함) 대신 `layout=none` 파라미터를 붙여 모듈
콘텐츠만 가볍게 받아오도록 변경. 요청 크기가 작아지고, 레이아웃 쪽 마크업과
셀렉터가 우연히 겹칠 걱정도 줄어든다.

---

## v0.1.4 (2026-07-21) — 댓글 영역 탐지 우선순위 버그 수정

### 문제
로그아웃 상태로 테스트할 땐 멀쩡했는데, 실제 서비스에서 로그인 상태로
새로고침을 누르면 댓글 목록 대신 "댓글 쓰기" 입력창이 통째로 나타남.

### 원인
탐지 우선순위가 "①`#comment` ②`<!-- COMMENT -->` 마커 ③댓글쓰기폼의 부모
④개별 댓글 항목" 순서였음. 로그아웃 상태에서는 쓰기 권한이 없어 쓰기폼
자체가 안 그려지니 자연스럽게 ④번(진짜 댓글 목록)으로 넘어갔지만, 로그인해서
쓰기 권한이 있으면 ③번이 먼저 매칭돼 "댓글 입력창"을 통째로 댓글 영역으로
잘못 골랐던 것.

### 해결
③번과 ④번 순서를 맞바꿈. 실제 댓글이 존재한다는 게 가장 확실한 신호이므로
개별 댓글 항목(`id="comment_숫자"`) 탐지를 댓글쓰기폼 탐지보다 먼저 시도하고,
댓글이 하나도 없을 때만(=④번이 못 찾을 때만) ③번을 최후 수단으로 쓴다.

---

## v0.1.3 (2026-07-21) — 미니멀 스타일로 조정

사용자가 참고 스크린샷을 공유해줘서 그에 맞춰 버튼 디자인을 단순화:
- 문구를 "새로고침" → "댓글 새로고침"(전체 문구)으로 변경
- 그림자/그라데이션이 있던 알약 버튼을 플랫한 회색 알약으로 변경
- 회전하는 화살표(↻) 아이콘 대신 작은 원형 점 + pulse 애니메이션으로 교체

---

## v0.1.2 (2026-07-21) — 버튼 스타일 다듬기

기본 버튼이 "세련미가 없다"는 피드백에 따라 흰색 그라데이션 배경의 알약 모양
버튼, hover 시 미세하게 떠오르는 효과, 회전 아이콘 로딩 애니메이션 추가.

---

## v0.1.1 (2026-07-21) — 버튼 위치 버그 수정

### 문제
새로고침 버튼이 스킨에 따라 위치가 이상하게 보임.

### 원인
댓글 영역이 `<ul>`(예: SketchBook5의 `<ul id="ajax_comment">`)인 경우, 그
안에 `<li>` 없이 `<button>`을 직접 끼워 넣고 있었음. `<ul>`은 `<li>`만
자식으로 가져야 하므로 목록 구조가 깨져 스킨 CSS(`ul > li` 형태의 자식
선택자)가 안 먹히고 위치가 어긋나 보였음.

### 해결
버튼을 대상 요소 "안"이 아니라 "형제 요소"로 삽입하도록 변경. 새로고침할
때 대상 요소의 innerHTML만 교체하므로 버튼은 그대로 남아있어 재생성할
필요도 없어짐 (부수적으로 코드도 단순해짐).

---

## v0.1.0 (2026-07-21) — 최초 릴리스

### 배경
게시판 스킨 종류와 무관하게 작동하는 "댓글 새로고침" 버튼을 애드온 형태로
요청받음. 최초 스펙은 다른 세션에서 작성됐으나, 실제 코드베이스 없이
작성된 짐작(예: `comment.procCommentGetList`라는 존재하지 않는 액션,
`#comment_module_srl`/`.comment_list` 같은 실재하지 않는 셀렉터)이 섞여
있어 이 사이트의 실제 스킨(default, xedition, SketchBook5)을 직접 열어
검증한 뒤 다시 설계함.

### 구현
- **애드온 등록**: `after_module_proc` + `Context::getResponseMethod()=='HTML'`
  + 관리자 페이지 제외 + 크롤러 제외 (photoswipe 등 기존 코어 애드온과 동일한
  검증된 패턴)
- **댓글 영역 자동 탐지**: 라이믹스에 댓글 전용 JSON API가 없어(댓글은 게시글
  페이지 템플릿에 통째로 렌더링되는 구조), 우선순위 기반 셀렉터 탐지로 스킨에
  상관없이 동작하도록 설계
  1. `#comment` (default/xedition 스킨의 실제 컨테이너)
  2. `<!-- COMMENT --> ~ <!-- /COMMENT -->` HTML 주석 마커
  3. `id="comment_숫자"` 개별 댓글 항목 → 가장 가까운 ul/ol/div 조상
  4. 댓글쓰기폼의 부모 요소 (최후 수단)
- **새로고침 방식**: 별도 서버 API 없이 현재 페이지를 다시 요청해 같은 영역만
  잘라 갈아끼움 — 스킨이 실제로 만드는 HTML을 그대로 재사용하므로 스킨별
  대응이 불필요
- **관리자 설정**: 버튼 문구, 버튼 위치(위/아래) 커스터마이즈

### 알려진 한계
댓글 영역을 통째로 갈아끼우다 보니, 새로고침 직후엔 캡차나 회원 프로필
팝업 같은 일부 JS 부가기능이 재초기화되지 않을 수 있음 (댓글 내용 자체는
정상 갱신됨). 또한 대댓글이 별도 ajax로 로드되는 스킨(SketchBook5 등)에서는
새로고침 시 펼쳐뒀던 대댓글이 다시 접힐 수 있음.