[UI/#12] 홈뷰 / 홈 기본 화면 구현

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

@@ -1,19 +1,102 @@
 package com.terning.feature.home
 
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.terning.core.designsystem.theme.Black
+import com.terning.core.designsystem.theme.Grey150
+import com.terning.core.designsystem.theme.TerningTheme
+import com.terning.core.designsystem.theme.White
+import com.terning.feature.R
+import com.terning.feature.home.component.HomeFilteringScreen
+import com.terning.feature.home.component.HomeTodayIntern
 
 @Composable
 fun HomeRoute() {
     HomeScreen()
 }
 
+@OptIn(ExperimentalFoundationApi::class)
 @Composable
 fun HomeScreen() {
-    Column(modifier = Modifier.fillMaxSize()) {
-        Text(text = "홈 스크린")
+    LazyColumn(
+        modifier = Modifier
+            .fillMaxSize()
+    ) {
+        item {
+            Column(
+                modifier = Modifier
+                    .padding(bottom = 16.dp)
+            ) {
+                Text(
+                    text = stringResource(
+                        id = R.string.home_today_title_start
+                    )
+                            + "남지우"
+                            + stringResource(
+                        id = R.string.home_today_title_end
+                    ),
+                    modifier = Modifier
+                        .padding(top = 11.dp)
+                        .padding(horizontal = 24.dp),
+                    style = TerningTheme.typography.title1,
+                    color = Black,
+                )
+                HomeTodayIntern()
+            }
+        }
+        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 = 25.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(3, 1, 7)
+
+                HorizontalDivider(
+                    thickness = 4.dp,
+                    color = Grey150,
+                    modifier = Modifier
+                        .fillMaxWidth(),
+                )
+            }
+        }
+
+        items(10) {
+            TerningPostItem(
+                imageUrl = "https://reqres.in/img/faces/7-image.jpg",
+                title = "[Someone] 콘텐츠 마케터 대학생 인턴 채용",
+                dateDeadline = "2",
+                workingPeriod = "2개월",
+                isScraped = false,
+            )
+        }
     }
-}
+}

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

@@ -0,0 +1,111 @@
+package com.terning.feature.home
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+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.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import coil.compose.rememberImagePainter
+import com.terning.core.designsystem.theme.Black
+import com.terning.core.designsystem.theme.Grey400
+import com.terning.core.designsystem.theme.TerningMain
+import com.terning.core.designsystem.theme.TerningTheme
+import com.terning.core.designsystem.theme.White
+import com.terning.feature.R
+
+@Composable
+fun TerningPostItem(
+    imageUrl: String,
+    title: String,
+    dateDeadline: String,
+    workingPeriod: String,
+    isScraped: Boolean,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier
+            .fillMaxWidth()
+            .height(92.dp)
+            .shadow(1.dp)
+            .background(
+                color = White,
+                shape = RoundedCornerShape(10.dp)
+            )
+            .padding(start = 10.dp, end = 8.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Image(
+            painter = rememberImagePainter(imageUrl),
+            contentDescription = title,
+            modifier
+                .fillMaxHeight()
+                .aspectRatio(1f)
+                .padding(vertical = 10.dp)
+                .clip(
+                    RoundedCornerShape(5.dp),
+                )
+        )
+        Column(
+            modifier
+                .padding(
+                    top = 10.dp,
+                    bottom = 9.dp,
+                    start = 8.dp
+                )
+                .weight(1f),
+        ) {
+            Text(
+                text = stringResource(id = R.string.terning_post_d_day) + dateDeadline,
+                style = TerningTheme.typography.detail0,
+                color = TerningMain,
+            )
+
+            Text(
+                text = title,
+                style = TerningTheme.typography.title5,
+                color = Black,
+                softWrap = true,
+                modifier = modifier.padding(top = 3.dp),
+            )
+
+            Row(
+                modifier = modifier
+                    .padding(top = 10.dp)
+            ) {
+                Text(
+                    text = stringResource(R.string.terning_post_working_period),
+                    style = TerningTheme.typography.detail3,
+                    color = Grey400
+                )
+
+                Text(
+                    text = workingPeriod,
+                    style = TerningTheme.typography.detail3,
+                    color = TerningMain,
+                    modifier = modifier.padding(start = 4.dp)
+                )
+            }
+        }
+        Image(
+            painter = painterResource(id = R.drawable.ic_home_bookmark_28),
+            contentDescription = "scrap",
+            modifier = modifier
+                .padding(end = 2.dp, bottom = 8.dp)
+                .align(Alignment.Bottom),
+        )
+    }
+}

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

@@ -0,0 +1,113 @@
+package com.terning.feature.home.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.material3.VerticalDivider
+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.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.terning.core.designsystem.theme.Black
+import com.terning.core.designsystem.theme.Grey300
+import com.terning.core.designsystem.theme.TerningMain
+import com.terning.core.designsystem.theme.TerningTheme
+import com.terning.core.designsystem.theme.White
+import com.terning.feature.R
+
+@Composable
+fun HomeFilteringScreen(
+    grade: Int,
+    period: Int,
+    month: Int,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier
+            .padding(top = 10.dp, bottom = 11.dp)
+            .padding(horizontal = 24.dp)
+            .height(IntrinsicSize.Min)
+    ) {
+        Row(
+            modifier = modifier
+                .background(
+                    color = TerningMain,
+                    shape = RoundedCornerShape(5.dp),
+                )
+                .align(Alignment.CenterVertically)
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.ic_home_filtering_28),
+                contentDescription = stringResource(id = R.string.home_recommend_filtering),
+                modifier = modifier
+                    .padding(horizontal = 2.dp),
+            )
+            Text(
+                text = stringResource(id = R.string.home_recommend_filtering),
+                style = TerningTheme.typography.button4,
+                color = White,
+                modifier = modifier
+                    .padding(vertical = 8.dp)
+                    .padding(end = 8.dp)
+            )
+        }
+
+        HomeFilteringText(
+            text = grade.toString() + stringResource(id = R.string.home_recommend_filtering_grade),
+            modifier = Modifier
+                .padding(vertical = 7.dp, horizontal = 28.dp),
+        )
+        HomeFilteringDivider()
+        HomeFilteringText(
+            text = stringResource(
+                id = when (period) {
+                    1 -> R.string.home_recommend_filtering_working_period_1
+                    2 -> R.string.home_recommend_filtering_working_period_2
+                    3 -> R.string.home_recommend_filtering_working_period_3
+                    else -> R.string.server_failure
+                }
+            ),
+            modifier = Modifier
+                .padding(vertical = 7.dp, horizontal = 25.dp)
+        )
+        HomeFilteringDivider()
+        HomeFilteringText(
+            text = month.toString() + stringResource(id = R.string.home_recommend_filtering_month),
+            modifier = Modifier
+                .padding(vertical = 7.dp)
+                .padding(start = 34.dp, end = 13.dp)
+        )
+    }
+}
+
+@Composable
+private fun HomeFilteringText(
+    text: String,
+    modifier: Modifier = Modifier
+) {
+    Text(
+        text = text,
+        style = TerningTheme.typography.detail2,
+        color = Black,
+        modifier = modifier,
+    )
+}
+
+@Composable
+private fun HomeFilteringDivider() {
+    VerticalDivider(
+        color = Grey300,
+        thickness = 2.dp,
+        modifier = Modifier
+            .fillMaxHeight()
+            .padding(vertical = 4.dp),
+    )
+}

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

@@ -0,0 +1,45 @@
+package com.terning.feature.home.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+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.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.terning.core.designsystem.theme.Grey400
+import com.terning.core.designsystem.theme.TerningTheme
+import com.terning.feature.R
+
+@Composable
+fun HomeRecommendEmptyIntern(
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier
+            .fillMaxSize(),
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Image(
+            painter = painterResource(id = R.drawable.ic_empty_logo),
+            contentDescription = stringResource(id = R.string.home_recommend_no_intern_description),
+            modifier = modifier
+                .align(Alignment.CenterHorizontally)
+        )
+        Text(
+            text = stringResource(id = R.string.home_recommend_no_intern),
+            style = TerningTheme.typography.body4,
+            color = Grey400,
+            textAlign = TextAlign.Center,
+            modifier = modifier
+                .padding(top = 8.dp)
+                .align(Alignment.CenterHorizontally)
+        )
+    }
+}