diff --git a/histudy-front/src/components/Manager/CreateGroupTable.js b/histudy-front/src/components/Manager/CreateGroupTable.js index 7b6d3b0..98be89a 100644 --- a/histudy-front/src/components/Manager/CreateGroupTable.js +++ b/histudy-front/src/components/Manager/CreateGroupTable.js @@ -11,8 +11,22 @@ export default function CreateGroupTable({ longWidthColumnNum, data, }) { + const fillThree = (num) => { + let array = []; + for (var i = 0; i < 3 - num; ++i) { + array.push(""); + } + return array; + }; const TableHead = { - all: ["이름", "학번", "희망과목", "함께하고 싶은 친구"], + all: [ + "이름", + "학번", + "희망 1과목", + "희망 2과목", + "희망 3과목", + "함께하고 싶은 친구", + ], }; const setIsLoading = useSetRecoilState(isLoadingState); @@ -117,9 +131,10 @@ export default function CreateGroupTable({ marginLeft: "20px", py: "20px", borderColor: "primary.border", + gap: "30px", }} > - + */} + {row.courses.map((subject, index) => ( + + {subject.name} ({subject.prof}) + + ))} + {fillThree(row.courses.length).map((subject, index) => ( + + {subject} + + ))} { + let array = []; + for (var i = 0; i < 3 - num; ++i) { + array.push(""); + } + return array; + }; + const TableHead = { - group: ["그룹", "멤버", "희망과목", "함께하고 싶은 친구"], + group: [ + "그룹", + "멤버", + "희망 1과목", + "희망 2과목", + "희망 3과목", + "함께하고 싶은 친구", + ], }; const [edit, setEdit] = useState([false]); const [studentEdit, setStudentEdit] = useState([false]); @@ -88,8 +103,7 @@ export default function GroupTables({ key={index} sx={{ flexGrow: 1, - width: longWidthColumnNum === index + 1 && "30%", - minWidth: longWidthColumnNum !== index + 1 && "150px", + minWidth: "150px", }} > {headElement} @@ -133,7 +147,7 @@ export default function GroupTables({ color: "text.secondary", display: "flex", flexGrow: 1, - width: "100px", + width: "150px", borderBottom: 1, marginTop: "20px", py: "20px", @@ -150,7 +164,7 @@ export default function GroupTables({ borderBottom: 1, py: "20px", marginTop: "20px", - // width: "10px", + width: "150px", borderColor: "primary.border", }} > @@ -166,9 +180,11 @@ export default function GroupTables({ py: "20px", borderBottom: 1, borderColor: "primary.border", + alignItems: "center", + gap: "20px", }} > - + */} + {student.courses.map((subject, index) => ( + + {subject.name} ({subject.prof}) + + ))} + {fillThree(student.courses.length).map( + (subject, index) => ( + + {subject} + + ) + )} - + */} + {student.courses.map((subject, index) => ( + + {subject.name} ({subject.prof}) + + ))} + {fillThree(student.courses.length).map( + (subject, index) => ( + + {subject} + + ) + )} {row.courses.map((subject, index) => ( - {subject.name} + + {subject.name} ({subject.prof}) + ))} diff --git a/histudy-front/src/components/Manager/UnGroupTable.js b/histudy-front/src/components/Manager/UnGroupTable.js index bbd0125..326070d 100644 --- a/histudy-front/src/components/Manager/UnGroupTable.js +++ b/histudy-front/src/components/Manager/UnGroupTable.js @@ -20,8 +20,22 @@ export default function UnGroupTable({ longWidthColumnNum, data, }) { + const fillThree = (num) => { + let array = []; + for (var i = 0; i < 3 - num; ++i) { + array.push(""); + } + return array; + }; const TableHead = { - group: ["그룹", "이름", "희망과목", "함께하고 싶은 친구"], + group: [ + "그룹", + "이름", + "희망 1과목", + "희망 2과목", + "희망 3과목", + "함께하고 싶은 친구", + ], }; const [edit, setEdit] = useState([false]); @@ -74,9 +88,9 @@ export default function UnGroupTable({ {headElement} @@ -107,7 +121,7 @@ export default function UnGroupTable({ color: "text.secondary", display: "flex", flexGrow: 1, - width: "50px", + minWidth: "100px", marginLeft: "50px", textOverflow: "ellipsis", overflowX: "auto", @@ -123,13 +137,14 @@ export default function UnGroupTable({ sx={{ color: "text.secondary", display: "flex", - flexGrow: 1, - width: "80px", + // flexGrow: 1, + width: "150px", textOverflow: "ellipsis", - overflowX: "auto", + // overflowX: "auto", whiteSpace: "nowrap", py: "20px", borderColor: "primary.border", + // justifyContent: "center", }} > {row.name},{row.sid} @@ -143,18 +158,27 @@ export default function UnGroupTable({ marginLeft: "20px", py: "20px", borderColor: "primary.border", + gap: "20px", }} > - + {row.courses.map((subject, index) => ( + + {subject.name} ({subject.prof}) + + ))} + {fillThree(row.courses.length).map((subject, index) => ( + + {subject} + + ))} - + */} + + {row.courses.map((subject, index) => ( + + {subject.name} ({subject.prof}) + + ))} + {fillThree(row.courses.length).map((subject, index) => ( + + {subject} + + ))} subject.name).join(", "), + Courses: student.courses + .map((subject) => subject.name + `(${subject.prof})`) + .join(", "), Friends: student.friends.map((friend) => friend.name).join(", "), })); }