[UI] 미션 제안 상세 화면 UI 작업(compose 활용) (#206)

app/src/main/AndroidManifest.xml

@@ -75,7 +75,11 @@
             android:exported="false" />
 
         <activity
-            android:name=".mission_recommendation.ui.SuggestionDashboardActivity"
+            android:name=".mission_recommendation.ui.dashboard.SuggestionDashboardActivity"
+            android:exported="false" />
+
+        <activity
+            android:name=".mission_recommendation.ui.detail.SuggestionDetailActivity"
             android:exported="false" />
 
     </application>

app/src/main/java/com/lgtm/android/di/NavigatorModule.kt

@@ -1,7 +1,7 @@
 package com.lgtm.android.di
 
-import com.lgtm.android.common_ui.navigator.FakeLgtmNavigator
-import com.lgtm.android.navigator.LgtmNavigator
+import com.lgtm.android.common_ui.navigator.LgtmNavigator
+import com.lgtm.android.navigator.LgtmNavigatorImpl
 import dagger.Binds
 import dagger.Module
 import dagger.hilt.InstallIn
@@ -13,7 +13,7 @@ import dagger.hilt.components.SingletonComponent
 interface NavigatorModule {
     @Binds
     fun bindsLgtmNavigator(
-        lgtmNavigator: LgtmNavigator
-    ): FakeLgtmNavigator
+        lgtmNavigatorImpl: LgtmNavigatorImpl,
+    ): LgtmNavigator
 
 }

app/src/main/java/com/lgtm/android/navigator/LgtmNavigator.kt → app/src/main/java/com/lgtm/android/navigator/LgtmNavigatorImpl.kt

@@ -2,20 +2,22 @@ package com.lgtm.android.navigator
 
 import android.content.Context
 import android.content.Intent
+import android.net.Uri
 import com.lgtm.android.auth.ui.SignInActivity
-import com.lgtm.android.common_ui.navigator.FakeLgtmNavigator
+import com.lgtm.android.common_ui.navigator.LgtmNavigator
 import com.lgtm.android.create_mission.CreateMissionActivity
 import com.lgtm.android.main.MainActivity
 import com.lgtm.android.main.notification.NotificationCenterActivity
 import com.lgtm.android.manage_mission.dashboard.DashboardActivity
 import com.lgtm.android.manage_mission.ping_pong_junior.PingPongJuniorActivity
 import com.lgtm.android.mission_detail.MissionDetailActivity
-import com.lgtm.android.mission_recommendation.ui.SuggestionDashboardActivity
+import com.lgtm.android.mission_recommendation.ui.dashboard.SuggestionDashboardActivity
+import com.lgtm.android.mission_recommendation.ui.detail.SuggestionDetailActivity
 import com.lgtm.android.profile.ProfileActivity
 import javax.inject.Inject
 
-class LgtmNavigator @Inject constructor(
-) : FakeLgtmNavigator {
+class LgtmNavigatorImpl @Inject constructor(
+) : LgtmNavigator {
     override fun navigateToSignIn(context: Context) {
         val intent = Intent(context, SignInActivity::class.java)
         context.startActivity(intent)
@@ -64,8 +66,23 @@ class LgtmNavigator @Inject constructor(
         context.startActivity(intent)
     }
 
-    override fun navigateToRecommendationDashboard(context: Context) {
+    override fun navigateToSuggestionDashboard(context: Context) {
         val intent = Intent(context, SuggestionDashboardActivity::class.java)
         context.startActivity(intent)
     }
+
+    override fun navigateToSuggestionDetail(context: Context, suggestionId: Int) {
+        val intent = Intent(context, SuggestionDetailActivity::class.java).apply {
+            putExtra(SuggestionDetailActivity.SUGGESTION_ID, suggestionId)
+        }
+        context.startActivity(intent)
+    }
+
+    override fun openUrlInBrowser(context: Context, url: String) {
+        val intent = Intent(Intent.ACTION_VIEW).apply {
+            data = Uri.parse(url)
+            flags = Intent.FLAG_ACTIVITY_NEW_TASK
+        }
+        context.startActivity(intent)
+    }
 }

common-ui/build.gradle.kts

@@ -8,6 +8,14 @@ plugins {
 
 android {
     namespace = "com.lgtm.android.common_ui"
+
+    buildFeatures {
+        compose = true
+    }
+
+    composeOptions {
+        kotlinCompilerExtensionVersion = libs.versions.kotlin.compiler.get()
+    }
 }
 
 dependencies {
@@ -23,4 +31,16 @@ dependencies {
     implementation(libs.bundles.basic.test)
     implementation(libs.hilt)
     kapt(libs.hilt.kapt)
+
+    //compose
+    val composePlatform = platform(libs.compose.bom)
+    api(composePlatform)
+    api(libs.compose.ui)
+    api(libs.compose.ui.tooling)
+    api(libs.compose.preview)
+    api(libs.compose.activity)
+    api(libs.compose.material)
+    api(libs.compose.foundation)
+    api(libs.compose.constraintlayout)
+    api(libs.compose.appcompat.theme)
 }

common-ui/src/main/java/com/lgtm/android/common_ui/adapter/MissionSuggestionAdapter.kt

@@ -4,19 +4,29 @@ import android.view.ViewGroup
 import androidx.recyclerview.widget.ListAdapter
 import com.lgtm.android.common_ui.util.ItemDiffCallback
 import com.lgtm.android.common_ui.viewholder.MissionSuggestionBaseViewHolder
+import com.lgtm.android.common_ui.viewholder.MissionSuggestionContentViewHolder
 import com.lgtm.android.common_ui.viewholder.getSuggestionViewHolder
 import com.lgtm.domain.mission_suggestion.SuggestionContent
 import com.lgtm.domain.mission_suggestion.SuggestionViewType
 
-class MissionSuggestionAdapter: ListAdapter<SuggestionContent, MissionSuggestionBaseViewHolder>(
+class MissionSuggestionAdapter(
+    private val onSuggestionClickListener: (Int) -> Unit
+): ListAdapter<SuggestionContent, MissionSuggestionBaseViewHolder>(
     ItemDiffCallback<SuggestionContent>(
         onContentsTheSame = { old, new -> old == new },
         onItemsTheSame = { old, new -> old == new }
     )
 ) {
 
     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MissionSuggestionBaseViewHolder {
-        return getSuggestionViewHolder(parent, SuggestionViewType.getViewTypeByOrdinal(viewType))
+        val viewHolder = getSuggestionViewHolder(parent, SuggestionViewType.getViewTypeByOrdinal(viewType))
+
+        when(viewType) {
+            SuggestionViewType.CONTENT.ordinal -> setOnSuggestionClickListener(viewHolder)
+            else -> Unit
+        }
+
+        return viewHolder
     }
 
     override fun onBindViewHolder(holder: MissionSuggestionBaseViewHolder, position: Int) {
@@ -26,4 +36,9 @@ class MissionSuggestionAdapter: ListAdapter<SuggestionContent, MissionSuggestion
     override fun getItemViewType(position: Int): Int {
         return getItem(position).viewType.ordinal
     }
+
+    private fun setOnSuggestionClickListener(viewHolder: MissionSuggestionBaseViewHolder) {
+        viewHolder as MissionSuggestionContentViewHolder
+        viewHolder.setNavigateToSuggestionDetail(onSuggestionClickListener)
+    }
 }

common-ui/src/main/java/com/lgtm/android/common_ui/base/BaseActivity.kt

@@ -6,8 +6,8 @@ import androidx.annotation.LayoutRes
 import androidx.appcompat.app.AppCompatActivity
 import androidx.databinding.DataBindingUtil
 import androidx.databinding.ViewDataBinding
-import com.lgtm.android.common_ui.navigator.FakeLgtmNavigator
 import com.lgtm.android.common_ui.navigator.LgtmInjector
+import com.lgtm.android.common_ui.navigator.LgtmNavigator
 import dagger.hilt.android.EntryPointAccessors
 
 abstract class BaseActivity<T : ViewDataBinding>(
@@ -16,7 +16,7 @@ abstract class BaseActivity<T : ViewDataBinding>(
     protected lateinit var binding: T
     var viewModel: BaseViewModel? = null
 
-    val lgtmNavigator: FakeLgtmNavigator by lazy {
+    val lgtmNavigator: LgtmNavigator by lazy {
         EntryPointAccessors.fromActivity(
             this, LgtmInjector.LgtmNavigatorInjector::class.java
         ).lgtmNavigator()

common-ui/src/main/java/com/lgtm/android/common_ui/base/BaseComposeActivity.kt

@@ -0,0 +1,46 @@
+package com.lgtm.android.common_ui.base
+
+import android.os.Bundle
+import android.widget.Toast
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.compose.runtime.Composable
+import com.lgtm.android.common_ui.navigator.LgtmInjector
+import com.lgtm.android.common_ui.navigator.LgtmNavigator
+import dagger.hilt.android.EntryPointAccessors
+
+abstract class BaseComposeActivity: ComponentActivity() {
+    var viewModel: BaseViewModel? = null
+
+    val lgtmNavigator: LgtmNavigator by lazy {
+        EntryPointAccessors.fromActivity(
+            this, LgtmInjector.LgtmNavigatorInjector::class.java
+        ).lgtmNavigator()
+    }
+
+    abstract fun initializeViewModel()
+
+    @Composable
+    abstract fun content()
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        initializeViewModel()
+        setContent {
+            content()
+        }
+    }
+
+    fun moveToSignInActivity() {
+        viewModel?.moveToSignIn?.observe(this) {
+            lgtmNavigator.navigateToSignIn(this)
+            finishAffinity()
+        }
+    }
+
+    fun makeToast() {
+        viewModel?.unknownError?.observe(this) {
+            Toast.makeText(this, it, Toast.LENGTH_SHORT).show()
+        }
+    }
+}

common-ui/src/main/java/com/lgtm/android/common_ui/base/BaseFragment.kt

@@ -11,8 +11,8 @@ import androidx.annotation.LayoutRes
 import androidx.databinding.DataBindingUtil
 import androidx.databinding.ViewDataBinding
 import androidx.fragment.app.Fragment
-import com.lgtm.android.common_ui.navigator.FakeLgtmNavigator
 import com.lgtm.android.common_ui.navigator.LgtmInjector
+import com.lgtm.android.common_ui.navigator.LgtmNavigator
 import com.lgtm.android.common_ui.util.KeyboardUtil
 import dagger.hilt.android.EntryPointAccessors
 
@@ -25,7 +25,7 @@ abstract class BaseFragment<T : ViewDataBinding>(
 
     lateinit var viewModel: BaseViewModel
 
-    val lgtmNavigator: FakeLgtmNavigator by lazy {
+    val lgtmNavigator: LgtmNavigator by lazy {
         EntryPointAccessors.fromActivity(
             requireActivity(), LgtmInjector.LgtmNavigatorInjector::class.java
         ).lgtmNavigator()

common-ui/src/main/java/com/lgtm/android/common_ui/components/buttons/BackButton.kt

@@ -0,0 +1,39 @@
+package com.lgtm.android.common_ui.components.buttons
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import com.lgtm.android.common_ui.R
+
+@Composable
+fun BackButton(
+    modifier: Modifier = Modifier
+) {
+    Box(
+        modifier = modifier
+            .border(
+                width = 1.dp,
+                color = colorResource(id = R.color.gray_3),
+                shape = RoundedCornerShape(10.dp)
+            )
+            .background(
+                color = Color.White,
+                shape = RoundedCornerShape(10.dp)
+            )
+            .padding(7.dp)
+    ) {
+        Image(
+            painter = painterResource(id = R.drawable.ic_back),
+            contentDescription = null
+        )
+    }
+}

common-ui/src/main/java/com/lgtm/android/common_ui/components/buttons/LikeButton.kt

@@ -0,0 +1,74 @@
+package com.lgtm.android.common_ui.components.buttons
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.requiredWidth
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.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.graphics.vector.ImageVector
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.lgtm.android.common_ui.R
+import com.lgtm.android.common_ui.theme.body3R
+
+@Composable
+fun LikeButton(
+    likeNum: String,
+    isLiked: Boolean,
+    modifier: Modifier = Modifier
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = modifier
+            .border(
+                width = 1.dp,
+                color = colorResource(id = R.color.gray_2),
+                shape = RoundedCornerShape(10.dp)
+            )
+            .background(
+                color = Color.White,
+                shape = RoundedCornerShape(10.dp)
+            )
+            .padding(
+                horizontal = 6.dp,
+                vertical = 9.dp
+            )
+    ) {
+
+        Text(
+            modifier = Modifier
+                .requiredWidth(30.dp),
+            text = likeNum,
+            textAlign = TextAlign.Center,
+            style = Typography.body3R
+        )
+
+        Image(
+            modifier = Modifier.padding(start = 2.dp),
+            imageVector = ImageVector.vectorResource(id = R.drawable.ic_like_selected),
+            contentDescription = null
+        )
+    }
+}
+
+@Preview
+@Composable
+fun LikeButtonPreview() {
+    MaterialTheme {
+        LikeButton(
+            likeNum = "22",
+            isLiked = true
+        )
+    }
+}