factoryOps-v2/dashboard/app/page.tsx

'use client';

import { useRouter } from 'next/navigation';
import { useAuth } from '@/lib/auth-context';
import { useTenants } from '@/lib/hooks';
import { Card } from '@/components/Card';

export default function HomePage() {
  const { user, logout } = useAuth();
  const { tenants, isLoading } = useTenants();
  const router = useRouter();

  const handleTenantSelect = (tenantId: string) => {
    router.push(`/${tenantId}`);
  };

  return (
    <div className="home-container">
      <div className="home-header">
        <div className="home-title">
          <span className="material-symbols-outlined">precision_manufacturing</span>
          <h1>FactoryOps v2</h1>
        </div>
        <div className="home-user">
          <span>{user?.name} ({user?.role})</span>
          <button onClick={logout} className="btn-outline">
            <span className="material-symbols-outlined">logout</span>
            로그아웃
          </button>
        </div>
      </div>

      <div className="home-content">
        <Card icon="business" title="고객사 선택">
          {isLoading ? (
            <div className="loading">
              <span className="material-symbols-outlined spinning">progress_activity</span>
            </div>
          ) : tenants.length === 0 ? (
            <p className="empty-message">접근 가능한 고객사가 없습니다.</p>
          ) : (
            <div className="tenant-grid">
              {tenants.map((tenant) => (
                <button
                  key={tenant.id}
                  className="tenant-card"
                  onClick={() => handleTenantSelect(tenant.id)}
                >
                  <span className="material-symbols-outlined tenant-icon">factory</span>
                  <span className="tenant-name">{tenant.name}</span>
                  <span className="tenant-id">{tenant.id}</span>
                </button>
              ))}
            </div>
          )}
        </Card>
      </div>
    </div>
  );
}