feat(creator): 라이브 탭 레이아웃을 추가한다

app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/live/CreatorChannelLiveFragment.kt

@@ -0,0 +1,183 @@
+package kr.co.vividnext.sodalive.v2.creator.channel.live
+
+import android.os.Bundle
+import android.view.View
+import android.widget.Toast
+import androidx.core.view.isVisible
+import androidx.recyclerview.widget.LinearLayoutManager
+import kr.co.vividnext.sodalive.R
+import kr.co.vividnext.sodalive.base.BaseFragment
+import kr.co.vividnext.sodalive.databinding.FragmentCreatorChannelLiveBinding
+import kr.co.vividnext.sodalive.extensions.moneyFormat
+import kr.co.vividnext.sodalive.v2.creator.channel.data.CreatorChannelLiveResponse
+import kr.co.vividnext.sodalive.v2.creator.channel.live.model.toLabelResId
+import kr.co.vividnext.sodalive.v2.creator.channel.live.model.toReplayUiModel
+import kr.co.vividnext.sodalive.v2.creator.channel.live.ui.CreatorChannelLiveReplayAdapter
+import kr.co.vividnext.sodalive.v2.creator.channel.ui.formatCreatorChannelLiveDateTime
+import org.koin.androidx.viewmodel.ext.android.viewModel
+
+class CreatorChannelLiveFragment : BaseFragment<FragmentCreatorChannelLiveBinding>(
+    FragmentCreatorChannelLiveBinding::inflate
+) {
+
+    private val viewModel: CreatorChannelLiveViewModel by viewModel()
+    private val replayAdapter = CreatorChannelLiveReplayAdapter { item ->
+        host.onCreatorChannelLiveReplayClicked(item.audioContentId)
+    }
+    private var lastContentLayoutKey: CreatorChannelLiveContentLayoutKey? = null
+    private val creatorId: Long by lazy { arguments?.getLong(ARG_CREATOR_ID) ?: 0L }
+    private val host: Host
+        get() = requireActivity() as Host
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+        bindLoading()
+        setupReplayList()
+        setupClickListeners()
+        observeViewModel()
+    }
+
+    fun onCreatorChannelLiveTabSelected() {
+        if (creatorId > 0L) {
+            viewModel.loadLive(creatorId)
+        }
+    }
+
+    override fun onDestroyView() {
+        binding.rvCreatorChannelLiveReplays.adapter = null
+        super.onDestroyView()
+    }
+
+    private fun setupReplayList() = with(binding.rvCreatorChannelLiveReplays) {
+        layoutManager = LinearLayoutManager(requireContext())
+        adapter = replayAdapter
+    }
+
+    fun onCreatorChannelLiveScrolledToBottom() {
+        viewModel.loadMore()
+    }
+
+    private fun setupClickListeners() {
+        binding.ivCreatorChannelLiveSort.setImageResource(R.drawable.ic_new_sort)
+        binding.btnCreatorChannelLiveRetry.setOnClickListener {
+            viewModel.retryLive()
+        }
+    }
+
+    private fun observeViewModel() {
+        viewModel.liveStateLiveData.observe(viewLifecycleOwner) { state ->
+            when (state) {
+                CreatorChannelLiveUiState.Loading -> bindLoading()
+                CreatorChannelLiveUiState.Empty -> bindEmpty()
+                is CreatorChannelLiveUiState.Error -> bindError(state)
+                is CreatorChannelLiveUiState.Content -> bindContent(state)
+            }
+        }
+    }
+
+    private fun bindLoading() = with(binding) {
+        lastContentLayoutKey = null
+        layoutCreatorChannelLiveSortBar.isVisible = false
+        layoutCreatorChannelLiveCurrentCard.isVisible = false
+        rvCreatorChannelLiveReplays.isVisible = false
+        tvCreatorChannelLiveEmptyMessage.isVisible = false
+        tvCreatorChannelLiveErrorMessage.isVisible = false
+        btnCreatorChannelLiveRetry.isVisible = false
+    }
+
+    private fun bindEmpty() = with(binding) {
+        lastContentLayoutKey = null
+        layoutCreatorChannelLiveSortBar.isVisible = false
+        layoutCreatorChannelLiveCurrentCard.isVisible = false
+        rvCreatorChannelLiveReplays.isVisible = false
+        tvCreatorChannelLiveEmptyMessage.isVisible = true
+        tvCreatorChannelLiveErrorMessage.isVisible = false
+        btnCreatorChannelLiveRetry.isVisible = false
+        host.onCreatorChannelLiveContentChanged()
+    }
+
+    private fun bindError(state: CreatorChannelLiveUiState.Error) = with(binding) {
+        lastContentLayoutKey = null
+        layoutCreatorChannelLiveSortBar.isVisible = false
+        layoutCreatorChannelLiveCurrentCard.isVisible = false
+        rvCreatorChannelLiveReplays.isVisible = false
+        tvCreatorChannelLiveEmptyMessage.isVisible = false
+        tvCreatorChannelLiveErrorMessage.isVisible = true
+        tvCreatorChannelLiveErrorMessage.text = state.message ?: getString(R.string.creator_channel_live_error_message)
+        btnCreatorChannelLiveRetry.isVisible = true
+        host.onCreatorChannelLiveContentChanged()
+    }
+
+    private fun bindContent(state: CreatorChannelLiveUiState.Content) = with(binding) {
+        tvCreatorChannelLiveEmptyMessage.isVisible = false
+        tvCreatorChannelLiveErrorMessage.isVisible = false
+        btnCreatorChannelLiveRetry.isVisible = false
+        layoutCreatorChannelLiveSortBar.isVisible = true
+        tvCreatorChannelLiveTotalCount.text = state.liveReplayContentCount.moneyFormat()
+        tvCreatorChannelLiveSortLabel.setText(state.selectedSort.toLabelResId())
+        bindCurrentLive(state.currentLive)
+        rvCreatorChannelLiveReplays.isVisible = true
+        replayAdapter.submitItems(state.liveReplayContents.map { it.toReplayUiModel() })
+        notifyContentChangedIfLayoutChanged(state)
+        state.paginationErrorMessage?.let {
+            Toast.makeText(requireContext(), it, Toast.LENGTH_SHORT).show()
+            viewModel.consumePaginationErrorMessage()
+        }
+    }
+
+    private fun notifyContentChangedIfLayoutChanged(state: CreatorChannelLiveUiState.Content) {
+        val contentLayoutKey = state.toContentLayoutKey()
+        if (contentLayoutKey == lastContentLayoutKey) return
+
+        lastContentLayoutKey = contentLayoutKey
+        host.onCreatorChannelLiveContentChanged()
+    }
+
+    private fun bindCurrentLive(live: CreatorChannelLiveResponse?) = with(binding) {
+        layoutCreatorChannelLiveCurrentCard.isVisible = live != null
+        if (live == null) return@with
+
+        tvCreatorChannelLiveCurrentTitle.text = live.title
+        tvCreatorChannelLiveCurrentTime.text = formatCreatorChannelLiveDateTime(live.beginDateTimeUtc)
+        tvCreatorChannelLiveCurrentPrice.text = if (live.price > 0) {
+            live.price.moneyFormat()
+        } else {
+            getString(R.string.audio_content_tag_free)
+        }
+        layoutCreatorChannelLiveCurrentPrice.isVisible = true
+        ivCreatorChannelLiveCurrentPriceCash.isVisible = live.price > 0
+        layoutCreatorChannelLiveCurrentCard.setOnClickListener {
+            host.onCreatorChannelCurrentLiveClicked(live)
+        }
+    }
+
+    interface Host {
+        fun onCreatorChannelCurrentLiveClicked(live: CreatorChannelLiveResponse)
+        fun onCreatorChannelLiveReplayClicked(audioContentId: Long)
+        fun onCreatorChannelLiveContentChanged()
+    }
+
+    companion object {
+        private const val ARG_CREATOR_ID: String = "arg_creator_id"
+
+        fun newInstance(creatorId: Long): CreatorChannelLiveFragment {
+            return CreatorChannelLiveFragment().apply {
+                arguments = Bundle().apply { putLong(ARG_CREATOR_ID, creatorId) }
+            }
+        }
+    }
+}
+
+private data class CreatorChannelLiveContentLayoutKey(
+    val liveReplayContentCount: Int,
+    val currentLive: CreatorChannelLiveResponse?,
+    val liveReplayContentIds: List<Long>
+)
+
+private fun CreatorChannelLiveUiState.Content.toContentLayoutKey(): CreatorChannelLiveContentLayoutKey {
+    return CreatorChannelLiveContentLayoutKey(
+        liveReplayContentCount = liveReplayContentCount,
+        currentLive = currentLive,
+        liveReplayContentIds = liveReplayContents.map { it.audioContentId }
+    )
+}

app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/live/ui/CreatorChannelLiveReplayAdapter.kt

@@ -0,0 +1,90 @@
+package kr.co.vividnext.sodalive.v2.creator.channel.live.ui
+
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.core.view.isVisible
+import androidx.recyclerview.widget.RecyclerView
+import kr.co.vividnext.sodalive.R
+import kr.co.vividnext.sodalive.databinding.ItemCreatorChannelLiveReplayBinding
+import kr.co.vividnext.sodalive.extensions.loadUrl
+import kr.co.vividnext.sodalive.extensions.moneyFormat
+import kr.co.vividnext.sodalive.v2.creator.channel.live.model.CreatorChannelLiveReplayStatus
+import kr.co.vividnext.sodalive.v2.creator.channel.live.model.CreatorChannelLiveReplayUiModel
+import kr.co.vividnext.sodalive.v2.widget.AudioContentTag
+
+class CreatorChannelLiveReplayAdapter(
+    private val onReplayClick: (CreatorChannelLiveReplayUiModel) -> Unit = {}
+) : RecyclerView.Adapter<CreatorChannelLiveReplayAdapter.ViewHolder>() {
+
+    private var items: List<CreatorChannelLiveReplayUiModel> = emptyList()
+
+    fun submitItems(items: List<CreatorChannelLiveReplayUiModel>) {
+        this.items = items
+        notifyDataSetChanged()
+    }
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
+        return ViewHolder(
+            ItemCreatorChannelLiveReplayBinding.inflate(LayoutInflater.from(parent.context), parent, false),
+            onReplayClick
+        )
+    }
+
+    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
+        holder.bind(items[position])
+    }
+
+    override fun getItemCount(): Int = items.size
+
+    class ViewHolder(
+        private val binding: ItemCreatorChannelLiveReplayBinding,
+        private val onReplayClick: (CreatorChannelLiveReplayUiModel) -> Unit
+    ) : RecyclerView.ViewHolder(binding.root) {
+
+        fun bind(item: CreatorChannelLiveReplayUiModel) = with(binding) {
+            ivCreatorChannelLiveReplayThumbnail.loadUrl(item.imageUrl)
+            tvCreatorChannelLiveReplayTitle.text = item.title
+            tvCreatorChannelLiveReplayDuration.text = item.secondaryText.orEmpty()
+            tvCreatorChannelLiveReplayDuration.isVisible = !item.secondaryText.isNullOrBlank()
+            ivCreatorChannelLiveReplayAdultBadge.setImageResource(R.drawable.ic_new_shield_small)
+            ivCreatorChannelLiveReplayAdultBadge.isVisible = item.showAdultBadge
+            bindTag(ivCreatorChannelLiveReplayOriginalTag, AudioContentTag.Original, item.tags)
+            bindTag(ivCreatorChannelLiveReplayFirstTag, AudioContentTag.First, item.tags)
+            bindTag(ivCreatorChannelLiveReplayPointTag, AudioContentTag.Point, item.tags)
+            tvCreatorChannelLiveReplayFreeTag.isVisible = AudioContentTag.Free in item.tags
+            bindStatus(item.status)
+            root.setOnClickListener { onReplayClick(item) }
+        }
+
+        private fun bindTag(view: View, tag: AudioContentTag, tags: Set<AudioContentTag>) {
+            view.isVisible = tag in tags
+        }
+
+        private fun bindStatus(status: CreatorChannelLiveReplayStatus) = with(binding) {
+            ivCreatorChannelLiveReplayPlay.setImageResource(R.drawable.ic_new_player_play)
+            when (status) {
+                CreatorChannelLiveReplayStatus.Play -> {
+                    ivCreatorChannelLiveReplayPlay.isVisible = true
+                    ivCreatorChannelLiveReplayCan.isVisible = false
+                    layoutCreatorChannelLiveReplayActionText.isVisible = false
+                }
+                CreatorChannelLiveReplayStatus.Owned -> bindTextStatus(R.string.audio_content_badge_owned)
+                CreatorChannelLiveReplayStatus.Rented -> bindTextStatus(R.string.audio_content_badge_rented)
+                is CreatorChannelLiveReplayStatus.Price -> {
+                    ivCreatorChannelLiveReplayPlay.isVisible = false
+                    layoutCreatorChannelLiveReplayActionText.isVisible = true
+                    ivCreatorChannelLiveReplayCan.isVisible = true
+                    tvCreatorChannelLiveReplayActionText.text = status.price.moneyFormat()
+                }
+            }
+        }
+
+        private fun bindTextStatus(textResId: Int) = with(binding) {
+            ivCreatorChannelLiveReplayPlay.isVisible = true
+            layoutCreatorChannelLiveReplayActionText.isVisible = true
+            ivCreatorChannelLiveReplayCan.isVisible = false
+            tvCreatorChannelLiveReplayActionText.setText(textResId)
+        }
+    }
+}

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

@@ -0,0 +1,276 @@
+<?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"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@color/black">
+
+    <LinearLayout
+        android:id="@+id/layout_creator_channel_live_sort_bar"
+        android:layout_width="0dp"
+        android:layout_height="52dp"
+        android:gravity="center_vertical"
+        android:orientation="horizontal"
+        android:paddingHorizontal="@dimen/spacing_14"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent">
+
+        <TextView
+            android:id="@+id/tv_creator_channel_live_total_label"
+            style="@style/Typography.Body2"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:includeFontPadding="false"
+            android:text="@string/creator_channel_live_total_label"
+            android:textColor="@color/white" />
+
+        <TextView
+            android:id="@+id/tv_creator_channel_live_total_count"
+            style="@style/Typography.Body2"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/spacing_4"
+            android:layout_weight="1"
+            android:includeFontPadding="false"
+            android:textColor="@color/gray_500"
+            tools:text="23" />
+
+        <LinearLayout
+            android:id="@+id/layout_creator_channel_live_sort_button"
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"
+            android:gravity="center"
+            android:orientation="horizontal">
+
+            <TextView
+                android:id="@+id/tv_creator_channel_live_sort_label"
+                style="@style/Typography.Body3"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:includeFontPadding="false"
+                android:textColor="@color/gray_400"
+                tools:text="최신순" />
+
+            <ImageView
+                android:id="@+id/iv_creator_channel_live_sort"
+                android:layout_width="18dp"
+                android:layout_height="18dp"
+                android:layout_marginStart="@dimen/spacing_4"
+                android:contentDescription="@null"
+                android:src="@drawable/ic_new_sort" />
+        </LinearLayout>
+    </LinearLayout>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/layout_creator_channel_live_current_card"
+        android:layout_width="0dp"
+        android:layout_height="78dp"
+        android:layout_marginHorizontal="@dimen/spacing_14"
+        android:background="@drawable/bg_creator_channel_live_current"
+        android:paddingStart="@dimen/spacing_24"
+        android:paddingEnd="@dimen/spacing_14"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/layout_creator_channel_live_sort_bar">
+
+        <LinearLayout
+            android:id="@+id/ll_creator_channel_live_current_text"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="@dimen/spacing_14"
+            android:orientation="vertical"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toStartOf="@id/layout_creator_channel_live_current_price"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="18dp"
+                android:gravity="center_vertical"
+                android:orientation="horizontal">
+
+                <LinearLayout
+                    android:layout_width="wrap_content"
+                    android:layout_height="18dp"
+                    android:background="@drawable/bg_live_thumbnail_badge_capsule"
+                    android:gravity="center"
+                    android:orientation="horizontal"
+                    android:paddingHorizontal="@dimen/spacing_4">
+
+                    <View
+                        android:layout_width="@dimen/spacing_8"
+                        android:layout_height="@dimen/spacing_8"
+                        android:background="@drawable/bg_live_thumbnail_dot" />
+
+                    <TextView
+                        style="@style/Typography.Caption3"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_marginStart="@dimen/spacing_4"
+                        android:includeFontPadding="true"
+                        android:text="LIVE"
+                        android:textColor="@color/white"
+                        tools:ignore="HardcodedText,SmallSp" />
+                </LinearLayout>
+
+                <TextView
+                    android:id="@+id/tv_creator_channel_live_current_time"
+                    style="@style/Typography.Body6"
+                    android:layout_width="0dp"
+                    android:layout_height="wrap_content"
+                    android:layout_marginStart="@dimen/spacing_8"
+                    android:layout_weight="1"
+                    android:ellipsize="end"
+                    android:includeFontPadding="false"
+                    android:maxLines="1"
+                    android:textColor="@color/gray_700"
+                    tools:text="00:00" />
+            </LinearLayout>
+
+            <TextView
+                android:id="@+id/tv_creator_channel_live_current_title"
+                style="@style/Typography.Heading4"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="@dimen/spacing_4"
+                android:ellipsize="end"
+                android:includeFontPadding="false"
+                android:maxLines="1"
+                android:textColor="@color/black"
+                tools:text="라이브 제목" />
+        </LinearLayout>
+
+        <FrameLayout
+            android:id="@+id/layout_creator_channel_live_current_price"
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+            <LinearLayout
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center"
+                android:background="@drawable/bg_creator_channel_live_price"
+                android:gravity="center"
+                android:orientation="horizontal"
+                android:paddingHorizontal="@dimen/spacing_6"
+                android:paddingVertical="@dimen/spacing_4">
+
+                <ImageView
+                    android:id="@+id/iv_creator_channel_live_current_price_cash"
+                    android:layout_width="18dp"
+                    android:layout_height="18dp"
+                    android:contentDescription="@null"
+                    android:src="@drawable/ic_bar_cash" />
+
+                <TextView
+                    android:id="@+id/tv_creator_channel_live_current_price"
+                    style="@style/Typography.Body6"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginStart="2dp"
+                    android:includeFontPadding="false"
+                    android:textColor="@color/white"
+                    tools:text="300" />
+            </LinearLayout>
+        </FrameLayout>
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+    <androidx.recyclerview.widget.RecyclerView
+        android:id="@+id/rv_creator_channel_live_replays"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:clipToPadding="false"
+        android:nestedScrollingEnabled="false"
+        android:paddingHorizontal="@dimen/spacing_14"
+        android:paddingTop="@dimen/spacing_20"
+        android:paddingBottom="@dimen/spacing_32"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/layout_creator_channel_live_current_card"
+        tools:itemCount="3"
+        tools:listitem="@layout/item_creator_channel_live_replay" />
+
+    <TextView
+        android:id="@+id/tv_creator_channel_live_empty_message"
+        style="@style/Typography.Body3"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:gravity="center"
+        android:text="@string/creator_channel_live_empty_message"
+        android:textColor="@color/gray_500"
+        android:visibility="gone"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintVertical_bias="0.58"
+        tools:visibility="visible" />
+
+    <TextView
+        android:id="@+id/tv_creator_channel_live_error_message"
+        style="@style/Typography.Body3"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:gravity="center"
+        android:text="@string/creator_channel_live_error_message"
+        android:textColor="@color/gray_500"
+        android:visibility="gone"
+        app:layout_constraintBottom_toTopOf="@id/btn_creator_channel_live_retry"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintVertical_chainStyle="packed" />
+
+    <TextView
+        android:id="@+id/btn_creator_channel_live_retry"
+        style="@style/Typography.Body5"
+        android:layout_width="wrap_content"
+        android:layout_height="40dp"
+        android:layout_marginTop="@dimen/spacing_14"
+        android:background="@drawable/bg_creator_channel_live_retry"
+        android:gravity="center"
+        android:minWidth="96dp"
+        android:paddingHorizontal="@dimen/spacing_20"
+        android:text="@string/creator_channel_live_retry_button"
+        android:textColor="@color/white"
+        android:visibility="gone"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/tv_creator_channel_live_error_message" />
+
+    <LinearLayout
+        android:id="@+id/layout_creator_channel_live_owner_cta"
+        android:layout_width="0dp"
+        android:layout_height="56dp"
+        android:layout_marginHorizontal="@dimen/spacing_14"
+        android:layout_marginBottom="@dimen/spacing_14"
+        android:background="@drawable/bg_creator_channel_owner_fab"
+        android:gravity="center"
+        android:orientation="horizontal"
+        android:visibility="gone"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent">
+
+        <ImageView
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            android:contentDescription="@null"
+            android:src="@drawable/ic_new_create_live" />
+
+        <TextView
+            style="@style/Typography.Body1"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/spacing_8"
+            android:includeFontPadding="false"
+            android:text="@string/creator_channel_live_start_button"
+            android:textColor="@color/black" />
+    </LinearLayout>
+</androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -0,0 +1,161 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="88dp"
+    android:baselineAligned="false"
+    android:gravity="center_vertical"
+    android:orientation="horizontal">
+
+    <FrameLayout
+        android:id="@+id/layout_creator_channel_live_replay_thumbnail"
+        android:layout_width="88dp"
+        android:layout_height="88dp"
+        android:background="@drawable/bg_audio_content_card_thumbnail">
+
+        <ImageView
+            android:id="@+id/iv_creator_channel_live_replay_thumbnail"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:contentDescription="@null"
+            android:scaleType="centerCrop"
+            tools:src="@drawable/ic_launcher_background" />
+
+        <ImageView
+            android:id="@+id/iv_creator_channel_live_replay_adult_badge"
+            android:layout_width="18dp"
+            android:layout_height="18dp"
+            android:layout_gravity="top|end"
+            android:layout_marginTop="@dimen/spacing_6"
+            android:layout_marginEnd="@dimen/spacing_6"
+            android:background="@drawable/bg_creator_channel_live_adult_badge"
+            android:contentDescription="@null"
+            android:padding="2dp"
+            android:src="@drawable/ic_new_shield_small" />
+
+        <LinearLayout
+            android:layout_width="wrap_content"
+            android:layout_height="24dp"
+            android:layout_gravity="top|start"
+            android:orientation="horizontal">
+
+            <ImageView
+                android:id="@+id/iv_creator_channel_live_replay_original_tag"
+                android:layout_width="24dp"
+                android:layout_height="24dp"
+                android:contentDescription="@null"
+                android:src="@drawable/ic_content_tag_original" />
+
+            <ImageView
+                android:id="@+id/iv_creator_channel_live_replay_first_tag"
+                android:layout_width="24dp"
+                android:layout_height="24dp"
+                android:background="@drawable/bg_audio_content_tag_first"
+                android:contentDescription="@null"
+                android:padding="3dp"
+                android:src="@drawable/ic_content_tag_first_star" />
+        </LinearLayout>
+
+        <LinearLayout
+            android:layout_width="wrap_content"
+            android:layout_height="24dp"
+            android:layout_gravity="bottom|start"
+            android:orientation="horizontal">
+
+            <ImageView
+                android:id="@+id/iv_creator_channel_live_replay_point_tag"
+                android:layout_width="24dp"
+                android:layout_height="24dp"
+                android:contentDescription="@null"
+                android:src="@drawable/ic_content_tag_point" />
+
+            <TextView
+                android:id="@+id/tv_creator_channel_live_replay_free_tag"
+                style="@style/Typography.Body6"
+                android:layout_width="wrap_content"
+                android:layout_height="24dp"
+                android:background="@drawable/bg_audio_content_tag_free"
+                android:gravity="center"
+                android:includeFontPadding="false"
+                android:minWidth="34dp"
+                android:paddingHorizontal="@dimen/spacing_4"
+                android:text="@string/audio_content_tag_free"
+                android:textColor="@color/white" />
+        </LinearLayout>
+    </FrameLayout>
+
+    <LinearLayout
+        android:layout_width="0dp"
+        android:layout_height="match_parent"
+        android:layout_marginStart="@dimen/spacing_14"
+        android:layout_weight="1"
+        android:gravity="center_vertical"
+        android:orientation="vertical">
+
+        <TextView
+            android:id="@+id/tv_creator_channel_live_replay_title"
+            style="@style/Typography.Body1"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:ellipsize="end"
+            android:includeFontPadding="false"
+            android:maxLines="2"
+            android:textColor="@color/white"
+            tools:text="라이브 다시 듣기 오디오 제목 라이브 다시 듣기 오디오 제목" />
+
+        <TextView
+            android:id="@+id/tv_creator_channel_live_replay_duration"
+            style="@style/Typography.Body5"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="@dimen/spacing_4"
+            android:ellipsize="end"
+            android:includeFontPadding="false"
+            android:maxLines="1"
+            android:textColor="@color/gray_500"
+            tools:text="3:35" />
+    </LinearLayout>
+
+    <LinearLayout
+        android:id="@+id/layout_creator_channel_live_replay_action"
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:gravity="center"
+        android:orientation="vertical">
+
+        <ImageView
+            android:id="@+id/iv_creator_channel_live_replay_play"
+            android:layout_width="28dp"
+            android:layout_height="28dp"
+            android:background="@drawable/bg_creator_channel_live_replay_play"
+            android:contentDescription="@null"
+            android:padding="6dp"
+            android:src="@drawable/ic_new_player_play" />
+
+        <LinearLayout
+            android:id="@+id/layout_creator_channel_live_replay_action_text"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="@dimen/spacing_8"
+            android:gravity="center"
+            android:orientation="horizontal">
+
+            <ImageView
+                android:id="@+id/iv_creator_channel_live_replay_can"
+                android:layout_width="18dp"
+                android:layout_height="18dp"
+                android:contentDescription="@null"
+                android:src="@drawable/ic_bar_cash" />
+
+            <TextView
+                android:id="@+id/tv_creator_channel_live_replay_action_text"
+                style="@style/Typography.Caption2"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="2dp"
+                android:includeFontPadding="false"
+                android:textColor="@color/gray_400"
+                tools:text="대여중" />
+        </LinearLayout>
+    </LinearLayout>
+</LinearLayout>