CS Tool Dashboard Development Guide

Project Overview

게임 클라이언트 → FAQ 페이지 → 문의 폼 → 관리자 대시보드 흐름의 CS 시스템

Tech Stack

Frontend: React/Next.js + TypeScript + Tailwind CSS
Backend: Firebase Cloud Functions (Node.js)
Database: Firestore
Auth: Firebase Authentication
Storage: Firebase Storage (첨부파일)
Email: SendGrid 또는 Firebase Extensions

Core Features

1. User Side - FAQ Page

게임별 FAQ 검색/필터링
카테고리 탭 (수평 스크롤)
검색 결과 하이라이트
문의 페이지 연결

2. User Side - Contact Form

계층형 카테고리 드롭다운 (최대 3단계)
필수 필드: 이메일, OS, 게임버전, 카테고리, 설명
첨부파일 업로드 (이미지/영상, 5MB 제한)
개인정보처리방침 동의

3. Admin Side - Dashboard

티켓 리스트 (필터, 정렬, 페이지네이션)
티켓 상세 (3-column 레이아웃)
답변 작성 및 이메일 발송
티켓 상태 관리 (pending → in_progress → resolved → closed)
실시간 업데이트 (onSnapshot)

Data Models

FAQ Collection

interface FAQItem {
  id: string;
  gameId: string;
  category: string;
  question: string;
  answer: string;
  keywords: string[];
  order: number;
  isActive: boolean;
  createdAt: Timestamp;
  updatedAt: Timestamp;
}

Ticket Collection

interface Ticket {
  id: string;
  gameId: string;
  email: string;
  os: 'iOS' | 'Android';
  gameVersion: string;
  category: string;
  subCategory: string;
  subSubCategory?: string;
  description: string;
  attachments: string[];
  status: 'pending' | 'in_progress' | 'resolved' | 'closed';
  priority: 'low' | 'medium' | 'high';
  assignee: string | null;
  createdAt: Timestamp;
  updatedAt: Timestamp;
  history: TicketHistory[];
}

Category Hierarchy

const categories = {
  account: {
    label: '계정',
    subCategories: {
      save: '계정 저장',
      profile: '프로필 세부 정보 변경',
      appeal: '차단/정지 이의제기'
    }
  },
  account_recovery: {
    label: '계정 복구',
    subCategories: {
      restore: '계정을 복구하려 합니다',
      security: '계정의 보안 문제/해킹'
    }
  },
  player_report: {
    label: '플레이어 신고',
    subCategories: {
      cheating: '부정행위',
      harassment: '부적절한 언행/괴롭힘',
      inappropriate_name: '부적절한 사용자 이름'
    }
  },
  billing: {
    label: '청구 및 결제',
    subCategories: {
      gem_purchase: '보석/코인 구매',
      real_purchase: '실제 구매',
      refund: '환불',
      subscription: '구독 관련 문제'
    }
  },
  bug_report: {
    label: '버그 신고',
    subCategories: {
      ads: '광고',
      events: '이벤트',
      characters: '캐릭터',
      chat: '채팅',
      items: '아이템/무기/업그레이드'
    }
  },
  technical: {
    label: '기술 문제',
    subCategories: {
      crash: '크래시 또는 끊김',
      lag: '렉 현상 또는 연결 해제'
    },
    // 3단계: 빈도
    frequency: ['단 한 번', '가끔', '자주', '항상']
  }
};

Folder Structure

cs-tool-dashboard/
├── apps/
│   ├── web/                 # FAQ + 문의 폼 (Next.js)
│   └── admin/               # 관리자 대시보드 (Next.js)
├── packages/
│   ├── ui/                  # 공통 컴포넌트
│   ├── firebase-config/     # Firebase 설정
│   └── types/               # 공유 타입
├── functions/               # Cloud Functions
└── firebase.json

Instructions

When developing FAQ page:

gameId로 FAQ 필터링 구현
검색은 keywords 배열 + question 필드 대상
카테고리 탭은 동적으로 Firestore에서 로드
모바일 우선 반응형 디자인

When developing Contact form:

react-hook-form + zod로 유효성 검증
카테고리 선택시 하위 카테고리 동적 렌더링
파일 업로드는 Firebase Storage, 5MB 제한
제출 시 Cloud Function 호출 → Firestore 저장

When developing Admin dashboard:

Firebase Auth로 관리자 인증 (role: 'admin')
onSnapshot으로 실시간 티켓 리스트 동기화
답변 전송 시 SendGrid로 이메일 발송
티켓 상태 변경 시 history 배열에 기록

Constraints

TypeScript 필수
Firebase SDK v9+ (modular syntax)
한국어 주석, 영어 코드
30+ 게임 지원 (gameId로 분기)
확장성 고려한 설계