diff --git a/.idea/caches/deviceStreaming.xml b/.idea/caches/deviceStreaming.xml index 5c90e4f..5d41895 100644 --- a/.idea/caches/deviceStreaming.xml +++ b/.idea/caches/deviceStreaming.xml @@ -51,18 +51,6 @@ diff --git a/app/src/main/java/com/hsLink/hslink/presentation/home/HomeScreen.kt b/app/src/main/java/com/hsLink/hslink/presentation/home/HomeScreen.kt index 6e1030a..20e1431 100644 --- a/app/src/main/java/com/hsLink/hslink/presentation/home/HomeScreen.kt +++ b/app/src/main/java/com/hsLink/hslink/presentation/home/HomeScreen.kt @@ -1,12 +1,38 @@ package com.hsLink.hslink.presentation.home +import androidx.compose.foundation.Image +import androidx.compose.foundation.background import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding -import androidx.compose.material3.Text +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.material3.HorizontalDivider import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.layout.ContentScale +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.hsLink.hslink.R +import com.hsLink.hslink.core.designsystem.component.HsLinkTopBar import com.hsLink.hslink.core.designsystem.theme.HsLinkTheme +import com.hsLink.hslink.presentation.home.component.HomeBottomContent +import com.hsLink.hslink.presentation.home.component.HomeCardItem +import com.hsLink.hslink.presentation.home.component.HomeCarousel +import com.hsLink.hslink.presentation.home.component.HomeContentField +import com.hsLink.hslink.presentation.home.component.HomePost +import com.hsLink.hslink.presentation.home.component.HomePostContainer +@Preview(showBackground = true) +@Composable +private fun HomeScreenPreview() { + HsLinkTheme { + HomeScreen(paddingValues = PaddingValues()) + } +} @Composable fun HomeRoute( @@ -22,11 +48,147 @@ fun HomeScreen( paddingValues: PaddingValues, modifier: Modifier = Modifier, ) { - Text( - text = "Home Screen", - style = HsLinkTheme.typography.body_16Normal, - color = HsLinkTheme.colors.SkyBlue100, + LazyColumn( modifier = modifier - .padding(paddingValues) - ) -} \ No newline at end of file + .fillMaxSize() + .background(color = HsLinkTheme.colors.Common) + .padding(paddingValues), + ) { + item { + HsLinkTopBar( + modifier = Modifier, + title = { + Image( + painter = painterResource(id = R.drawable.img_home_logo), + contentDescription = null, + modifier = Modifier + .height(48.dp) + .width(92.dp), + contentScale = ContentScale.FillBounds, + ) + }, + rightIconFirst = null, + rightIconSecond = null, + leftIcon = null + ) + } + + item { + HomeCarousel( + pagerImages = listOf( + "https://cdn.edujin.co.kr/news/photo/202209/39788_81397_67.png", + "image2", + "image3" + ), + ) + } + + item { + Spacer(modifier = Modifier.height(32.dp)) + + HomeContentField( + mainText = "멘토링 신청", + subText = "한성선배님께 멘토링을\n신청해보세요!", + ) + } + + item { + Spacer(modifier = Modifier.height(16.dp)) + + HomeCardItem( + userName = "송효재", + userMajor = "회계재무경영", + userInfo = "구직중,졸업", + modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp) + ) + } + + item { + Spacer(modifier = Modifier.height(40.dp)) + + HomeContentField( + mainText = "인기 게시글", + subText = "실시간 인기 게시글을\n확인해보세요!", + ) + } + + item { + Spacer(modifier = Modifier.height(16.dp)) + + HomePostContainer( + posts = listOf( + HomePost( + id = "1", + title = "2026 카카오 신입 공채", + route = "route1" + ), + HomePost( + id = "2", + title = "선배가 알려주는 이력서 꿀팁", + route = "route2" + ), + HomePost( + id = "3", + title = "선배가 알려주는 이력서 꿀팁", + route = "route3" + ), + HomePost( + id = "4", + title = "선배가 알려주는 이력서 꿀팁", + route = "route4" + ), + HomePost( + id = "5", + title = "선배가 알려주는 이력서 꿀팁", + route = "route5" + ) + + ), + onPostClick = {}, + modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp) + ) + } + + item { + Spacer(modifier = Modifier.height(40.dp)) + + HomeContentField( + mainText = "최신 홍보 게시글", + subText = "실시간 홍보 게시물을\n확인해보세요!", + ) + } + + item { + HomeCardItem( + userName = "한성대학생이 카카오에 취직하는 가장 확실한 방법을 알려드립니다.", + userMajor = "한성대학교에 다니는 후배들이 취업고민이 많을 것 같은디,테스트용입니다", + userInfo = "08학번 성규현", + modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp) + ) + } + + item { + Spacer(modifier = Modifier.height(36.dp)) + + HorizontalDivider( + thickness = 1.dp, + color = HsLinkTheme.colors.Grey100 + ) + } + + item { + HomeBottomContent( + onClick = { }, + ) + } + + item { + HorizontalDivider( + thickness = 1.dp, + color = HsLinkTheme.colors.Grey100 + ) + } + + } + +} diff --git a/app/src/main/java/com/hsLink/hslink/presentation/home/component/HomeBottomContent.kt b/app/src/main/java/com/hsLink/hslink/presentation/home/component/HomeBottomContent.kt new file mode 100644 index 0000000..86d40a4 --- /dev/null +++ b/app/src/main/java/com/hsLink/hslink/presentation/home/component/HomeBottomContent.kt @@ -0,0 +1,67 @@ +package com.hsLink.hslink.presentation.home.component + +import androidx.compose.foundation.Image +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +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.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.painterResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.hsLink.hslink.R +import com.hsLink.hslink.core.designsystem.theme.HsLinkTheme +import com.hsLink.hslink.core.util.noRippleClickable + +@Preview(showBackground = true) +@Composable +private fun HomeBottomContentPreview() { + HsLinkTheme { + HomeBottomContent( + onClick = {}, + ) + } +} + +@Composable +fun HomeBottomContent( + onClick: () -> Unit, + modifier: Modifier = Modifier, +) { + Column( + modifier = modifier + .fillMaxWidth() + .padding(horizontal = 24.dp, vertical = 32.dp), + horizontalAlignment = Alignment.Start, + verticalArrangement = Arrangement.spacedBy(4.dp) + ) { + Image( + painter = painterResource(id = R.drawable.img_home_logo), + contentDescription = null, + modifier = Modifier + .height(48.dp) + .width(92.dp), + ) + Spacer(modifier = Modifier.height(8.dp)) + + Text( + text = "이용약관 및 개인정보 취급방침", + color = HsLinkTheme.colors.Grey400, + style = HsLinkTheme.typography.btm_M, + modifier = Modifier.noRippleClickable(onClick = onClick) + ) + Text( + text = "리뷰운영정책", + color = HsLinkTheme.colors.Grey400, + style = HsLinkTheme.typography.btm_M, + modifier = Modifier.noRippleClickable(onClick = onClick) + ) + + } +} \ No newline at end of file diff --git a/app/src/main/java/com/hsLink/hslink/presentation/home/component/HomeCardItem.kt b/app/src/main/java/com/hsLink/hslink/presentation/home/component/HomeCardItem.kt new file mode 100644 index 0000000..6a4cdee --- /dev/null +++ b/app/src/main/java/com/hsLink/hslink/presentation/home/component/HomeCardItem.kt @@ -0,0 +1,91 @@ +package com.hsLink.hslink.presentation.home.component + +import androidx.compose.foundation.border +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.padding +import androidx.compose.foundation.shape.RoundedCornerShape +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.graphics.vector.ImageVector +import androidx.compose.ui.res.vectorResource +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.hsLink.hslink.R +import com.hsLink.hslink.core.designsystem.theme.HsLinkTheme + +@Preview(showBackground = true) +@Composable +private fun PreviewHomeCardItem() { + HsLinkTheme { + HomeCardItem( + userName = "John Doe", + userMajor = "Computer Science", + userInfo = "Senior at XYZ University", + modifier = Modifier + ) + } +} + +@Composable +fun HomeCardItem( + userName: String, + userMajor: String, + userInfo: String, + modifier: Modifier = Modifier, +) { + Row( + modifier = modifier + .fillMaxWidth() + .border( + width = 1.dp, + color = HsLinkTheme.colors.Grey100, + shape = RoundedCornerShape(8.dp) + ) + .padding(16.dp), + verticalAlignment = Alignment.CenterVertically, + ) { + Column( + modifier = Modifier.weight(1f), + verticalArrangement = Arrangement.spacedBy(4.dp) + ) { + Text( + text = userName, + color = HsLinkTheme.colors.Grey700, + style = HsLinkTheme.typography.title_16Strong, + maxLines = 1, + overflow = TextOverflow.Ellipsis + ) + + Text( + text = userMajor, + color = HsLinkTheme.colors.Grey700, + style = HsLinkTheme.typography.body_14Normal, + maxLines = 1, + overflow = TextOverflow.Ellipsis + ) + + Text( + text = userInfo, + color = HsLinkTheme.colors.Grey400, + style = HsLinkTheme.typography.caption_12Normal, maxLines = 1, + overflow = TextOverflow.Ellipsis + ) + } + + Spacer(modifier = Modifier.weight(1f)) + + Icon( + imageVector = ImageVector.vectorResource(id = R.drawable.ic_home_arrow_right), + contentDescription = null, + tint = HsLinkTheme.colors.Grey200 + ) + } +} \ No newline at end of file diff --git a/app/src/main/java/com/hsLink/hslink/presentation/home/component/HomeCarousel.kt b/app/src/main/java/com/hsLink/hslink/presentation/home/component/HomeCarousel.kt new file mode 100644 index 0000000..3bdd183 --- /dev/null +++ b/app/src/main/java/com/hsLink/hslink/presentation/home/component/HomeCarousel.kt @@ -0,0 +1,89 @@ +package com.hsLink.hslink.presentation.home.component + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.pager.HorizontalPager +import androidx.compose.foundation.pager.PagerState +import androidx.compose.foundation.pager.rememberPagerState +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.layout.ContentScale +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import coil.compose.AsyncImage +import com.hsLink.hslink.core.designsystem.theme.HsLinkTheme + +@Preview(showBackground = true) +@Composable +private fun HomeCarouselPreview() { + HsLinkTheme { + HomeCarousel( + pagerImages = listOf( + "https://example.com/image1.jpg", + "https://example.com/image2.jpg", + "https://example.com/image3.jpg" + ), + modifier = Modifier + ) + } +} + +@Composable +fun HomeCarousel( + pagerImages: List, + modifier: Modifier = Modifier, +) { + val pagerState = rememberPagerState(pageCount = { pagerImages.size }) + + Box( + modifier = modifier.fillMaxWidth() + ) { + HorizontalPager( + state = pagerState, + modifier = Modifier + .fillMaxWidth() + .height(180.dp) + ) { page -> + AsyncImage( + model = pagerImages[page], + contentDescription = "Pager Image $page", + contentScale = ContentScale.FillBounds, + ) + } + + HomeCarouselIndicator( + pagerState = pagerState, + modifier = Modifier + .align(Alignment.BottomEnd) + .padding(bottom = 8.dp, end = 16.dp) + ) + } +} + +@Composable +private fun HomeCarouselIndicator( + pagerState: PagerState, + modifier: Modifier = Modifier, +) { + Row( + modifier = modifier + .background( + color = HsLinkTheme.colors.Grey400, + shape = RoundedCornerShape(12.dp) + ) + .padding(horizontal = 8.dp, vertical = 4.dp) + ) { + Text( + text = "${pagerState.currentPage + 1} / ${pagerState.pageCount}", + color = HsLinkTheme.colors.Grey100, + style = HsLinkTheme.typography.caption_12Normal + ) + } +} \ No newline at end of file diff --git a/app/src/main/java/com/hsLink/hslink/presentation/home/component/HomeContentField.kt b/app/src/main/java/com/hsLink/hslink/presentation/home/component/HomeContentField.kt new file mode 100644 index 0000000..2f38e7b --- /dev/null +++ b/app/src/main/java/com/hsLink/hslink/presentation/home/component/HomeContentField.kt @@ -0,0 +1,74 @@ +package com.hsLink.hslink.presentation.home.component + +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.padding +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.res.vectorResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.hsLink.hslink.R +import com.hsLink.hslink.core.designsystem.theme.HsLinkTheme + +@Composable +fun HomeContentField( + mainText: String, + subText: String, + modifier: Modifier = Modifier, +) { + Column( + modifier = modifier + .fillMaxWidth() + .padding(horizontal = 20.dp), + verticalArrangement = Arrangement.spacedBy(4.dp) + ) { + Text( + text = mainText, + color = HsLinkTheme.colors.DeepBlue500, + style = HsLinkTheme.typography.title_14Strong + ) + Row( + modifier = Modifier + .fillMaxWidth(), + ) { + Text( + text = subText, + color = HsLinkTheme.colors.Grey700, + style = HsLinkTheme.typography.title_20Strong + ) + + Spacer(modifier = Modifier.weight(1F)) + + Text( + text = stringResource(id = R.string.home_content_field_all), + color = HsLinkTheme.colors.DeepBlue500, + style = HsLinkTheme.typography.btm_M + ) + + Icon( + imageVector = ImageVector.vectorResource(id = R.drawable.ic_home_textall_arrow), + contentDescription = null, + tint = HsLinkTheme.colors.DeepBlue500, + ) + } + } +} + +@Preview(showBackground = true) +@Composable +private fun HomeContentFieldPreview() { + HsLinkTheme { + HomeContentField( + mainText = "Main Text", + subText = "Sub Text", + ) + } +} \ No newline at end of file diff --git a/app/src/main/java/com/hsLink/hslink/presentation/home/component/HomePostContainer.kt b/app/src/main/java/com/hsLink/hslink/presentation/home/component/HomePostContainer.kt new file mode 100644 index 0000000..9ccb464 --- /dev/null +++ b/app/src/main/java/com/hsLink/hslink/presentation/home/component/HomePostContainer.kt @@ -0,0 +1,103 @@ +package com.hsLink.hslink.presentation.home.component + +import androidx.compose.foundation.border +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.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.HorizontalDivider +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.res.vectorResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.hsLink.hslink.R +import com.hsLink.hslink.core.designsystem.theme.HsLinkTheme +import com.hsLink.hslink.core.util.noRippleClickable + + +@Preview(showBackground = true) +@Composable +private fun HomePostContainerPreview() { + HsLinkTheme { + HomePostContainer( + posts = listOf( + HomePost(id = "1", title = "2026 카카오 신입 공채", route = "route1"), + HomePost(id = "2", title = "선배가 알려주는 이력서 꿀팁", route = "route2") + ), + onPostClick = {} + ) + } +} + +data class HomePost( + val id: String, + val title: String, + val route: String, +) + +@Composable +fun HomePostContainer( + posts: List, + onPostClick: (HomePost) -> Unit, + modifier: Modifier = Modifier, +) { + Column( + modifier = modifier + .fillMaxWidth() + .border( + width = 1.dp, + color = HsLinkTheme.colors.Grey100, + shape = RoundedCornerShape(8.dp) + ) + .padding(horizontal = 12.dp, vertical = 4.dp) + ) { + posts.forEachIndexed { index, post -> + HomePostContent( + postTitle = post.title, + onClick = { onPostClick(post) } + ) + + if (index < posts.lastIndex) { + HorizontalDivider( + thickness = 1.dp, + color = HsLinkTheme.colors.Grey100 + ) + } + } + } +} + +@Composable +private fun HomePostContent( + postTitle: String, + onClick: () -> Unit, + modifier: Modifier = Modifier, +) { + Row( + modifier = modifier + .fillMaxWidth() + .noRippleClickable(onClick = onClick) + .padding(vertical = 13.dp, horizontal = 16.dp) + ) { + Text( + text = postTitle, + color = HsLinkTheme.colors.Grey700, + style = HsLinkTheme.typography.title_16Strong + ) + + Spacer(modifier = Modifier.weight(1f)) + + Icon( + imageVector = ImageVector.vectorResource(id = R.drawable.ic_home_post_arrow), + contentDescription = null, + tint = Color.Unspecified + ) + } +} \ No newline at end of file diff --git a/app/src/main/res/drawable/ic_home_arrow_right.xml b/app/src/main/res/drawable/ic_home_arrow_right.xml new file mode 100644 index 0000000..3bd8317 --- /dev/null +++ b/app/src/main/res/drawable/ic_home_arrow_right.xml @@ -0,0 +1,9 @@ + + + diff --git a/app/src/main/res/drawable/ic_home_post_arrow.xml b/app/src/main/res/drawable/ic_home_post_arrow.xml new file mode 100644 index 0000000..cc1ec88 --- /dev/null +++ b/app/src/main/res/drawable/ic_home_post_arrow.xml @@ -0,0 +1,9 @@ + + + diff --git a/app/src/main/res/drawable/ic_home_textall_arrow.xml b/app/src/main/res/drawable/ic_home_textall_arrow.xml new file mode 100644 index 0000000..a5e5ff2 --- /dev/null +++ b/app/src/main/res/drawable/ic_home_textall_arrow.xml @@ -0,0 +1,9 @@ + + + diff --git a/app/src/main/res/drawable/img_home_logo.png b/app/src/main/res/drawable/img_home_logo.png new file mode 100644 index 0000000..c69773d Binary files /dev/null and b/app/src/main/res/drawable/img_home_logo.png differ diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 6402b20..8dfb7e0 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -6,4 +6,7 @@ community mypage + + 전체보기 + \ No newline at end of file