Feature/#111 news notice UI

feature/news/src/main/java/com/teamwable/news/NewsDetailFragment.kt

@@ -0,0 +1,19 @@
+package com.teamwable.news
+
+import androidx.navigation.fragment.navArgs
+import com.teamwable.news.databinding.FragmentNewsDetailBinding
+import com.teamwable.news.model.NewsInfoModel
+import com.teamwable.ui.base.BindingFragment
+
+class NewsDetailFragment : BindingFragment<FragmentNewsDetailBinding>(FragmentNewsDetailBinding::inflate) {
+    private val args: NewsDetailFragmentArgs by navArgs()
+    private val notice: NewsInfoModel by lazy { args.newsInfoModel }
+
+    override fun initView() {
+        receiveResultFromNotice()
+    }
+
+    private fun receiveResultFromNotice() {
+        binding.tvNewsDetail.text = notice.newsText
+    }
+}

feature/news/src/main/java/com/teamwable/news/NewsViewModel.kt

@@ -6,6 +6,7 @@ import com.teamwable.common.uistate.UiState
 import com.teamwable.data.repository.NewsRepository
 import com.teamwable.model.news.NewsMatchModel
 import com.teamwable.model.news.NewsRankModel
+import com.teamwable.news.model.NewsInfoModel
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.asStateFlow
@@ -24,6 +25,17 @@ class NewsViewModel
     private val _rankUiState = MutableStateFlow<UiState<List<NewsRankModel>>>(UiState.Loading)
     val rankUiState = _rankUiState.asStateFlow()
 
+    val dummyNotice = listOf(
+        NewsInfoModel(1, "와블 커뮤니티 업데이트 안내", "본문입니다 본문입니다 본문입니다 본문입니다 본문입니다 본문입니다 본문입니다 본문입니다 본문입니다", "www.11", "2024-01-10 11:47:18"),
+        NewsInfoModel(2, "제목2", "내용2", null, "2024-06-12 20:00:37"),
+        NewsInfoModel(3, "제목3", "내용3", "www.33", "2024-11-22 04:50:26"),
+        NewsInfoModel(4, "제목4", "내용4", "www.33", "2024-11-22 04:50:26"),
+        NewsInfoModel(5, "제목5", "내용5", "www.33", "2024-11-22 04:50:26"),
+        NewsInfoModel(6, "제목6", "내용6", "www.33", "2024-11-22 04:50:26"),
+        NewsInfoModel(7, "제목7", "내용7", "www.33", "2024-11-22 04:50:26"),
+        NewsInfoModel(8, "제목8", "내용8", "www.33", "2024-11-22 04:50:26"),
+    )
+
     init {
         getGameType()
     }

feature/news/src/main/java/com/teamwable/news/model/NewsInfoModel.kt

@@ -1,9 +1,13 @@
 package com.teamwable.news.model
 
+import android.os.Parcelable
+import kotlinx.parcelize.Parcelize
+
+@Parcelize
 data class NewsInfoModel(
     val newsId: Int,
     val newsTitle: String,
     val newsText: String,
-    val newsImage: String,
+    val newsImage: String?,
     val time: String,
-)
+) : Parcelable

feature/news/src/main/java/com/teamwable/news/notice/NewsNoticeFragment.kt

@@ -1,12 +1,38 @@
 package com.teamwable.news.notice
 
+import android.os.Build
+import androidx.annotation.RequiresApi
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.navigation.fragment.findNavController
+import com.teamwable.designsystem.theme.WableTheme
+import com.teamwable.news.NewsFragmentDirections
 import com.teamwable.news.databinding.FragmentNewsNoticeBinding
+import com.teamwable.news.model.NewsInfoModel
 import com.teamwable.ui.base.BindingFragment
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
 class NewsNoticeFragment : BindingFragment<FragmentNewsNoticeBinding>(FragmentNewsNoticeBinding::inflate) {
+    @RequiresApi(Build.VERSION_CODES.O)
     override fun initView() {
+        initComposeView()
+    }
+
+    @RequiresApi(Build.VERSION_CODES.O)
+    private fun initComposeView() {
+        binding.composeNewsNotice.apply {
+            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+            setContent {
+                WableTheme {
+                    NewsNoticeRoute(navigateToDetail = { notice -> navigateToDetail(notice) })
+                }
+            }
+        }
+    }
 
+    private fun navigateToDetail(notice: NewsInfoModel) {
+        val parentNavController = requireParentFragment().findNavController()
+        val action = NewsFragmentDirections.actionNavigationNewsToNavigationNewsDetail(notice)
+        parentNavController.navigate(action)
     }
 }

feature/news/src/main/java/com/teamwable/news/notice/NewsNoticeItem.kt

@@ -0,0 +1,44 @@
+package com.teamwable.news.notice
+
+import android.content.Context
+import android.os.Build
+import androidx.annotation.RequiresApi
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+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.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.teamwable.designsystem.theme.WableTheme
+import com.teamwable.news.model.NewsInfoModel
+import com.teamwable.ui.util.CalculateTime
+
+@RequiresApi(Build.VERSION_CODES.O)
+@Composable
+fun NewsNoticeItem(
+    context: Context,
+    data: NewsInfoModel,
+    navigateToDetail: (NewsInfoModel) -> Unit
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(WableTheme.colors.white)
+            .clickable { navigateToDetail(data) }
+            .padding(vertical = 12.dp, horizontal = 20.dp)
+    ) {
+        Row {
+            Text(text = data.newsTitle, style = WableTheme.typography.body01)
+            Spacer(modifier = Modifier.weight(1f))
+            Text(text = CalculateTime().getCalculateTime(context, data.time), color = WableTheme.colors.gray500, style = WableTheme.typography.caption04)
+        }
+        Spacer(modifier = Modifier.height(2.dp))
+        Text(text = data.newsText, color = WableTheme.colors.gray600, maxLines = 2, style = WableTheme.typography.body04)
+    }
+}

feature/news/src/main/java/com/teamwable/news/notice/NewsNoticeRoute.kt

@@ -0,0 +1,70 @@
+package com.teamwable.news.notice
+
+import android.content.Context
+import android.os.Build
+import androidx.annotation.RequiresApi
+import androidx.annotation.StringRes
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.teamwable.designsystem.theme.WableTheme
+import com.teamwable.news.NewsViewModel
+import com.teamwable.news.R
+import com.teamwable.news.model.NewsInfoModel
+
+@RequiresApi(Build.VERSION_CODES.O)
+@Composable
+internal fun NewsNoticeRoute(
+    viewModel: NewsViewModel = hiltViewModel(),
+    navigateToDetail: (NewsInfoModel) -> Unit
+) {
+    val context = LocalContext.current
+
+    viewModel.dummyNotice.apply {
+        if (this.isNotEmpty()) {
+            NewsNoticeScreen(context = context, notices = this, navigateToDetail = navigateToDetail)
+        } else {
+            NewsNoticeEmptyScreen(R.string.tv_news_notice_empty)
+        }
+    }
+}
+
+@RequiresApi(Build.VERSION_CODES.O)
+@Composable
+fun NewsNoticeScreen(
+    context: Context,
+    notices: List<NewsInfoModel>,
+    navigateToDetail: (NewsInfoModel) -> Unit
+) {
+    LazyColumn(modifier = Modifier.fillMaxSize()) {
+        items(items = notices, key = { item -> item.newsId }) { notice ->
+            NewsNoticeItem(context, notice, navigateToDetail)
+            HorizontalDivider(
+                thickness = 1.dp,
+                color = WableTheme.colors.gray200,
+            )
+        }
+    }
+}
+
+@Composable
+fun NewsNoticeEmptyScreen(@StringRes emptyTxt: Int) {
+    Box(modifier = Modifier.fillMaxSize()) {
+        Text(
+            modifier = Modifier.align(Alignment.Center),
+            text = stringResource(emptyTxt),
+            color = WableTheme.colors.gray500,
+            style = WableTheme.typography.body02
+        )
+    }
+}

feature/news/src/main/res/layout/fragment_news.xml

@@ -39,6 +39,7 @@
         android:id="@+id/lottie_news_tab"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
+        android:background="@color/black"
         android:scaleType="fitXY"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"

feature/news/src/main/res/layout/fragment_news_detail.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+    <TextView
+        android:id="@+id/tv_news_detail"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="detail"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

feature/news/src/main/res/layout/fragment_news_notice.xml

@@ -4,10 +4,10 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:text="notice"
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/compose_news_notice"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"

feature/news/src/main/res/navigation/graph_news.xml

@@ -9,5 +9,19 @@
         android:id="@+id/navigation_news"
         android:name="com.teamwable.news.NewsFragment"
         android:label="NewsFragment"
-        tools:layout="@layout/fragment_news" />
+        tools:layout="@layout/fragment_news">
+        <action
+            android:id="@+id/action_navigation_news_to_navigation_news_detail"
+            app:destination="@id/navigation_news_detail" />
+    </fragment>
+
+    <fragment
+        android:id="@+id/navigation_news_detail"
+        android:name="com.teamwable.news.NewsDetailFragment"
+        android:label="NewsDetailFragment"
+        tools:layout="@layout/fragment_news_detail">
+        <argument
+            android:name="newsInfoModel"
+            app:argType="com.teamwable.news.model.NewsInfoModel" />
+    </fragment>
 </navigation>

feature/news/src/main/res/values/strings.xml

@@ -35,4 +35,7 @@
     <!-- fragment_news & fragment_news_notice -->
     <string name="tv_news_tab_notice">공지사항</string>
 
+    <!-- fragment_news_notice -->
+    <string name="tv_news_notice_empty">아직 작성된 공지사항이 없어요.</string>
+
 </resources>