aceleradora-TW / aceleradora-TW/e-acelera-front

[MVP2] detalhe do tópico: visualizar progresso (barra)

オープン
#179 コメント 0 件 リアクション 0 件 担当者 3 名 @YokoFarias が担当を希望しています GitHub で見る
主要言語
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 はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。