import { useState } from "react";
import styled from "styled-components";

type Timetable = {
selected: boolean;
}[][];

const Row = styled.div``;

const Item = styled.div`
display: inline-block;
width: 100px;
height: 50px;
margin: 5px;
`;

function Test() {
const [timetable] = useState<Timetable>([
[
{ selected: false },
{ selected: true },
{ selected: false },
{ selected: false },
],
[
{ selected: false },
{ selected: true },
{ selected: false },
{ selected: false },
],
[
{ selected: false },
{ selected: true },
{ selected: true },
{ selected: false },
],
[
{ selected: false },
{ selected: false },
{ selected: false },
{ selected: false },
],
]);

return (
<>
{timetable.map((row, i) => (
<Row key={i}>
{row.map(({ selected }, j) => {
const checkTopBottomLeftRight = (i: number, j: number) => {
const result = [false, false, false, false];

if (
i - 1 >= 0 &&
timetable[i][j].selected &&
timetable[i - 1][j].selected
) {
result[0] = true;
}
if (
i + 1 < timetable.length &&
timetable[i][j].selected &&
timetable[i + 1][j].selected
) {
result[1] = true;
}
if (
j - 1 >= 0 &&
timetable[i][j].selected &&
timetable[i][j - 1].selected
) {
result[2] = true;
}
if (
j + 1 < timetable.length &&
timetable[i][j].selected &&
timetable[i][j + 1].selected
) {
result[3] = true;
}
return result;
};
let [top, bottom, left, right] = checkTopBottomLeftRight(i, j);
const style: React.CSSProperties = {
borderTop: top ? "none" : "5px solid red",
borderBottom: bottom ? "none" : "5px solid red",
borderLeft: left ? "none" : "5px solid red",
borderRight: right ? "none" : "5px solid red",
background: selected ? "lightgreen" : "white",
};

return (
<Item
style={style}
key={`${i}-${j}`}
/>
);
})}
</Row>
))}
</>
);
}

export default Test;





viewimage.php?id=3dafdf21f7d335ab67b1d1&no=24b0d769e1d32ca73dea85fa11d028316d89837e453d871a154fbca342c3f9dc1681cc0a91cc0b9b24c06a69d561b5bf9b89cb087f5db09d53c7c92917714563a8680ed27fac

참고하삼


row랑 column 굳이 필요 없어서 뺏음