fix/production-public-app Работа над SearchPage

[Vesterino]

Описание

• Репозиторий: production-public-app
• Ветка: fix/SearchPage
• Макет в Figma: https://www.figma.com/design/C2AixQJ5ykOizrXaanRbEd/Procharity?node-id=17-221756&t=i9zB0VVmSaUh4zVz-4

Скрин самой страницы:

Текущее состояние

• Создана директория и файлы в: src/routes/SearchPage
• Роут - http://localhost:5173/search

Необходимые действия

1. Привести страницу в соответствии с макетом

• Поправить стили в соответствии с макетом

2. Разделить основной блок страницы по секциям

• На данный момент одна секция готова (находится по src/components/SectionSearch, можно брать как пример для второй секции)
• Вторая секция для карточек создана, её нужно переделать, перенося код с основной страницы (находится по src/components/SectionSearchCards)
  • Прописать моковые данные для секции
  • Прописать корректно сторибук, чтобы не падал при открытии страницы

Скрин: 1 - секция поисковой строки, 2 - секция карточек (совокупность всего)

Важные замечания

• Использовать и просматривать компоненты UI KIT из: https://github.com/ProCharity-Practicum/production-ui-kit

Правила создания PR

Основные требования

1. Базовые правила

• PR открывается в ветку develop.
• Создавайте PR только после полного завершения работы над фичей или фиксом.
• Обязательно выполните проверку линтером и примените форматирование.

2. Сроки работы

• Максимальное время работы над задачей: 3 дня.
• Если задача не завершена за это время:
  • Откройте PR с текущим результатом.
  • Обратитесь к тимлиду или наставнику.
  • Рассмотрите возможность передачи задачи другому разработчику.

3. Процесс ревью

• Максимальное время на ревью: 2 дня.
• Первичное ревью: проводится фич-лидами.
• Финальное ревью: выполняется тимлидом после отработки первой итерации правок.

4. Важные ограничения

• Строго запрещено вносить изменения в следующие yarn файлы:
  • yarnrc.yml
  • .yarn
  • .yarn.lock

Дополнительные рекомендации

Перед созданием PR:

• Соберите проект.
• Проверьте работоспособность.
• Запустите линтер.
• Примените форматирование.
• Протестируйте изменения.

В описании PR укажите:

• Номер задачи.
• Краткое описание изменений.
• Особые моменты, требующие внимания.

Обращаться по вопросам в самой задаче @Vesterino или в пачке @Vester

[DaniilAf]

@Vesterino @OskarVagapov привет, у меня не получается запустить проект, основной проект запускается а этот репозиторий запустить не могу.

1. клонировал репозиторий.

2. в консоль вбил команду yarn.

3. создал Dockerfile

FROM node:alpine AS builder
WORKDIR /app
COPY yarn.lock ./
RUN npm ci
COPY . ./
RUN npm run build

FROM nginx:alpine AS production
COPY --from=builder /app/dist /urs/share/nginx/html
COPY /nginx/default.conf /etc/nginx/conf.d
ENTRYPOINT [ "nginx", "-g", "demon off;" ]

4. в консоле вбил команду docker build . -t procharity_frontend:1.0.0

5. создал docker-compose.yml

version: '3.9'

services:
frontend:
container_name: procharity-frontend
build:
context: .
dockerfile: Dockerfile
image: procharity_frontend:1.0.0
ports:
- "5000:80"
env_file:
- .env

6. создал .evn

VITE_API_ORIGIN=http://http://localhost:5173/search

7. в консоле вбил команду docker compose up --build

ничего не работает. что я не так делаю?

[DaniilAf]

@Vesterino @OskarVagapov Всё =) разобрался, не нужен мне получается сейчас для работы Docker Desktop))

1. клонировал
2. yarn
   3 yarn dev

=)

[Vesterino]

Молодец, что разобрался! А то я только начал тебе описывать шаги)

Хорошей работы!

[Vesterino]

Про дополнительное ещё опишу, что есть yarn storybook, тоже проверять сами секции и страничку.

[Vesterino]

Нужно доделать работу, оставил подробности правок в Pull Request

[OskarVagapov]

@DaniilAf привет! Пожалуйста исправь сегодня свою задачу!

[DaniilAf]

@OskarVagapov @Vesterino

https://github.com/ProCharity-Practicum/production-public-app/pull/138/commits/b163c8ec55eef4a555b4f85626bf713910b8b91f

Извините, я совсем не успеваю сделать задачу, слишком короткие сроки, а у меня плотная работа, в добавок я совсем не понимаю что от меня требуется в задаче, нужно ли создавать карточки самому, или их надо откуда-то подцепить, или можно взять уже готовые в проекте, и вообще нужны ли они в этой задаче. Изначально задача была слишком кратко описана и много времени от этого потеряно.

Вторая секция для карточек создана, её нужно переделать, перенося код с основной страницы (находится по src/components/SectionSearchCards)
Прописать моковые данные для секции
Прописать корректно сторибук, чтобы не падал при открытии страницы

В этом задании явно не было ничего такого про карточки и тд как потом оказалось что надо... Понимаю если после сделанного мной надо было бы может ещё стили поправить и код табов доперености, но после отправки на ревью много всего вылезло что нужно сделать на самом деле.

Ещё раз извиняюсь, но я правда не успею это всё со своей загруженностью =(

[Vesterino]

Привет! Не переживай, всё хорошо.

Я прошу прощения, что не уточнил про компоненты несколько раз. В основном коде используются компоненты ui-kit (Tabs, CardContentItem), их нужно было переносить в секцию карточек, при этом предварительно рассмотрев их в ui-kit.

Функциональность самих карточек и табов можно тоже рассмотреть в ui-kit. Ещё раз прошу прощения!

В следующие разы, не стесняйся задавать вопросы фич-лиду по задаче.