JIINSUNG

누구나 적용 가능한 오픈소스 대기열 시스템, 큐잉

프로젝트 개요

로고

개발 기간

2024.04 ~ 2024.05 (6주) · 6인 팀 (FE 1, BE 3, Infra 2)

개발 언어

Next.js 14 · TypeScript · Tailwind CSS · React Query

담당 업무

Frontend 전담 (100%)

참고 자료

코드 한 줄 수정 없이 명령어 실행만으로 적용 가능한 오픈소스 대기열 시스템입니다. 트래픽 폭증 시 서버 과부하를 방지하기 위해, 타깃 URL별 대기열 생성·관리와 실시간 서버 모니터링 기능을 제공합니다. 설치 후 설정 파일 없이 즉시 동작하도록 설계해 진입 장벽을 최소화했습니다.

주요 성과

Next.js 14 App Router 기반 프론트엔드 단독 설계 및 완성

FSD 파일 구조 도입으로 기능 단위 코드 분리 · 유지보수성 향상

React Query 폴링 기반 실시간 모니터링 대시보드 구현

Git Flow 브랜치 전략으로 6인 협업 충돌 없이 진행

주요 기능

코드 변경 없이 CLI 명령어만으로 대기열 시스템 즉시 적용

타깃 URL별 대기열 생성 · 활성화 / 비활성화 관리

실시간 대기 인원 · 통과 인원 현황 모니터링 대시보드

서버 CPU · 메모리 · 네트워크 I/O 실시간 지표 시각화

모바일 · PC 반응형 지원

담당 기능

프론트엔드 전체 개발 (100%) — Next.js 14 App Router 기반 구조 설계부터 배포까지 단독 담당

실시간 서버 모니터링 대시보드 — React Query 폴링으로 CPU · 메모리 · 트래픽 지표 실시간 갱신

대기열 타깃 URL 등록 · 수정 · 삭제 · 활성화 관리 페이지

대기열 상세 모니터링 페이지 — 대기 인원 추이 차트 및 통과율 시각화

사용자 대기열 페이지 제작 — PC · 모바일 반응형, 대기 순번 · 예상 시간 실시간 표시

대기열 상태 제어 로직 — 활성화 / 일시중지 / 강제 통과 기능

QA용 테스트 웹사이트 제작 — 대기열 동작 검증용 목업 서비스

FSD(Feature Sliced Design) 기반 디렉토리 구조 설계 및 팀 내 컨벤션 정립

프로젝트 스크린샷

image
image
image
image