재생목록 상세 페이지

app/src/main/AndroidManifest.xml

@@ -145,6 +145,7 @@
         <activity android:name=".audio_content.series.SeriesListAllActivity" />
         <activity android:name=".audio_content.series.detail.SeriesDetailActivity" />
         <activity android:name=".audio_content.series.content.SeriesContentAllActivity" />
+        <activity android:name=".audio_content.playlist.detail.AudioContentPlaylistDetailActivity" />
 
         <activity android:name=".mypage.alarm.AlarmListActivity" />
         <activity android:name=".mypage.alarm.AddAlarmActivity" />

app/src/main/java/kr/co/vividnext/sodalive/audio_content/playlist/AudioContentPlaylistListFragment.kt

@@ -1,10 +1,13 @@
 package kr.co.vividnext.sodalive.audio_content.playlist
 
 import android.annotation.SuppressLint
+import android.content.Intent
 import android.os.Bundle
 import android.view.View
 import androidx.recyclerview.widget.LinearLayoutManager
+import kr.co.vividnext.sodalive.audio_content.playlist.detail.AudioContentPlaylistDetailActivity
 import kr.co.vividnext.sodalive.base.BaseFragment
+import kr.co.vividnext.sodalive.common.Constants
 import kr.co.vividnext.sodalive.common.LoadingDialog
 import kr.co.vividnext.sodalive.databinding.FragmentAudioContentPlaylistListBinding
 import org.koin.android.ext.android.inject
@@ -29,7 +32,16 @@ class AudioContentPlaylistListFragment : BaseFragment<FragmentAudioContentPlayli
 
     private fun setupView() {
         loadingDialog = LoadingDialog(requireActivity(), layoutInflater)
-        adapter = AudioContentPlaylistListAdapter { }
+        adapter = AudioContentPlaylistListAdapter { playlistId ->
+            startActivity(
+                Intent(requireContext(), AudioContentPlaylistDetailActivity::class.java).apply {
+                    putExtra(
+                        Constants.EXTRA_AUDIO_CONTENT_PLAYLIST_ID,
+                        playlistId
+                    )
+                }
+            )
+        }
 
         val recyclerView = binding.rvPlaylistList
         recyclerView.setHasFixedSize(true)

app/src/main/java/kr/co/vividnext/sodalive/audio_content/playlist/AudioContentPlaylistListRepository.kt

@@ -1,5 +0,0 @@
-package kr.co.vividnext.sodalive.audio_content.playlist
-
-class AudioContentPlaylistListRepository(private val api: PlaylistApi) {
-    fun getPlaylistList(token: String) = api.getPlaylistList(authHeader = token)
-}

app/src/main/java/kr/co/vividnext/sodalive/audio_content/playlist/AudioContentPlaylistListViewModel.kt

@@ -9,7 +9,7 @@ import kr.co.vividnext.sodalive.base.BaseViewModel
 import kr.co.vividnext.sodalive.common.SharedPreferenceManager
 
 class AudioContentPlaylistListViewModel(
-    private val repository: AudioContentPlaylistListRepository
+    private val repository: AudioContentPlaylistRepository
 ) : BaseViewModel() {
     private val _toastLiveData = MutableLiveData<String?>()
     val toastLiveData: LiveData<String?>
@@ -28,12 +28,14 @@ class AudioContentPlaylistListViewModel(
         get() = _playlistLiveData
 
     fun getPlaylistList() {
+        _isLoading.value = true
         compositeDisposable.add(
             repository.getPlaylistList(token = "Bearer ${SharedPreferenceManager.token}")
                 .subscribeOn(Schedulers.io())
                 .observeOn(AndroidSchedulers.mainThread())
                 .subscribe(
                     {
+                        _isLoading.value = false
                         if (it.success && it.data != null) {
                             _totalCountLiveData.value = it.data.totalCount
                             _playlistLiveData.value = it.data.items
@@ -48,6 +50,7 @@ class AudioContentPlaylistListViewModel(
                         }
                     },
                     {
+                        _isLoading.value = false
                         it.message?.let { message -> Logger.e(message) }
                         _toastLiveData.postValue("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
                     }

app/src/main/java/kr/co/vividnext/sodalive/audio_content/playlist/AudioContentPlaylistRepository.kt

@@ -0,0 +1,12 @@
+package kr.co.vividnext.sodalive.audio_content.playlist
+
+class AudioContentPlaylistRepository(private val api: PlaylistApi) {
+    fun getPlaylistList(token: String) = api.getPlaylistList(authHeader = token)
+    fun getPlaylistDetail(
+        playlistId: Long,
+        token: String
+    ) = api.getPlaylistDetail(
+        id = playlistId,
+        authHeader = token
+    )
+}

app/src/main/java/kr/co/vividnext/sodalive/audio_content/playlist/PlaylistApi.kt

@@ -1,13 +1,21 @@
 package kr.co.vividnext.sodalive.audio_content.playlist
 
 import io.reactivex.rxjava3.core.Single
+import kr.co.vividnext.sodalive.audio_content.playlist.detail.GetPlaylistDetailResponse
 import kr.co.vividnext.sodalive.common.ApiResponse
 import retrofit2.http.GET
 import retrofit2.http.Header
+import retrofit2.http.Path
 
 interface PlaylistApi {
     @GET("/audio-content/playlist")
     fun getPlaylistList(
         @Header("Authorization") authHeader: String
     ): Single<ApiResponse<GetPlaylistsResponse>>
+
+    @GET("/audio-content/playlist/{id}")
+    fun getPlaylistDetail(
+        @Path("id") id: Long,
+        @Header("Authorization") authHeader: String
+    ): Single<ApiResponse<GetPlaylistDetailResponse>>
 }

app/src/main/java/kr/co/vividnext/sodalive/audio_content/playlist/detail/AudioContentPlaylistDetailActivity.kt

@@ -0,0 +1,118 @@
+package kr.co.vividnext.sodalive.audio_content.playlist.detail
+
+import android.annotation.SuppressLint
+import android.os.Bundle
+import android.view.View
+import android.widget.ImageView
+import android.widget.Toast
+import androidx.recyclerview.widget.LinearLayoutManager
+import coil.load
+import kr.co.vividnext.sodalive.base.BaseActivity
+import kr.co.vividnext.sodalive.common.Constants
+import kr.co.vividnext.sodalive.common.LoadingDialog
+import kr.co.vividnext.sodalive.databinding.ActivityAudioContentPlaylistDetailBinding
+import org.koin.android.ext.android.inject
+
+class AudioContentPlaylistDetailActivity : BaseActivity<ActivityAudioContentPlaylistDetailBinding>(
+    ActivityAudioContentPlaylistDetailBinding::inflate
+) {
+
+    private val viewModel: AudioContentPlaylistDetailViewModel by inject()
+
+    private lateinit var loadingDialog: LoadingDialog
+    private lateinit var adapter: AudioContentPlaylistDetailAdapter
+
+    private var playlistId: Long = 0
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        playlistId = intent.getLongExtra(Constants.EXTRA_AUDIO_CONTENT_PLAYLIST_ID, 0)
+        super.onCreate(savedInstanceState)
+
+        if (playlistId <= 0) {
+            showToast("잘못된 요청입니다.")
+            finish()
+        }
+
+        bindData()
+        viewModel.getPlaylistDetail(playlistId)
+    }
+
+    override fun setupView() {
+        loadingDialog = LoadingDialog(this, layoutInflater)
+        adapter = AudioContentPlaylistDetailAdapter()
+
+        val recyclerView = binding.rvPlaylistDetail
+        recyclerView.setHasFixedSize(true)
+        recyclerView.layoutManager = LinearLayoutManager(
+            applicationContext,
+            LinearLayoutManager.VERTICAL,
+            false
+        )
+        recyclerView.adapter = adapter
+
+        binding.llPlay.setOnClickListener { }
+        binding.llShuffle.setOnClickListener { }
+    }
+
+    @SuppressLint("SetTextI18n")
+    private fun bindData() {
+        viewModel.toastLiveData.observe(this) {
+            it?.let { Toast.makeText(applicationContext, it, Toast.LENGTH_LONG).show() }
+        }
+
+        viewModel.isLoading.observe(this) {
+            if (it) {
+                loadingDialog.show(screenWidth, "")
+            } else {
+                loadingDialog.dismiss()
+            }
+        }
+
+        viewModel.detailResponseLiveData.observe(this) {
+            binding.tvDesc.text = it.desc
+            binding.tvTitle.text = it.title
+            binding.tvContentCount.text = " ${it.contentCount}개"
+            binding.tvCreateDate.text = "만든 날짜 ${it.createdDate} "
+            updateCoverImageLayout(imageUrlList = it.playlistCoverImageList)
+        }
+    }
+
+    private fun updateCoverImageLayout(imageUrlList: List<String>) {
+        val imageViews = listOf(
+            binding.ivCover1,
+            binding.ivCover2,
+            binding.ivCover3,
+            binding.ivCover4,
+            binding.ivCover5,
+            binding.ivCover6
+        )
+
+        imageViews.forEach { it.visibility = View.GONE }
+
+        when (imageUrlList.size) {
+            1, 2 -> {
+                setImage(imageViews[0], imageUrlList[0])
+            }
+
+            3 -> {
+                setImage(imageViews[1], imageUrlList[0])
+                setImage(imageViews[2], imageUrlList[1])
+                setImage(imageViews[3], imageUrlList[2])
+            }
+
+            4 -> {
+                setImage(imageViews[1], imageUrlList[0])
+                setImage(imageViews[2], imageUrlList[1])
+                setImage(imageViews[4], imageUrlList[2])
+                setImage(imageViews[5], imageUrlList[3])
+            }
+        }
+    }
+
+    private fun setImage(imageView: ImageView, imageUrl: String) {
+        imageView.apply {
+            visibility = View.VISIBLE
+            this.load(imageUrl)
+        }
+    }
+}

app/src/main/java/kr/co/vividnext/sodalive/audio_content/playlist/detail/AudioContentPlaylistDetailAdapter.kt

@@ -0,0 +1,46 @@
+package kr.co.vividnext.sodalive.audio_content.playlist.detail
+
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.recyclerview.widget.RecyclerView
+import coil.load
+import coil.transform.RoundedCornersTransformation
+import kr.co.vividnext.sodalive.R
+import kr.co.vividnext.sodalive.databinding.ItemPlaylistContentBinding
+import kr.co.vividnext.sodalive.extensions.dpToPx
+
+class AudioContentPlaylistDetailAdapter :
+    RecyclerView.Adapter<AudioContentPlaylistDetailAdapter.ViewHolder>() {
+
+    val items = mutableListOf<AudioContentPlaylistContent>()
+
+    inner class ViewHolder(
+        private val binding: ItemPlaylistContentBinding
+    ) : RecyclerView.ViewHolder(binding.root) {
+        fun bind(item: AudioContentPlaylistContent) {
+            binding.ivCover.load(item.coverUrl) {
+                crossfade(true)
+                placeholder(R.drawable.bg_placeholder)
+                transformations(RoundedCornersTransformation(5.3f.dpToPx()))
+            }
+
+            binding.tvTitle.text = item.title
+            binding.tvTheme.text = item.category
+            binding.tvDuration.text = item.duration
+        }
+    }
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) = ViewHolder(
+        ItemPlaylistContentBinding.inflate(
+            LayoutInflater.from(parent.context),
+            parent,
+            false
+        )
+    )
+
+    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
+        holder.bind(items[position])
+    }
+
+    override fun getItemCount() = items.count()
+}

app/src/main/java/kr/co/vividnext/sodalive/audio_content/playlist/detail/AudioContentPlaylistDetailViewModel.kt

@@ -0,0 +1,59 @@
+package kr.co.vividnext.sodalive.audio_content.playlist.detail
+
+import androidx.lifecycle.LiveData
+import androidx.lifecycle.MutableLiveData
+import com.orhanobut.logger.Logger
+import io.reactivex.rxjava3.android.schedulers.AndroidSchedulers
+import io.reactivex.rxjava3.schedulers.Schedulers
+import kr.co.vividnext.sodalive.audio_content.playlist.AudioContentPlaylistRepository
+import kr.co.vividnext.sodalive.base.BaseViewModel
+import kr.co.vividnext.sodalive.common.SharedPreferenceManager
+
+class AudioContentPlaylistDetailViewModel(
+    private val repository: AudioContentPlaylistRepository
+) : BaseViewModel() {
+    private val _toastLiveData = MutableLiveData<String?>()
+    val toastLiveData: LiveData<String?>
+        get() = _toastLiveData
+
+    private var _isLoading = MutableLiveData(false)
+    val isLoading: LiveData<Boolean>
+        get() = _isLoading
+
+    private val _detailResponseLiveData = MutableLiveData<GetPlaylistDetailResponse>()
+    val detailResponseLiveData: LiveData<GetPlaylistDetailResponse>
+        get() = _detailResponseLiveData
+
+    fun getPlaylistDetail(playlistId: Long) {
+        _isLoading.value = true
+        compositeDisposable.add(
+            repository.getPlaylistDetail(
+                playlistId = playlistId,
+                token = "Bearer ${SharedPreferenceManager.token}"
+            )
+                .subscribeOn(Schedulers.io())
+                .observeOn(AndroidSchedulers.mainThread())
+                .subscribe(
+                    {
+                        if (it.success && it.data != null) {
+                            _detailResponseLiveData.value = it.data!!
+                        } else {
+                            if (it.message != null) {
+                                _toastLiveData.postValue(it.message)
+                            } else {
+                                _toastLiveData.postValue(
+                                    "알 수 없는 오류가 발생했습니다. 다시 시도해 주세요."
+                                )
+                            }
+                        }
+                        _isLoading.value = false
+                    },
+                    {
+                        _isLoading.value = false
+                        it.message?.let { message -> Logger.e(message) }
+                        _toastLiveData.postValue("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
+                    }
+                )
+        )
+    }
+}

app/src/main/java/kr/co/vividnext/sodalive/audio_content/playlist/detail/GetPlaylistDetailResponse.kt

@@ -0,0 +1,21 @@
+package kr.co.vividnext.sodalive.audio_content.playlist.detail
+
+import com.google.gson.annotations.SerializedName
+
+data class GetPlaylistDetailResponse(
+    @SerializedName("playlistId") val playlistId: Long,
+    @SerializedName("title") val title: String,
+    @SerializedName("desc") val desc: String,
+    @SerializedName("createdDate") val createdDate: String,
+    @SerializedName("contentCount") val contentCount: Int,
+    @SerializedName("playlistCoverImageList") val playlistCoverImageList: List<String>,
+    @SerializedName("contentList") val contentList: List<AudioContentPlaylistContent>
+)
+
+data class AudioContentPlaylistContent(
+    @SerializedName("id") val id: Long,
+    @SerializedName("title") val title: String,
+    @SerializedName("category") val category: String,
+    @SerializedName("coverUrl") val coverUrl: String,
+    @SerializedName("duration") val duration: String
+)

app/src/main/java/kr/co/vividnext/sodalive/common/Constants.kt

@@ -41,6 +41,7 @@ object Constants {
     const val EXTRA_SELECT_RECIPIENT = "extra_select_recipient"
     const val EXTRA_ROOM_CHANNEL_NAME = "extra_room_channel_name"
     const val EXTRA_LIVE_RESERVATION_RESPONSE = "extra_live_reservation_response"
+    const val EXTRA_AUDIO_CONTENT_PLAYLIST_ID = "extra_audio_content_playlist_id"
 
     const val EXTRA_AUDIO_CONTENT_ID = "audio_content_id"
     const val EXTRA_AUDIO_CONTENT_URL = "audio_content_url"

app/src/main/java/kr/co/vividnext/sodalive/di/AppDI.kt

@@ -24,9 +24,10 @@ import kr.co.vividnext.sodalive.audio_content.main.ranking.AudioContentMainRanki
 import kr.co.vividnext.sodalive.audio_content.main.recommend_series.AudioContentMainRecommendSeriesViewModel
 import kr.co.vividnext.sodalive.audio_content.modify.AudioContentModifyViewModel
 import kr.co.vividnext.sodalive.audio_content.order.AudioContentOrderListViewModel
-import kr.co.vividnext.sodalive.audio_content.playlist.AudioContentPlaylistListRepository
+import kr.co.vividnext.sodalive.audio_content.playlist.AudioContentPlaylistRepository
 import kr.co.vividnext.sodalive.audio_content.playlist.AudioContentPlaylistListViewModel
 import kr.co.vividnext.sodalive.audio_content.playlist.PlaylistApi
+import kr.co.vividnext.sodalive.audio_content.playlist.detail.AudioContentPlaylistDetailViewModel
 import kr.co.vividnext.sodalive.audio_content.series.SeriesApi
 import kr.co.vividnext.sodalive.audio_content.series.SeriesListAllViewModel
 import kr.co.vividnext.sodalive.audio_content.series.SeriesRepository
@@ -270,6 +271,7 @@ class AppDI(private val context: Context, isDebugMode: Boolean) {
         viewModel { UserViewModel(get(), get()) }
         viewModel { MenuConfigViewModel(get()) }
         viewModel { AudioContentPlaylistListViewModel(get()) }
+        viewModel { AudioContentPlaylistDetailViewModel(get()) }
     }
 
     private val repositoryModule = module {
@@ -298,7 +300,7 @@ class AppDI(private val context: Context, isDebugMode: Boolean) {
         factory { CreatorCommunityRepository(get()) }
         factory { AlarmListRepository(get()) }
         factory { MenuConfigRepository(get()) }
-        factory { AudioContentPlaylistListRepository(get()) }
+        factory { AudioContentPlaylistRepository(get()) }
     }
 
     private val moduleList = listOf(

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

@@ -0,0 +1,235 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout 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"
+    android:orientation="vertical">
+
+    <include
+        android:id="@+id/toolbar"
+        layout="@layout/detail_toolbar" />
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_marginHorizontal="13.3dp">
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/cl_cover"
+            android:layout_width="80dp"
+            android:layout_height="80dp"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+            <ImageView
+                android:id="@+id/iv_cover_1"
+                android:layout_width="0dp"
+                android:layout_height="0dp"
+                android:contentDescription="@null"
+                android:scaleType="centerCrop"
+                android:visibility="gone"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <ImageView
+                android:id="@+id/iv_cover_2"
+                android:layout_width="40dp"
+                android:layout_height="40dp"
+                android:contentDescription="@null"
+                android:scaleType="centerCrop"
+                android:visibility="gone"
+                app:layout_constraintBottom_toTopOf="@id/guideline_horizontal"
+                app:layout_constraintEnd_toStartOf="@id/guideline_vertical"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <ImageView
+                android:id="@+id/iv_cover_3"
+                android:layout_width="40dp"
+                android:layout_height="40dp"
+                android:contentDescription="@null"
+                android:scaleType="centerCrop"
+                android:visibility="gone"
+                app:layout_constraintBottom_toTopOf="@id/guideline_horizontal"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/guideline_vertical"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <ImageView
+                android:id="@+id/iv_cover_4"
+                android:layout_width="40dp"
+                android:layout_height="40dp"
+                android:contentDescription="@null"
+                android:scaleType="centerCrop"
+                android:visibility="gone"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/guideline_horizontal" />
+
+            <ImageView
+                android:id="@+id/iv_cover_5"
+                android:layout_width="40dp"
+                android:layout_height="40dp"
+                android:contentDescription="@null"
+                android:scaleType="centerCrop"
+                android:visibility="gone"
+                app:layout_constraintEnd_toStartOf="@id/guideline_vertical"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/guideline_horizontal" />
+
+            <ImageView
+                android:id="@+id/iv_cover_6"
+                android:layout_width="40dp"
+                android:layout_height="40dp"
+                android:contentDescription="@null"
+                android:scaleType="centerCrop"
+                android:visibility="gone"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/guideline_vertical"
+                app:layout_constraintTop_toBottomOf="@id/guideline_horizontal" />
+
+            <androidx.constraintlayout.widget.Guideline
+                android:id="@+id/guideline_vertical"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:orientation="vertical"
+                app:layout_constraintGuide_percent="0.5" />
+
+            <androidx.constraintlayout.widget.Guideline
+                android:id="@+id/guideline_horizontal"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:orientation="horizontal"
+                app:layout_constraintGuide_percent="0.5" />
+        </androidx.constraintlayout.widget.ConstraintLayout>
+
+        <TextView
+            android:id="@+id/tv_title"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="13.3dp"
+            android:ellipsize="end"
+            android:fontFamily="@font/gmarket_sans_bold"
+            android:maxLines="2"
+            android:textColor="@color/color_d2d2d2"
+            android:textSize="18.3sp"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toEndOf="@+id/cl_cover"
+            app:layout_constraintTop_toTopOf="@+id/cl_cover"
+            tools:text="재생목록 제목" />
+
+        <TextView
+            android:id="@+id/tv_desc"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:layout_marginTop="6.7dp"
+            android:ellipsize="end"
+            android:fontFamily="@font/gmarket_sans_medium"
+            android:maxLength="100"
+            android:textColor="@color/color_909090"
+            android:textSize="12sp"
+            app:layout_constraintBottom_toBottomOf="@+id/cl_cover"
+            app:layout_constraintEnd_toEndOf="@+id/tv_title"
+            app:layout_constraintStart_toStartOf="@+id/tv_title"
+            app:layout_constraintTop_toBottomOf="@+id/tv_title"
+            tools:text="재생목록 설명(없으면 미노출)재생목록 설명(없으면 미노출)재생목록 설명(없으면 미노출)재생목록 설명(없으면 미노출)재생목록 설명(없으면 미노출)" />
+
+        <TextView
+            android:id="@+id/tv_create_date"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:fontFamily="@font/gmarket_sans_medium"
+            android:gravity="center_vertical"
+            android:textColor="@color/color_909090"
+            android:textSize="13.3sp"
+            app:layout_constraintStart_toStartOf="@+id/cl_cover"
+            app:layout_constraintTop_toBottomOf="@+id/cl_cover"
+            tools:text="만든 날짜 2024.11.28 " />
+
+        <TextView
+            android:id="@+id/tv_content_count"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:fontFamily="@font/gmarket_sans_medium"
+            android:gravity="center_vertical"
+            android:textColor="@color/color_eeeeee"
+            android:textSize="13.3sp"
+            app:layout_constraintBottom_toBottomOf="@+id/tv_create_date"
+            app:layout_constraintStart_toEndOf="@+id/tv_create_date"
+            app:layout_constraintTop_toTopOf="@+id/tv_create_date"
+            tools:text=" 5개" />
+
+        <LinearLayout
+            android:id="@+id/ll_play"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="18dp"
+            android:background="@drawable/bg_round_corner_5_3_3bb9f1"
+            android:gravity="center"
+            android:orientation="horizontal"
+            app:layout_constraintEnd_toStartOf="@+id/ll_shuffle"
+            app:layout_constraintStart_toStartOf="@+id/tv_create_date"
+            app:layout_constraintTop_toBottomOf="@+id/tv_create_date">
+
+            <ImageView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:contentDescription="@null"
+                android:src="@drawable/ic_playlist_play" />
+
+            <TextView
+                android:id="@+id/tv_play"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:fontFamily="@font/gmarket_sans_bold"
+                android:paddingVertical="11dp"
+                android:text="Play"
+                android:textColor="@color/white"
+                android:textSize="14.7sp" />
+        </LinearLayout>
+
+        <LinearLayout
+            android:id="@+id/ll_shuffle"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="13.3dp"
+            android:layout_marginTop="18dp"
+            android:background="@drawable/bg_round_corner_5_3_3bb9f1"
+            android:gravity="center"
+            android:orientation="horizontal"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toEndOf="@+id/ll_play"
+            app:layout_constraintTop_toBottomOf="@+id/tv_create_date">
+
+            <ImageView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:contentDescription="@null"
+                android:src="@drawable/ic_playlist_shuffle" />
+
+            <TextView
+                android:id="@+id/tv_shuffle"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:fontFamily="@font/gmarket_sans_bold"
+                android:paddingVertical="11dp"
+                android:text="Shuffle"
+                android:textColor="@color/white"
+                android:textSize="14.7sp" />
+        </LinearLayout>
+
+        <androidx.recyclerview.widget.RecyclerView
+            android:id="@+id/rv_playlist_detail"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:layout_marginVertical="18dp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/ll_play" />
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</LinearLayout>

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

@@ -0,0 +1,64 @@
+<?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="wrap_content">
+
+    <ImageView
+        android:id="@+id/iv_cover"
+        android:layout_width="66.7dp"
+        android:layout_height="66.7dp"
+        android:contentDescription="@null"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <TextView
+        android:id="@+id/tv_theme"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="13.3dp"
+        android:background="@drawable/bg_round_corner_2_6_28312b"
+        android:fontFamily="@font/gmarket_sans_medium"
+        android:gravity="center"
+        android:padding="2.6dp"
+        android:textColor="@color/color_3bac6a"
+        android:textSize="8sp"
+        app:layout_constraintStart_toEndOf="@+id/iv_cover"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:ignore="SmallSp"
+        tools:text="커버곡" />
+
+    <TextView
+        android:id="@+id/tv_duration"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="8dp"
+        android:background="@drawable/bg_round_corner_2_6_222222"
+        android:fontFamily="@font/gmarket_sans_medium"
+        android:gravity="center"
+        android:padding="2.6dp"
+        android:textColor="@color/color_777777"
+        android:textSize="8sp"
+        app:layout_constraintStart_toEndOf="@+id/tv_theme"
+        app:layout_constraintTop_toTopOf="@+id/tv_theme"
+        tools:ignore="SmallSp"
+        tools:text="00:30:20" />
+
+    <TextView
+        android:id="@+id/tv_title"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginVertical="6.7dp"
+        android:layout_marginEnd="13.3dp"
+        android:ellipsize="end"
+        android:fontFamily="@font/gmarket_sans_medium"
+        android:maxLines="3"
+        android:textColor="@color/color_d2d2d2"
+        android:textSize="12sp"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="@+id/tv_theme"
+        app:layout_constraintTop_toBottomOf="@+id/tv_theme"
+        tools:text="안녕하세요 오늘은 커버곡을 들려드리려고 해요안녕하세요 오늘은 커버곡을 들려드리려고 해요안녕하세요 오늘은 커버곡을 들려드리려고 해요안녕하세요 오늘은 커버곡을 들려드리려고 해요" />
+</androidx.constraintlayout.widget.ConstraintLayout>