feat/cell finissh

src/pages/Main/Main.module.scss

@@ -7,11 +7,14 @@
 .cardContainer {
   display: grid;
   grid-template-columns: repeat(3, 300px);
+  grid-template-rows: repeat(auto-fill, 127px);
   gap: 24px;
   position: relative;
+  height: 100vh;
 }
 
 .cell {
   width: 100%;
   border-radius: $border-radius-s;
+  height: 127px
 }

src/pages/Main/Main.tsx

@@ -15,7 +15,7 @@ export default function Main() {
   const [allCards, setAllCards] = useState<initialCardsProps[]>([]);
   const [arrows, setArrows] = useState<JSX.Element[]>([]);
   const numCols = 3;
-  const numRows = 100;
+  const numRows = 10;
 
   const [busyCells, setBusyCells] = useState<string[]>([]);
 
@@ -63,6 +63,27 @@ export default function Main() {
     return emptyCells.map((cellId) => {
       const [col, row] = cellId.split('-').map(Number);
 
+      let backgroundColor = 'transparent';
+      if (busyCellIds.has('1-0')) {
+        // Подсвечиваем ячейки 0-1, 1-1, 2-1
+        if (row === 1 && col >= 0 && col <= 2) {
+            backgroundColor = '#EBF7FF';
+        } else if (row > 1 && col >= 0 && col <= 2) {
+            // Подсвечиваем ячейку ниже занятых
+            const aboveCellId = `${col}-${row - 1}`;
+            if (busyCellIds.has(aboveCellId)) {
+                backgroundColor = '#EBF7FF';
+            }
+        }
+    } else {
+        // Проверяем, если текущая ячейка под занятыми
+        const belowCellId = `${col}-${row + 1}`;
+        if (busyCellIds.has(belowCellId)) {
+            backgroundColor = '#EBF7FF';
+        }
+    }
+
+
       return (
         <div
           key={cellId}
@@ -71,7 +92,7 @@ export default function Main() {
           style={{
             gridColumn: col + 1,
             gridRow: row + 1,
-            backgroundColor: '#EBF7FF',
+            backgroundColor: backgroundColor            
           }}
         />
       );