Merge pull request #74 from ERICA-gamsung/feature/#72

Feature/#72, #73 메인 페이지 디자인과 기능을 구현한다
ERICA-gamsung · May 27, 2024 · 0e56fe8 · 0e56fe8
2 parents 42cd99a + 63e1b05
commit 0e56fe8
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 10 deletions.
diff --git a/app/src/main/java/com/erica/gamsung/core/presentation/MainActivity.kt b/app/src/main/java/com/erica/gamsung/core/presentation/MainActivity.kt
@@ -71,7 +71,7 @@ fun MainNavHost(
     val inputMenuViewModel: InputMenuViewModel = hiltViewModel()
     NavHost(navController = navController, startDestination = Screen.Main.route) {
         composable(Screen.Main.route) {
-            MainScreen(navController = navController)
+            MainScreen(navController = navController, postViewModel)
             LogNavStack(navController = navController)
         }
         composable(Screen.Setting.route) { SettingScreen(navController = navController) }

diff --git a/app/src/main/java/com/erica/gamsung/core/presentation/MainScreen.kt b/app/src/main/java/com/erica/gamsung/core/presentation/MainScreen.kt
@@ -1,26 +1,70 @@
 package com.erica.gamsung.core.presentation
 
+import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.navigation.NavHostController
+import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import com.erica.gamsung.core.presentation.component.GsOutlinedButton
 import com.erica.gamsung.core.presentation.component.GsTopAppBar
+import com.erica.gamsung.post.presentation.PostViewModel
+import java.time.LocalDate
+import java.time.format.DateTimeFormatter
 
 @Composable
-fun MainScreen(navController: NavHostController = rememberNavController()) {
+fun MainScreen(
+    navController: NavHostController = rememberNavController(),
+    postViewModel: PostViewModel = hiltViewModel(),
+) {
+    val currentDate = remember { getCurrentDate() }
+    val scheduleList by postViewModel.postListData.observeAsState()
+    var completedTasks = remember { 0 }
+    var totalTasks = remember { 0 }
+    val navBackStackEntry by navController.currentBackStackEntryAsState()
+    val currentBackStackEntryId = navBackStackEntry?.id
+
+    totalTasks = postViewModel.getPostListSize()
+    completedTasks = totalTasks - postViewModel.getFilteredPostListSize("yet")
+
+    LaunchedEffect(currentBackStackEntryId) {
+        postViewModel.fetchPostListData()
+    }
+
+    LaunchedEffect(scheduleList) {
+        scheduleList?.let {
+            totalTasks = postViewModel.getPostListSize()
+            completedTasks = totalTasks - postViewModel.getFilteredPostListSize("yet")
+        }
+    }
+
     Scaffold(
         topBar = {
             GsTopAppBar(
@@ -35,17 +79,119 @@ fun MainScreen(navController: NavHostController = rememberNavController()) {
             modifier =
                 Modifier
                     .padding(paddingValues)
-                    .fillMaxSize(),
+                    .fillMaxSize()
+                    .padding(horizontal = 20.dp),
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center,
         ) {
-            MainButton("글 발행하러 가기") { navController.navigate(Screen.DateSelect.route) }
+            CircleTitleSection(currentDate = currentDate)
+            TaskProgressCircle(completedTasks = completedTasks, totalTasks = totalTasks)
+            Column(
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ) {
+                MainButton("글 발행하러 가기") { navController.navigate(Screen.DateSelect.route) }
+                Spacer(modifier = Modifier.height(16.dp))
+                MainButton("발행 현황 확인하기") { navController.navigate(Screen.PostsStatus.route) }
+            }
+            Spacer(modifier = Modifier.height(20.dp))
+        }
+    }
+}
+
+private fun getCurrentDate(): String {
+    val currentDate = LocalDate.now()
+    val formatter = DateTimeFormatter.ofPattern("MMMM dd일, EEEE")
+    return currentDate.format(formatter)
+}
+
+@Composable
+fun CircleTitleSection(currentDate: String) {
+    Column(
+        modifier = Modifier.padding(top = 20.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Text(
+            text = "Task Progress",
+            fontSize = 18.sp,
+            fontWeight = FontWeight.Light,
+            color = Color.Gray,
+        )
+        Spacer(modifier = Modifier.height(8.dp))
+        Text(
+            text = currentDate,
+            fontSize = 22.sp,
+            fontWeight = FontWeight.Medium,
+            color = Color.Black,
+        )
+    }
+    Spacer(modifier = Modifier.height(16.dp))
+}
+
+@Suppress("MagicNumber")
+@Composable
+fun TaskProgressCircle(
+    completedTasks: Int,
+    totalTasks: Int,
+    size: Dp = 250.dp,
+) {
+    val progress = if (totalTasks > 0) completedTasks.toFloat() / totalTasks else 0f
+
+    Box(
+        modifier =
+            Modifier
+                .size(size)
+                .padding(16.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Canvas(modifier = Modifier.size(size)) {
+            val strokeWidth = 12.dp.toPx()
+            val radius = (size / 2).toPx()
+            val center = Offset(radius, radius)
+            val gradient =
+                Brush.sweepGradient(
+                    colors =
+                        listOf(
+                            Color(0xFF3399FF),
+                            Color(0xFF33CCFF),
+                            Color(0xFF3399FF),
+                        ),
+                    center = center,
+                )
 
-            Spacer(modifier = Modifier.height(30.dp))
+            // 뒷판 아크
+            drawArc(
+                color = Color(0xFFF0F0F0),
+                startAngle = -90f,
+                sweepAngle = 360f,
+                useCenter = false,
+                style = Stroke(width = strokeWidth, cap = StrokeCap.Round),
+            )
 
-            MainButton("발행 현황 확인하기") { navController.navigate(Screen.PostsStatus.route) }
+            // 진행률 아크
+            drawArc(
+                brush = gradient,
+                startAngle = -90f,
+                sweepAngle = 360 * progress,
+                useCenter = false,
+                style = Stroke(width = strokeWidth, cap = StrokeCap.Round),
+            )
+        }
+        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            Text(
+                text = "$completedTasks/$totalTasks",
+                fontSize = 28.sp,
+                fontWeight = FontWeight.Bold,
+                color = Color.Black,
+            )
+            Text(
+                text = "Schedules",
+                fontSize = 14.sp,
+                fontWeight = FontWeight.Light,
+                color = Color.Gray,
+            )
         }
     }
+    Spacer(modifier = Modifier.height(32.dp))
 }
 
 @Composable
@@ -57,10 +203,10 @@ private fun MainButton(
         modifier =
             Modifier
                 .fillMaxWidth()
-                .height(80.dp)
+                .height(60.dp)
                 .padding(horizontal = 20.dp),
         text = text,
-        fontSize = 25.sp,
+        fontSize = 20.sp,
         onClick = onClick,
     )
 }

diff --git a/app/src/main/java/com/erica/gamsung/post/presentation/PostStatusScreen.kt b/app/src/main/java/com/erica/gamsung/post/presentation/PostStatusScreen.kt
@@ -94,9 +94,9 @@ fun PostStatusScreen(
                 hasLeftIcon = true,
                 onNavigationClick = {
                     navController.navigate(Screen.Main.route) {
-                        launchSingleTop = true
+                        // launchSingleTop = true
                         popUpTo(navController.graph.startDestinationId) {
-                            inclusive = false
+                            inclusive = true
                         }
                     }
                 },

diff --git a/app/src/main/java/com/erica/gamsung/post/presentation/PostViewModel.kt b/app/src/main/java/com/erica/gamsung/post/presentation/PostViewModel.kt
@@ -48,6 +48,14 @@ class PostViewModel
         private val _imgBitMap = MutableLiveData<Bitmap>()
         val imgBitMap: LiveData<Bitmap> = _imgBitMap
 
+        fun getPostListSize(): Int {
+            return _postListData.value?.size ?: 0
+        }
+
+        fun getFilteredPostListSize(filterState: String): Int {
+            return _postListData.value?.filter { it.state == filterState }?.size ?: 0
+        }
+
         fun setImg(bitmap: Bitmap?) {
             _imgBitMap.value = bitmap
             Log.d("ViewModel", "Setting image URI: $bitmap")