78 lines
3.0 KiB
Markdown
78 lines
3.0 KiB
Markdown
# 🛠️ Resoluções: Front-end & Conectividade
|
|
|
|
Este documento apresenta as soluções técnicas para os problemas de latência, fontes e responsividade identificados.
|
|
|
|
## 1. Conectividade & Performance (API/Backend)
|
|
|
|
**Problema:** Sincronização lenta e alto custo de desenvolvimento manual.
|
|
**Resolução Profissional:**
|
|
|
|
### A. Implementação do TanStack Query (React Query)
|
|
O uso de `axios` direto em serviços causa "Waterfall de Requisições". O React Query deve ser adotado para:
|
|
- **Caching Automático:** Evita buscar os mesmos dados ao alternar entre abas do sistema.
|
|
- **Optimistic Updates:** Melhora a percepção de velocidade (o UI atualiza antes da resposta do server).
|
|
|
|
### B. Service Factory via Contratos
|
|
Em vez de escrever `boletosService.js` manualmente, use os arquivos JSON (`prafrot-routes.json`) como fonte de verdade:
|
|
```javascript
|
|
// Exemplo de como usar o apiRouteManager para reduzir boilerplace
|
|
export const useFeatureData = (routeKey) => {
|
|
const route = apiRouteManager.getRoute(routeKey);
|
|
return useQuery({
|
|
queryKey: [routeKey],
|
|
queryFn: () => api.get(route.path)
|
|
});
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## 2. Guerra das Fontes (Typography System)
|
|
|
|
**Problema:** Fontes configuradas mas não carregadas.
|
|
**Resolução Profissional:**
|
|
|
|
### A. Carregamento Crítico (index.html)
|
|
Adicione o `preconnect` para eliminar a latência de DNS das fontes:
|
|
```html
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
```
|
|
|
|
### B. Fallback de Segurança (index.css)
|
|
Garantir que o `:root` tenha uma falha segura (system fonts) enquanto a webfont carrega:
|
|
```css
|
|
:root {
|
|
--font-main: 'Inter', -apple-system, system-ui, sans-serif;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 3. Responsividade Fluida (War Room Standard)
|
|
|
|
**Problema:** Uso excessivo de `px` fixos e instabilidade no `radius`.
|
|
**Resolução Profissional:**
|
|
|
|
### A. Substituição de Pixels por Fluid Typography
|
|
Em vez de `h-[600px]`, utilize unidades relativas ou containers flexíveis com `min-height`.
|
|
- **Regra de Ouro:** Se o valor é > 20px, ele provavelmente deveria ser `clamp()` ou `%`.
|
|
|
|
### B. Ajuste de Bordas (Radius-Gate)
|
|
Substituir `--radius: 1vw` por uma escala que respeite limites físicos:
|
|
```css
|
|
:root {
|
|
/* Não fica quadrado no mobile, nem redondo demais no desktop */
|
|
--radius: clamp(8px, 1.2vw, 20px);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 Pontos de Melhoria na Organização
|
|
|
|
1. **Módulo de Mocks Independente:** Mover todos os mocks para uma pasta `.mocks` na raiz da feature, para que o bundle de produção não carregue dados desnecessários.
|
|
2. **Shared Hooks Layer:** Centralizar lógicas de "Busca de Placa" ou "Validação de CNPJ" em `src/hooks/shared` para evitar duplicação entre Financeiro e Frota.
|
|
3. **Typed Contracts:** Se possível, migrar os arquivos `.json` de rotas para arquivos `.ts` (Typescript) para ganhar auto-complete no VS Code e evitar erros de digitação em caminhos de API.
|