Attendance history card 구현 (#733)

* feat: AttendanceHistoryCard 구현 * chore: string 리소스 추출 * rebase * feat: AttendanceHistoryCard * feat: AttendanceHistorySummaryCard * feat: AttendanceHistoryUserInfoCard * chore: add dependency for collectAsStateWithLifecycle * chore: add text style to AttendanceHistoryUserInfoCard * feat: implement AttendanceHistoryUserInfoCard * feat: implement AttendanceHistorySummaryCard * feat: implement AttendanceCountCard * feat: implement AttendanceResultType * chore: move AttendanceHistoryCardState to model package * chore: move components to component package * feat: implement AttendanceHistoryCard * chore: change access modifier * feat: replace List with ImmutableList * chore: remove dependency
sopt-makers · Jan 4, 2025 · 0dd4036 · 0dd4036
1 parent 7cd1dfa
commit 0dd4036
Show file tree

Hide file tree

Showing 14 changed files with 379 additions and 7 deletions.
diff --git a/...c/main/java/org/sopt/official/feature/attendance/compose/component/AttendanceCountCard.kt b/...c/main/java/org/sopt/official/feature/attendance/compose/component/AttendanceCountCard.kt
@@ -0,0 +1,63 @@
+package org.sopt.official.feature.attendance.compose.component
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.sopt.official.R
+import org.sopt.official.designsystem.SoptTheme
+
+@Composable
+fun AttendanceCountCard(resultType: String, count: Int, modifier: Modifier = Modifier) {
+    Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) {
+        Text(
+            text = resultType,
+            color = SoptTheme.colors.onSurface300,
+            style = SoptTheme.typography.label12SB
+        )
+        Spacer(modifier = Modifier.height(24.dp))
+        Text(
+            text = count.toFormattedNumber(),
+            color = SoptTheme.colors.onSurface50,
+            style = SoptTheme.typography.body14M
+        )
+    }
+}
+
+private fun Int.toFormattedNumber(): String = "%02d회".format(this)
+
+@Preview
+@Composable
+private fun AttendanceCountCardPreview() {
+    SoptTheme {
+        Row {
+            AttendanceCountCard(
+                resultType = stringResource(id = R.string.title_attendance_count_all),
+                count = 0
+            )
+            Spacer(Modifier.width(10.dp))
+            AttendanceCountCard(
+                resultType = stringResource(id = R.string.title_attendance_count_normal),
+                count = 0
+            )
+            Spacer(Modifier.width(10.dp))
+            AttendanceCountCard(
+                resultType = stringResource(id = R.string.title_attendance_count_late),
+                count = 0
+            )
+            Spacer(Modifier.width(10.dp))
+            AttendanceCountCard(
+                resultType = stringResource(id = R.string.title_attendance_count_abnormal),
+                count = 0
+            )
+        }
+    }
+}
diff --git a/...main/java/org/sopt/official/feature/attendance/compose/component/AttendanceHistoryCard.kt b/...main/java/org/sopt/official/feature/attendance/compose/component/AttendanceHistoryCard.kt
@@ -0,0 +1,91 @@
+package org.sopt.official.feature.attendance.compose.component
+
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.google.common.collect.ImmutableList
+import org.sopt.official.designsystem.SoptTheme
+import org.sopt.official.feature.attendance.model.AttendanceHistory
+import org.sopt.official.feature.attendance.model.AttendanceResultType
+
+@Composable
+fun AttendanceHistoryCard(
+    userTitle: String,
+    attendanceScore: Int,
+    totalAttendanceResult: Map<AttendanceResultType, Int>,
+    attendanceHistoryList: ImmutableList<AttendanceHistory>,
+    scrollState: ScrollState, modifier: Modifier = Modifier
+) {
+    Column(
+        modifier = modifier
+            .background(color = SoptTheme.colors.onSurface800)
+            .padding(all = 32.dp)
+    ) {
+        AttendanceHistoryUserInfoCard(
+            userTitle = userTitle,
+            attendanceScore = attendanceScore
+        )
+        Spacer(modifier = Modifier.height(24.dp))
+        Row(
+            horizontalArrangement = Arrangement.SpaceBetween,
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(color = SoptTheme.colors.onSurface700, shape = RoundedCornerShape(8.dp))
+                .padding(horizontal = 24.dp, vertical = 16.dp),
+        ) {
+            totalAttendanceResult.forEach { attendanceResult ->
+                AttendanceCountCard(
+                    resultType = attendanceResult.key.type,
+                    count = attendanceResult.value
+                )
+            }
+        }
+        Spacer(modifier = Modifier.height(24.dp))
+        AttendanceHistoryListCard(
+            attendanceHistoryList = attendanceHistoryList,
+            scrollState = scrollState,
+            modifier = Modifier.fillMaxWidth()
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun AttendanceHistoryCardPreview() {
+    SoptTheme {
+        AttendanceHistoryCard(
+            userTitle = "32기 디자인파트 김솝트",
+            attendanceScore = 1,
+            totalAttendanceResult = mapOf(
+                Pair(AttendanceResultType.ALL, 16),
+                Pair(AttendanceResultType.PRESENT, 5),
+                Pair(AttendanceResultType.LATE, 0),
+                Pair(AttendanceResultType.ABSENT, 11)
+            ),
+            attendanceHistoryList = ImmutableList.of(
+                AttendanceHistory(
+                    status = "출석", eventName = "1차 세미나", date = "00월 00일"
+                ),
+                AttendanceHistory(
+                    status = "출석", eventName = "1차 세미나", date = "00월 00일"
+                ),
+                AttendanceHistory(
+                    status = "출석", eventName = "1차 세미나", date = "00월 00일"
+                ),
+            ),
+            scrollState = rememberScrollState()
+        )
+    }
+}
diff --git a/.../java/org/sopt/official/feature/attendance/compose/component/AttendanceHistoryListCard.kt b/.../java/org/sopt/official/feature/attendance/compose/component/AttendanceHistoryListCard.kt
@@ -0,0 +1,91 @@
+package org.sopt.official.feature.attendance.compose.component
+
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.gestures.scrollable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.google.common.collect.ImmutableList
+import org.sopt.official.designsystem.SoptTheme
+import org.sopt.official.feature.attendance.model.AttendanceHistory
+
+@Composable
+fun AttendanceHistoryListCard(
+    attendanceHistoryList: ImmutableList<AttendanceHistory>,
+    scrollState: ScrollState,
+    modifier: Modifier = Modifier
+) {
+    Column(modifier = modifier) {
+        Text(
+            text = "나의 출결 현황",
+            color = SoptTheme.colors.onSurface300,
+            style = SoptTheme.typography.body14M,
+        )
+        Spacer(Modifier.height(25.dp))
+        Column(
+            Modifier.scrollable(
+                state = scrollState,
+                orientation = Orientation.Vertical
+            )
+        ) {
+            attendanceHistoryList.forEachIndexed { index, attendanceHistory ->
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    Text(
+                        text = attendanceHistory.status,
+                        style = SoptTheme.typography.body14R,
+                        color = SoptTheme.colors.onSurface100,
+                    )
+                    Spacer(Modifier.width(8.dp))
+                    Text(
+                        text = attendanceHistory.eventName,
+                        style = SoptTheme.typography.label16SB,
+                        color = SoptTheme.colors.onSurface10,
+                        overflow = TextOverflow.Ellipsis,
+                        modifier = Modifier.weight(1f)
+                    )
+                    Spacer(Modifier.width(8.dp))
+                    Text(
+                        text = attendanceHistory.date,
+                        style = SoptTheme.typography.body14R,
+                        color = SoptTheme.colors.onSurface100,
+                    )
+                }
+                if (index < attendanceHistoryList.lastIndex) {
+                    Spacer(modifier = Modifier.height(16.dp))
+                }
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun AttendanceHistoryListCardPreview() {
+    SoptTheme {
+        AttendanceHistoryListCard(
+            attendanceHistoryList = ImmutableList.of(
+                AttendanceHistory(
+                    status = "출석", eventName = "1차 세미나", date = "00월 00일"
+                ),
+                AttendanceHistory(
+                    status = "출석", eventName = "1차 세미나", date = "00월 00일"
+                ),
+                AttendanceHistory(
+                    status = "출석", eventName = "1차 세미나", date = "00월 00일"
+                ),
+            ),
+            scrollState = rememberScrollState()
+        )
+    }
+}
diff --git a/...va/org/sopt/official/feature/attendance/compose/component/AttendanceHistorySummaryCard.kt b/...va/org/sopt/official/feature/attendance/compose/component/AttendanceHistorySummaryCard.kt
@@ -0,0 +1,40 @@
+package org.sopt.official.feature.attendance.compose.component
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.sopt.official.designsystem.SoptTheme
+
+@Composable
+fun AttendanceHistorySummaryCard(modifier: Modifier = Modifier) {
+    Row(modifier) {
+        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            Text(
+                text = "전체",
+                color = SoptTheme.colors.onSurface300,
+                style = SoptTheme.typography.label12SB
+            )
+            Spacer(Modifier.height(8.dp))
+            Text(
+                text = "asdf",
+                color = SoptTheme.colors.onSurface50,
+                style = SoptTheme.typography.body14M
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun AttendanceHistorySummaryCardPreview() {
+    SoptTheme {
+        AttendanceHistorySummaryCard()
+    }
+}
diff --git a/...a/org/sopt/official/feature/attendance/compose/component/AttendanceHistoryUserInfoCard.kt b/...a/org/sopt/official/feature/attendance/compose/component/AttendanceHistoryUserInfoCard.kt
@@ -0,0 +1,71 @@
+package org.sopt.official.feature.attendance.compose.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.sopt.official.R
+import org.sopt.official.designsystem.Orange400
+import org.sopt.official.designsystem.SoptTheme
+
+@Composable
+fun AttendanceHistoryUserInfoCard(
+    userTitle: String,
+    attendanceScore: Int,
+    modifier: Modifier = Modifier
+) {
+    Column(modifier = modifier) {
+        Text(
+            text = userTitle,
+            color = SoptTheme.colors.onSurface300,
+            style = SoptTheme.typography.body14M
+        )
+        Spacer(modifier = Modifier.height(8.dp))
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            Text(
+                text = "현재 출석점수는 ",
+                color = SoptTheme.colors.onSurface10,
+                style = SoptTheme.typography.body18M
+            )
+            Text(
+                text = "${attendanceScore}점",
+                color = Orange400,
+                style = SoptTheme.typography.title20SB
+            )
+            Text(
+                text = " 입니다!",
+                color = SoptTheme.colors.onSurface10,
+                style = SoptTheme.typography.body18M
+            )
+            Spacer(modifier = Modifier.weight(1f))
+            Icon(
+                modifier = Modifier.padding(end = 2.dp),
+                painter = painterResource(id = R.drawable.ic_attendance_point_info),
+                contentDescription = null,
+                tint = SoptTheme.colors.onSurface10
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun AttendanceHistoryUserInfoCardPreview() {
+    SoptTheme {
+        AttendanceHistoryUserInfoCard(
+            userTitle = "32기 디자인파트 김솝트",
+            attendanceScore = 1,
+            modifier = Modifier.background(color = SoptTheme.colors.onSurface800)
+        )
+    }
+}
diff --git a/...tendance/compose/AttendanceProgressBar.kt → ...ompose/component/AttendanceProgressBar.kt b/...tendance/compose/AttendanceProgressBar.kt → ...ompose/component/AttendanceProgressBar.kt
@@ -1,4 +1,4 @@
-package org.sopt.official.feature.attendance.compose
+package org.sopt.official.feature.attendance.compose.component
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box

diff --git a/...attendance/compose/FinalAttendanceCard.kt → .../compose/component/FinalAttendanceCard.kt b/...attendance/compose/FinalAttendanceCard.kt → .../compose/component/FinalAttendanceCard.kt
@@ -1,4 +1,4 @@
-package org.sopt.official.feature.attendance.compose
+package org.sopt.official.feature.attendance.compose.component
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background

diff --git a/...tendance/compose/MidtermAttendanceCard.kt → ...ompose/component/MidtermAttendanceCard.kt b/...tendance/compose/MidtermAttendanceCard.kt → ...ompose/component/MidtermAttendanceCard.kt
@@ -1,4 +1,4 @@
-package org.sopt.official.feature.attendance.compose
+package org.sopt.official.feature.attendance.compose.component
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Column

diff --git a/...attendance/compose/TodayAttendanceCard.kt → .../compose/component/TodayAttendanceCard.kt b/...attendance/compose/TodayAttendanceCard.kt → .../compose/component/TodayAttendanceCard.kt
@@ -1,4 +1,4 @@
-package org.sopt.official.feature.attendance.compose
+package org.sopt.official.feature.attendance.compose.component
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
@@ -94,7 +94,7 @@ fun TodayAttendanceCard(state: TodayAttendanceCardState, modifier: Modifier = Mo
 
 @Preview
 @Composable
-private fun AttendanceHistoryCardPreview() {
+private fun TodayAttendanceCardPreview() {
     SoptTheme {
         Column(
             modifier = Modifier.background(color = SoptTheme.colors.background)