fix/bugs

src/components/App/App.scss

@@ -2,12 +2,9 @@
   font-family: "Roboto", sans-serif;
   line-height: 1.5;
   font-weight: 400;
-
-  margin: 0 auto;
-
   color: #141414;
   background: #FFF;
-  
+
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -17,9 +14,7 @@
 body {
   margin: 0 auto;
   min-width: 320px;
-  max-width: 1440px;
-  min-height: 100vh;
-
+  max-width: 1440px; 
 }
 
 * {

src/components/App/App.tsx

@@ -73,7 +73,7 @@ export default function App() {
   }, [dispatch, mainRout, loggedIn]);
 
    return (
-    <div>
+    <>
       <Header droppedCards={droppedCards} />
       {loading && <Preloader />}
       {loggedIn ? (
@@ -100,6 +100,6 @@ export default function App() {
       ) : (
         <Registration handleRegister={handleRegister} />
       )}
-    </div>
+    </>
   );
 }

src/components/Filter/Filter.module.scss

@@ -4,7 +4,7 @@
   right: 10px;
   border-radius: 0 0 0 16px;
   width: 354px;
-  height: 100vh;
+  height: 99%;
   box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
   background: #fff;
   padding: 56px 48px;
@@ -42,3 +42,7 @@
   @include mp-null;
   @include use-font;
 }
+
+.downContainer {
+  height: 250px;
+}

src/components/Filter/Filter.tsx

@@ -5,35 +5,72 @@ import { Input } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
 import Card from 'src/ui/Card/Card';
 import FilterList from 'src/ui/FilterList/FilterList';
-import { setIsFilterOpen } from 'src/store/features/slice/membersSlice';
+import { setCurrentPageFilter, setIsFilterOpen } from 'src/store/features/slice/membersSlice';
 import { membersProps } from 'src/services/types';
 import { handleDragStart } from 'src/services/dragAndDrop';
 import {
   fetchGetMembers,
   selectMembers,
 } from 'src/store/features/slice/membersSlice';
 import { useAppDispatch, useAppSelector } from 'src/store/hooks';
+import { selectUsers, setLoading } from 'src/store/features/slice/userSlice';
 
 interface FilterProps {
   droppedCards: membersProps[];
 }
 
 export default function Filter({ droppedCards }: FilterProps) {
-  const { isFilterOpen } = useAppSelector(selectMembers);
-  const { members, currentPage } = useAppSelector(selectMembers);
+  const { isFilterOpen, members, currentPageFilter } = useAppSelector(selectMembers);
+  const { loading } = useAppSelector(selectUsers);
+  const modalRef = useRef<HTMLDivElement>(null);
   const dispatch = useAppDispatch();
 
+  // Подгрузка карточек
+  const handleScroll = () => {
+    if (!modalRef.current) return;
+    const { scrollTop, clientHeight, scrollHeight } = modalRef.current;
+    if (
+      scrollHeight - scrollTop - clientHeight <= 0 &&
+      !loading &&
+      currentPageFilter < 12
+    ) {
+      setLoading(true);
+      dispatch(setCurrentPageFilter(1));
+    }
+  };
+
   useEffect(() => {
-    dispatch(fetchGetMembers(currentPage));
-  }, [dispatch]);
+    const fetchMembers = async () => {
+      if (loading) return;
+      await dispatch(fetchGetMembers(currentPageFilter));
+    };
 
-  const ref = useRef(null);
+    fetchMembers();
+  }, [dispatch, currentPageFilter]);
 
-  useOutsideClick(ref, () => {
+  useEffect(() => {
+    const modalElement = modalRef.current;
+    if (modalElement) {
+      modalElement.addEventListener('scroll', handleScroll);
+    }
+
+    return () => {
+      if (modalElement) {
+        modalElement.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, [modalRef]);
+
+  useEffect(() => {
+    if (modalRef.current) {
+      modalRef.current.scrollTop = 0;
+    }
+  }, [members]);
+
+  useOutsideClick(modalRef, () => {
     dispatch(setIsFilterOpen(false));
   });
 
-  const modalRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (modalRef.current) {
       const modal = modalRef.current;
@@ -59,8 +96,8 @@ export default function Filter({ droppedCards }: FilterProps) {
   }, [isFilterOpen]);
 
   return (
-    <div ref={ref} className={styles.filter}>
-      <div ref={modalRef}>
+    <div ref={modalRef} className={styles.filter}>
+      <div>
         <Input className={styles.input} placeholder='Поиск' />
         <div className={styles.container}>
           <CloseOutlined className={styles.img} />
@@ -86,6 +123,7 @@ export default function Filter({ droppedCards }: FilterProps) {
             />
           ))}
         </div>
+        <div className={styles.downContainer}></div>
       </div>
     </div>
   );

src/pages/Employees/Employees.module.scss

@@ -1,3 +1,14 @@
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-40px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .employees {
   @include main-container;
   @include flex-column-container;
@@ -25,6 +36,7 @@
   flex-wrap: wrap;
   gap: 24px;
   padding-top: 32px;
+  animation: fadeIn 0.5s ease forwards;
   &_center {
     justify-content: center;
   }

src/pages/Employees/Employees.tsx

@@ -47,7 +47,7 @@ export default function Employees() {
 
   useEffect(() => {
     dispatch(fetchGetMembers(currentPage));
-  }, [dispatch]);
+  }, [dispatch, currentPage]);
 
   return (
     <section

src/pages/Main/Main.module.scss

@@ -1,6 +1,16 @@
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-40px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .main {
   @include main-container;
-  height: 100vh;
   margin: 56px 64px 0 0;
 }
 
@@ -10,7 +20,7 @@
   grid-template-rows: repeat(auto-fill, 127px);
   gap: 24px;
   position: relative;
-  height: 100vh;
+  animation: fadeIn 0.5s ease forwards;
 }
 
 .cell {

src/pages/Main/Main.tsx

@@ -71,6 +71,7 @@ export default function Main() {
         <Card
           id={card.id}
           title={card.position}
+          image={card.image}
           full_name={card.full_name}
           department={card.department}
           count={card.subordinates.length}

src/pages/NewTeam/NewTeam.module.scss

@@ -1,6 +1,17 @@
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-40px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .newTeam {
   @include main-container;
-  height: 100vh;
+  height: 88vh;
   margin: 56px 64px 0 0;
   position: relative;
 }
@@ -11,7 +22,7 @@
   grid-template-rows: repeat(auto-fill, 127px);
   gap: 24px;
   position: relative;
-  height: 100vh;
+  animation: fadeIn 0.5s ease forwards;
 }
 
 .cell {
@@ -23,12 +34,12 @@
 
 .overlay {
   background: rgb(235, 247, 255);
-
   width: 100%;
   height: 100%;
 }
 
 .title {
+  @include mp-null;
   @include use-font(24px, 28px, 500);
   padding: 300px 0;
   text-align: center;

src/pages/Profile/Profile.module.scss

@@ -1,8 +1,20 @@
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-40px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .profile {
   @include main-container;
   display: flex;
   margin: 56px 64px 0 0;
   gap: 40px;
+  animation: fadeIn 0.5s ease forwards;
 }
 
 .containerProfile {

src/pages/Projects/Projects.module.scss

@@ -1,7 +1,19 @@
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-40px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .projects {
   @include main-container;
   display: flex;
   margin: 56px 64px 0 0;
   flex-wrap: wrap;
   gap: 16px 8px;
+  animation: fadeIn 0.5s ease forwards;
 }

src/pages/Projects/Projects.tsx

@@ -1,6 +1,6 @@
 import styles from 'src/pages/Projects/Projects.module.scss';
 import { useAppDispatch, useAppSelector } from 'src/store/hooks';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import ProjectsItem from 'src/ui/ProjectsItem/ProjectsItem';
 import {
   fetchGetProjects,
@@ -10,6 +10,27 @@ import {
 export default function Projects() {
   const dispatch = useAppDispatch();
   const { projects } = useAppSelector(selectProjects);
+  console.log('projects: ', projects);
+  const [visibleItems, setVisibleItems] = useState(12)
+  console.log('visibleItems: ', visibleItems);
+
+
+  const handleScroll = () => {
+    const scrollY = window.scrollY
+    const windowHeight = window.innerHeight
+    const documentHeight = document.documentElement.scrollHeight
+    if (scrollY + windowHeight >= documentHeight - 400) {
+      setVisibleItems(prev => Math.min(prev + 4, projects.length))
+    }
+  }
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
 
   useEffect(() => {
     const fetchProjects = async () => {

src/pages/Teams/Teams.module.scss

@@ -1,10 +1,22 @@
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-40px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .teams {
   @include main-container;
   display: flex;
   margin: 56px 64px 0 0;
   flex-wrap: wrap;
   gap: 16px 8px;
   position: relative;
+  animation: fadeIn 0.5s ease forwards;
 }
 
 .cardContainer {
@@ -13,7 +25,7 @@
   grid-template-rows: repeat(auto-fill, 127px);
   gap: 24px;
   position: relative;
-  height: 100vh;
+  animation: fadeIn 0.5s ease forwards;
 }
 
 .cell {

src/pages/Teams/Teams.tsx

@@ -110,6 +110,7 @@ export default function Teams() {
         <Card
           id={card.id}
           title={card.position}
+          image={card.image}
           full_name={card.full_name}
           department={card.department}
           count={card.subordinates.length}

src/services/const.ts

@@ -3,7 +3,7 @@ export const cellWidth = 312;
 export const cellHeight = 149;
 // Количество ячеек/колонок базово
 export const numCols = 3;
-export const numRows = 10;
+export const numRows = 7;
 // Количество участников на странице
 export const itemsPerPage = 12;
 // номер команды с Main