SCRUM-259 design: add home layout

app/build.gradle.kts

@@ -177,6 +177,7 @@ dependencies {
     implementation(libs.androidx.webkit)
 
     testImplementation(libs.junit)
+    testImplementation(libs.kotlinx.coroutines.test)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)
     androidTestImplementation(platform(libs.androidx.compose.bom))

app/src/main/java/com/lyrics/feelin/core/designsystem/component/FeelinTopAppBar.kt

@@ -33,7 +33,7 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.lyrics.feelin.core.designsystem.icon.BackIcon
 import com.lyrics.feelin.core.designsystem.icon.CloseIcon
-import com.lyrics.feelin.core.designsystem.icon.NotificationIcon
+import com.lyrics.feelin.core.designsystem.icon.NotificationIconLight
 import com.lyrics.feelin.core.designsystem.icon.SettingsIconDark
 import com.lyrics.feelin.core.designsystem.icon.SettingsIconLight
 import com.lyrics.feelin.presentation.designsystem.theme.FeelinTheme
@@ -313,7 +313,7 @@ private fun FeelinTransparentTopAppBarPreview() {
                 onBackClick = {},
                 actions = {
                     TopBarIconButton(
-                        imageVector = NotificationIcon,
+                        imageVector = NotificationIconLight,
                         contentDescription = "알림",
                         onClick = {}
                     )
@@ -364,7 +364,7 @@ private fun FeelinTopAppBarDoubleIconPreview() {
                         onClick = {}
                     )
                     TopBarIconButton(
-                        imageVector = NotificationIcon,
+                        imageVector = NotificationIconLight,
                         contentDescription = "알림",
                         tint = LocalFeelinColors.current.gray09,
                         onClick = {}

app/src/main/java/com/lyrics/feelin/core/designsystem/icon/Icons.kt

@@ -33,9 +33,21 @@ val BackIcon: ImageVector
     @Composable
     get() = ImageVector.vectorResource(id = R.drawable.ic_back)
 
-val NotificationIcon: ImageVector
+val NotificationIconLight: ImageVector
     @Composable
-    get() = ImageVector.vectorResource(id = R.drawable.ic_notification)
+    get() = ImageVector.vectorResource(id = R.drawable.notification_light_badge_off)
+
+val NotificationWithBadgeIconLight: ImageVector
+    @Composable
+    get() = ImageVector.vectorResource(id = R.drawable.notification_light_badge_on)
+
+val NotificationIconDark: ImageVector
+    @Composable
+    get() = ImageVector.vectorResource(id = R.drawable.notification_dark_badge_off)
+
+val NotificationWithBadgeIconDark: ImageVector
+    @Composable
+    get() = ImageVector.vectorResource(id = R.drawable.notification_dark_badge_on)
 
 val FeelinTextIcon: ImageVector
     @Composable

app/src/main/java/com/lyrics/feelin/navigation/FeelinDestination.kt

@@ -38,6 +38,13 @@ sealed class FeelinDestination(
 
     // Main Flow (with Bottom Navigation)
     object Home : FeelinDestination(route = "home")
+    object ArtistRecord : FeelinDestination(route = "artist_record/{$ARTIST_ID_ARGUMENT}") {
+        const val ArtistIdArgument = ARTIST_ID_ARGUMENT
+
+        fun createRoute(artistId: Long): String {
+            return "artist_record/$artistId"
+        }
+    }
     object NoteSearch : FeelinDestination(route = "note_search")
     object NoteSearchResult : FeelinDestination(route = "note_search_result")
     object NoteFormCreate : FeelinDestination(route = "note_form/create")

app/src/main/java/com/lyrics/feelin/navigation/FeelinNavHost.kt

@@ -266,10 +266,28 @@ private fun NavGraphBuilder.mainNavGraph(navController: NavHostController) {
     ) {
         navigation(startDestination = FeelinDestination.Home.route, route = FeelinDestination.HomeGraph.route) {
             composable(FeelinDestination.Home.route) {
+                MainScaffold(navController = navController, selectedIndex = 0) {
+                    HomeRoute(navController = navController)
+                }
+            }
+
+            composable(
+                route = FeelinDestination.ArtistRecord.route,
+                arguments = listOf(
+                    navArgument(FeelinDestination.ArtistRecord.ArtistIdArgument) {
+                        type = NavType.LongType
+                    }
+                )
+            ) { backStackEntry ->
+                val arguments = backStackEntry.arguments
+                val artistId = arguments?.getLong(
+                    FeelinDestination.ArtistRecord.ArtistIdArgument
+                ) ?: return@composable
+
                 MainScaffold(navController = navController, selectedIndex = 0) {
                     CommunityMainScreen(
-                        artistName = "필릭스",
-                        onBack = {},
+                        artistName = "아티스트 $artistId",
+                        onBack = { navController.popBackStack() },
                         onNoteClick = { noteId ->
                             navController.navigate(FeelinDestination.NoteDetail.createRoute(noteId))
                         },

app/src/main/java/com/lyrics/feelin/navigation/HomeNavigation.kt

@@ -0,0 +1,31 @@
+package com.lyrics.feelin.navigation
+
+import android.util.Log
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavController
+import com.lyrics.feelin.presentation.view.home.HomeScreen
+
+@Composable
+fun HomeRoute(
+    navController: NavController,
+    modifier: Modifier = Modifier
+) {
+    HomeScreen(
+        modifier = modifier,
+        onBannerClick = { linkUrl ->
+            // FIXME(@이대근): 외부 브라우저로 표시 필요 2026.06.17.
+            navController.navigate(FeelinDestination.InternalWebView.createRoute(linkUrl))
+        },
+        onArtistClick = { artistId ->
+            navController.navigate(FeelinDestination.ArtistRecord.createRoute(artistId))
+        },
+        onNoteClick = { noteId ->
+            navController.navigate(FeelinDestination.NoteDetail.createRoute(noteId))
+        },
+        onNotificationClick = {
+            // TODO(@이대근): 추후 알림 화면 라우트 연결 2026.06.17.
+            Log.d("HomeRoute", "Notification clicked")
+        }
+    )
+}

app/src/main/java/com/lyrics/feelin/presentation/view/community/CommunityMainScreen.kt

@@ -56,7 +56,7 @@ import com.lyrics.feelin.R
 import com.lyrics.feelin.core.designsystem.component.FeelinTopAppBarWithBack
 import com.lyrics.feelin.core.designsystem.component.FeelinTransparentTopAppBar
 import com.lyrics.feelin.core.designsystem.component.TopBarIconButton
-import com.lyrics.feelin.core.designsystem.icon.NotificationIcon
+import com.lyrics.feelin.core.designsystem.icon.NotificationIconLight
 import com.lyrics.feelin.presentation.designsystem.theme.FeelinTheme
 import com.lyrics.feelin.presentation.designsystem.theme.FeelinTypography
 import com.lyrics.feelin.presentation.designsystem.theme.LightGray00
@@ -112,7 +112,7 @@ fun CommunityMainScreen(
                     onBackClick = onBack,
                     actions = {
                         TopBarIconButton(
-                            imageVector = NotificationIcon,
+                            imageVector = NotificationIconLight,
                             contentDescription = "알림",
                             tint = LightGray09, // 투명 상태일 때는 다크모드 미 적용입니다.
                             onClick = {},

app/src/main/java/com/lyrics/feelin/presentation/view/component/artist/ArtistBubbleComponentData.kt

@@ -16,6 +16,7 @@ sealed interface ArtistBubbleComponentData {
     data class HomeFavoriteArtistType(
         override val name: String,
         val imageUrl: String,
+        val id: Long? = null,
     ) : ArtistBubbleComponentData
 
     /** 홈 화면 아티스트 선택 버튼*/

app/src/main/java/com/lyrics/feelin/presentation/view/component/artist/ArtistProfileComponent.kt

@@ -2,6 +2,7 @@ package com.lyrics.feelin.presentation.view.component.artist
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -33,7 +34,11 @@ import com.lyrics.feelin.presentation.designsystem.theme.LightSystemDisable
 import com.lyrics.feelin.presentation.designsystem.theme.LocalFeelinColors
 
 @Composable
-fun ArtistBubbleComponent(state: ArtistBubbleComponentData, modifier: Modifier = Modifier) {
+fun ArtistBubbleComponent(
+    state: ArtistBubbleComponentData,
+    modifier: Modifier = Modifier,
+    onClick: (() -> Unit)? = null,
+) {
     val feelinColors = LocalFeelinColors.current
 
     val imgSize = when (state) {
@@ -63,8 +68,14 @@ fun ArtistBubbleComponent(state: ArtistBubbleComponentData, modifier: Modifier =
         color = if (state is ArtistBubbleComponentData.InitialSelectArtistType) LightGray08 else feelinColors.gray08
     )
 
+    val bubbleModifier = if (onClick != null) {
+        modifier.clickable(onClick = onClick)
+    } else {
+        modifier
+    }
+
     ArtistProfileLayout(
-        modifier = modifier,
+        modifier = bubbleModifier,
         mainContent = {
             if (state is ArtistBubbleComponentData.HomeFavoriteSearchType) {
                 Box(

app/src/main/java/com/lyrics/feelin/presentation/view/component/note/NoteComponent.kt

@@ -44,6 +44,8 @@ fun NoteComponent(
     noteData: NoteComponentData,
     modifier: Modifier = Modifier,
     onClick: ((NoteComponentData) -> Unit)? = null,
+    onLikeClick: ((NoteComponentData) -> Unit)? = null,
+    onBookmarkClick: ((NoteComponentData) -> Unit)? = null,
 ) {
     val feelinColors = LocalFeelinColors.current
 
@@ -132,7 +134,16 @@ fun NoteComponent(
                         }
                     ),
                     contentDescription = "note like icon",
-                    modifier = Modifier.size(24.dp).padding(end = 4.dp),
+                    modifier = Modifier
+                        .size(24.dp)
+                        .padding(end = 4.dp)
+                        .then(
+                            if (onLikeClick != null) {
+                                Modifier.clickable { onLikeClick(noteData) }
+                            } else {
+                                Modifier
+                            }
+                        ),
                     colorFilter = ColorFilter.tint(feelinColors.gray03).takeUnless { noteData.isLiked },
                 )
                 Text(
@@ -162,7 +173,15 @@ fun NoteComponent(
                 ),
                 contentDescription =
                 "note is ${if (noteData.isBookmarked) "" else "not "}bookmarked",
-                modifier = Modifier.size(24.dp),
+                modifier = Modifier
+                    .size(24.dp)
+                    .then(
+                        if (onBookmarkClick != null) {
+                            Modifier.clickable { onBookmarkClick(noteData) }
+                        } else {
+                            Modifier
+                        }
+                    ),
                 colorFilter = ColorFilter.tint(feelinColors.gray03).takeUnless { noteData.isLiked }
             )
         }