Mancity는 드론 경기 영상을 분석해 경기 기록, 하이라이트, 다시보기, 전술보드를 제공한 풋살 분석 서비스입니다. 저는 화면 전반의 프론트엔드 구조와 경기 관련 주요 인터페이스를 구현했습니다.
프로젝트 초반에는 Atomic Design Pattern과 Storybook으로 컴포넌트 체계를 먼저 정리했습니다. 이후 매치 목록, 상세, 등록, 수정, 다시보기, 경기 통계 같은 화면을 같은 규칙 위에서 빠르게 확장할 수 있었습니다.
전술보드는 Draggable과 Zustand를 활용해 직접 조작할 수 있게 만들었고, 마이페이지와 회원 API, 팔로우·팔로잉 흐름도 함께 담당했습니다. 기능 수가 많은 서비스에서도 UI 구조를 먼저 잡아두면 개발 속도와 유지보수성이 모두 좋아진다는 점을 확인한 작업이었습니다.
What I worked on
Atomic Design Pattern과 Storybook을 활용해 컴포넌트를 Atom, Molecule, Organism, Template, Page 단계로 나누고 재사용성을 강화했습니다.
Tailwind를 사용해 색상과 크기만 조정해도 재사용 가능한 UI 구조를 만들고, Storybook으로 활용 범위를 빠르게 검증했습니다.
매치 목록, 상세, 등록, 수정 화면과 경기 다시보기, 하이라이트, 경기 통계가 포함된 상세 페이지를 구현했습니다.
Draggable과 Zustand를 활용해 전술보드 기능을 구현하고, 마이페이지와 회원 관련 API, 팔로우·팔로잉 흐름도 담당했습니다.
Technical highlights
PWA, React Query, Zustand를 조합해 인터랙티브한 화면과 상태 흐름을 정리했습니다.
다양한 경기 데이터를 한 화면에서 다루기 위해 상세 정보, 영상, 전술보드의 정보 밀도를 균형 있게 구성했습니다.
프론트엔드 컴포넌트 체계를 먼저 다진 뒤 기능 화면을 확장하는 방식으로 개발 속도와 유지보수성을 함께 챙겼습니다.
