WOD Log

CrossFit WOD와 1RM 기록을 달력에서 빠르게 관리하는 모바일 앱

- Architecture

flowchart TB
    User[User] --> App[Expo / React Native App]

    subgraph Presentation[Presentation Layer]
        Tabs[Top Tabs & Swipe Navigation]
        Calendar[Calendar Screen]
        OneRM[1RM Screen]
        Modals[Record & Date Picker Modals]
    end

    subgraph State[Application State]
        WODState[Daily WOD Records]
        RMState[1RM Records]
        ExerciseState[Exercise Order]
    end

    subgraph Device[Device Services]
        Storage[(AsyncStorage)]
        Camera[Camera]
        Gallery[Photo Library]
        SafeArea[Safe Area Insets]
    end

    App --> Presentation
    Calendar --> WODState
    OneRM --> RMState
    OneRM --> ExerciseState
    Modals --> WODState
    Modals --> RMState
    State <--> Storage
    Modals --> Camera
    Modals --> Gallery
    Presentation --> SafeArea

Loading

- Screen Flow

flowchart LR
    Calendar[Calendar] <-->|Top tab / Swipe| OneRM[1RM List]

    Calendar -->|Empty date| WODEdit[Add WOD Record]
    Calendar -->|Recorded date| WODView[View WOD Record]
    WODView -->|Edit| WODEdit

    OneRM -->|Add button| RMEdit[Add 1RM Record]
    OneRM -->|Tap exercise| RMHistory[1RM History]
    RMHistory -->|Edit| RMEdit
    OneRM -->|Settings| AddExercise[Add Exercise]
    OneRM -->|Sort| SortExercise[Drag to Reorder]

Loading

- Local Data Flow

sequenceDiagram
    participant U as User
    participant UI as App UI
    participant S as React State
    participant A as AsyncStorage

    A->>S: Load saved records on app start
    S->>UI: Render calendar and 1RM list
    U->>UI: Add, edit, delete, or reorder
    UI->>S: Update state
    S->>A: Persist changed data
    S->>UI: Refresh visible records

Loading

주요 기능

• 달력에서 월별 출석 횟수와 날짜별 기록 등급 확인
• Rxd, A, B, C 등급을 색상으로 구분
• WOD 내용, 사진, 사용 무게, 라운드 또는 완주 시간 기록
• 기록이 있는 날짜는 조회 화면을 먼저 표시하고 필요할 때 수정
• 기본 리프트와 사용자가 추가한 운동의 1RM 기록 관리
• 과거 기록 대비 1RM 변화량 확인
• 1RM 기록 수정·삭제 및 운동 순서 드래그 정렬
• 상단 탭 또는 좌우 스와이프로 달력과 1RM 화면 이동
• 기기별 상단·하단 안전 영역 대응
• 모든 데이터는 기기 내부에 저장

사용 방법

WOD 기록

1. 달력에서 기록할 날짜를 누릅니다.
2. 날짜, 기록 등급, 사용 무게를 선택하거나 입력합니다.
3. 라운드 기록 또는 완주 시간을 입력합니다.
4. WOD 내용을 텍스트로 입력하거나 사진을 첨부합니다.
5. 저장 버튼을 누릅니다.

기록이 저장된 날짜를 누르면 먼저 읽기 전용 팝업이 열립니다. 팝업 안의 수정 버튼을 누르면 내용을 변경할 수 있습니다.

1RM 기록

1. 상단 1RM 탭을 누르거나 달력 화면을 왼쪽으로 밉니다.
2. 운동 항목 오른쪽의 기록 추가 버튼을 누릅니다.
3. 무게와 날짜를 선택한 뒤 저장합니다.
4. 운동 항목을 누르면 날짜 내림차순으로 과거 기록을 확인하고 수정·삭제할 수 있습니다.
5. 운동 추가 버튼으로 새 운동을 만들고, 정렬 버튼에서 드래그하여 순서를 변경할 수 있습니다.

실행 방법

준비 사항

• Node.js
• npm
• Expo Go 또는 Android Studio

npm install
npm run start

터미널에 표시된 QR 코드를 Expo Go로 스캔하면 실제 기기에서 확인할 수 있습니다.

Android 로컬 빌드

EAS 할당량을 사용하지 않고 Android Studio의 JDK와 Android SDK로 빌드합니다.

# 테스트 설치용 APK
npm run build:apk

# Play Store 업로드용 AAB
npm run build:aab

# APK와 AAB 모두
npm run build:android

빌드 결과:

용도	파일
Android 기기 최종 테스트	output/android/wod-log-v1.0.0-release.apk
Google Play Console 업로드	output/android/wod-log-v1.0.0-playstore.aab

기술 스택

구분	기술
App	Expo SDK 54, React Native, React
Storage	AsyncStorage
Image	Expo Image Picker
Device UI	React Native Safe Area Context
Android Build	Gradle, Android Studio JDK

데이터 및 권한

• WOD, 1RM, 운동 순서는 서버가 아닌 기기의 AsyncStorage에 저장됩니다.
• 앱 삭제 또는 앱 데이터 초기화 시 저장 기록이 사라질 수 있습니다.
• WOD 사진 첨부를 위해 카메라와 사진 보관함 권한을 사용합니다.
• 음성 녹음 권한은 사용하지 않습니다.
• 개인정보처리방침

프로젝트 구조

wod-log/
├─ App.js                         # 화면, 상태, 기록 관리 로직
├─ app.json                       # Expo 및 플랫폼 설정
├─ assets/                        # 앱 아이콘
├─ scripts/
│  ├─ build-android-local.ps1     # 로컬 APK/AAB 빌드
│  └─ generate-app-icon.ps1       # 앱 아이콘 생성
└─ android/                       # Android 네이티브 프로젝트

현재 저장 키

데이터	AsyncStorage 키
날짜별 WOD 기록	wod-log:daily-records
운동별 1RM 기록	wod-log:one-rm-records
1RM 운동 목록 및 순서	wod-log:one-rm-exercises