라이브 탭 - 라이브 중 아이템 UI 변경

app/src/main/java/kr/co/vividnext/sodalive/live/GetRoomListResponse.kt

@@ -14,6 +14,7 @@ data class GetRoomListResponse(
     @SerializedName("price") val price: Int,
     @SerializedName("tags") val tags: List<String>,
     @SerializedName("channelName") val channelName: String?,
+    @SerializedName("creatorProfileImage") val creatorProfileImage: String,
     @SerializedName("creatorNickname") val creatorNickname: String,
     @SerializedName("creatorId") val creatorId: Long,
     @SerializedName("isReservation") val isReservation: Boolean,

app/src/main/java/kr/co/vividnext/sodalive/live/now/LiveNowAdapter.kt

@@ -5,11 +5,12 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import androidx.recyclerview.widget.RecyclerView
-import coil.load
+import coil.transform.CircleCropTransformation
 import coil.transform.RoundedCornersTransformation
 import kr.co.vividnext.sodalive.R
 import kr.co.vividnext.sodalive.databinding.ItemLiveNowBinding
 import kr.co.vividnext.sodalive.extensions.dpToPx
+import kr.co.vividnext.sodalive.extensions.loadUrl
 import kr.co.vividnext.sodalive.live.GetRoomListResponse
 
 class LiveNowAdapter(
@@ -23,12 +24,11 @@ class LiveNowAdapter(
     ) : RecyclerView.ViewHolder(binding.root) {
 
         fun bind(item: GetRoomListResponse) {
-            binding.ivCover.load(item.coverImageUrl) {
+            binding.ivCover.loadUrl(item.coverImageUrl) {
                 crossfade(true)
                 placeholder(R.drawable.ic_place_holder)
                 transformations(RoundedCornersTransformation(4.7f.dpToPx()))
             }
-            binding.tvManager.text = item.creatorNickname
             binding.tvNumberOfMembers.text = "${item.numberOfParticipate}"
             binding.ivLock.visibility = if (item.isPrivateRoom) {
                 View.VISIBLE
@@ -44,6 +44,21 @@ class LiveNowAdapter(
                 binding.tvPrice.setBackgroundResource(R.drawable.bg_round_corner_10_643bc8)
             }
 
+            if (item.tags.isNotEmpty()) {
+                binding.tvTags.visibility = View.VISIBLE
+                binding.tvTags.text = item.tags.joinToString(" ") { "#$it" }
+            } else {
+                binding.tvTags.visibility = View.GONE
+            }
+
+            binding.tvTitle.text = item.title
+            binding.tvNickname.text = item.creatorNickname
+            binding.ivProfile.loadUrl(item.creatorProfileImage) {
+                crossfade(true)
+                placeholder(R.drawable.ic_place_holder)
+                transformations(CircleCropTransformation())
+            }
+
             binding.root.setOnClickListener { onClick(item) }
         }
     }

app/src/main/res/drawable/bg_round_corner_13_3_333333.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/color_333333" />
+    <corners android:radius="13.3dp" />
+    <stroke
+        android:width="1dp"
+        android:color="@color/color_333333" />
+</shape>

app/src/main/res/layout/item_live_now.xml

@@ -2,16 +2,17 @@
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="133.3dp"
+    android:layout_width="wrap_content"
-    android:layout_height="176.7dp"
+    android:layout_height="wrap_content">
-    android:background="@color/black">
 
     <ImageView
         android:id="@+id/iv_cover"
-        android:layout_width="match_parent"
+        android:layout_width="133.3dp"
-        android:layout_height="match_parent"
+        android:layout_height="176.7dp"
         android:contentDescription="@null"
         android:scaleType="centerCrop"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
         tools:src="@drawable/ic_launcher_background" />
 
     <View
@@ -55,30 +56,80 @@
         android:id="@+id/tv_number_of_members"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_marginStart="6.7dp"
+        android:layout_marginEnd="6.7dp"
         android:layout_marginBottom="6.7dp"
+        android:background="@drawable/bg_round_corner_13_3_333333"
         android:gravity="center_vertical|start"
+        android:paddingHorizontal="5.3dp"
+        android:paddingVertical="2.7dp"
         android:textColor="@color/white"
         android:textSize="13.3sp"
         app:drawableStartCompat="@drawable/ic_avatar"
-        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintBottom_toBottomOf="@+id/iv_cover"
-        app:layout_constraintEnd_toStartOf="@+id/tv_manager"
+        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
         tools:text="12" />
 
     <TextView
-        android:id="@+id/tv_manager"
+        android:id="@+id/tv_title"
-        android:layout_width="wrap_content"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_marginEnd="6.7dp"
+        android:layout_marginTop="8dp"
-        android:layout_marginBottom="6.7dp"
         android:ellipsize="end"
-        android:ems="4"
+        android:fontFamily="@font/gmarket_sans_medium"
-        android:gravity="end"
+        android:maxLines="2"
-        android:maxLines="1"
+        android:textColor="@color/color_eeeeee"
-        android:textColor="@color/white"
+        android:textSize="12sp"
-        android:textSize="13.3sp"
+        app:layout_constraintEnd_toEndOf="@+id/iv_cover"
-        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="@+id/iv_cover"
-        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/iv_cover"
-        tools:text="자입니다sss" />
+        tools:text="test" />
+
+    <LinearLayout
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintEnd_toEndOf="@+id/tv_title"
+        app:layout_constraintStart_toStartOf="@+id/tv_title"
+        app:layout_constraintTop_toBottomOf="@+id/tv_title">
+
+        <TextView
+            android:id="@+id/tv_tags"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="5.3dp"
+            android:fontFamily="@font/gmarket_sans_medium"
+            android:textColor="@color/color_3bb9f1"
+            android:textSize="11sp"
+            app:layout_constraintEnd_toEndOf="@+id/tv_title"
+            app:layout_constraintStart_toStartOf="@+id/tv_title"
+            app:layout_constraintTop_toBottomOf="@+id/tv_title"
+            tools:text="#팬미팅 #힐링" />
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="5.3dp"
+            android:gravity="center_vertical"
+            android:orientation="horizontal"
+            tools:ignore="UseCompoundDrawables">
+
+            <ImageView
+                android:id="@+id/iv_profile"
+                android:layout_width="21.3dp"
+                android:layout_height="21.3dp"
+                android:contentDescription="@null" />
+
+            <TextView
+                android:id="@+id/tv_nickname"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:fontFamily="@font/gmarket_sans_medium"
+                android:layout_marginStart="5.3dp"
+                android:gravity="center_vertical"
+                android:textColor="@color/color_777777"
+                android:textSize="10sp"
+                tools:ignore="SmallSp"
+                tools:text="user8" />
+        </LinearLayout>
+    </LinearLayout>
 </androidx.constraintlayout.widget.ConstraintLayout>