Разложи страницу товара по FSD
Вопрос
Разложи по слоям FSD страницу товара интернет-магазина: карточка с фото и ценой, кнопка «В корзину», отзывы с формой отправки, блок «Похожие товары», шапка с корзиной.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
pages/product собирает страницу
widgets: header, similar-products, reviews-block
features: add-to-cart, send-review
entities: product (тип, карточка, api), review, cart (счётчик, модель)
shared: UI-кит, api-клиент, форматирование цены
Объяснить, почему каждый элемент на своём слое
Что могут спросить следом
- Где хранится состояние корзины?
- Как шапка узнает о добавлении в корзину?
Разбор
Страница pages/product только собирает блоки и получает id из маршрута. Шапка, блок похожих товаров и блок отзывов это виджеты: самостоятельные куски интерфейса. Добавление в корзину и отправка отзыва это фичи: действия пользователя, которые меняют данные. Товар, отзыв и корзина это сущности: в entities/product тип, карточка и запрос товара, в entities/cart модель корзины и счётчик. Шапка показывает счётчик из entities/cart, а фича add-to-cart обновляет эту модель, поэтому они связаны через сущность, а не напрямую. В shared лежит кнопка, api-клиент и форматтер цены.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.