[UI/#60] 홈 뷰 / 홈 뷰 기본 UI 로직 구현

core/src/main/java/com/terning/core/designsystem/component/item/ScrapBox.kt

@@ -1,15 +1,12 @@
 package com.terning.core.designsystem.component.item
 
-import android.util.Log
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
 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.width
-import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -22,7 +19,6 @@ import com.terning.core.designsystem.theme.CalPink
 import com.terning.core.designsystem.theme.CalPurple
 import com.terning.core.designsystem.theme.Grey150
 import com.terning.core.designsystem.theme.TerningPointTheme
-import com.terning.core.designsystem.theme.TerningTheme
 import com.terning.core.designsystem.theme.White
 
 /**
@@ -53,7 +49,11 @@ fun ScrapBox(
             .shadow(
                 elevation = elevation,
                 RoundedCornerShape(cornerRadius),
-            ).background(scrapColor)
+            )
+            .background(
+                color = scrapColor,
+                shape = RoundedCornerShape(cornerRadius)
+            )
     ) {
         Box(
             modifier = Modifier

feature/src/main/java/com/terning/feature/home/home/HomeRoute.kt

@@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.Row
 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.lazy.LazyColumn
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -20,12 +19,15 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.terning.core.designsystem.component.bottomsheet.SortingBottomSheet
 import com.terning.core.designsystem.component.button.SortingButton
 import com.terning.core.designsystem.component.item.InternItem
@@ -37,24 +39,35 @@ import com.terning.core.designsystem.theme.TerningTheme
 import com.terning.core.designsystem.theme.White
 import com.terning.core.extension.customShadow
 import com.terning.feature.R
+import com.terning.feature.home.home.component.HomeFilteringEmptyIntern
 import com.terning.feature.home.home.component.HomeFilteringScreen
+import com.terning.feature.home.home.component.HomeRecommendEmptyIntern
+import com.terning.feature.home.home.component.HomeTodayEmptyIntern
 import com.terning.feature.home.home.component.HomeTodayIntern
+import com.terning.feature.home.home.model.RecommendInternData
+import com.terning.feature.home.home.model.UserNameState
+import com.terning.feature.home.home.model.UserScrapState
+
+const val NAME_START_LENGTH = 7
+const val NAME_END_LENGTH = 12
 
 @Composable
 fun HomeRoute() {
     val currentSortBy: MutableState<Int> = remember {
-        mutableStateOf(0)
+        mutableIntStateOf(0)
     }
-
     HomeScreen(currentSortBy)
 }
 
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun HomeScreen(
     currentSortBy: MutableState<Int>,
-    modifier: Modifier = Modifier,
+    viewModel: HomeViewModel = hiltViewModel(),
 ) {
+    val userNameState = viewModel.userName
+    val userScrapState by viewModel.scrapData.collectAsStateWithLifecycle()
+    val recommendInternData by viewModel.recommendInternData.collectAsStateWithLifecycle()
     var sheetState by remember { mutableStateOf(false) }
 
     if (sheetState) {
@@ -73,110 +86,170 @@ fun HomeScreen(
             LogoTopAppBar()
         }
     ) { paddingValues ->
-        LazyColumn(
+        Column(
             modifier = Modifier
                 .fillMaxSize()
                 .padding(top = paddingValues.calculateTopPadding()),
-            contentPadding = PaddingValues(2.dp),
-            verticalArrangement = Arrangement.spacedBy(12.dp)
         ) {
-            item {
-                Column(
-                    modifier = Modifier
-                        .padding(bottom = 16.dp)
-                ) {
-                    Text(
-                        text = stringResource(
-                            id = R.string.home_today_title, "남지우"
-                        ),
+            LazyColumn(
+                contentPadding = PaddingValues(
+                    top = 2.dp,
+                    bottom = 20.dp,
+                ),
+                verticalArrangement = Arrangement.spacedBy(12.dp)
+            ) {
+                item {
+                    Column(
                         modifier = Modifier
-                            .padding(top = 11.dp, bottom = 19.dp)
-                            .padding(horizontal = 24.dp),
-                        style = TerningTheme.typography.title1,
-                        color = Black,
-                    )
-                    HomeTodayIntern()
+                            .padding(bottom = 16.dp)
+                    ) {
+                        ShowMainTitleWithName(userNameState)
+                        ShowTodayIntern(userScrapState = userScrapState)
+                    }
                 }
-            }
-            stickyHeader {
-                Column(
-                    modifier = Modifier
-                        .background(White)
-                ) {
-                    Text(
-                        text = stringResource(id = R.string.home_recommend_sub_title),
-                        style = TerningTheme.typography.detail2,
-                        color = Black,
-                        modifier = Modifier
-                            .padding(top = 9.dp)
-                            .padding(horizontal = 24.dp),
-                    )
-
-                    Text(
-                        text = stringResource(id = R.string.home_recommend_main_title),
-                        style = TerningTheme.typography.title1,
-                        color = Black,
-                        modifier = Modifier
-                            .padding(top = 5.dp)
-                            .padding(horizontal = 24.dp),
-                    )
-
-                    HomeFilteringScreen(
-                        grade = 3,
-                        period = 1,
-                        startYear = 2024,
-                        startMonth = 7,
-                    )
-
-                    HorizontalDivider(
-                        thickness = 4.dp,
-                        color = Grey150,
-                        modifier = Modifier
-                            .fillMaxWidth(),
-                    )
-
-                    Row(
+                stickyHeader {
+                    Column(
                         modifier = Modifier
-                            .fillMaxWidth(),
-                        horizontalArrangement = Arrangement.End,
+                            .background(White)
                     ) {
-                        SortingButton(
-                            sortBy = currentSortBy.value,
-                            onCLick = { sheetState = true },
+                        ShowRecommendTitle()
+                        ShowInternFilter(userNameState = userNameState)
+
+                        HorizontalDivider(
+                            thickness = 4.dp,
+                            color = Grey150,
                             modifier = Modifier
-                                .padding(vertical = 4.dp)
+                                .fillMaxWidth(),
                         )
-                        Spacer(modifier = Modifier.padding(9.dp))
+
+                        Row(
+                            modifier = Modifier
+                                .fillMaxWidth(),
+                            horizontalArrangement = Arrangement.End,
+                        ) {
+                            SortingButton(
+                                sortBy = currentSortBy.value,
+                                onCLick = { sheetState = true },
+                                modifier = Modifier
+                                    .padding(vertical = 4.dp)
+                            )
+                            Spacer(modifier = Modifier.padding(9.dp))
+                        }
+                    }
+                }
+
+                if (userNameState.internFilter != null && recommendInternData.isNotEmpty()) {
+                    items(recommendInternData.size) { index ->
+                        ShowRecommendIntern(recommendInternData[index])
                     }
                 }
             }
 
-            items(itemCount) {
-                Box(
-                    modifier = modifier
-                        .height(92.dp)
+            if (userNameState.internFilter == null) {
+                HomeFilteringEmptyIntern(
+                    modifier = Modifier
                         .padding(horizontal = 24.dp)
-                        .customShadow(
-                            color = Grey200,
-                            shadowRadius = 10.dp,
-                            shadowWidth = 2.dp
-                        )
-                        .background(
-                            color = White,
-                            shape = RoundedCornerShape(10.dp)
-                        )
-                ) {
-                    InternItem(
-                        imageUrl = "https://reqres.in/img/faces/7-image.jpg",
-                        title = "[Someone] 콘텐츠 마케터 대학생 인턴 채용",
-                        dateDeadline = "2",
-                        workingPeriod = "2",
-                        isScraped = false,
-                    )
-                }
+                        .fillMaxSize()
+                )
+            } else if (recommendInternData.isEmpty()) {
+                HomeRecommendEmptyIntern()
             }
         }
     }
 }
 
-private const val itemCount = 10
+@Composable
+private fun ShowMainTitleWithName(userNameState: UserNameState) {
+    Text(
+        text = stringResource(
+            id = R.string.home_today_title,
+            if (userNameState.userName.length in NAME_START_LENGTH..NAME_END_LENGTH) "\n" + userNameState.userName
+            else userNameState.userName
+        ),
+        modifier = Modifier
+            .padding(top = 11.dp, bottom = 19.dp)
+            .padding(horizontal = 24.dp),
+        style = TerningTheme.typography.title1,
+        color = Black,
+    )
+}
+
+@Composable
+private fun ShowTodayIntern(userScrapState: UserScrapState) {
+    if (userScrapState.isScrapExist) {
+        if (userScrapState.scrapData == null) {
+            HomeTodayEmptyIntern(isButtonExist = true)
+        } else {
+            HomeTodayIntern(userScrapState.scrapData)
+        }
+    } else {
+        HomeTodayEmptyIntern(isButtonExist = false)
+    }
+}
+
+@Composable
+private fun ShowRecommendTitle() {
+    Text(
+        text = stringResource(id = R.string.home_recommend_sub_title),
+        style = TerningTheme.typography.detail2,
+        color = Black,
+        modifier = Modifier
+            .padding(top = 9.dp)
+            .padding(horizontal = 24.dp),
+    )
+
+    Text(
+        text = stringResource(id = R.string.home_recommend_main_title),
+        style = TerningTheme.typography.title1,
+        color = Black,
+        modifier = Modifier
+            .padding(top = 5.dp)
+            .padding(horizontal = 24.dp),
+    )
+}
+
+@Composable
+private fun ShowInternFilter(userNameState: UserNameState) {
+    if (userNameState.internFilter == null) {
+        HomeFilteringScreen(
+            grade = R.string.home_recommend_no_filtering_hyphen,
+            period = R.string.home_recommend_no_filtering_hyphen,
+            startYear = R.string.home_recommend_no_filtering_hyphen,
+            startMonth = R.string.home_recommend_no_filtering_hyphen
+        )
+    } else {
+        with(userNameState.internFilter) {
+            HomeFilteringScreen(
+                grade = grade,
+                period = workingPeriod,
+                startYear = startYear,
+                startMonth = startMonth,
+            )
+        }
+    }
+}
+
+@Composable
+private fun ShowRecommendIntern(recommendInternData: RecommendInternData) {
+    Box(
+        modifier = Modifier
+            .padding(horizontal = 24.dp)
+            .customShadow(
+                color = Grey200,
+                shadowRadius = 10.dp,
+                shadowWidth = 2.dp
+            )
+            .background(
+                color = White,
+                shape = RoundedCornerShape(10.dp)
+            )
+    ) {
+        InternItem(
+            imageUrl = recommendInternData.imgUrl,
+            title = recommendInternData.title,
+            dateDeadline = recommendInternData.dDay.toString(),
+            workingPeriod = recommendInternData.workingPeriod.toString(),
+            isScraped = recommendInternData.isScrapped,
+        )
+    }
+}