Vanilla JS 댓글 모듈 자체 개발기

// Vue에서 사용
onMounted(() => {
  CommentBox.init({ container: '#comment-box', objectId: 'article-123' });
});
 
// React에서 사용
useEffect(() => {
  CommentBox.init({ container: containerRef.current, objectId: 'article-123' });
  return () => CommentBox.destroy(containerRef.current);
}, []);
 
// 정적 HTML에서 사용
<script>
  CommentBox.init({ container: '#comment-box', objectId: 'article-123' });
</script>

class CommentBoxManager {
  private instances = new Map<string, CommentBoxInstance>();
 
  init(options: CommentBoxOptions): CommentBoxInstance {
    const normalized = this.normalizeOptions(options);
    const key = this.getContainerKey(normalized.container);
 
    // 같은 컨테이너에 이미 인스턴스가 있으면 먼저 정리
    if (this.instances.has(key)) {
      this.instances.get(key)!.destroy();
    }
 
    const instance = new CommentBoxInstance(normalized);
    this.instances.set(key, instance);
    return instance;
  }
 
  destroy(container: string | HTMLElement): void {
    /* ... */
  }
  destroyAll(): void {
    /* 모든 인스턴스 일괄 정리 */
  }
  getInstance(container: string | HTMLElement): CommentBoxInstance | undefined {
    /* ... */
  }
}
 
// 전역 싱글톤으로 export
export const CommentBox = new CommentBoxManager();

interface CommentAPI {
  getComments(params: GetCommentsParams): Promise<GetCommentsResponse>;
  createComment(objectId: string, data: CreateCommentData): Promise<Comment>;
  updateComment(commentId: string, data: UpdateCommentData): Promise<Comment>;
  deleteComment(commentId: string): Promise<void>;
  getReplies(
    parentId: string,
    params: GetRepliesParams,
  ): Promise<GetRepliesResponse>;
  createReply(parentId: string, data: CreateCommentData): Promise<Comment>;
  likeComment(commentId: string): Promise<Comment>;
  unlikeComment(commentId: string): Promise<Comment>;
}

// 개발 시 - Mock API (기본값)
CommentBox.init({
  container: "#comment-box",
  objectId: "article-123",
});
 
// 서버 연동 시 - HTTP API
import { HttpAPI } from "@my-org/comment-box";
CommentBox.init({
  container: "#comment-box",
  objectId: "article-123",
  api: new HttpAPI("/api/comments"),
});

:root {
  --cb-color-primary: #2563eb;
  --cb-color-bg: #ffffff;
  --cb-color-text: #111827;
  --cb-color-border: #e5e7eb;
  --cb-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cb-radius-sm: 4px;
  --cb-radius-md: 8px;
}
 
// 다크 테마
.cb-container--dark {
  --cb-color-bg: #1f2937;
  --cb-color-text: #f9fafb;
  --cb-color-border: #4b5563;
}

// src/assets/scss/_comment-box.scss
:root {
  --cb-color-primary: #0d9488;
  --cb-color-primary-hover: #0f766e;
  --cb-font-family: "Pretendard Variable", -apple-system, sans-serif;
  --cb-radius-md: 12px;
}

function delegate<T extends HTMLElement>(
  container: HTMLElement,
  selector: string,
  eventType: string,
  handler: (event: Event, target: T) => void,
): () => void {
  const listener = (event: Event) => {
    const target = (event.target as Element).closest(selector) as T | null;
    if (target && container.contains(target)) {
      handler(event, target);
    }
  };
  container.addEventListener(eventType, listener);
  return () => container.removeEventListener(eventType, listener); // cleanup 함수 반환
}

private cleanupFunctions: (() => void)[] = [];
 
// 등록
const cleanupSubmit = delegate(this.container, ".cb-editor-submit", "click", ...);
this.cleanupFunctions.push(cleanupSubmit);
 
// 소멸 시 일괄 정리
destroy(): void {
  this.cleanupFunctions.forEach((cleanup) => cleanup());
  this.cleanupFunctions = [];
  this.emitter.removeAllListeners();
  empty(this.container);
}

interface State {
  comments: Comment[];
  totalCount: number;
  currentPage: number;
  totalPages: number;
  isLoading: boolean;
  error: Error | null;
  expandedReplies: Set<string>; // 펼쳐진 답글 목록
  replyEditors: Set<string>; // 열린 답글 작성 에디터
  editingComment: string | null; // 수정 중인 댓글 ID
  stickerPopupVisible: boolean; // 스티커 팝업 표시 여부
}

private setState(partial: Partial<State>): void {
  this.state = { ...this.state, ...partial };
  this.emitter.emit(EVENTS.STATE_CHANGE, this.state);
}

private render(): void {
  this.renderHeader();      // "댓글 N개"
  this.renderEditor();      // 댓글 작성 폼
  this.renderList();        // 댓글 목록
  this.renderPagination();  // 페이지 버튼
}

private renderList(): void {
  // ... 댓글 목록 HTML 생성 후 삽입 ...
  this.elements.listWrapper.innerHTML = commentsHtml;
 
  // 이전에 펼쳐져 있던 답글 복원
  this.state.expandedReplies.forEach((commentId) => {
    this.loadReplies(commentId);
  });
}

private async toggleLike(commentId: string, buttonEl: HTMLElement): Promise<void> {
  const updated = isLiked
    ? await this.api.unlikeComment(commentId)
    : await this.api.likeComment(commentId);
 
  // DOM을 먼저 업데이트하고, 상태는 그 뒤에 동기화
  const iconEl = buttonEl.querySelector(`.${prefix}-like-icon`);
  if (iconEl) {
    iconEl.innerHTML = updated.isLiked ? '&#9829;' : '&#9825;';
  }
  const countEl = buttonEl.querySelector(`.${prefix}-like-count`);
  if (countEl) {
    countEl.textContent = updated.likeCount > 0 ? String(updated.likeCount) : '';
  }
 
  // 상태 동기화 (렌더링은 하지 않음)
  const comments = this.state.comments.map((c) =>
    c.id === commentId ? { ...c, likeCount: updated.likeCount, isLiked: updated.isLiked } : c
  );
  this.setState({ comments });
}

private startEdit(commentId: string): void {
  //... (변수 선언 생략)
 
  // 이미 수정 중인 댓글이 있으면 취소
  if (this.state.editingComment) {
    this.cancelEdit(this.state.editingComment);
  }
 
  // 열려 있는 답글 에디터를 모두 닫기
  for (const parentId of this.state.replyEditors) {
    this.hideReplyEditor(parentId);
  }
 
  // 댓글 내용 영역을 에디터로 교체
  const contentEl = commentEl.querySelector(`.${prefix}-comment-content`);
  contentEl.dataset.originalHtml = contentEl.innerHTML; // 원본 저장
  contentEl.innerHTML = editorTemplate(prefix, messages, {
    mode: 'edit',
    initialValue: contentEl.dataset.rawContent,
    commentId,
  });
 
  // 포커스 + 커서를 텍스트 끝으로 이동
  const textarea = contentEl.querySelector(`.${prefix}-editor-textarea`);
  textarea.focus();
  textarea.setSelectionRange(textarea.value.length, textarea.value.length);
}

private showReplyEditor(parentId: string): void {
  // 수정 중인 댓글이 있으면 취소
  if (this.state.editingComment) {
    this.cancelEdit(this.state.editingComment);
  }
  // ... 답글 에디터 표시 ...
}

interface StickerConfig {
  enabled: boolean;
  groups: StickerGroup[]; // 스티커 그룹(팩) 목록
  onStickerPurchase?: () => void; // 빈 그룹일 때 구매 유도 콜백
}

private handleStickerSelect(stickerEl: HTMLElement): void {
  // ... (변수 선언 생략)
 
  // textarea 숨김 + 비활성화
  if (textarea) {
    hide(textarea);
    textarea.disabled = true;
  }
 
  // 스티커 미리보기 표시 + 메타데이터 저장
  if (preview && previewImg) {
    previewImg.src = imageUrl;
    preview.dataset.stickerPackId = packId;
    preview.dataset.stickerId = stickerId;
    preview.dataset.stickerImageUrl = imageUrl;
    show(preview);
  }
 
  this.closeStickerPopup();
}

const stickerData =
  preview && !preview.hasAttribute("hidden")
    ? {
        packId: preview.dataset.stickerPackId,
        stickerId: preview.dataset.stickerId,
        imageUrl: preview.dataset.stickerImageUrl,
      }
    : undefined;
 
const content = stickerData ? "" : textarea?.value.trim();
 
// 텍스트도 스티커도 없으면 전송하지 않음
if (!content && !stickerData) return;

const cleanupOutsideClick = addEvent(document.body, "click", (e) => {
  if (!this.state.stickerPopupVisible) return;
  const popup = this.container.querySelector(`.${prefix}-sticker-popup`);
  const target = e.target as Node;
 
  if (popup?.contains(target)) return; // 팝업 내부 클릭
 
  const btns = this.container.querySelectorAll(`.${prefix}-sticker-btn`);
  for (const btn of btns) {
    if (btn.contains(target)) return; // 스티커 버튼 클릭
  }
 
  this.closeStickerPopup(); // 그 외 → 팝업 닫기
});
this.cleanupFunctions.push(cleanupOutsideClick);

// vite.config.ts
export default defineConfig({
  plugins: [dts({ insertTypesEntry: true, rollupTypes: true })],
  build: {
    lib: {
      entry: resolve(__dirname, "src/index.ts"),
      name: "CommentBox",
      formats: ["es", "umd", "cjs"],
      fileName: (format) => `comment-box.${format}.js`,
    },
    rollupOptions: {
      output: {
        assetFileNames: "comment-box.[ext]", // CSS 파일명 지정
        exports: "named",
      },
    },
    sourcemap: true,
    minify: "terser",
  },
});

let CommentBox = null;
let HttpAPI = null;
 
if (import.meta.client) {
  const mod = await import("@my-org/comment-box");
  CommentBox = mod.default || mod.CommentBox;
  HttpAPI = mod.HttpAPI;
  await import("@my-org/comment-box/style.css");
}

// commentStore.ts
let store: Comment[] = []; // 서버 프로세스 메모리에 저장
 
export function getAll() {
  return store;
}
export function add(comment: Comment) {
  store.unshift(comment);
}
// ...

CommentBox.init({
  container: "#comment-box",
  objectId: targetObjectId,
  api: new HttpAPI("/api/comments"),
  locale: "ko",
  isManager: props.isAuthor,
  auth: {
    isLoggedIn: () => authStore.isLoggedIn,
    getUserInfo: () => ({
      id: authStore.user.id,
      nickname: authStore.user.nickname,
      profileUrl: authStore.user.profileUrl,
    }),
    onLoginRequired: () => {
      authStore.requireLogin();
    },
  },
  sticker: {
    enabled: true,
    groups: stickerGroups,
    onStickerPurchase: () => {
      navigateTo("/store/sticker");
    },
  },
});