목록으로 돌아가기

축구 훈련 도안 제작 및 관리 플랫폼

축구 지도자를 위한 훈련 도안 제작 및 관리 웹 애플리케이션
인터랙티브 캔버스에서 선수 배치와 이동 경로를 설계하고, 팀원들과 공지사항을 통해 공유할 수 있습니다.

사이트 방문
1 / 5

담당 역할

기획디자인프론트엔드백엔드

기술 스택

React
TypeScript
Redux Toolkit
Fabric.js
Supabase
Ant Design
Styled Components

주요 기능

  • 훈련 도안 에디터: 축구장 캔버스에서 선수, 공, 콘, 래더 등 장비를 드래그 앤 드롭으로 배치
  • 선수 이동 경로: 직선, 곡선, 웨이브 등 다양한 경로 타입으로 선수 움직임을 시각화
  • 개인 라이브러리: 제작한 훈련 도안을 저장하고 공개/비공개 설정으로 관리
  • 공개 라이브러리: 다른 코치들이 공유한 훈련 도안을 카테고리별로 검색
  • 팀 공지사항: 훈련 도안을 첨부하여 팀원들에게 발송, 다중 팀 일괄 발송 지원

수행 업무

  • Fabric.js 캔버스 커스터마이징: 선수, 장비, 도형 등 드릴 에디터 전용 오브젝트 시스템과 인터랙션 구현
  • 커스텀 Undo/Redo 시스템: 캔버스 상태 이력 추적 및 객체 관계까지 복원하는 히스토리 시스템 자체 구현
  • 베지어 곡선 경로 생성: Catmull-Rom 알고리즘으로 선수 이동 경로를 부드러운 곡선으로 변환
  • 객체 관계 추적: 선수-경로 라인 간 부모-자식 관계 관리로 이동/삭제 시 연관 객체 자동 동기화
  • SVG 이미지 파이프라인: 캔버스 → SVG 변환 → Storage 업로드 → URL 생성 플로우 구현
  • Redux 비직렬화 상태 관리: Fabric.js 객체를 Redux에서 관리하기 위한 미들웨어 설정
  • 소셜 OAuth 통합: Kakao, Google, Facebook, Apple 4개 제공자 인증 및 역할 기반 사용자 매핑
#축구
#스포츠
#캔버스 에디터
#Fabric.js
#훈련 관리
#SaaS