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

type Timetable = {
row: number;
column: number;
selected: boolean;
}[][];

const Row = styled.div``;

const Item = styled.div`
display: inline-block;
width: 100px;
height: 50px;
border: 1px solid black;
`;

function Test() {
const [timetable] = useState<Timetable>([
[
{ row: 0, column: 0, selected: false },
{ row: 0, column: 1, selected: false },
{ row: 0, column: 2, selected: false },
{ row: 0, column: 3, selected: false },
],
[
{ row: 1, column: 0, selected: false },
{ row: 1, column: 1, selected: false },
{ row: 1, column: 2, selected: false },
{ row: 1, column: 3, selected: false },
],
[
{ row: 2, column: 0, selected: false },
{ row: 2, column: 1, selected: false },
{ row: 2, column: 2, selected: false },
{ row: 2, column: 3, selected: false },
],
[
{ row: 3, column: 0, selected: false },
{ row: 3, column: 1, selected: false },
{ row: 3, column: 2, selected: false },
{ row: 3, column: 3, selected: false },
],
]);

return (
<>
{timetable.map((row, i) => (
<Row key={i}>
{row.map(({ row, column }) => {
const checkUpDownLeftRight = () => {
// Todo:

return [true, true, true, true];
};
let [top, bottom, left, right] = checkUpDownLeftRight();
const style: React.CSSProperties = {
borderTop: top ? "1px solid black" : "none",
borderBottom: bottom ? "1px solid black" : "none",
borderLeft: left ? "1px solid black" : "none",
borderRight: right ? "1px solid black" : "none",
};

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

export default Test;


아무 생각 없이 방금 답 했는 데


짜보니까 뭔 말인지 알겠더라


row랑 column도 데이터에 넣어야 편할 듯? (아니다 어짜피 체크 배열로 하니까 그냥 필요 없을 수도??)


질문 있으면 하센