@@ -13,7 +13,7 @@ interface AttendanceTableProps {
1313 leaders : User [ ]
1414 getAttendUserCount : (
1515 attendDataList : AttendData [ ] ,
16- worshipScheduleId : number
16+ worshipScheduleId : number ,
1717 ) => { count : number ; attend : number }
1818}
1919
@@ -24,6 +24,7 @@ export default function AttendanceTable({
2424 leaders,
2525 getAttendUserCount,
2626} : AttendanceTableProps ) {
27+ const isMobile = window . innerWidth < 600
2728 return (
2829 < Box sx = { { p : 2 } } >
2930 { /* 출석 테이블 제목 */ }
@@ -52,10 +53,10 @@ export default function AttendanceTable({
5253 >
5354 < Box
5455 sx = { {
55- width : 150 ,
56- minWidth : 150 ,
57- maxWidth : 150 ,
58- p : 1.5 ,
56+ width : isMobile ? 104 : 150 ,
57+ minWidth : isMobile ? 104 : 150 ,
58+ maxWidth : isMobile ? 104 : 150 ,
59+ p : isMobile ? 0.2 : 1.5 ,
5960 borderRight : "1px solid #e0e0e0" ,
6061 display : "flex" ,
6162 flexDirection : "column" ,
@@ -89,7 +90,7 @@ export default function AttendanceTable({
8990 { worshipScheduleMapList . map ( ( worshipSchedule ) => {
9091 const { attend, count } = getAttendUserCount (
9192 attendDataList ,
92- worshipSchedule . id
93+ worshipSchedule . id ,
9394 )
9495 const percentage =
9596 count > 0 ? Math . round ( ( attend / count ) * 100 ) : 0
@@ -98,10 +99,10 @@ export default function AttendanceTable({
9899 < Box
99100 key = { worshipSchedule . id }
100101 sx = { {
101- width : 98 ,
102- minWidth : 98 ,
103- maxWidth : 98 ,
104- p : 1.5 ,
102+ width : isMobile ? 85 : 98 ,
103+ minWidth : isMobile ? 85 : 98 ,
104+ maxWidth : isMobile ? 85 : 98 ,
105+ p : isMobile ? 0.2 : 1.5 ,
105106 borderRight : "1px solid #e0e0e0" ,
106107 display : "flex" ,
107108 flexDirection : "column" ,
@@ -135,34 +136,31 @@ export default function AttendanceTable({
135136 bgcolor : isLeader
136137 ? "#e3f2fd"
137138 : isDeputyLeader
138- ? "#f3e5f5"
139- : "white" ,
139+ ? "#f3e5f5"
140+ : "white" ,
140141 borderBottom : "1px solid #e0e0e0" ,
141142 "&:hover" : {
142143 bgcolor : isLeader
143144 ? "#bbdefb"
144145 : isDeputyLeader
145- ? "#e1bee7"
146- : "#f5f5f5" ,
146+ ? "#e1bee7"
147+ : "#f5f5f5" ,
147148 } ,
148149 } }
149150 >
150151 < Box
151152 sx = { {
152- width : 150 ,
153- minWidth : 150 ,
154- maxWidth : 150 ,
155- p : 1.5 ,
153+ width : isMobile ? 104 : 150 ,
154+ minWidth : isMobile ? 104 : 150 ,
155+ maxWidth : isMobile ? 104 : 150 ,
156+ p : isMobile ? 0.2 : 1.5 ,
156157 borderRight : "1px solid #e0e0e0" ,
157158 display : "flex" ,
158159 alignItems : "center" ,
159160 justifyContent : "center" ,
160161 } }
161162 >
162163 < Stack direction = "row" alignItems = "center" spacing = { 1 } >
163- { isLeader && (
164- < StarIcon sx = { { fontSize : 16 , color : "#1976d2" } } />
165- ) }
166164 { isDeputyLeader && (
167165 < StarBorderIcon sx = { { fontSize : 16 , color : "#7b1fa2" } } />
168166 ) }
@@ -183,15 +181,15 @@ export default function AttendanceTable({
183181 const attendData = attendDataList . find (
184182 ( data ) =>
185183 data . user . id === user . id &&
186- data . worshipSchedule . id === worshipSchedule . id
184+ data . worshipSchedule . id === worshipSchedule . id ,
187185 )
188186 return (
189187 < Box
190188 key = { worshipSchedule . id }
191189 sx = { {
192- width : 114 ,
193- minWidth : 114 ,
194- maxWidth : 114 ,
190+ width : isMobile ? 80 : 114 ,
191+ minWidth : isMobile ? 80 : 114 ,
192+ maxWidth : isMobile ? 80 : 114 ,
195193 p : "4px" ,
196194 borderRight : "1px solid #e0e0e0" ,
197195 display : "flex" ,
0 commit comments