HU-06 – Ver detalles de una mascota

[juanpa-27181]

ID

HU-06 – Ver detalles de una mascota

Descripción:

Como usuario visitante, quiero ver la información detallada de una mascota disponible para adopción, para conocer mejor sus características y decidir si deseo adoptarla.

Criterios de aceptación:

• Permitir acceder a una página de detalle al seleccionar una mascota.
• Mostrar información detallada: nombre, edad, especie, tamaño, descripción y estado de adopción.
• Incluir una o más imágenes de la mascota.
• Mostrar un botón o enlace para iniciar el proceso de adopción o agendar una visita.
• Accesible sin necesidad de iniciar sesión.
• El diseño debe ser atractivo, claro y responsive.
• Si la mascota ya fue adoptada, mostrar un mensaje informativo (“Esta mascota ya fue adoptada”).

Consideraciones técnicas

FrontEnd:

• Crear el componente MascotaDetalle.jsx.
• Implementar la ruta dinámica /mascotas/:id.
• Obtener los datos de la mascota mediante un fetch al endpoint correspondiente.
• Mostrar las imágenes en un slider o galería si hay varias.
• Incluir un botón visible para “Adoptar” o “Agendar visita” (solo si el flujo está implementado).
• Manejar correctamente los estados de carga y error.
• Asegurar diseño responsive (tarjeta central o layout dividido).

BackEnd:

• Crear el endpoint GET /api/mascotas/:id para devolver los datos completos de una mascota.
• Validar que el ID exista; devolver error 404 si no se encuentra.

Base de Datos:

• Usar la tabla o colección mascotas existente.
• Incluir campos adicionales (si no están):
• tamaño (pequeño, mediano, grande)
• sexo
• historia o descripcion_detallada
• galeria_imagenes (lista de URLs opcional)

Tareas técnicas:

• Crear la ruta dinámica /mascotas/:id.
• Diseñar el componente de detalle con los campos definidos.
• Implementar la carga de datos mediante el endpoint correspondiente.
• Mostrar galería de imágenes y botón de adopción.
• Manejar mensajes para estados especiales (adoptado, error, sin datos, ventanas modales).