feat(widget): 캐릭터 채팅 썸네일 컴포넌트를 추가한다

This commit is contained in:
2026-05-21 11:22:23 +09:00
parent c58f03be08
commit c32f9cdd9f
15 changed files with 1164 additions and 0 deletions

View File

@@ -0,0 +1,19 @@
package kr.co.vividnext.sodalive.v2.widget.characterchatthumbnail
import java.util.Locale
import kotlin.math.floor
object CharacterChatCountFormatter {
fun format(count: Long): String {
val safeCount = count.coerceAtLeast(0)
if (safeCount < 10_000) return safeCount.toString()
if (safeCount >= 100_000) return "${safeCount / 10_000}"
val value = safeCount / 10_000.0
return if (safeCount % 10_000L == 0L) {
"${safeCount / 10_000}"
} else {
String.format(Locale.KOREAN, "%.1f만", floor(value * 10) / 10)
}
}
}

View File

@@ -0,0 +1,15 @@
package kr.co.vividnext.sodalive.v2.widget.characterchatthumbnail
data class CharacterChatThumbnailItem(
val characterId: Long,
val imageUrl: String,
val characterName: String,
val characterDescription: String,
val chatMessageCount: Long,
val hasOriginal: Boolean,
val originalTitle: String
) {
val shouldShowOriginalTitle: Boolean = hasOriginal
val shouldShowChatCountBadge: Boolean = chatMessageCount >= 100
}

View File

@@ -0,0 +1,72 @@
package kr.co.vividnext.sodalive.v2.widget.characterchatthumbnail
import android.content.Context
import android.graphics.Outline
import android.util.AttributeSet
import android.view.View
import android.view.ViewOutlineProvider
import android.widget.FrameLayout
import android.widget.ImageView
import android.widget.TextView
import kr.co.vividnext.sodalive.R
class CharacterChatThumbnailView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr) {
private var image: ImageView? = null
private var chatCountBadge: View? = null
private var chatCountText: TextView? = null
private var characterNameText: TextView? = null
private var characterDescriptionText: TextView? = null
private var originalTitleText: TextView? = null
private var currentItem: CharacterChatThumbnailItem? = null
private var clickListener: ((CharacterChatThumbnailItem) -> Unit)? = null
override fun onFinishInflate() {
super.onFinishInflate()
image = findViewById(R.id.iv_character_chat_thumbnail_image)
chatCountBadge = findViewById(R.id.ll_character_chat_count_badge)
chatCountText = findViewById(R.id.tv_character_chat_count)
characterNameText = findViewById(R.id.tv_character_chat_name)
characterDescriptionText = findViewById(R.id.tv_character_chat_description)
originalTitleText = findViewById(R.id.tv_character_chat_original_title)
clipToOutline = true
outlineProvider = roundedCardOutlineProvider()
}
fun bind(item: CharacterChatThumbnailItem) {
currentItem = item
requireNotNull(chatCountText).text = CharacterChatCountFormatter.format(item.chatMessageCount)
requireNotNull(characterNameText).text = item.characterName
requireNotNull(characterDescriptionText).text = item.characterDescription
requireNotNull(originalTitleText).apply {
text = item.originalTitle
visibility = if (item.shouldShowOriginalTitle) View.VISIBLE else View.INVISIBLE
}
requireNotNull(chatCountBadge).visibility = if (item.shouldShowChatCountBadge) View.VISIBLE else View.GONE
applyClickState(item)
}
fun imageView(): ImageView = requireNotNull(image)
fun setOnCharacterClick(listener: ((CharacterChatThumbnailItem) -> Unit)?) {
clickListener = listener
currentItem?.let(::applyClickState)
}
private fun applyClickState(item: CharacterChatThumbnailItem) {
val listener = clickListener
setOnClickListener(if (listener == null) null else View.OnClickListener { listener(item) })
isClickable = listener != null
}
private fun roundedCardOutlineProvider() = object : ViewOutlineProvider() {
override fun getOutline(view: View, outline: Outline) {
val radius = resources.getDimension(R.dimen.radius_14)
outline.setRoundRect(0, 0, view.width, view.height, radius)
}
}
}

View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/color_99000000" />
<corners android:radius="@dimen/radius_4" />
</shape>

View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/gray_900" />
<corners android:radius="@dimen/radius_14" />
</shape>

View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="270"
android:endColor="#1F1F1F"
android:startColor="#001F1F1F" />
</shape>

View File

@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="18dp"
android:height="18dp"
android:viewportWidth="18"
android:viewportHeight="18">
<path
android:fillColor="@color/gray_100"
android:pathData="M9,2.5C5.13,2.5 2,5.14 2,8.4C2,10.25 3.01,11.9 4.6,12.98V15C4.6,15.38 5.02,15.6 5.34,15.4L7.53,14.02C8,14.1 8.49,14.14 9,14.14C12.87,14.14 16,11.5 16,8.24C16,5.1 12.87,2.5 9,2.5ZM5.92,8.38C5.92,7.9 6.31,7.51 6.79,7.51C7.27,7.51 7.66,7.9 7.66,8.38C7.66,8.86 7.27,9.25 6.79,9.25C6.31,9.25 5.92,8.86 5.92,8.38ZM8.13,8.38C8.13,7.9 8.52,7.51 9,7.51C9.48,7.51 9.87,7.9 9.87,8.38C9.87,8.86 9.48,9.25 9,9.25C8.52,9.25 8.13,8.86 8.13,8.38ZM10.34,8.38C10.34,7.9 10.73,7.51 11.21,7.51C11.69,7.51 12.08,7.9 12.08,8.38C12.08,8.86 11.69,9.25 11.21,9.25C10.73,9.25 10.34,8.86 10.34,8.38Z" />
</vector>

View File

@@ -0,0 +1,100 @@
<?xml version="1.0" encoding="utf-8"?>
<kr.co.vividnext.sodalive.v2.widget.characterchatthumbnail.CharacterChatThumbnailView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="185dp"
android:layout_height="wrap_content"
android:background="@drawable/bg_character_chat_thumbnail"
android:clipToOutline="true">
<ImageView
android:id="@+id/iv_character_chat_thumbnail_image"
android:layout_width="185dp"
android:layout_height="185dp"
android:contentDescription="@null"
android:scaleType="centerCrop"
tools:src="@drawable/ic_launcher_background" />
<View
android:layout_width="185dp"
android:layout_height="185dp"
android:background="@drawable/bg_character_chat_thumbnail_dim" />
<LinearLayout
android:id="@+id/ll_character_chat_count_badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_8"
android:layout_marginTop="@dimen/spacing_8"
android:background="@drawable/bg_character_chat_count_badge"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingHorizontal="@dimen/spacing_4"
android:paddingVertical="2dp">
<ImageView
android:id="@+id/iv_character_chat_count_icon"
android:layout_width="18dp"
android:layout_height="18dp"
android:contentDescription="@null"
android:src="@drawable/ic_chat_message_count" />
<TextView
android:id="@+id/tv_character_chat_count"
style="@style/Typography.Body6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="2dp"
android:ellipsize="end"
android:includeFontPadding="false"
android:lineSpacingMultiplier="1.45"
android:maxLines="1"
android:textColor="@color/gray_100"
tools:text="1.4만" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll_character_chat_text_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="@dimen/spacing_12"
android:layout_marginBottom="@dimen/spacing_12"
android:layout_marginTop="176dp"
android:orientation="vertical">
<TextView
android:id="@+id/tv_character_chat_name"
style="@style/Typography.Heading3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:includeFontPadding="false"
android:maxLines="1"
android:textColor="@color/white"
tools:text="캐릭터 이름" />
<TextView
android:id="@+id/tv_character_chat_description"
style="@style/Typography.Body5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/spacing_6"
android:ellipsize="end"
android:includeFontPadding="false"
android:lineSpacingMultiplier="1.45"
android:maxLines="2"
android:textColor="@color/white"
tools:text="캐릭터 소개가 들어가는 부분입니다 넘어가는 경우 ...처리" />
<TextView
android:id="@+id/tv_character_chat_original_title"
style="@style/Typography.Caption2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/spacing_6"
android:ellipsize="end"
android:includeFontPadding="false"
android:maxLines="1"
android:textColor="@color/soda_300"
tools:text="작품 이름" />
</LinearLayout>
</kr.co.vividnext.sodalive.v2.widget.characterchatthumbnail.CharacterChatThumbnailView>