Сквозные пользовательские сценарии¶

1. Онбординг: первый запуск¶

Сценарий нового пользователя от регистрации до создания первого образа.

journey
    title Онбординг нового пользователя
    section Регистрация
      Открывает приложение: 3: Пользователь
      Видит LoginPage: 3: Приложение
      Переходит на RegisterPage: 3: Пользователь
      Заполняет имя, email, пароль: 4: Пользователь
      Получает токены, редирект на /: 5: Приложение
    section Первая вещь
      Видит пустой гардероб: 2: Пользователь
      Нажимает "Добавить вещь": 4: Пользователь
      Выбирает фото из галереи: 4: Пользователь
      ML определяет категорию и цвет: 5: Приложение
      Подтверждает атрибуты: 4: Пользователь
      Вещь появляется в гардеробе: 5: Приложение
    section Первый образ
      Открывает конструктор образов: 4: Пользователь
      Видит пустые слоты: 3: Пользователь
      Заполняет слот "Верх": 4: Пользователь
      Заполняет слот "Низ": 4: Пользователь
      AI генерирует название: 5: Приложение
      Нажимает "Создать образ": 5: Пользователь

Диаграмма

Описание: Новый пользователь регистрируется через RegisterPage (имя + email + пароль минимум 8 символов). После успешной регистрации получает JWT-токены и перенаправляется на главную. При первом посещении /wardrobe видит пустой список с CTA «Добавить вещь». Переходит на /add, фотографирует вещь или выбирает из галереи. На /add/details ML-пайплайн автоматически определяет категорию, цвет и сезон. Пользователь подтверждает или корректирует и сохраняет. Затем открывает /outfits/build, выбирает вещи для слотов, AI генерирует название, и образ сохраняется.

2. Ежедневное использование¶

Сценарий возвращающегося пользователя: просмотр ленты, работа с гардеробом, создание и шеринг образа.

journey
    title Ежедневное использование
    section Просмотр ленты
      Открывает приложение: 5: Пользователь
      Hydrate токена из localStorage: 5: Приложение
      Видит ленту AI-образов: 5: Приложение
      Листает образы (snap-scroll): 5: Пользователь
      Сохраняет понравившийся: 5: Пользователь
    section Гардероб
      Переходит в гардероб (BottomNav): 4: Пользователь
      Фильтрует по "Верх": 4: Пользователь
      Открывает карточку вещи: 4: Пользователь
      Видит похожие вещи: 4: Приложение
    section Создание образа
      Нажимает "Создать образ" из вещи: 5: Пользователь
      Вещь предзаполняет нужный слот: 5: Приложение
      Добавляет вещи в другие слоты: 4: Пользователь
      AI генерирует название: 5: Приложение
      Создаёт образ: 5: Пользователь
    section Шеринг
      Открывает детали образа: 4: Пользователь
      Нажимает "Поделиться": 4: Пользователь
      Копирует ссылку: 5: Пользователь
      Отправляет другу: 5: Пользователь

Диаграмма

Описание: Пользователь открывает приложение — authStore.hydrate() восстанавливает токен из localStorage. На /feed отображается персонализированная лента с учётом погоды и гардероба. Snap-scroll позволяет быстро пролистывать полноэкранные карточки. Понравившийся образ можно сохранить (материализуется из виртуального). Через BottomNav переходит в гардероб, фильтрует вещи, открывает детальную карточку. Из карточки вещи переход в конструктор с предзаполненным слотом (?fromItem=id). После создания образа — шеринг через генерацию ссылки или сторис-картинки.

3. Шеринг: отправитель → получатель¶

Полный цикл передачи образа от одного пользователя другому.

journey
    title Шеринг образа
    section Отправитель
      Открывает образ: 4: Отправитель
      Нажимает "Поделиться": 4: Отправитель
      API генерирует токен: 5: Приложение
      Ссылка копируется в буфер: 5: Приложение
      Отправляет ссылку другу: 5: Отправитель
    section Получатель (новый)
      Открывает ссылку: 4: Получатель
      Видит образ на ShareRecipientPage: 4: Приложение
      Нажимает "Забрать образ": 4: Получатель
      Редирект на /login: 3: Приложение
      Регистрируется: 4: Получатель
      Редирект обратно на ссылку: 5: Приложение
      Нажимает "Забрать образ": 5: Получатель
      Образ в коллекции: 5: Приложение
    section Получатель (существующий)
      Открывает ссылку: 4: Получатель
      Видит образ: 4: Приложение
      Нажимает "Забрать образ": 5: Получатель
      claim → копия в коллекции: 5: Приложение
      Редирект на главную: 5: Приложение

Диаграмма

Описание: Отправитель открывает /share/:outfitId, нажимает «Скопировать ссылку». Backend генерирует уникальный токен и возвращает URL вида /share/view/:token. Ссылка копируется через navigator.clipboard.writeText(). Получатель открывает публичную страницу ShareRecipientPage — видит обложку образа, количество вещей. При нажатии «Забрать образ»: - Авторизован: POST /share/:token создаёт копию образа в коллекции получателя (is_external=true), редирект на главную. - Не авторизован: редирект на /login?redirect=/share/view/:token. После входа/регистрации возвращается на страницу и может забрать образ.

Забранный образ появляется во вкладке «Чужие» на странице образов. Отправитель может отозвать ссылку через DELETE /share/:token.

Диаграмма переходов между страницами¶

graph LR
    subgraph Онбординг
        REG[RegisterPage] --> HOME[HomePage]
    end

    subgraph Ежедневное
        HOME --> FEED[FeedPage]
        HOME --> WARDROBE[WardrobePage]
        WARDROBE --> ITEM[WardrobeItemPage]
        ITEM --> BUILD[OutfitBuilderPage]
        BUILD --> SELECT[ItemSelectPage]
        SELECT --> BUILD
        BUILD --> OUTFITS[OutfitsPage]
        OUTFITS --> DETAIL[OutfitDetailPage]
        DETAIL --> SHARE[SharePage]
    end

    subgraph Шеринг
        SHARE -->|"ссылка"| RECIPIENT[ShareRecipientPage]
        RECIPIENT -->|"не авторизован"| LOGIN[LoginPage]
        LOGIN --> RECIPIENT
        RECIPIENT -->|"claim"| HOME
    end

    FEED -->|"сохранить"| OUTFITS
    FEED -->|"открыть"| DETAIL
    FEED -->|"поделиться"| SHARE

Диаграмма