Техническое задание для вакансии "Фронтенд-разработчик"

Сверстать интерфейс по макету в Figma на стеке проекта: Next.js, TypeScript, Tailwind.

(Макет Figma)

На макете - упрощённый экран личного кабинета организации-клиента для управления пользователями (создание и изменение).

Сначала регистрируется общий аккаунт для организации в сервисе (авторизация), затем внутри личного кабинета происходит управление пользователями. Обслуживание пользователей ведется удаленно, обязательно нужно подтвердить номер пользователя до того, как он начнет пользоваться сервисом.

В рамках технического задания делать авторизацию не нужно.

Функциональные сценарии и критерии

• Список - пользователи с неподтвержденным номером в красном контейнере. После создания или изменения пользователя происходит автообновление списка.
• Создать пользователя - открывается штора с полями для создания. После нажатия "Создать" сразу отправлять код на подтверждение телефона. Изначально пользователь создается с неподтвержденным номером.
• Подтверждение телефона - после правильного ввода кода. Правильный код всегда равен 1111. После подтверждения номера в шторе открывается созданный пользователь.
• Нажатие на пользователя в списке - открывается штора с данными выбранного пользователя.
• Изменить данные пользователя - доступно частичное изменение данных. Телефон изменяется отдельно через подтверждение номера.
• Изменить номер - нажатие на контейнер с номером открывает окно с изменением. После изменения номера открывается окно с вводом кода.
• Модифицированность шторы - после изменения любых данных на шторе должен закрепляться признак модифицированность. Выход со шторы (кнопка закрыть или клик наружу) только через модальное окно о несохраненных данных.
• Ожидание ответов бекенда - во время первоначальной загрузки отображается скелетон. Во время серверных вызовов отображается pending состояние.
• Клиентская валидация полей - при создании пользователя все поля обязательные (кроме обеда в расписании). Если поле незаполнено - вызов сервера не происходит, инпут подсвечивается красной рамкой и надписью.

API

Заголовки: x-token: SECRET_KEY, для body - application/json. База: BACKEND_URL без завершающего /.

• GET /api/users - список пользователей;
• GET /api/users/{id} - профиль пользователя.
• POST /api/users - создать.
• PUT /api/users/{id} - частичное обновление.
• DELETE /api/users/{id} - удалить.
• POST /api/users/send-code и /api/users/confirm-code - смена телефона.

Общие требования к коду

Проверка на браузере Edge.

• Сверстанные компоненты в точности совпадают с макетом Figma на разрешении экрана 1440х792.
• Вёрстка остаётся стабильной при изменении ширины окна. Корректно отображается на ширинах от 640 px до 4000 px. При недостаточной ширине или высоте экрана появляются скроллбары.
• Функциональные сценарии работают корректно.
• Компоненты разбиты по функциям.