커뮤니티 기능 보강 스킬 (community-board-enhancement) — 게시판 편의 기능 점검

community-board-enhancement는 반복 업무를 더 안정적으로 처리하기 위한 AI 에이전트 스킬입니다.

사용자가 “커뮤니티 게시판 기능 보강해줘”, “댓글/추천/링크/유튜브 임베드/더보기 메뉴/인라인 수정삭제 확인해줘”, “게시판 편의 기능 체크리스트로 검수하고 없으면 추가해줘”라고 요청할 때 사용한다. 커뮤니티 게시판의 실제 사용자 편의 기능을 점검하고, 누락된 기능은 기존 코드 패턴에 맞춰 최소 범위로 구현한 뒤 재검수한다.

사용 방법

Codex나 호환되는 AI 에이전트의 스킬 폴더에 아래 SKILL.md 내용을 저장한 뒤, 설명에 포함된 트리거 문장으로 호출하세요.

사용 예:
community-board-enhancement 스킬 사용해줘.
이 작업은 community-board-enhancement 기준으로 진행해줘.

원본 위치

.codex/skills/community-board-enhancement/SKILL.md

SKILL.md

---
name: community-board-enhancement
description: 사용자가 “커뮤니티 게시판 기능 보강해줘”, “댓글/추천/링크/유튜브 임베드/더보기 메뉴/인라인 수정삭제 확인해줘”, “게시판 편의 기능 체크리스트로 검수하고 없으면 추가해줘”라고 요청할 때 사용한다. 커뮤니티 게시판의 실제 사용자 편의 기능을 점검하고, 누락된 기능은 기존 코드 패턴에 맞춰 최소 범위로 구현한 뒤 재검수한다.
---

# Community Board Enhancement

## 버전

- v1.1.1 (2026-07-14): 작성/수정 에디터의 다크모드, 툴바 아이콘 노출, SVG/currentColor 대비, hover/active 상태 검수 항목을 추가했다.
- v1.1.0 (2026-07-14): Tiptap 작성 에디터, 이미지 붙여넣기, 일반 파일 첨부, 새 글 임시 첨부 연결, 수정 화면 첨부 삭제/추가 검수 항목을 추가했다.
- v1.0.0 (2026-07-14): 댓글 수정/삭제/추천, 자동 링크, 유튜브 임베드, 유료 콘텐츠 노출 문맥 검수를 추가했다.

## 목적

- 커뮤니티 게시판을 “글을 쓰고 반응을 주고받는 공간”으로 쓰기 편하게 만든다.
- 댓글, 추천, 인라인 수정/삭제, 자동 링크, 유튜브 임베드, 권한/세션 흐름 같은 체감 기능을 빠뜨리지 않고 확인한다.
- 기능이 없거나 깨져 있으면 기존 라우터, 모델, 템플릿 패턴을 우선 재사용해 보강한다.

## 절대 규칙

- 사용자 데이터 삭제, 대량 DB 변경, 권한 정책 변경은 별도 확인 없이 하지 않는다.
- 기능이 이미 있으면 중복 구현하지 말고, 화면 노출/연결/권한/재검수만 보강한다.
- 게시글/댓글 수정·삭제는 작성자 또는 관리자 권한을 서버와 화면 양쪽에서 확인한다.
- 화면 이동 없는 기능은 API 응답과 DOM 갱신이 함께 맞아야 완료로 본다.
- 유튜브 임베드와 자동 링크는 XSS, 기존 `<a>`, `<pre>`, `<code>`, `<iframe>`을 깨지 않게 처리한다.
- 수정 후에는 로컬 또는 라이브에서 HTTP 상태, 렌더링 HTML, 비로그인 차단을 최소 확인한다.

## 기능 체크리스트

### 1. 게시글 본문 편의 기능

- [ ] 일반 URL 자동 링크: `https://...`, `http://...`, `www...`가 클릭 가능한 링크로 바뀌는가.
- [ ] 링크 보안 속성: 외부 링크에 `target="_blank"`와 `rel="noopener noreferrer nofollow"`가 붙는가.
- [ ] 유튜브 자동 임베드: `youtube.com/watch?v=`, `youtu.be/`, 기존 유튜브 `<a>`가 iframe으로 표시되는가.
- [ ] 유료/무료 문맥: 유료 콘텐츠의 전문, 복사용 코드, 다운로드 링크가 공개 본문/HTML 소스/메타/JSON-LD에 노출되지 않는가.
- [ ] 기존 HTML 보호: 이미 작성된 `<a>`, 이미지, iframe, code/pre 안 URL이 중복 변환되지 않는가.
- [ ] 이미지 처리: 본문 이미지 경로, alt, lazy/eager 처리 기존 로직이 유지되는가.
- [ ] 줄바꿈/긴 URL: 긴 링크가 모바일에서 레이아웃을 밀지 않는가.

### 2. 댓글 기능

- [ ] 댓글 작성: 로그인 사용자가 작성 가능하고, 비로그인은 로그인 유도된다.
- [ ] 댓글 수정: 작성자/관리자에게만 보이고 화면 이동 없이 인라인 편집된다.
- [ ] 댓글 삭제: 작성자/관리자에게만 보이고 화면 이동 없이 삭제된다.
- [ ] 더보기 메뉴: 수정/삭제는 `...` 버튼 클릭 후 드롭다운으로 표시된다.
- [ ] 댓글 추천: 추천 버튼은 바로 보이고 토글식으로 추천/취소된다.
- [ ] 댓글 링크화: 댓글 안 일반 URL이 클릭 가능한 링크로 표시된다.
- [ ] 댓글 수 갱신: 삭제/작성 후 댓글 수와 빈 상태가 어색하지 않다.
- [ ] 권한 API: 다른 글의 댓글 번호를 넣어도 수정/삭제/추천이 막히거나 올바른 글에만 적용된다.

### 3. 반응과 참여 기능

- [ ] 게시글 추천 토글: 중복 추천이 누적되지 않고 추천/취소 상태가 유지된다.
- [ ] 댓글 추천 토글: 추천 로그 테이블 또는 기존 반응 모델을 사용한다.
- [ ] 정렬/카운트: 인기순, 최신순, 댓글 수, 추천 수가 있으면 실제 데이터와 맞다.
- [ ] 알림/멘션: 구현되어 있지 않으면 보류 항목으로 기록한다.
- [ ] 공유: 글 URL 복사나 공유 버튼이 있으면 실제 URL을 복사한다.

### 4. 작성 UX

- [ ] 작성 에디터: 사이트 설정 또는 게시판 정책에 맞는 에디터(Tiptap 등)가 적용되어 있는가.
- [ ] 툴바 기능: 굵게, 기울임, 제목, 목록, 인용, 링크, 이미지 삽입이 정상 동작하는가.
- [ ] 에디터 다크모드: 작성/수정 화면에서 에디터 배경, 본문 글자, placeholder, toolbar border가 라이트/다크모드 모두에서 보이는가.
- [ ] 아이콘 노출: 툴바 SVG/currentColor 아이콘과 아이콘 폰트가 실제로 보이고, hover/focus/active 상태에서도 대비가 유지되는가.
- [ ] 복사·붙여넣기: 일반 텍스트, HTML, 이미지 클립보드 붙여넣기가 깨지지 않고 저장되는가.
- [ ] 이미지 붙여넣기: 클립보드 이미지를 업로드하고 본문에 삽입할 수 있는가.
- [ ] 파일 첨부: 이미지 외 PDF/ZIP/DOC/XLS/TXT 등 허용 파일을 첨부하고 목록에서 확인/삭제할 수 있는가.
- [ ] 신규 글 첨부 연결: 글 작성 전 임시 업로드한 파일이 저장 후 새 document_srl에 연결되는가.
- [ ] 수정 글 첨부 연결: 기존 첨부파일이 표시되고, 새 첨부/삭제가 화면 이동 없이 반영되는가.
- [ ] 작성 textarea 또는 에디터의 placeholder가 게시판 목적과 맞다.
- [ ] 빈 제출, 너무 긴 내용, 서버 오류가 사용자에게 보이는 메시지로 처리된다.
- [ ] 모바일에서 입력창, 버튼, 드롭다운이 겹치지 않는다.
- [ ] 작성 후 새로고침이 필요한지, DOM 삽입으로 충분한지 판단한다.
- [ ] 로그인 후 복귀 URL이 원래 글쓰기/댓글 위치로 돌아오는지 확인한다.

### 5. 보안과 안정성

- [ ] XSS 방지: 댓글은 escape 후 필요한 링크만 허용한다.
- [ ] CSRF/Origin 정책: 브라우저 요청은 통과하고 무출처 요청은 막히는지 확인한다.
- [ ] 서버 권한: 화면에서 버튼을 숨기는 것과 별개로 API에서도 권한을 체크한다.
- [ ] 삭제 정책: 하드 삭제/소프트 삭제 중 기존 게시판 정책을 따른다.
- [ ] 비밀글/잠금글/스팸 숨김 상태에서 댓글과 본문이 노출되지 않는다.
- [ ] 유료 잠금: 유료/구매자 전용 본문은 서버에서 제거 또는 조건부 렌더링되며 CSS/JS로만 숨기지 않는다.

## 구현 순서

1. 대상 URL, mid, document_srl, 레이아웃을 확인한다.
2. 상세 템플릿, 페이지 컨텍스트, 댓글/추천 라우터, 모델을 찾는다.
3. 이미 있는 API와 테이블을 먼저 재사용한다.
4. 누락된 기능은 아래 우선순위로 보강한다.
   - 댓글 수정/삭제/추천처럼 사용자 행동을 막는 기능
   - 자동 링크/유튜브 임베드처럼 작성 경험을 높이는 기능
   - 카운트/빈 상태/모바일 드롭다운 같은 polish
5. 비로그인, 권한 없음, 작성자/관리자, 정상 성공 흐름을 나눠 확인한다.
6. 결과를 점수와 남은 리스크로 정리한다.

## 기존 패턴 우선순위

- `app/page_context.py`: 게시글 상세 본문 가공, 댓글 목록 컨텍스트, 추천 상태 주입
- `app/routers/write.py`: 일반 게시판 글쓰기, 댓글 작성/수정/삭제/추천 API
- `templates/layouts/*/pages/_board_view.html`: 게시글 상세 UI
- `templates/layouts/*/pages/_board_edit.html`: 글쓰기/수정 에디터와 첨부 UI
- `templates/components/editor_tiptap.html`: Tiptap 에디터, 이미지 업로드, 이미지 붙여넣기
- `app/models/comment.py`, `app/models/comment_vote_log.py`, `app/models/document_vote_log.py`: 댓글/추천 데이터
- `app/models/file.py`, `app/routers/api/upload.py`: 첨부파일 업로드/삭제와 파일 레코드
- `app/template_env.py`: 댓글처럼 plain text를 템플릿에서 안전하게 변환하는 필터
- 스레드 UX 참고: `templates/member_skins/threads/view.html`, `app/routers/thread.py`

## 완료 기준

- 사용자가 요청한 기능이 실제 화면에 노출된다.
- 화면 이동 없이 처리해야 하는 기능은 DOM 갱신까지 된다.
- 비로그인 요청은 401 또는 로그인 유도로 막힌다.
- 작성자/관리자 외 수정·삭제가 서버에서 막힌다.
- 자동 링크/유튜브 임베드는 기존 링크와 코드블록을 깨지 않는다.
- 에디터 본문, 이미지 붙여넣기, 일반 파일 첨부가 저장 후 상세 화면에서 확인된다.
- 로컬 또는 라이브에서 대상 URL 200 렌더링과 핵심 마크업/API 응답을 확인했다.

## 출력 형식

```text
커뮤니티 보강 범위
- 대상:
- 반영한 기능:
- 보류한 기능:

체크리스트 결과
- [done] 댓글 수정/삭제:
- [done] 댓글 추천:
- [done] 자동 링크:
- [done] 유튜브 임베드:
- [done] Tiptap 에디터:
- [done] 파일 첨부/붙여넣기:
- [todo] 추가 편의 기능:

변경 내용
- 파일/DB/설정:
- 사용자에게 보이는 변화:

검증
- 렌더링:
- API:
- 권한:
- 미확인:

점수
- 현재 점수:
- 공개 판단:
- 남은 리스크:
```