sam-manage/resources/views/roadmap/plans/partials/table.blade.php

<div class="bg-white rounded-lg shadow-sm overflow-hidden">
    <x-table-swipe>
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider w-16">#</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 uppercase tracking-wider">계획명</th>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider">상태</th>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider">카테고리</th>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider">우선순위</th>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider">Phase</th>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider">진행률</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 uppercase tracking-wider">기간</th>
                <th class="px-4 py-3 text-center text-sm font-semibold text-gray-700 uppercase tracking-wider w-28">액션</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            @forelse($plans as $plan)
            <tr class="{{ $plan->deleted_at ? 'bg-gray-100' : '' }} hover:bg-gray-50 cursor-pointer"
                onclick="window.location.href='{{ route('roadmap.plans.show', $plan->id) }}'">
                <td class="px-4 py-4 whitespace-nowrap text-sm text-center text-gray-500">
                    {{ $loop->iteration + (($plans->currentPage() - 1) * $plans->perPage()) }}
                </td>
                <td class="px-4 py-4 whitespace-nowrap">
                    <div class="flex items-center gap-2">
                        <span class="w-2.5 h-2.5 rounded-full shrink-0" style="background-color: {{ $plan->color }}"></span>
                        <div>
                            <a href="{{ route('roadmap.plans.show', $plan->id) }}" class="text-sm font-medium text-gray-900 hover:text-indigo-600">
                                {{ $plan->title }}
                            </a>
                            @if($plan->description)
                            <p class="text-xs text-gray-500 mt-0.5 truncate max-w-xs">{{ Str::limit($plan->description, 50) }}</p>
                            @endif
                        </div>
                    </div>
                </td>
                <td class="px-4 py-4 whitespace-nowrap text-center">
                    <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full {{ $plan->status_color }}">
                        {{ $plan->status_label }}
                    </span>
                </td>
                <td class="px-4 py-4 whitespace-nowrap text-center">
                    <span class="text-xs text-gray-600">{{ $plan->category_label }}</span>
                </td>
                <td class="px-4 py-4 whitespace-nowrap text-center">
                    <span class="px-2 py-0.5 text-xs rounded-full {{ $plan->priority_color }}">{{ $plan->priority_label }}</span>
                </td>
                <td class="px-4 py-4 whitespace-nowrap text-center">
                    <span class="text-xs text-gray-600">{{ Str::before($plan->phase_label, ' —') }}</span>
                </td>
                <td class="px-4 py-4 whitespace-nowrap">
                    <div class="flex items-center gap-2">
                        <div class="w-20 bg-gray-200 rounded-full h-2 overflow-hidden">
                            <div class="h-2 rounded-full" style="width: {{ $plan->progress }}%; background-color: {{ $plan->color }}"></div>
                        </div>
                        <span class="text-xs font-medium text-gray-700">{{ $plan->progress }}%</span>
                    </div>
                </td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ $plan->period }}
                </td>
                <td class="px-4 py-4 whitespace-nowrap text-center" onclick="event.stopPropagation()">
                    @if($plan->deleted_at)
                        <div class="flex justify-center gap-1">
                            <button onclick="confirmRestore({{ $plan->id }}, '{{ $plan->title }}')"
                                    class="p-1.5 text-green-600 hover:text-green-900 hover:bg-green-50 rounded" title="복원">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                                </svg>
                            </button>
                        </div>
                    @else
                        <div class="flex justify-center gap-1">
                            <a href="{{ route('roadmap.plans.show', $plan->id) }}"
                               class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded" title="보기">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                </svg>
                            </a>
                            <a href="{{ route('roadmap.plans.edit', $plan->id) }}"
                               class="p-1.5 text-blue-600 hover:text-blue-900 hover:bg-blue-50 rounded" title="수정">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                </svg>
                            </a>
                            <button onclick="confirmDelete({{ $plan->id }}, '{{ $plan->title }}')"
                                    class="p-1.5 text-red-600 hover:text-red-900 hover:bg-red-50 rounded" title="삭제">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                </svg>
                            </button>
                        </div>
                    @endif
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="9" class="px-6 py-12 text-center text-gray-500">
                    등록된 계획이 없습니다.
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
    </x-table-swipe>
</div>

@include('partials.pagination', [
    'paginator' => $plans,
    'target' => '#plan-table',
    'includeForm' => '#filterForm'
])