aceleradora-TW / aceleradora-TW/e-acelera-front
[MVP2] detalhe do tópico: visualizar progresso (barra)
- 主要语言
- TypeScript
- 星标
- 8
- 派生
- 2
- PR 合并指标
- 30 天内没有已合并 PR
描述
# Contexto
- Precisamos de um componente visual no frontend que permita ao usuário acompanhar seu progresso dentro de um tópico específico.
- Esse componente será exibido na tela de detalhe do tópico e também poderá ser reutilizado na listagem de tópicos.
- Esse recurso é essencial para incentivar a continuidade dos estudos e permitir que o usuário tenha um feedback visual imediato do quanto já avançou naquele conteúdo.
- O componente pode ser reutilizado em outras partes da plataforma, e seu comportamento deve ser dinâmico com base na propriedade progress (%) de cada tópico.
- Exemplo de detalhe de tópico seria https://aceleradora-agil.com.br/nivelamento/rw1730218811141b9a688-React.js/rw173038056720390e1fe-Hooks
## Dependências
- [POC: Componente LinearProgressWithLabel do Material UI para Detalhes do Tópico](https://github.com/aceleradora-TW/e-acelera-front/issues/178)
## Notas Técnicas
- Endpoint da API: GET /topic/:topicId/progress
json
{
"progress": 100
}
- A autenticação deve estar implementada no frontend O JWT (token de login)
## Critérios
- O componente deve ser reutilizável (por exemplo: );
- O valor de progresso deve ser passado via props (progress em número de 0 a 100);
- Deve permitir visualização textual opcional, como: "80% concluído";
- O estilo visual deve seguir o design do Figma ([ver link da issue #173](https://www.figma.com/design/iHXQ4VOdO3yojF4Gk4mizL/E-Acelera-prot%C3%B3tipo?node-id=407-1742&t=Tb7T8sC9ABj3ueSz-4));
- O componente deve ser inserido na tela de detalhe do tópico, em local estratégico (ex: topo da tela ou abaixo do título);
- Responsivo e acessível
- O progresso deve ser reativo (caso atualize no frontend, deve refletir no componente);
- O componente deve permitir fácil estilização para temas futuros.
## Tarefa
- Usar o componente TopicProgress com:
- Barra de progresso visual
- Texto opcional ("X% concluído");
- Adicionar esse componente na página de detalhe do tópico;
- Garantir que o valor de progress seja passado corretamente a partir da chamada ao endpoint da API;
- Fazer testes com valores 0%, 50%, 100%.
贡献指南
这个仓库没有索引到贡献指南
评估
这个 Issue 还没有评估数据。