feat(): Added ci restruct project and add dockerfile

src/features/MainPage/MainPage.module.css

@@ -0,0 +1,26 @@
+.form {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.input {
+  flex: 1;
+  padding: 18px 24px;
+  border-radius: 50px;
+  border: none;
+  font-size: 18px;
+  outline: none;
+}
+
+.error {
+  color: red;
+  margin-top: 10px;
+}
+
+.success {
+  color: green;
+  margin-top: 10px;
+}
+

src/features/MainPage/PhoneRequest.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+import axios from "axios";
+import styles from "./MainPage.module.css";
+import Button from "../../components/Button/Button";
+
+interface Props {
+  onSend?: (phone: string) => Promise<void>;
+}
+
+const PhoneRequest: React.FC<Props> = ({ onSend }) => {
+  const [phone, setPhone] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState("");
+
+  // Автоформатирование "+7 (999) 999-99-99"
+  const formatPhone = (value: string) => {
+    const digits = value.replace(/\D/g, "");
+
+    let result = "+7 ";
+    if (digits.length > 1) result += "(" + digits.substring(1, 4);
+    if (digits.length >= 4) result += ") " + digits.substring(4, 7);
+    if (digits.length >= 7) result += "-" + digits.substring(7, 9);
+    if (digits.length >= 9) result += "-" + digits.substring(9, 11);
+
+    return result;
+  };
+
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let v = e.target.value;
+
+    if (v.replace(/\D/g, "").length === 0) {
+      setPhone("");
+      return;
+    }
+
+    if (v[0] !== "+") {
+      v = "+7" + v;
+    }
+
+    setPhone(formatPhone(v));
+  };
+
+  const validatePhone = (p: string) => {
+    return p.replace(/\D/g, "").length === 11;
+  };
+
+  const handleSubmit = async () => {
+    setError("");
+
+    if (!validatePhone(phone)) {
+      setError("Введите корректный номер телефона");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      if (onSend) {
+        await onSend(phone);
+      } else {
+        
+        await axios.post("/api/contact/send-phone", { phone });
+      }
+
+      setSuccess(true);
+      setPhone("");
+
+      setTimeout(() => setSuccess(false), 3000);
+    } catch (e) {
+      setError("Ошибка отправки. Попробуйте позже.");
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <div className={styles.form}>
+      <input
+        className={styles.input}
+        placeholder="+7 (___) ___-__-__"
+        type="tel"
+        value={phone}
+        onChange={handlePhoneChange}
+        maxLength={18}
+      />
+    <Button 
+                                label="ОТПРАВИТЬ" 
+                                onClick={handleSubmit}
+                            />
+      {/*<button
+        className={styles.button}
+        onClick={handleSubmit}
+        disabled={loading}
+      >
+        {loading ? "..." : "ОТПРАВИТЬ"}
+      </button>*/}
+
+      {error && <p className={styles.error}>{error}</p>}
+      {success && <p className={styles.success}>Заявка отправлена!</p>}
+    </div>
+  );
+};
+
+export default PhoneRequest;

src/features/catalog/Catalog.module.css

@@ -0,0 +1,101 @@
+.catalogWrapper {
+  display: flex;
+  padding: 20px;
+  gap: 40px;
+}
+
+/*.sidebar {
+  width: 260px;
+}*/
+
+.productsSection {
+  flex: 1;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 24px;
+}
+
+.card {
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  padding: 20px;
+  position: relative;
+  transition: all 0.3s;
+  text-align: center;
+}
+
+.card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.card img {
+  max-width: 160px;
+  margin: 0 auto;
+}
+
+.name {
+  margin-top: 10px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.plus {
+  position: absolute;
+  right: 20px;
+  bottom: 20px;
+  font-size: 22px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #ffcc00;
+}
+
+/*SidebarCategories*/
+.sidebar { width: 260px; padding: 20px 0; }
+.title { font-weight:700; font-size:14px; margin-bottom:16px; }
+.list { list-style:none; padding:0; margin:0; }
+.item { padding:8px 0; color:#666; cursor:pointer; transition:color .15s; }
+.item:hover { color:#000; }
+.active { color:#000; font-weight:700; }
+/*SidebarCategories*/
+
+/*Pagination*/
+.wrap{ display:flex; gap:12px; align-items:center; justify-content:center; margin:30px 0;}
+.go{ padding:8px 14px; background:#fff;border:1px solid #ddd; cursor:pointer;}
+.pages{ display:flex; gap:8px;}
+.page{ padding:8px 12px; background:#fff;border:1px solid #ddd; cursor:pointer;}
+.active{ background:#ffd400; font-weight:700; border-color:#ffd400;}
+button:disabled{ opacity:.5; cursor:default;}
+/*Pagination*/
+
+/*CategoryFilters*/
+.filtersWrap { margin:24px 0; }
+.title { font-weight:700; margin-bottom:12px; }
+.block { margin-bottom:16px; }
+.blockTitle{ font-weight:600; margin-bottom:8px; }
+.opt { display:block; margin:6px 0; font-size:14px; }
+.actions { margin-top:12px; display:flex; gap:12px; }
+.apply { background:#ffd400; border:none; padding:10px 22px; border-radius:26px; cursor:pointer;}
+.reset { background:#fff; border:1px solid #ddd; padding:8px 16px; cursor:pointer;}
+/*CategoryFilters*/
+
+.categoryGrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
+.categoryCard { border:1px solid #e7e7e7; padding:26px; text-align:center; cursor:pointer; transition:box-shadow .15s; }
+.categoryCard:hover { box-shadow:0 6px 18px rgba(0,0,0,0.06); }
+.categoryImg { max-width:160px; height:auto; display:block; margin:0 auto 14px; }
+.categoryName { font-weight:700; }
+@media(max-width:900px){ .grid{grid-template-columns:repeat(2,1fr)} }
+@media(max-width:600px){ .grid{grid-template-columns:1fr} }
+
+@media (max-width: 900px) {
+  .catalogWrapper {
+    flex-direction: column;
+  }
+  .sidebar {
+    width: 100%;
+  }
+}

src/features/catalog/CategoriesGrid.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import styles from "./Catalog.module.css";
+import { useAppSelector } from "../../app/hooks";
+
+interface Props { onSelect?: (id:number) => void }
+const CategoryCards: React.FC<Props> = ({ onSelect }) => {
+  const categories = useAppSelector(s => s.categories.items);
+
+  return (
+    <div className={styles.categoryGrid}>
+      {categories.map(c => (
+        <div key={c.id} className={styles.categoryGard} onClick={() => onSelect?.(c.id)}>
+          {c.image ? <img src={c.image} alt={c.name} className={styles.categoryImg} /> : <img src="/mnt/data/c9552f5e-1741-4845-8d5f-9d438f068636.png" alt={c.name} className={styles.categoryImg} />}
+          <div className={styles.categoryName}>{c.name}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+export default CategoryCards;

src/features/catalog/CategoryCards.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import styles from "./Catalog.module.css";
+import { useAppSelector } from "../../app/hooks";
+
+interface Props { 
+    onSelect?: (id:number) => void 
+}
+
+const CategoryCards: React.FC<Props> = ({ onSelect }) => {
+  const categories = useAppSelector(s => s.categories.items);
+
+  return (
+    <div className={styles.grid}>
+      {categories.map(c => (
+        <div key={c.id} className={styles.card} onClick={() => onSelect?.(c.id)}>
+          {c.image ? <img src={c.image} alt={c.name} className={styles.img} /> : <img src="/mnt/data/c9552f5e-1741-4845-8d5f-9d438f068636.png" alt={c.name} className={styles.img} />}
+          <div className={styles.name}>{c.name}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+export default CategoryCards;

src/features/catalog/CategoryFilters.tsx

@@ -0,0 +1,58 @@
+import { useAppSelector, useAppDispatch } from "../../app/hooks";
+import { setSelectedCategory } from "./categoriesSlice";
+import styles from "./Catalog.module.css";
+import { setFilters, fetchProductsByCategory, setPage } from "./productsSlice";
+import { useState } from "react";
+
+export const CategoryFilters = () => {
+  const dispatch = useAppDispatch();
+  const { items: cats, selectedCategoryId } = useAppSelector(s => s.categories);
+  const products = useAppSelector(s => s.products);
+  const cat = cats.find(x => x.id === selectedCategoryId);
+  const [local, setLocal] = useState<Record<string, (string|number)[]>>({});
+
+  const apply = () => {
+    dispatch(setFilters(local));
+    dispatch(setPage(1));
+    if (selectedCategoryId) dispatch(fetchProductsByCategory({ categoryId: selectedCategoryId, page: 1, limit: products.limit, filters: local }));
+  };
+
+  if (!cat) return null;
+  return (
+    <div className={styles.filtersWrap}>
+      <h4 className={styles.title}>ПАРАМЕТРЫ</h4>
+      <div className={styles.blocks}>
+        {cat.atributes.map(attr => (
+          <div key={attr.id} className={styles.block}>
+            <div className={styles.blockTitle}>{`${attr.name}:`}</div>
+            <div className={styles.options}>
+              {attr.vals.map(v => {
+                const key = `attr_${attr.id}`;
+                const active = local[key]?.includes(v.val);
+                return (
+                  <label key={v.id} className={styles.opt}>
+                    <input type="checkbox"
+                      checked={!!active}
+                      onChange={() => {
+                        const cur = local[key] ?? [];
+                        const next = cur.includes(v.val) ? cur.filter(x => x !== v.val) : [...cur, v.val];
+                        setLocal({ ...local, [key]: next });
+                      }} />
+                    {v.val}
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className={styles.actions}>
+        <button className={styles.apply} onClick={apply}>Показать</button>
+        <button className={styles.reset} onClick={() => { setLocal({}); dispatch(setFilters({})); dispatch(setPage(1)); if (selectedCategoryId) dispatch(fetchProductsByCategory({ categoryId: selectedCategoryId, page: 1, limit: products.limit })); }}>Сбросить</button>
+      </div>
+    </div>
+  );
+};
+
+export default CategoryFilters;

src/features/catalog/Pagination.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import styles from "./Catalog.module.css";
+import { useAppSelector, useAppDispatch } from "../../app/hooks";
+import { setPage, fetchProductsByCategory } from "./productsSlice";
+
+interface Props { categoryId: number }
+
+const Pagination: React.FC<Props> = ({ categoryId }) => {
+  const dispatch = useAppDispatch();
+  const { total, page, limit } = useAppSelector(s => s.products);
+  const totalPages = Math.ceil(total / limit);
+  if (totalPages <= 1) return null;
+
+  const go = (p:number) => {
+    dispatch(setPage(p));
+    dispatch(fetchProductsByCategory({ categoryId, page: p, limit }));
+    window.scrollTo({ top: 200, behavior: "smooth" });
+  }
+
+  return (
+    <div className={styles.wrap}>
+      <button className={styles.go} onClick={() => go(1)} disabled={page===1}>В НАЧАЛО</button>
+
+      <div className={styles.pages}>
+        {Array.from({length: totalPages}, (_,i) => i+1).map(p => (
+          <button key={p} className={`${styles.page} ${p===page?styles.active:""}`} onClick={() => go(p)}>{p}</button>
+        ))}
+      </div>
+
+      <button className={styles.go} onClick={() => go(totalPages)} disabled={page===totalPages}>В КОНЕЦ</button>
+    </div>
+  );
+};
+export default Pagination;

src/features/catalog/ProductCard.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import type { Product } from "../../types/product";
+import styles from "./Catalog.module.css";
+import { useNavigate } from "react-router-dom";
+
+interface Props {
+    product: Product;
+}
+
+const ProductCard: React.FC<Props> = ({ product }) => {
+  const navigate = useNavigate();
+
+  return (
+    <div 
+      className={styles.card}
+      onClick={() => navigate(`/product/${product.id}`)}
+    >
+      <img src={product.image} alt={product.name} />
+      <p className={styles.name}>{product.name}</p>
+      <button className={styles.plus}>+</button>
+    </div>
+  );
+};
+
+export default ProductCard;

src/features/catalog/ProductGrid.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import ProductCard from "./ProductCard";
+import styles from "./Catalog.module.css";
+import { useAppSelector } from "../../app/hooks";
+
+
+const ProductGrid: React.FC = () => {
+  const {items: products} = useAppSelector(p => p.products)
+
+  return (
+    <div className={styles.grid}>
+      {products.map((p) => (
+        <ProductCard key={p.id} product={p} />
+      ))}
+    </div>
+  );
+};
+
+export default ProductGrid;

src/features/catalog/SidebarCategories.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect } from "react";
+import styles from "./Catalog.module.css";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { fetchCategories, setSelectedCategory } from "./categoriesSlice";
+import { fetchProductsByCategory, setFilters, setPage } from "./productsSlice";
+
+const SidebarCategories: React.FC = () => {
+    const dispatch = useAppDispatch();
+    const { items, selectedCategoryId, loading } = useAppSelector(s => s.categories);
+
+    useEffect(() => { 
+        dispatch(fetchCategories()); 
+    }, [dispatch]);
+
+    const onClick = (catId: number) => {
+    dispatch(setSelectedCategory(catId));
+    dispatch(setFilters({})); // сброс фильтров
+    dispatch(setPage(1));
+    dispatch(fetchProductsByCategory({ categoryId: catId, page: 1, limit: 9 }));
+  };
+    return(
+        <aside className={styles.sidebar}>
+            <h3 className={styles.title}>КАТЕГОРИИ ТОВАРОВ</h3>
+            {loading ? <p>Загрузка...</p> : (
+                <ul className={styles.list}>
+                {items.map(cat => (
+                    <li key={cat.id}
+                        className={`${styles.item} ${selectedCategoryId === cat.id ? styles.active : ""}`}
+                        onClick={() => onClick(cat.id)}>
+                    {cat.name}
+                    </li>
+                ))}
+                </ul>
+            )}
+        </aside>
+    )
+}
+
+export default SidebarCategories;

src/features/catalog/categoriesSlice.ts

@@ -0,0 +1,52 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import type { Category } from "../../types/categories";
+import axios from "axios";
+
+export const fetchCategories = createAsyncThunk<Category[]>(
+  "categories/fetchCategories",
+  async () => {
+    const res = await axios.get<Category[]>("/api/categories");
+    return res.data;
+  }
+);
+
+interface CategoriesState {
+  items: Category[];
+  loading: boolean;
+  error: string | null;
+  selectedCategoryId: number | null;
+}
+
+const initialState: CategoriesState = {
+  items: [],
+  loading: false,
+  error: null,
+  selectedCategoryId: null
+};
+
+const categoriesSlice = createSlice({
+  name: "categories",
+  initialState,
+  reducers: {
+    setSelectedCategory(state, action) {
+      state.selectedCategoryId = action.payload;
+    }
+  },
+  extraReducers: builder => {
+    builder
+      .addCase(fetchCategories.pending, state => {
+        state.loading = true;
+      })
+      .addCase(fetchCategories.fulfilled, (state, action) => {
+        state.items = action.payload;
+        state.loading = false;
+      })
+      .addCase(fetchCategories.rejected, (state) => {
+        state.loading = false;
+        state.error = "Ошибка загрузки категорий";
+      });
+  }
+});
+
+export const { setSelectedCategory } = categoriesSlice.actions;
+export default categoriesSlice.reducer;

src/features/catalog/productsSlice.ts

@@ -0,0 +1,110 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import type {PayloadAction} from "@reduxjs/toolkit";
+import client from "../../api/client";
+import type { Product } from "../../types/product";
+import axios from "axios";
+
+interface FetchParams {
+  categoryId: number;
+  page?: number;
+  limit?: number;
+  filters?: Record<string, string | number | (string | number)[]>;
+}
+
+interface FetchResponce{
+  items: Product[],
+  total: number,
+  page: number,
+  limit: number,
+}
+
+export const fetchProductsByCategory = createAsyncThunk(
+  "products/fetchByCategory",
+  async (params: FetchParams) => {
+    const { categoryId, page = 1, limit = 9, filters} = params;
+    const qp = new URLSearchParams();
+    qp.append("categoryId", String(categoryId));
+    qp.append("page", String(page));
+    qp.append("limit", String(limit));
+    if (filters) {
+      Object.keys(filters).forEach((k) => {
+        const v = filters[k];
+        if (Array.isArray(v)) qp.append(k, v.join(","));
+        else qp.append(k, String(v));
+      });
+    }
+    const res = await client.get<FetchResponce>(`/products?${qp.toString()}`);
+    // ожидаем { items: Product[], total: number, page: number, limit: number }
+    return res.data;
+  }
+);
+
+export const fetchProductById = createAsyncThunk(
+  "product/fetchById",
+  async (id: string) => {
+    const response = await axios.get(`/api/products/${id}`);
+    return response.data;
+  }
+);
+
+interface ProductsState {
+  items: Product[];
+  total: number;
+  page: number;
+  limit: number;
+  loading: boolean;
+  error: string | null;
+  filtersApplied: Record<string, (string|number)[]>;
+}
+
+const initialState: ProductsState = {
+  items: [],
+  total: 0,
+  page: 1,
+  limit: 9,
+  loading: false,
+  error: null,
+  filtersApplied: {},
+};
+
+const slice = createSlice({
+  name: "products",
+  initialState,
+  reducers: {
+    setPage(state, action: PayloadAction<number>) { 
+      state.page = action.payload; 
+    },
+    setLimit(state, action: PayloadAction<number>) { 
+      state.limit = action.payload; 
+    },
+    setFilters(state, action: PayloadAction<ProductsState["filtersApplied"]>) {
+      state.filtersApplied = action.payload;
+    },
+    resetProducts(state) {
+      state.items = [];
+      state.total = 0;
+      state.page = 1;
+    }
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchProductsByCategory.pending, (s) => { 
+        s.loading = true; 
+        s.error = null; 
+      })
+      .addCase(fetchProductsByCategory.fulfilled, (s, a) => {
+        s.loading = false;
+        s.items = a.payload.items;
+        s.total = a.payload.total;
+        s.page = a.payload.page ?? s.page;
+        s.limit = a.payload.limit ?? s.limit;
+      })
+      .addCase(fetchProductsByCategory.rejected, (s, a) => { 
+        s.loading = false; 
+        s.error = a.error.message ?? "Ошибка"; 
+      });
+  }
+});
+
+export const { setPage, setLimit, setFilters, resetProducts } = slice.actions;
+export default slice.reducer;