3.8 KiB
ШАГ 009 — Спринт 2: Доработки UX после тестирования
Дата: 2026-03-21 Контекст: Мастер-класс по разработке системы тестирования сотрудников клиники.
Запросы
- На странице теста видны правильные ответы — зачем тогда проходить тест?
- На главной колонка с названием теста стала слишком узкой из-за трёх кнопок действий.
Изменения
1. Разделение страницы теста на два вида
Проблема: /tests/:id показывала зелёные галочки у правильных ответов. Пользователь мог подсмотреть ответы до прохождения теста.
Решение: два отдельных маршрута с разным содержимым.
| Маршрут | Для кого | Что показывает |
|---|---|---|
/tests/:id |
Сотрудник | Вопросы и варианты ответов без отметок |
/tests/:id/edit |
Автор | Все ответы с отметками ✓/✗ + жёлтый баннер «Вид автора» |
Кнопка «Редактировать» на странице автора пока задизаблена — активируется в Спринте 4 вместе с авторизацией.
Затронутые файлы:
frontend/src/pages/TestDetail/index.tsx ← убраны CheckCircleTwoTone / CloseCircleTwoTone
frontend/src/pages/TestEdit/index.tsx ← новый файл, бывший TestDetail + баннер
frontend/src/App.tsx ← добавлен маршрут /tests/:id/edit
2. Выпадающее меню «⋯» в списке тестов
Проблема: Три кнопки («Открыть», «Изменить», «Пройти тест») в одной ячейке сжимали колонку с названием теста.
Решение: Все три действия убраны в Dropdown по кнопке MoreOutlined (⋯). Колонка действий сужена до 60px, колонка с названием занимает всю оставшуюся ширину.
frontend/src/pages/TestList/index.tsx ← Space + 3 Button → Dropdown с menu.items
Структура меню:
Открыть
Изменить
─────────
Пройти тест
Архитектурное решение для джуниора
Разделение «вид сотрудника» / «вид автора» сделано через два отдельных React-компонента на разных маршрутах, а не через условный рендеринг внутри одного компонента.
Почему: в Спринте 4 эти маршруты будут защищены разными ролями (
ProtectedRoute). Если бы логика была в одном компоненте, пришлось бы прятать данные на фронте — это ненадёжно. Два маршрута = два разных запроса = чистое разграничение доступа.
Следующие шаги
- Спринт 1: Инфраструктура + Создание тестов
- Спринт 2: Прохождение теста + результат
- Спринт 3: Трекер результатов
- Спринт 4: Авторизация и роли
- Спринт 5: Уведомления в MAX