진행 중

MyFC

기획 및 앱 개발

축구·풋살 팀을 위한 매치·선수·스코어 관리 모바일 앱

React NativeExpoTypeScriptTanStack QueryZustandSupabaseNativeWind

프로젝트 개요

동호회·친선 팀이 경기 일정, 선수 로스터, 쿼터별 스코어, MOM까지 한곳에서 관리할 수 있도록 만든 앱입니다. 매치 3단계 등록, 선수/용병 선발, 쿼터별 골·도움 기록, 홈 대시보드(리더보드·예정 매치·MOM)를 제공합니다. Expo Router는 라우팅만 담당하고, 도메인 로직은 Feature-Sliced 구조로 분리했습니다.

구조 설계

Expo Router + Feature Modules

`app/`은 라우팅만, `src/features/`에 auth·home·teams·players·matches 등 도메인별 api/hooks/screens 배치. Container/Presentational 패턴으로 화면과 데이터 fetch를 분리합니다.

상태 & API

서버 상태는 React Query, 팀 선택·인증 토큰 등 cross-screen 상태만 Zustand. REST API(http-client)와 통신하고, Supabase는 Storage·매치 공유 Edge Function에 활용합니다.

핵심 도메인

teams(팀 CRUD), players(로스터), matches-registration(3단계 매치 등록), matches-participants(선발·용병·쿼터 스코어), home(리더보드·MOM·예정 매치).

인증

전화번호+비밀번호는 REST API(/auth/login, /auth/signup), Google·Kakao·Naver·Apple은 네이티브 소셜 로그인(Development Build).

진행 과정

1. 앱 골격 & 아키텍처

Expo 기반 프로젝트 셋업과 Feature-Sliced 구조를 먼저 잡았습니다.

·Expo SDK 54 + Expo Router 6 셋업, Feature-Sliced 폴더 구조
·React Query + Zustand + Paper 테마 Provider
·pnpm 기반 monorepo-style feature 모듈

2. 핵심 기능 구현

팀·선수·매치·스코어 도메인을 feature 모듈 단위로 구현했습니다.

·팀 생성·선택, 선수 CRUD, 매치 3단계 등록(종목→일정→상대팀)
·선수 선발·용병 관리, 쿼터별 골/도움 스코어 입력
·홈 대시보드: 리더보드, 예정 매치 공유, MOM

3. Supabase & 배포

DB·Storage·Edge Function과 EAS Build로 실기기 테스트까지 연결했습니다.

·teams·players·matches·match_goal_events 등 DB 마이그레이션
·Storage(팀 로고·선수 프로필·경기장·MOM 이미지), RLS
·EAS Build / Development Build(iOS·Android 실기기)

주요 구현

·Expo Router 화면 흐름 및 Feature 모듈(api/hooks/screens) 설계
·매치 등록·참가자·쿼터 스코어 도메인 UI/훅 구현
·REST API 클라이언트 및 React Query 캐시·mutation 설계
·Supabase 마이그레이션, Storage, match-share Edge Function
·소셜 로그인(카카오·네이버·Apple) 네이티브 빌드 설정

설계 포인트

Feature-Sliced DesignReact Query + Zustand쿼터별 스코어 트래킹Supabase + REST APIExpo Development Build