2024.08 — 2024.10개인 프로젝트

CalIT

개발자를 위한 대시보드 기반 스크럼 관리 시스템

맡은 일
프로젝트 팀장 · Frontend 단독 개발 (FE 1 / BE 4)
기간
2024.08 — 2024.10
소속
한화시스템 Beyond SW Camp

한화시스템 Beyond SW 풀스택 부트캠프 최종 프로젝트입니다. Vue 기반의 대시보드로 스크럼 관리, 실시간 알림, 채팅 기능을 통합했습니다.

프론트엔드를 맡아 개발하며 100개 이상의 API를 연동하고, 불필요한 렌더링을 줄이고 Pinia로 상태를 정리해 코드베이스를 안정적으로 관리했습니다. 백엔드 팀원 네 명과 함께 Jenkins CI/CD 파이프라인, Kafka 기반 채팅, Prometheus + Grafana 모니터링 구축도 도왔습니다.

Pl. 1랜딩 — 백로그 관리·실시간 피드백·공동 회의록·QA/에러 보드를 하나의 워크스페이스로 묶는다는 걸 첫 화면에서 보여 줍니다.

핵심

  1. 01

    프론트엔드 구현

    100개 이상 API 연동 및 비동기 처리

  2. 02

    Pinia로 전역 상태 정리, 불필요한 리렌더링 방지

  3. 03

    Kafka 기반 실시간 채팅 시스템 구현 지원

  4. 04

    Jenkins CI/CD 파이프라인 구축 지원

나머지 2개 더 보기
  1. 05

    Prometheus + Grafana 모니터링 시스템 구축 지원

  2. 06

    n8n 기반 AI 챗봇 시나리오 작성

    자동화 업무 알림

화면

좌우로 넘겨 보실 수 있습니다

Pl. 2of6

Pl. 2개인 대시보드 — 남은 태스크·완료율·참여 중인 워크스페이스를 위에 두고, 우선순위 태스크와 다가오는 회의를 카드로 모았습니다.
Pl. 3칸반 보드 — 할 일·진행 중·완료로 카드를 옮기고, 같은 데이터를 리스트와 타임라인으로도 봅니다. 담당자와 마감일이 카드에 함께 붙습니다.
Pl. 4회의록 작성 — 작성자·참여자·날짜를 붙이고, 회의 중 나온 이슈를 바로 연동해 보드로 넘깁니다.
Pl. 5회의록 상세 — 본문 옆에 참여자 목록을 두고, 연결된 이슈를 태그로 보여 줍니다.
Pl. 6채팅 — Kafka 기반 실시간 메시지. 대화방 목록과 주고받은 파일을 오른쪽 패널에서 함께 봅니다.

배포했던 서비스 화면입니다.

자세히

궁금한 항목을 펼치면 그때 무엇이 문제였고 어떻게 판단했는지 나옵니다.

emit으로 컴포넌트 간 데이터 전달 구조 정리

Pinia로 전역 상태 관리

100개 이상의 API 연동

비동기 처리를 정리하고 불필요한 요청을 줄임

Jenkins 파이프라인 구축 지원

CI/CD 자동화

Kafka 기반 채팅 시스템 구현 지원

실시간 데이터 처리

Prometheus + Grafana 백엔드 모니터링 시스템 구축 지원

쓴 기술

Vue.jsJavaScriptPiniaSpring BootKafkaRedisMariaDBJenkinsKubernetesPrometheusGrafana

링크

이어서 볼 것

한화시스템 Beyond SW Camp에서 한 다른 프로젝트

이전

BOOT_UP

다음

번개팅