feat: 메인 라이브

- 라이브 예약 중 UI 변경

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

@@ -9,6 +9,7 @@ data class GetRoomListResponse(
     @SerializedName("title") val title: String,
     @SerializedName("content") val content: String,
     @SerializedName("beginDateTime") val beginDateTime: String,
+    @SerializedName("beginDateTimeUtc") val beginDateTimeUtc: String,
     @SerializedName("numberOfParticipate") val numberOfParticipate: Int,
     @SerializedName("numberOfPeople") val numberOfPeople: Int,
     @SerializedName("coverImageUrl") val coverImageUrl: String,

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

@@ -489,23 +489,23 @@ class LiveFragment : BaseFragment<FragmentLiveBinding>(FragmentLiveBinding::infl
             ) {
                 super.getItemOffsets(outRect, view, parent, state)
 
-                outRect.left = 13.3f.dpToPx().toInt()
-                outRect.right = 13.3f.dpToPx().toInt()
+                outRect.left = 0
+                outRect.right = 0
 
                 when (parent.getChildAdapterPosition(view)) {
                     0 -> {
                         outRect.top = 0f.dpToPx().toInt()
-                        outRect.bottom = 6.7f.dpToPx().toInt()
+                        outRect.bottom = 8.dpToPx().toInt()
                     }
 
                     liveReservationAdapter.itemCount - 1 -> {
-                        outRect.top = 6.7f.dpToPx().toInt()
-                        outRect.bottom = 13.3f.dpToPx().toInt()
+                        outRect.top = 8.dpToPx().toInt()
+                        outRect.bottom = 0.dpToPx().toInt()
                     }
 
                     else -> {
-                        outRect.top = 6.7f.dpToPx().toInt()
-                        outRect.bottom = 6.7f.dpToPx().toInt()
+                        outRect.top = 8.dpToPx().toInt()
+                        outRect.bottom = 8.dpToPx().toInt()
                     }
                 }
             }
@@ -549,6 +549,21 @@ class LiveFragment : BaseFragment<FragmentLiveBinding>(FragmentLiveBinding::infl
 
     @SuppressLint("NotifyDataSetChanged")
     private fun setupCommunityPost() {
+        creatorCommunityAdapter = CreatorCommunityAdapter {
+            if (SharedPreferenceManager.token.isNotBlank()) {
+                startActivity(
+                    Intent(
+                        requireActivity(),
+                        CreatorCommunityAllActivity::class.java
+                    ).apply {
+                        putExtra(Constants.EXTRA_COMMUNITY_CREATOR_ID, it)
+                    }
+                )
+            } else {
+                (requireActivity() as MainActivity).showLoginActivity()
+            }
+        }
+
         val recyclerView = binding.rvCommunityPost
 
         recyclerView.layoutManager = LinearLayoutManager(
@@ -568,37 +583,23 @@ class LiveFragment : BaseFragment<FragmentLiveBinding>(FragmentLiveBinding::infl
 
                 when (parent.getChildAdapterPosition(view)) {
                     0 -> {
-                        outRect.left = 13.3f.dpToPx().toInt()
-                        outRect.right = 5.dpToPx().toInt()
+                        outRect.left = 0
+                        outRect.right = 8.dpToPx().toInt()
                     }
 
-                    liveNowAdapter.itemCount - 1 -> {
-                        outRect.left = 6.7f.dpToPx().toInt()
-                        outRect.right = 13.3f.dpToPx().toInt()
+                    creatorCommunityAdapter.itemCount - 1 -> {
+                        outRect.left = 8.dpToPx().toInt()
+                        outRect.right = 0
                     }
 
                     else -> {
-                        outRect.left = 6.7f.dpToPx().toInt()
-                        outRect.right = 6.7f.dpToPx().toInt()
+                        outRect.left = 8.dpToPx().toInt()
+                        outRect.right = 8.dpToPx().toInt()
                     }
                 }
             }
         })
 
-        creatorCommunityAdapter = CreatorCommunityAdapter {
-            if (SharedPreferenceManager.token.isNotBlank()) {
-                startActivity(
-                    Intent(
-                        requireActivity(),
-                        CreatorCommunityAllActivity::class.java
-                    ).apply {
-                        putExtra(Constants.EXTRA_COMMUNITY_CREATOR_ID, it)
-                    }
-                )
-            } else {
-                (requireActivity() as MainActivity).showLoginActivity()
-            }
-        }
         recyclerView.adapter = creatorCommunityAdapter
 
         viewModel.communityPostItemLiveData.observe(viewLifecycleOwner) {

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

@@ -2,8 +2,6 @@ package kr.co.vividnext.sodalive.live.reservation
 
 import android.annotation.SuppressLint
 import android.content.Context
-import android.graphics.Bitmap
-import android.graphics.drawable.Drawable
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
@@ -11,14 +9,15 @@ import androidx.recyclerview.widget.RecyclerView
 import com.bumptech.glide.Glide
 import com.bumptech.glide.load.resource.bitmap.CenterCrop
 import com.bumptech.glide.load.resource.bitmap.RoundedCorners
-import com.bumptech.glide.request.target.CustomTarget
-import com.bumptech.glide.request.transition.Transition
 import kr.co.vividnext.sodalive.common.SharedPreferenceManager
-import kr.co.vividnext.sodalive.databinding.ItemLiveReservationBinding
 import kr.co.vividnext.sodalive.databinding.ItemMyLiveReservationBinding
+import kr.co.vividnext.sodalive.databinding.LiveBookingCardBinding
 import kr.co.vividnext.sodalive.extensions.dpToPx
 import kr.co.vividnext.sodalive.extensions.moneyFormat
 import kr.co.vividnext.sodalive.live.GetRoomListResponse
+import java.text.SimpleDateFormat
+import java.util.Locale
+import java.util.TimeZone
 
 class LiveReservationAdapter(
     private val isMain: Boolean = false,
@@ -39,7 +38,7 @@ class LiveReservationAdapter(
         } else {
             ViewHolder(
                 parent.context,
-                ItemLiveReservationBinding.inflate(
+                LiveBookingCardBinding.inflate(
                     LayoutInflater.from(parent.context),
                     parent,
                     false
@@ -78,54 +77,45 @@ class LiveReservationAdapter(
 
     inner class ViewHolder(
         private val context: Context,
-        private val binding: ItemLiveReservationBinding
+        private val binding: LiveBookingCardBinding
     ) : RecyclerView.ViewHolder(binding.root) {
 
+        @SuppressLint("SetTextI18n")
         fun bind(item: GetRoomListResponse) {
-            val lp = binding.ivCover.layoutParams
-            lp.width = 80f.dpToPx().toInt()
-            lp.height = 116.7f.dpToPx().toInt()
+            val dateMap = parseUtcIsoLocalDateTime(item.beginDateTimeUtc)
 
             Glide
                 .with(context)
                 .asBitmap()
                 .transform(CenterCrop(), RoundedCorners(16f.dpToPx().toInt()))
-                .load(item.coverImageUrl)
-                .into(object : CustomTarget<Bitmap>() {
-                    override fun onResourceReady(
-                        resource: Bitmap,
-                        transition: Transition<in Bitmap>?
-                    ) {
-                        binding.ivCover.setImageBitmap(resource)
-                        binding.ivCover.layoutParams = lp
-                    }
+                .load(item.creatorProfileImage)
+                .into(binding.ivProfile)
 
-                    override fun onLoadCleared(placeholder: Drawable?) {
-                    }
-                })
-            binding.tvDate.text = item.beginDateTime
             binding.tvNickname.text = item.creatorNickname
             binding.tvTitle.text = item.title
-            binding.root.setOnClickListener { onClick(item) }
-            binding.ivLock.visibility = if (item.isPrivateRoom) {
-                View.VISIBLE
-            } else {
-                View.GONE
-            }
+            binding.tvDayOfWeek.text = dateMap["dayOfWeek"]
+            binding.tvTime.text = dateMap["time"]
+
+            binding.tvMonth.text = "${dateMap["month"]}월"
+            binding.tvDay.text = dateMap["day"]
 
             if (item.isReservation) {
-                binding.tvPrice.visibility = View.GONE
+                binding.tvCan.visibility = View.GONE
+                binding.tvFree.visibility = View.GONE
                 binding.tvCompleteReservation.visibility = View.VISIBLE
-            } else {
-                binding.tvPrice.visibility = View.VISIBLE
+            } else if (item.price <= 0) {
+                binding.tvCan.visibility = View.GONE
                 binding.tvCompleteReservation.visibility = View.GONE
-
-                binding.tvPrice.text = if (item.price <= 0) {
-                    "무료"
+                binding.tvFree.visibility = View.VISIBLE
             } else {
-                    "${item.price.moneyFormat()}캔"
-                }
+                binding.tvFree.visibility = View.GONE
+                binding.tvCompleteReservation.visibility = View.GONE
+                binding.tvCan.visibility = View.VISIBLE
+
+                binding.tvCan.text = item.price.moneyFormat()
             }
+
+            binding.root.setOnClickListener { onClick(item) }
         }
     }
 
@@ -133,6 +123,7 @@ class LiveReservationAdapter(
         private val context: Context,
         private val binding: ItemMyLiveReservationBinding
     ) : RecyclerView.ViewHolder(binding.root) {
+        @SuppressLint("SetTextI18n")
         fun bind(item: GetRoomListResponse, position: Int) {
             binding.tvMyLive.visibility = if (position == 0) {
                 View.VISIBLE
@@ -140,37 +131,62 @@ class LiveReservationAdapter(
                 View.GONE
             }
 
-            val lp = binding.ivCover.layoutParams
-            lp.width = 80f.dpToPx().toInt()
-            lp.height = 116.7f.dpToPx().toInt()
+            val dateMap = parseUtcIsoLocalDateTime(item.beginDateTimeUtc)
 
             Glide
                 .with(context)
                 .asBitmap()
-                .load(item.coverImageUrl)
                 .transform(CenterCrop(), RoundedCorners(16f.dpToPx().toInt()))
-                .into(object : CustomTarget<Bitmap>() {
-                    override fun onResourceReady(
-                        resource: Bitmap,
-                        transition: Transition<in Bitmap>?
-                    ) {
-                        binding.ivCover.setImageBitmap(resource)
-                        binding.ivCover.layoutParams = lp
-                    }
+                .load(item.creatorProfileImage)
+                .into(binding.ivProfile)
 
-                    override fun onLoadCleared(placeholder: Drawable?) {
-                    }
-                })
-            binding.tvDate.text = item.beginDateTime
             binding.tvNickname.text = item.creatorNickname
             binding.tvTitle.text = item.title
-            binding.root.setOnClickListener { onClick(item) }
+            binding.tvDayOfWeek.text = dateMap["dayOfWeek"]
+            binding.tvTime.text = dateMap["time"]
 
-            binding.ivLock.visibility = if (item.isPrivateRoom) {
-                View.VISIBLE
+            binding.tvMonth.text = "${dateMap["month"]}월"
+            binding.tvDay.text = dateMap["day"]
+
+            if (item.price <= 0) {
+                binding.tvCan.visibility = View.GONE
+                binding.tvFree.visibility = View.VISIBLE
             } else {
-                View.GONE
+                binding.tvFree.visibility = View.GONE
+                binding.tvCan.visibility = View.VISIBLE
+
+                binding.tvCan.text = item.price.moneyFormat()
+            }
+
+            binding.root.setOnClickListener { onClick(item) }
         }
     }
+
+    private fun parseUtcIsoLocalDateTime(utcString: String): Map<String, String> {
+        // 1. 서버가 내려준 포맷: "yyyy-MM-dd'T'HH:mm:ss"
+        val utcFormat = SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss", Locale.getDefault())
+        utcFormat.timeZone = TimeZone.getTimeZone("UTC")  // 서버가 UTC 기준으로 보낸 것
+
+        // 2. Date 객체 생성
+        val date = utcFormat.parse(utcString)!!
+
+        // 3. 월 (1~12)
+        val month = SimpleDateFormat("M", Locale.getDefault()).format(date)
+
+        // 4. 일 (1~31)
+        val day = SimpleDateFormat("d", Locale.getDefault()).format(date)
+
+        // 5. 요일 (예: "Mon", "목")
+        val dayOfWeek = SimpleDateFormat("E", Locale.getDefault()).format(date)
+
+        // 6. 시간 (예: "AM 05:00")
+        val time = SimpleDateFormat("a hh:mm", Locale.getDefault()).format(date)
+
+        return mapOf(
+            "month" to month,
+            "day" to day,
+            "dayOfWeek" to dayOfWeek,
+            "time" to time
+        )
     }
 }

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

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="#FFFFFF" />
+    <corners
+        android:topLeftRadius="0dp"
+        android:topRightRadius="0dp"
+        android:bottomLeftRadius="16dp"
+        android:bottomRightRadius="16dp" />
+</shape>

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

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="#FF5C49" />
+    <corners
+        android:topLeftRadius="16dp"
+        android:topRightRadius="16dp"
+        android:bottomLeftRadius="0dp"
+        android:bottomRightRadius="0dp" />
+</shape>

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

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="107dp"
+    android:height="107dp"
+    android:viewportWidth="107"
+    android:viewportHeight="107">
+    
+    <!-- Background -->
+    <path
+        android:fillColor="#E0E0E0"
+        android:pathData="M0,16C0,7.16 7.16,0 16,0H91C99.84,0 107,7.16 107,16V91C107,99.84 99.84,107 91,107H16C7.16,107 0,99.84 0,91V16Z" />
+    
+    <!-- Person icon -->
+    <path
+        android:fillColor="#BDBDBD"
+        android:pathData="M53.5,30C58.19,30 62,33.81 62,38.5C62,43.19 58.19,47 53.5,47C48.81,47 45,43.19 45,38.5C45,33.81 48.81,30 53.5,30ZM53.5,52C63.44,52 77,56.98 77,67V72C77,74.21 75.21,76 73,76H34C31.79,76 30,74.21 30,72V67C30,56.98 43.56,52 53.5,52Z" />
+    
+</vector>

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

@@ -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="#263238" />
+    <corners android:radius="16dp" />
+</shape>

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

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

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

@@ -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="#3B5FF1" />
+    <corners android:radius="16dp" />
+</shape>

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

@@ -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="#FFFFFF" />
+    <corners android:radius="16dp" />
+</shape>

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

@@ -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="#2E6279" />
+    <corners android:radius="16dp" />
+</shape>

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

@@ -91,6 +91,8 @@
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_marginBottom="48dp"
+                android:clipToPadding="false"
+                android:paddingHorizontal="24dp"
                 android:visibility="gone" />
 
             <include

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

@@ -13,87 +13,211 @@
         android:layout_height="wrap_content"
         android:layout_marginBottom="8dp"
         android:drawablePadding="8dp"
-        android:fontFamily="@font/gmarket_sans_bold"
+        android:fontFamily="@font/pretendard_bold"
         android:text="내가 개설한 라이브"
         android:textColor="@color/color_80d8ff"
-        android:textSize="16sp"
+        android:textSize="18sp"
         app:drawableStartCompat="@drawable/ic_mic_colored" />
 
-    <RelativeLayout
+    <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@drawable/bg_round_corner_8_transparent_3bb9f1"
-        android:orientation="horizontal"
-        android:padding="1dp">
+        android:background="@drawable/live_booking_card_background_with_stroke"
+        android:padding="14dp">
 
         <ImageView
-            android:id="@+id/iv_cover"
-            android:layout_width="80dp"
-            android:layout_height="116.7dp"
+            android:id="@+id/iv_profile"
+            android:layout_width="107dp"
+            android:layout_height="107dp"
             android:contentDescription="@null"
+            android:scaleType="centerCrop"
+            android:src="@drawable/ic_placeholder_profile"
+            app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent" />
+            app:layout_constraintTop_toTopOf="parent"
+            tools:src="@tools:sample/avatars" />
 
+        <!-- Content Area -->
+        <LinearLayout
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginHorizontal="16dp"
+            android:layout_weight="1"
+            android:orientation="vertical"
+            app:layout_constraintBottom_toBottomOf="@+id/iv_profile"
+            app:layout_constraintEnd_toStartOf="@+id/ll_date"
+            app:layout_constraintStart_toEndOf="@+id/iv_profile"
+            app:layout_constraintTop_toTopOf="@+id/iv_profile">
+            <!-- Title -->
             <LinearLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-            android:layout_centerVertical="true"
-            android:layout_marginStart="30dp"
-            android:layout_toStartOf="@+id/iv_lock"
-            android:layout_toEndOf="@+id/iv_cover"
-            android:orientation="vertical">
-
-            <TextView
-                android:id="@+id/tv_date"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:fontFamily="@font/gmarket_sans_medium"
-                android:textColor="@color/color_ffd300"
-                android:textSize="9.3sp"
-                tools:ignore="SmallSp"
-                tools:text="2021.06.20 SUN 10:00 PM" />
+                android:gravity="center_vertical"
+                android:orientation="horizontal">
 
                 <TextView
                     android:id="@+id/tv_nickname"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                android:layout_marginTop="10dp"
-                android:layout_marginBottom="4dp"
-                android:fontFamily="@font/gmarket_sans_medium"
-                android:textColor="@color/color_bbbbbb"
-                android:textSize="11.3sp"
-                tools:text="사냥꾼 1004" />
+                    android:fontFamily="@font/pretendard_regular"
+                    android:textColor="#FFFFFF"
+                    android:textSize="18sp"
+                    tools:text="우기라스" />
+
+            </LinearLayout>
+
+            <!-- Content -->
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:orientation="vertical">
 
                 <TextView
                     android:id="@+id/tv_title"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginVertical="8dp"
+                    android:ellipsize="end"
+                    android:fontFamily="@font/pretendard_regular"
+                    android:maxLines="2"
+                    android:textColor="#B0BEC5"
+                    android:textSize="16sp"
+                    tools:text="평범한 가족의 아슬아슬한 이중생활..." />
+
+                <!-- Time Info -->
+                <LinearLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:gravity="center_vertical"
+                    android:orientation="horizontal">
+
+                    <TextView
+                        android:id="@+id/tv_day_of_week"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
-                android:ellipsize="end"
-                android:fontFamily="@font/gmarket_sans_medium"
-                android:maxLines="2"
-                android:textColor="@color/color_e2e2e2"
-                android:textSize="15.3sp"
-                tools:text="여자들이 좋아하는 남자 스타일은?" />
+                        android:fontFamily="@font/pretendard_regular"
+                        android:textColor="#78909C"
+                        android:textSize="16sp"
+                        tools:text="월" />
+
+                    <TextView
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_marginHorizontal="4dp"
+                        android:fontFamily="@font/pretendard_regular"
+                        android:text="|"
+                        android:textColor="#78909C"
+                        android:textSize="16sp" />
+
+                    <TextView
+                        android:id="@+id/tv_time"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:fontFamily="@font/pretendard_regular"
+                        android:textColor="#98A2F6"
+                        android:textSize="16sp"
+                        tools:text="오후 03:30" />
                 </LinearLayout>
+            </LinearLayout>
+        </LinearLayout>
+
+        <!-- Right Area -->
+        <LinearLayout
+            android:id="@+id/ll_date"
+            android:layout_width="52dp"
+            android:layout_height="wrap_content"
+            android:orientation="vertical"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+            <!-- Month -->
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:background="@drawable/date_month_background"
+                android:gravity="center"
+                android:paddingVertical="4dp">
+
+                <TextView
+                    android:id="@+id/tv_month"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:fontFamily="@font/pretendard_bold"
+                    android:lineSpacingMultiplier="1.2"
+                    android:textColor="#FFFFFF"
+                    android:textSize="14sp"
+                    android:textStyle="bold"
+                    tools:text="6월" />
+
+            </LinearLayout>
+
+            <!-- Day -->
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:background="@drawable/date_day_background"
+                android:gravity="center"
+                android:paddingVertical="4dp">
+
+                <TextView
+                    android:id="@+id/tv_day"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:fontFamily="@font/pretendard_bold"
+                    android:lineSpacingMultiplier="1.2"
+                    android:textColor="#263238"
+                    android:textSize="16sp"
+                    tools:text="27" />
+
+            </LinearLayout>
+        </LinearLayout>
+
+        <!-- Payment Status -->
+        <LinearLayout
+            android:id="@+id/ll_can"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_alignParentBottom="true"
+            android:background="@drawable/payment_background"
+            android:gravity="center_vertical"
+            android:minWidth="52dp"
+            android:orientation="horizontal"
+            android:padding="4dp"
+            android:visibility="gone"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent">
 
             <ImageView
-            android:id="@+id/iv_lock"
+                android:layout_width="16dp"
+                android:layout_height="16dp"
+                android:layout_marginEnd="2dp"
+                android:contentDescription="@null"
+                android:src="@drawable/ic_can_circle" />
+
+            <TextView
+                android:id="@+id/tv_can"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-            android:layout_alignParentEnd="true"
-            android:layout_marginTop="13.3dp"
-            android:layout_marginEnd="13.3dp"
-            android:background="@drawable/bg_circle_b3333333"
-            android:contentDescription="@null"
-            android:padding="2.7dp"
-            android:src="@drawable/ic_lock"
-            android:visibility="gone" />
-    </RelativeLayout>
-
-    <View
-        android:id="@+id/divider"
-        android:layout_width="match_parent"
-        android:layout_height="1dp"
-        android:layout_marginTop="13dp"
-        android:background="@color/color_88909090" />
+                android:fontFamily="@font/pretendard_regular"
+                android:textColor="#FFFFFF"
+                android:textSize="14sp"
+                tools:text="1,000" />
+        </LinearLayout>
+
+        <TextView
+            android:id="@+id/tv_free"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:background="@drawable/payment_free_background"
+            android:fontFamily="@font/pretendard_regular"
+            android:gravity="center"
+            android:minWidth="52dp"
+            android:padding="4dp"
+            android:text="무료"
+            android:textColor="#263238"
+            android:textSize="14sp"
+            android:visibility="gone"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent" />
+    </androidx.constraintlayout.widget.ConstraintLayout>
 </LinearLayout>

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

@@ -0,0 +1,219 @@
+<?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"
+    android:background="@drawable/live_booking_card_background"
+    android:padding="14dp">
+
+    <ImageView
+        android:id="@+id/iv_profile"
+        android:layout_width="107dp"
+        android:layout_height="107dp"
+        android:contentDescription="@null"
+        android:scaleType="centerCrop"
+        android:src="@drawable/ic_placeholder_profile"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:src="@tools:sample/avatars" />
+
+    <!-- Content Area -->
+    <LinearLayout
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginHorizontal="16dp"
+        android:layout_weight="1"
+        android:orientation="vertical"
+        app:layout_constraintBottom_toBottomOf="@+id/iv_profile"
+        app:layout_constraintEnd_toStartOf="@+id/ll_date"
+        app:layout_constraintStart_toEndOf="@+id/iv_profile"
+        app:layout_constraintTop_toTopOf="@+id/iv_profile">
+        <!-- Title -->
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:gravity="center_vertical"
+            android:orientation="horizontal">
+
+            <TextView
+                android:id="@+id/tv_nickname"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:fontFamily="@font/pretendard_regular"
+                android:textColor="#FFFFFF"
+                android:textSize="18sp"
+                tools:text="우기라스" />
+
+        </LinearLayout>
+
+        <!-- Content -->
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+
+            <TextView
+                android:id="@+id/tv_title"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginVertical="8dp"
+                android:ellipsize="end"
+                android:fontFamily="@font/pretendard_regular"
+                android:maxLines="2"
+                android:textColor="#B0BEC5"
+                android:textSize="16sp"
+                tools:text="평범한 가족의 아슬아슬한 이중생활..." />
+
+            <!-- Time Info -->
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:gravity="center_vertical"
+                android:orientation="horizontal">
+
+                <TextView
+                    android:id="@+id/tv_day_of_week"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:fontFamily="@font/pretendard_regular"
+                    android:textColor="#78909C"
+                    android:textSize="16sp"
+                    tools:text="월" />
+
+                <TextView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginHorizontal="4dp"
+                    android:fontFamily="@font/pretendard_regular"
+                    android:text="|"
+                    android:textColor="#78909C"
+                    android:textSize="16sp" />
+
+                <TextView
+                    android:id="@+id/tv_time"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:fontFamily="@font/pretendard_regular"
+                    android:textColor="#98A2F6"
+                    android:textSize="16sp"
+                    tools:text="오후 03:30" />
+            </LinearLayout>
+        </LinearLayout>
+    </LinearLayout>
+
+    <!-- Right Area -->
+    <LinearLayout
+        android:id="@+id/ll_date"
+        android:layout_width="52dp"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="parent">
+
+        <!-- Month -->
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:background="@drawable/date_month_background"
+            android:gravity="center"
+            android:paddingVertical="4dp">
+
+            <TextView
+                android:id="@+id/tv_month"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:fontFamily="@font/pretendard_bold"
+                android:lineSpacingMultiplier="1.2"
+                android:textColor="#FFFFFF"
+                android:textSize="14sp"
+                android:textStyle="bold"
+                tools:text="6월" />
+
+        </LinearLayout>
+
+        <!-- Day -->
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:background="@drawable/date_day_background"
+            android:gravity="center"
+            android:paddingVertical="4dp">
+
+            <TextView
+                android:id="@+id/tv_day"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:fontFamily="@font/pretendard_bold"
+                android:lineSpacingMultiplier="1.2"
+                android:textColor="#263238"
+                android:textSize="16sp"
+                tools:text="27" />
+
+        </LinearLayout>
+    </LinearLayout>
+
+    <!-- Payment Status -->
+    <LinearLayout
+        android:id="@+id/ll_can"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:background="@drawable/payment_background"
+        android:gravity="center_vertical"
+        android:minWidth="52dp"
+        android:orientation="horizontal"
+        android:paddingHorizontal="4dp"
+        android:paddingVertical="2dp"
+        android:visibility="gone"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent">
+
+        <ImageView
+            android:layout_width="16dp"
+            android:layout_height="16dp"
+            android:layout_marginEnd="2dp"
+            android:contentDescription="@null"
+            android:src="@drawable/ic_can_circle" />
+
+        <TextView
+            android:id="@+id/tv_can"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:fontFamily="@font/pretendard_regular"
+            android:textColor="#FFFFFF"
+            android:textSize="14sp"
+            tools:text="300" />
+    </LinearLayout>
+
+    <TextView
+        android:id="@+id/tv_complete_reservation"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:background="@drawable/reservation_complete_background"
+        android:fontFamily="@font/pretendard_regular"
+        android:minWidth="52dp"
+        android:padding="4dp"
+        android:text="예약완료"
+        android:textColor="#FFF"
+        android:textSize="14sp"
+        android:visibility="gone"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent" />
+
+    <TextView
+        android:id="@+id/tv_free"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:background="@drawable/payment_free_background"
+        android:fontFamily="@font/pretendard_regular"
+        android:gravity="center"
+        android:minWidth="52dp"
+        android:padding="4dp"
+        android:text="무료"
+        android:textColor="#263238"
+        android:textSize="14sp"
+        android:visibility="gone"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent" />
+</androidx.constraintlayout.widget.ConstraintLayout>