🏃 러닝 크루 주간 러닝 기록 페이지 - 팀원별 거리 & 페이스 통계

mkdir running-crew-weekly-log && cd running-crew-weekly-log

이 폴더에서 Laravel 13.x 프로젝트를 생성합니다.

# Laravel 프로젝트 초기화

composer create-project laravel/laravel:^13.0 .

프로젝트가 생성되면 다음을 확인해주세요:
- Laravel 버전이 13.x인지 확인 (`php artisan --version`)
- `.env` 파일에서 DB_CONNECTION=sqlite로 설정
- `database/database.sqlite` 파일 생성 (`touch database/database.sqlite`)

그 다음, 러닝 기록 테이블을 위한 마이그레이션 파일을 생성합니다.

```bash
php artisan make:migration create_runs_table
```

마이그레이션 파일(`database/migrations/xxxx_create_runs_table.php`)에 다음 스키마를 작성하세요:

```php
Schema::create('runs', function (Blueprint $table) {
    $table->id();
    $table->string('name'); // 크루원 이름
    $table->date('date'); // 러닝 날짜
    $table->decimal('distance_km', 5, 2); // 거리 (예: 5.25km)
    $table->integer('pace_seconds'); // 페이스를 초 단위로 저장 (예: 5분 30초 = 330초)
    $table->text('memo')->nullable(); // 메모
    $table->timestamps();
});
```

마이그레이션 실행:
```bash
php artisan migrate
```

마지막으로 Run 모델을 생성합니다:
```bash
php artisan make:model Run
```

`app/Models/Run.php`에서 fillable 속성을 추가하세요:
```php
protected $fillable = ['name', 'date', 'distance_km', 'pace_seconds', 'memo'];
```

# Tailwind CSS 설정 및 메인 페이지 레이아웃 생성

Tailwind CSS를 Laravel에 통합합니다. Vite를 사용하여 빠르게 설정하겠습니다.

1. **Tailwind CSS 설치**

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

2. **`tailwind.config.js` 수정**

```js
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    extend: {
      colors: {
        'runner-green': '#10b981',
        'runner-blue': '#3b82f6',
      },
    },
  },
  plugins: [],
}
```

3. **`resources/css/app.css`에 Tailwind 지시어 추가**

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

4. **Vite 빌드**

```bash
npm install
npm run dev
```

(개발 서버를 실행한 상태로 두세요)

5. **메인 레이아웃 Blade 파일 생성**

`resources/views/layout.blade.php` 파일을 만들고 다음 내용을 작성하세요:

```blade
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🏃 러닝 크루 주간 기록</title>
    @vite('resources/css/app.css')
</head>
<body class="bg-gradient-to-br from-green-50 to-blue-50 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <header class="text-center mb-8">
            <h1 class="text-4xl font-bold text-runner-green mb-2">🏃‍♂️ 러닝 크루 주간 기록</h1>
            <p class="text-gray-600">이번 주 우리 크루의 러닝 기록을 남겨보세요!</p>
        </header>

        <main>
            @yield('content')
        </main>

        <footer class="text-center mt-12 text-gray-500 text-sm">
            <p>💪 함께 달리면 더 멀리 갑니다</p>
        </footer>
    </div>
</body>
</html>
```

이제 기본 레이아웃이 완성되었습니다. 다음 단계에서 러닝 기록 폼과 목록을 추가하겠습니다.

# 러닝 기록 입력 폼 및 목록 페이지 구현

이제 메인 페이지에 러닝 기록 폼과 최근 7일 기록 목록을 만들겠습니다.

1. **컨트롤러 생성**

```bash
php artisan make:controller RunController
```

2. **`app/Http/Controllers/RunController.php` 작성**

```php
namespace App\Http\Controllers;

use App\Models\Run;
use Illuminate\Http\Request;
use Illuminate\Support\Carbon;

class RunController extends Controller
{
    public function index()
    {
        // 최근 7일 기록만 가져오기
        $runs = Run::where('date', '>=', Carbon::now()->subDays(7))
            ->orderBy('date', 'desc')
            ->orderBy('created_at', 'desc')
            ->get();

        // 주간 통계
        $totalDistance = $runs->sum('distance_km');
        $avgPaceSeconds = $runs->avg('pace_seconds');
        
        // TOP 3 러너 (거리 합산)
        $topRunners = Run::where('date', '>=', Carbon::now()->subDays(7))
            ->selectRaw('name, SUM(distance_km) as total_distance')
            ->groupBy('name')
            ->orderBy('total_distance', 'desc')
            ->limit(3)
            ->get();

        return view('runs.index', compact('runs', 'totalDistance', 'avgPaceSeconds', 'topRunners'));
    }

    public function store(Request $request)
    {
        $validated = $request->validate([
            'name' => 'required|string|max:50',
            'date' => 'required|date',
            'distance_km' => 'required|numeric|min:0.1',
            'pace' => 'required|regex:/^\d{1,2}:\d{2}$/', // MM:SS 형식
            'memo' => 'nullable|string|max:200',
        ]);

        // 페이스를 초로 변환 (예: "5:30" -> 330초)
        [$minutes, $seconds] = explode(':', $validated['pace']);
        $paceSeconds = ($minutes * 60) + $seconds;

        Run::create([
            'name' => $validated['name'],
            'date' => $validated['date'],
            'distance_km' => $validated['distance_km'],
            'pace_seconds' => $paceSeconds,
            'memo' => $validated['memo'],
        ]);

        return redirect()->route('runs.index')->with('success', '러닝 기록이 추가되었습니다! 🎉');
    }
}
```

3. **라우트 설정 (`routes/web.php`)**

```php
use App\Http\Controllers\RunController;

Route::get('/', [RunController::class, 'index'])->name('runs.index');
Route::post('/runs', [RunController::class, 'store'])->name('runs.store');
```

4. **뷰 파일 생성 (`resources/views/runs/index.blade.php`)**

```blade
@extends('layout')

@section('content')
    {{-- 성공 메시지 --}}
    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6">
            {{ session('success') }}
        </div>
    @endif

    {{-- 러닝 기록 입력 폼 --}}
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <h2 class="text-2xl font-bold text-runner-blue mb-4">📝 오늘 러닝 기록하기</h2>
        <form action="{{ route('runs.store') }}" method="POST" class="space-y-4">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">이름</label>
                    <input type="text" name="name" required 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-runner-green focus:border-runner-green"
                           placeholder="홍길동">
                    @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">날짜</label>
                    <input type="date" name="date" required value="{{ date('Y-m-d') }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-runner-green focus:border-runner-green">
                    @error('date') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">거리 (km)</label>
                    <input type="number" step="0.01" name="distance_km" required 
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-runner-green focus:border-runner-green"
                           placeholder="5.5">
                    @error('distance_km') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">페이스 (분:초/km)</label>
                    <input type="text" name="pace" required pattern="\d{1,2}:\d{2}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-runner-green focus:border-runner-green"
                           placeholder="5:30">
                    @error('pace') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">메모 (선택)</label>
                <textarea name="memo" rows="2" 
                          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-runner-green focus:border-runner-green"
                          placeholder="오늘 컨디션이 좋았어요!"></textarea>
            </div>
            <button type="submit" 
                    class="w-full bg-runner-green hover:bg-green-600 text-white font-bold py-3 rounded-md transition">
                🏃 기록 추가하기
            </button>
        </form>
    </div>

    {{-- 주간 통계 --}}
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <h2 class="text-2xl font-bold text-runner-blue mb-4">📊 이번 주 통계</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="text-center">
                <p class="text-gray-600 text-sm">총 거리</p>
                <p class="text-3xl font-bold text-runner-green">{{ number_format($totalDistance, 1) }} km</p>
            </div>
            <div class="text-center">
                <p class="text-gray-600 text-sm">평균 페이스</p>
                <p class="text-3xl font-bold text-runner-blue">
                    @if($avgPaceSeconds)
                        {{ floor($avgPaceSeconds / 60) }}:{{ str_pad($avgPaceSeconds % 60, 2, '0', STR_PAD_LEFT) }}
                    @else
                        -:--
                    @endif
                </p>
            </div>
            <div class="text-center">
                <p class="text-gray-600 text-sm">전체 기록 수</p>
                <p class="text-3xl font-bold text-gray-700">{{ $runs->count() }}개</p>
            </div>
        </div>

        {{-- TOP 3 러너 --}}
        @if($topRunners->count() > 0)
            <div class="mt-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-3">🏆 이번 주 TOP 러너</h3>
                <div class="space-y-2">
                    @foreach($topRunners as $index => $runner)
                        <div class="flex items-center justify-between bg-gradient-to-r from-yellow-50 to-orange-50 px-4 py-2 rounded">
                            <span class="font-medium">
                                @if($index === 0) 🥇
                                @elseif($index === 1) 🥈
                                @else 🥉
                                @endif
                                {{ $runner->name }}
                            </span>
                            <span class="text-runner-green font-bold">{{ number_format($runner->total_distance, 1) }} km</span>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>

    {{-- 러닝 기록 목록 --}}
    <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-2xl font-bold text-runner-blue mb-4">📅 최근 7일 기록</h2>
        @if($runs->count() > 0)
            <div class="space-y-3">
                @foreach($runs as $run)
                    <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="font-bold text-lg text-gray-800">{{ $run->name }}</p>
                                <p class="text-sm text-gray-500">{{ Carbon\Carbon::parse($run->date)->format('Y년 m월 d일 (D)') }}</p>
                            </div>
                            <div class="text-right">
                                <p class="text-2xl font-bold text-runner-green">{{ number_format($run->distance_km, 1) }} km</p>
                                <p class="text-sm text-gray-600">
                                    ⏱️ {{ floor($run->pace_seconds / 60) }}:{{ str_pad($run->pace_seconds % 60, 2, '0', STR_PAD_LEFT) }}/km
                                </p>
                            </div>
                        </div>
                        @if($run->memo)
                            <p class="mt-2 text-gray-600 text-sm">💬 {{ $run->memo }}</p>
                        @endif
                    </div>
                @endforeach
            </div>
        @else
            <p class="text-gray-500 text-center py-8">아직 이번 주 러닝 기록이 없습니다. 첫 기록을 남겨보세요! 🏃‍♀️</p>
        @endif
    </div>
@endsection
```

이제 `php artisan serve`로 서버를 실행하고 브라우저에서 확인해보세요!