Projeto 06 – Central de Atendimento ao Cliente 🎧
Neste projeto, você vai aplicar o react-hook-form para criar um sistema de tickets de suporte profissional e validado.
🎯 Objetivo
Gerenciar formulários complexos, tratar erros de validação em tempo real e garantir que apenas dados válidos sejam enviados para o "servidor".
🛠️ Requisitos
- Uso de react-hook-form.
- Validação de formato de e-mail (Regex).
- Mensagens de erro personalizadas e visuais (estilizadas em vermelho).
- Estado de "Enviando..." após o clique no botão.
📝 Passo a Passo
1. Instalação
No terminal:
2. Estrutura do Formulário
Crie um componente FormSuporte com os campos:
- Nome Completo (Obrigatório, min 3 letras).
- E-mail de Contato (Obrigatório, formato válido).
- Assunto (Select: Técnico, Financeiro, Outros).
- Mensagem (Textarea, obrigatório, min 20 caracteres).
3. Tratamento de Erros
Mostre as mensagens de erro logo abaixo de cada campo assim que o foco sair dele ou ao clicar em enviar.
4. Simulação de Envio
Na função onSubmit, use um setTimeout de 2 segundos para simular uma resposta de rede antes de exibir a mensagem final de "Ticket aberto com sucesso!".
✅ Critérios de Entrega
- O botão de enviar deve estar desabilitado ou dar feedback visual se houver erros.
- O objeto de dados final deve ser exibido no console no formato JSON correto.
- O código deve utilizar o spread operator
{...register("campo")}corretamente.
Dica Pro
Use a biblioteca react-toastify para mostrar as mensagens de sucesso de forma elegante no canto da tela!