[UI/#52] 홈 뷰 / 컴포넌트 적용

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

@@ -2,35 +2,71 @@ package com.terning.feature.home.home
 
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+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
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.getValue
+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 com.terning.core.designsystem.component.bottomsheet.SortingBottomSheet
+import com.terning.core.designsystem.component.button.SortingButton
+import com.terning.core.designsystem.component.item.InternItem
 import com.terning.core.designsystem.component.topappbar.LogoTopAppBar
 import com.terning.core.designsystem.theme.Black
 import com.terning.core.designsystem.theme.Grey150
+import com.terning.core.designsystem.theme.Grey200
 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.HomeFilteringScreen
 import com.terning.feature.home.home.component.HomeTodayIntern
 
 @Composable
 fun HomeRoute() {
-    HomeScreen()
+    val currentSortBy: MutableState<Int> = remember {
+        mutableStateOf(0)
+    }
+
+    HomeScreen(currentSortBy)
 }
 
 @OptIn(ExperimentalFoundationApi::class)
 @Composable
-fun HomeScreen() {
+fun HomeScreen(
+    currentSortBy: MutableState<Int>,
+    modifier: Modifier = Modifier,
+) {
+    var sheetState by remember { mutableStateOf(false) }
+
+    if (sheetState) {
+        SortingBottomSheet(
+            onDismiss = {
+                sheetState = false
+            },
+            currentSortBy = currentSortBy.value,
+            newSortBy = currentSortBy
+        )
+    }
+
     Scaffold(
         modifier = Modifier,
         topBar = {
@@ -40,7 +76,9 @@ fun HomeScreen() {
         LazyColumn(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(top = paddingValues.calculateTopPadding())
+                .padding(top = paddingValues.calculateTopPadding()),
+            contentPadding = PaddingValues(2.dp),
+            verticalArrangement = Arrangement.spacedBy(12.dp)
         ) {
             item {
                 Column(
@@ -49,9 +87,10 @@ fun HomeScreen() {
                 ) {
                     Text(
                         text = stringResource(
-                            id = R.string.home_today_title,"남지우"),
+                            id = R.string.home_today_title, "남지우"
+                        ),
                         modifier = Modifier
-                            .padding(top = 11.dp)
+                            .padding(top = 11.dp, bottom = 19.dp)
                             .padding(horizontal = 24.dp),
                         style = TerningTheme.typography.title1,
                         color = Black,
@@ -69,7 +108,7 @@ fun HomeScreen() {
                         style = TerningTheme.typography.detail2,
                         color = Black,
                         modifier = Modifier
-                            .padding(top = 25.dp)
+                            .padding(top = 9.dp)
                             .padding(horizontal = 24.dp),
                     )
 
@@ -95,19 +134,49 @@ fun HomeScreen() {
                         modifier = Modifier
                             .fillMaxWidth(),
                     )
+
+                    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))
+                    }
                 }
             }
 
-            items(10) {
-                TerningPostItem(
-                    imageUrl = "https://reqres.in/img/faces/7-image.jpg",
-                    title = "[Someone] 콘텐츠 마케터 대학생 인턴 채용",
-                    dateDeadline = "2",
-                    workingPeriod = "2개월",
-                    isScraped = false,
-                )
+            items(itemCount) {
+                Box(
+                    modifier = modifier
+                        .height(92.dp)
+                        .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,
+                    )
+                }
             }
         }
-
     }
 }
+
+private const val itemCount = 10

feature/src/main/java/com/terning/feature/home/home/component/HomeTodayIntern.kt

@@ -3,23 +3,24 @@ package com.terning.feature.home.home.component
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import com.terning.core.designsystem.theme.CalYellow
 
 @Composable
 fun HomeTodayIntern() {
     LazyRow(
         horizontalArrangement = Arrangement.spacedBy(12.dp),
         contentPadding = PaddingValues(horizontal = 24.dp),
         modifier = Modifier
-            .fillMaxWidth()
-            .padding(top = 19.dp),
+            .fillMaxWidth(),
     ) {
-        items(5) {
-            HomeTodayInternItem("[유한킴벌리] 그린캠프 w.대학생 숲활동가 모집")
+        items(todayInternItemCount) {
+            HomeTodayInternItem("[유한킴벌리] 그린캠프 w.대학생 숲활동가 모집", CalYellow)
         }
     }
 }
+
+private const val todayInternItemCount = 5

feature/src/main/java/com/terning/feature/home/home/component/HomeTodayInternItem.kt

@@ -1,59 +1,54 @@
 package com.terning.feature.home.home.component
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
+import com.terning.core.designsystem.component.item.ScrapBox
+import com.terning.core.designsystem.theme.Black
 import com.terning.core.designsystem.theme.Grey150
-import com.terning.core.designsystem.theme.Grey500
 import com.terning.core.designsystem.theme.TerningTheme
-import com.terning.core.designsystem.theme.White
 
 @Composable
 fun HomeTodayInternItem(
     title: String,
+    scrapColor: Color,
     modifier: Modifier = Modifier
 ) {
-    Row(
-        modifier
-            .background(White)
-            .width(140.dp)
+    ScrapBox(
+        modifier = modifier
             .height(116.dp)
-            .border(
-                width = 1.dp,
-                color = Grey150,
-                RoundedCornerShape(5.dp),
-            ),
-        verticalAlignment = Alignment.Bottom
-    ) {
-        Box(
-            modifier
-                .background(
-                    color = Grey500,
-                    shape = RoundedCornerShape(
-                        topStart = 5.dp,
-                        bottomStart = 5.dp
-                    )
+            .width(140.dp),
+        cornerRadius = 5.dp,
+        scrapColor = scrapColor,
+        borderWidth = 1.dp,
+        borderColor = Grey150,
+        content = {
+            Column(
+                modifier = modifier
+                    .fillMaxHeight(),
+                verticalArrangement = Arrangement.Bottom
+            ) {
+                Text(
+                    text = title,
+                    modifier = modifier
+                        .padding(
+                            start = 8.dp,
+                            end = 9.dp,
+                            bottom = 8.dp
+                        ),
+                    style = TerningTheme.typography.button3,
+                    color = Black,
+                    maxLines = 3,
                 )
-                .width(8.dp)
-                .fillMaxHeight()
-        )
-        Text(
-            text = title,
-            modifier
-                .padding(horizontal = 16.dp)
-                .padding(bottom = 8.dp),
-            style = TerningTheme.typography.button3
-        )
-    }
+            }
+        }
+    )
 }