feat: 마이페이지

- 신규 UI 적용

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

@@ -0,0 +1,37 @@
+package kr.co.vividnext.sodalive.common
+
+import android.view.View
+import android.widget.ImageView
+import android.widget.TextView
+import androidx.annotation.DrawableRes
+import kr.co.vividnext.sodalive.R
+
+/**
+ * Function Button Helper
+ * include된 function button 레이아웃에 이미지와 텍스트를 설정하는 헬퍼 클래스
+ */
+object FunctionButtonHelper {
+
+    /**
+     * Function button에 이미지와 텍스트를 설정합니다.
+     *
+     * @param buttonView include된 버튼 뷰
+     * @param iconRes 아이콘 drawable 리소스 ID
+     * @param title 버튼 제목
+     * @param clickListener 클릭 리스너 (optional)
+     */
+    fun setupFunctionButton(
+        buttonView: View,
+        @DrawableRes iconRes: Int,
+        title: String,
+        clickListener: View.OnClickListener? = null
+    ) {
+        val iconImageView = buttonView.findViewById<ImageView>(R.id.iv_function_icon)
+        val titleTextView = buttonView.findViewById<TextView>(R.id.tv_function_title)
+
+        iconImageView.setImageResource(iconRes)
+        titleTextView.text = title
+
+        clickListener?.let { buttonView.setOnClickListener(it) }
+    }
+}

app/src/main/java/kr/co/vividnext/sodalive/mypage/MyPageFragment.kt

@@ -15,14 +15,11 @@ import com.google.gson.Gson
 import kr.co.vividnext.sodalive.R
 import kr.co.vividnext.sodalive.audio_content.box.AudioContentBoxActivity
 import kr.co.vividnext.sodalive.base.BaseFragment
-import kr.co.vividnext.sodalive.common.Constants
+import kr.co.vividnext.sodalive.common.FunctionButtonHelper
 import kr.co.vividnext.sodalive.common.LoadingDialog
 import kr.co.vividnext.sodalive.common.SharedPreferenceManager
 import kr.co.vividnext.sodalive.databinding.FragmentMyBinding
-import kr.co.vividnext.sodalive.explorer.profile.UserProfileActivity
 import kr.co.vividnext.sodalive.extensions.moneyFormat
-import kr.co.vividnext.sodalive.following.FollowingCreatorActivity
-import kr.co.vividnext.sodalive.live.reservation_status.LiveReservationStatusActivity
 import kr.co.vividnext.sodalive.main.MainActivity
 import kr.co.vividnext.sodalive.mypage.alarm.AlarmListActivity
 import kr.co.vividnext.sodalive.mypage.auth.Auth
@@ -36,7 +33,8 @@ import kr.co.vividnext.sodalive.mypage.point.PointStatusActivity
 import kr.co.vividnext.sodalive.mypage.profile.ProfileUpdateActivity
 import kr.co.vividnext.sodalive.mypage.service_center.ServiceCenterActivity
 import kr.co.vividnext.sodalive.settings.SettingsActivity
-import kr.co.vividnext.sodalive.settings.notification.MemberRole
+import kr.co.vividnext.sodalive.settings.event.EventActivity
+import kr.co.vividnext.sodalive.settings.notice.NoticeActivity
 import kr.co.vividnext.sodalive.splash.SplashActivity
 import org.koin.android.ext.android.inject
 
@@ -64,20 +62,11 @@ class MyPageFragment : BaseFragment<FragmentMyBinding>(FragmentMyBinding::inflat
     }
 
     private fun setupView() {
-        binding.rlServiceCenter.setOnClickListener {
+//        val ivHowToUseLp = binding.ivIntroduceVoiceon.layoutParams as LinearLayout.LayoutParams
-            startActivity(
+//        ivHowToUseLp.width = screenWidth
-                Intent(
+//        ivHowToUseLp.height = (120 * screenWidth) / 352
-                    requireActivity(),
+//        binding.ivIntroduceVoiceon.layoutParams = ivHowToUseLp
-                    ServiceCenterActivity::class.java
+        binding.ivIntroduceVoiceon.setOnClickListener {
-                )
-            )
-        }
-
-        val ivHowToUseLp = binding.ivHowToUse.layoutParams as LinearLayout.LayoutParams
-        ivHowToUseLp.width = screenWidth
-        ivHowToUseLp.height = (200 * screenWidth) / 1080
-        binding.ivHowToUse.layoutParams = ivHowToUseLp
-        binding.ivHowToUse.setOnClickListener {
             val url = "https://blog.naver.com/sodalive_official"
             if (URLUtil.isValidUrl(url)) {
                 startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(url)))
@@ -86,14 +75,10 @@ class MyPageFragment : BaseFragment<FragmentMyBinding>(FragmentMyBinding::inflat
 
         if (SharedPreferenceManager.token.isNotBlank()) {
             binding.ivSettings.visibility = View.VISIBLE
-            binding.llProfileContainer.visibility = View.VISIBLE
+            binding.rlProfileContainer.visibility = View.VISIBLE
             binding.llProfileLoginContainer.visibility = View.GONE
-            binding.llFollowingMemberListContainer.visibility = View.VISIBLE
 
-            binding.rlAlarm.visibility = View.VISIBLE
+            binding.llFunctionButtonGrid.visibility = View.VISIBLE
-            binding.rlCoupon.visibility = View.VISIBLE
-            binding.llLockerContainer.visibility = View.VISIBLE
-            binding.llReservationStatusContainer.visibility = View.VISIBLE
 
             binding.ivSettings.setOnClickListener {
                 startActivity(
@@ -104,7 +89,7 @@ class MyPageFragment : BaseFragment<FragmentMyBinding>(FragmentMyBinding::inflat
                 )
             }
 
-            binding.ivEdit.setOnClickListener {
+            binding.tvEditProfile.setOnClickListener {
                 startActivity(
                     Intent(
                         requireActivity(),
@@ -114,12 +99,10 @@ class MyPageFragment : BaseFragment<FragmentMyBinding>(FragmentMyBinding::inflat
             }
 
             if (SharedPreferenceManager.userId == 17958L) {
-                binding.rlCan.visibility = View.GONE
+                binding.llCanPointContainer.visibility = View.GONE
-                binding.rlPoint.visibility = View.GONE
             } else {
-                binding.rlCan.visibility = View.VISIBLE
+                binding.llCanPointContainer.visibility = View.VISIBLE
-                binding.rlPoint.visibility = View.VISIBLE
+                binding.tvCanAmount.setOnClickListener {
-                binding.llTotalCan.setOnClickListener {
                     startActivity(
                         Intent(
                             requireActivity(),
@@ -128,7 +111,7 @@ class MyPageFragment : BaseFragment<FragmentMyBinding>(FragmentMyBinding::inflat
                     )
                 }
 
-                binding.llTotalPoint.setOnClickListener {
+                binding.tvPointAmount.setOnClickListener {
                     startActivity(
                         Intent(
                             requireActivity(),
@@ -137,6 +120,7 @@ class MyPageFragment : BaseFragment<FragmentMyBinding>(FragmentMyBinding::inflat
                     )
                 }
 
+                binding.tvChargeCan.visibility = View.VISIBLE
                 binding.tvChargeCan.setOnClickListener {
                     startActivity(
                         Intent(
@@ -147,16 +131,37 @@ class MyPageFragment : BaseFragment<FragmentMyBinding>(FragmentMyBinding::inflat
                 }
             }
 
-            binding.rlCoupon.setOnClickListener {
+            FunctionButtonHelper.setupFunctionButton(
+                buttonView = binding.btnStorage.root,
+                iconRes = R.drawable.ic_my_storage,
+                title = "보관함"
+            ) {
                 startActivity(
                     Intent(
-                        requireActivity(),
+                        requireContext(),
-                        CanCouponActivity::class.java
+                        AudioContentBoxActivity::class.java
                     )
                 )
             }
 
-            binding.rlAlarm.setOnClickListener {
+            FunctionButtonHelper.setupFunctionButton(
+                buttonView = binding.btnBlockList.root,
+                iconRes = R.drawable.ic_my_block,
+                title = "차단목록"
+            ) {
+                startActivity(
+                    Intent(
+                        requireContext(),
+                        BlockMemberActivity::class.java
+                    )
+                )
+            }
+
+            FunctionButtonHelper.setupFunctionButton(
+                buttonView = binding.btnMorningCall.root,
+                iconRes = R.drawable.ic_my_alarm,
+                title = "모닝콜"
+            ) {
                 startActivity(
                     Intent(
                         requireActivity(),
@@ -165,102 +170,65 @@ class MyPageFragment : BaseFragment<FragmentMyBinding>(FragmentMyBinding::inflat
                 )
             }
 
-            binding.llReservationLive.setOnClickListener {
+            FunctionButtonHelper.setupFunctionButton(
+                buttonView = binding.btnNotice.root,
+                iconRes = R.drawable.ic_my_notice,
+                title = "공지사항"
+            ) {
                 startActivity(
                     Intent(
                         requireActivity(),
-                        LiveReservationStatusActivity::class.java
+                        NoticeActivity::class.java
                     )
                 )
             }
 
-            binding.tvAuth.setOnClickListener {
+            FunctionButtonHelper.setupFunctionButton(
-                Auth.auth(requireActivity(), requireContext()) {
+                buttonView = binding.btnEvent.root,
-                    val bootpayResponse = Gson().fromJson(it, BootpayResponse::class.java)
+                iconRes = R.drawable.ic_my_event,
-                    val request = AuthVerifyRequest(receiptId = bootpayResponse.data.receiptId)
+                title = "이벤트"
-                    requireActivity().runOnUiThread {
+            ) {
-                        viewModel.authVerify(request) {
                 startActivity(
                     Intent(
-                                    requireContext(),
+                        requireActivity(),
-                                    SplashActivity::class.java
+                        EventActivity::class.java
-                                ).apply {
-                                    addFlags(
-                                        Intent.FLAG_ACTIVITY_CLEAR_TASK or
-                                            Intent.FLAG_ACTIVITY_NEW_TASK
                     )
-                                }
                 )
-                            requireActivity().finish()
-                        }
-                    }
-                }
             }
 
-            if (SharedPreferenceManager.role == MemberRole.CREATOR.name) {
+            FunctionButtonHelper.setupFunctionButton(
-                binding.tvMyChannel.visibility = View.VISIBLE
+                buttonView = binding.btnCustomerService.root,
-                binding.tvMyChannel.setOnClickListener {
+                iconRes = R.drawable.ic_my_service_center,
+                title = "고객센터"
+            ) {
                 startActivity(
                     Intent(
-                            requireContext(),
+                        requireActivity(),
-                            UserProfileActivity::class.java
+                        ServiceCenterActivity::class.java
-                        ).apply {
-                            putExtra(
-                                Constants.EXTRA_USER_ID,
-                                SharedPreferenceManager.userId
                     )
-                        }
                 )
             }
         } else {
-                binding.tvMyChannel.visibility = View.GONE
-            }
-
-            binding.tvFollowingList.setOnClickListener {
-                startActivity(Intent(requireContext(), FollowingCreatorActivity::class.java))
-            }
-
-            binding.tvBlockMemberList.setOnClickListener {
-                startActivity(Intent(requireContext(), BlockMemberActivity::class.java))
-            }
-
-            binding.tvOrderList.setOnClickListener {
-                startActivity(
-                    Intent(requireContext(), AudioContentBoxActivity::class.java)
-                )
-            }
-
-            binding.tvPlaylist.setOnClickListener {
-                startActivity(
-                    Intent(requireContext(), AudioContentBoxActivity::class.java).apply {
-                        putExtra(Constants.EXTRA_START_TAB_POSITION, 1)
-                    }
-                )
-            }
-        } else {
-            binding.tvTotalCan.text = "0"
             binding.ivSettings.visibility = View.GONE
-            binding.llProfileContainer.visibility = View.GONE
+            binding.llFunctionButtonGrid.visibility = View.GONE
+
+            binding.rlProfileContainer.visibility = View.GONE
             binding.llProfileLoginContainer.visibility = View.VISIBLE
-            binding.llFollowingMemberListContainer.visibility = View.GONE
-
-            binding.rlAlarm.visibility = View.GONE
-            binding.rlPoint.visibility = View.GONE
-            binding.rlCoupon.visibility = View.GONE
-            binding.llLockerContainer.visibility = View.GONE
-            binding.llReservationStatusContainer.visibility = View.GONE
-
             binding.llProfileLoginContainer.setOnClickListener {
                 (requireActivity() as MainActivity).showLoginActivity()
             }
 
-            binding.llTotalCan.setOnClickListener {
+            binding.tvCanAmount.text = "0"
+            binding.tvCanAmount.setOnClickListener {
                 (requireActivity() as MainActivity).showLoginActivity()
             }
 
-            binding.tvChargeCan.setOnClickListener {
+            binding.tvPointAmount.text = "0"
+            binding.tvPointAmount.setOnClickListener {
                 (requireActivity() as MainActivity).showLoginActivity()
             }
+
+            binding.tvChargeCan.visibility = View.INVISIBLE
         }
     }
 
@@ -280,11 +248,46 @@ class MyPageFragment : BaseFragment<FragmentMyBinding>(FragmentMyBinding::inflat
 
         viewModel.myPageLiveData.observe(viewLifecycleOwner) {
             if (it.isAuth) {
-                binding.tvAuth.visibility = View.GONE
+                FunctionButtonHelper.setupFunctionButton(
-                binding.rlCoupon.visibility = View.VISIBLE
+                    buttonView = binding.btnIdentityVerification.root,
+                    iconRes = R.drawable.ic_my_auth,
+                    title = "본인인증 완료"
+                )
+
+                FunctionButtonHelper.setupFunctionButton(
+                    buttonView = binding.btnCoupon.root,
+                    iconRes = R.drawable.ic_my_coupon,
+                    title = "쿠폰등록"
+                ) {
+                    startActivity(
+                        Intent(
+                            requireActivity(),
+                            CanCouponActivity::class.java
+                        )
+                    )
+                }
             } else {
-                binding.tvAuth.visibility = View.VISIBLE
+                FunctionButtonHelper.setupFunctionButton(
-                binding.rlCoupon.visibility = View.GONE
+                    buttonView = binding.btnIdentityVerification.root,
+                    iconRes = R.drawable.ic_my_auth,
+                    title = "본인인증"
+                ) {
+                    showAuthDialog()
+                }
+
+                FunctionButtonHelper.setupFunctionButton(
+                    buttonView = binding.btnCoupon.root,
+                    iconRes = R.drawable.ic_my_coupon,
+                    title = "쿠폰등록"
+                ) {
+                    Toast.makeText(
+                        requireContext(),
+                        "본인인증 후 사용가능합니다.",
+                        Toast.LENGTH_LONG
+                    ).show()
+
+                    showAuthDialog()
+                }
             }
 
             binding.ivProfile.load(it.profileUrl) {
@@ -294,45 +297,34 @@ class MyPageFragment : BaseFragment<FragmentMyBinding>(FragmentMyBinding::inflat
             }
             binding.tvNickname.text = it.nickname
 
-            if (it.websiteUrl.isNullOrBlank() || !URLUtil.isValidUrl(it.websiteUrl)) {
+            binding.tvCanAmount.text = (it.chargeCan + it.rewardCan).moneyFormat()
-                binding.ivWebsite.visibility = View.GONE
+            binding.tvPointAmount.text = it.point.moneyFormat()
-            } else {
-                binding.ivWebsite.visibility = View.VISIBLE
-                binding.ivWebsite.setOnClickListener { _ ->
-                    startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(it.websiteUrl)))
         }
     }
 
-            if (it.blogUrl.isNullOrBlank() || !URLUtil.isValidUrl(it.blogUrl)) {
+    private fun showAuthDialog() {
-                binding.ivBlog.visibility = View.GONE
+        Auth.auth(requireActivity(), requireContext()) { json ->
-            } else {
+            val bootpayResponse = Gson().fromJson(
-                binding.ivBlog.visibility = View.VISIBLE
+                json,
-                binding.ivBlog.setOnClickListener { _ ->
+                BootpayResponse::class.java
-                    startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(it.blogUrl)))
+            )
+            val request = AuthVerifyRequest(receiptId = bootpayResponse.data.receiptId)
+            requireActivity().runOnUiThread {
+                viewModel.authVerify(request) {
+                    startActivity(
+                        Intent(
+                            requireContext(),
+                            SplashActivity::class.java
+                        ).apply {
+                            addFlags(
+                                Intent.FLAG_ACTIVITY_CLEAR_TASK or
+                                    Intent.FLAG_ACTIVITY_NEW_TASK
+                            )
+                        }
+                    )
+                    requireActivity().finish()
+                }
             }
-            }
-
-            if (it.instagramUrl.isNullOrBlank() || !URLUtil.isValidUrl(it.instagramUrl)) {
-                binding.ivInstagram.visibility = View.GONE
-            } else {
-                binding.ivInstagram.visibility = View.VISIBLE
-                binding.ivInstagram.setOnClickListener { _ ->
-                    startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(it.instagramUrl)))
-                }
-            }
-
-            if (it.youtubeUrl.isNullOrBlank() || !URLUtil.isValidUrl(it.youtubeUrl)) {
-                binding.ivYoutube.visibility = View.GONE
-            } else {
-                binding.ivYoutube.visibility = View.VISIBLE
-                binding.ivYoutube.setOnClickListener { _ ->
-                    startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(it.youtubeUrl)))
-                }
-            }
-
-            binding.tvTotalCan.text = (it.chargeCan + it.rewardCan).moneyFormat()
-            binding.tvTotalPoint.text = it.point.moneyFormat()
-            binding.tvReservationLive.text = "${it.liveReservationCount}"
         }
     }
 }

app/src/main/java/kr/co/vividnext/sodalive/settings/SettingsActivity.kt

@@ -19,8 +19,6 @@ import kr.co.vividnext.sodalive.common.LoadingDialog
 import kr.co.vividnext.sodalive.common.SharedPreferenceManager
 import kr.co.vividnext.sodalive.databinding.ActivitySettingsBinding
 import kr.co.vividnext.sodalive.mypage.alarm.AlarmViewModel
-import kr.co.vividnext.sodalive.settings.event.EventActivity
-import kr.co.vividnext.sodalive.settings.notice.NoticeActivity
 import kr.co.vividnext.sodalive.settings.notification.NotificationSettingsActivity
 import kr.co.vividnext.sodalive.settings.signout.SignOutActivity
 import kr.co.vividnext.sodalive.settings.terms.TermsActivity
@@ -73,24 +71,6 @@ class SettingsActivity : BaseActivity<ActivitySettingsBinding>(ActivitySettingsB
 
         loadingDialog = LoadingDialog(this, layoutInflater)
 
-        binding.rlNotice.setOnClickListener {
-            startActivity(
-                Intent(
-                    applicationContext,
-                    NoticeActivity::class.java
-                )
-            )
-        }
-
-        binding.rlEvent.setOnClickListener {
-            startActivity(
-                Intent(
-                    applicationContext,
-                    EventActivity::class.java
-                )
-            )
-        }
-
         binding.rlNotificationSettings.setOnClickListener {
             startActivity(
                 Intent(
@@ -101,6 +81,7 @@ class SettingsActivity : BaseActivity<ActivitySettingsBinding>(ActivitySettingsB
         }
 
         if (SharedPreferenceManager.isAuth) {
+            binding.dividerContentSettings.visibility = View.VISIBLE
             binding.rlContentSettings.visibility = View.VISIBLE
             binding.rlContentSettings.setOnClickListener {
                 startActivity(
@@ -111,6 +92,7 @@ class SettingsActivity : BaseActivity<ActivitySettingsBinding>(ActivitySettingsB
                 )
             }
         } else {
+            binding.dividerContentSettings.visibility = View.GONE
             binding.rlContentSettings.visibility = View.GONE
         }
 

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

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="#15202F" />
+    <corners android:radius="16dp" />
+</shape>

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

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

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

@@ -27,72 +27,6 @@
                 android:background="@drawable/bg_round_corner_6_7_222222"
                 android:orientation="vertical">
 
-                <RelativeLayout
-                    android:id="@+id/rl_notice"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:paddingVertical="16.7dp"
-                    android:paddingStart="16.7dp"
-                    android:paddingEnd="13.3dp">
-
-                    <TextView
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_centerVertical="true"
-                        android:fontFamily="@font/gmarket_sans_bold"
-                        android:text="공지사항"
-                        android:textColor="@color/color_eeeeee"
-                        android:textSize="14.7sp" />
-
-                    <ImageView
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_alignParentEnd="true"
-                        android:layout_centerVertical="true"
-                        android:contentDescription="@null"
-                        android:src="@drawable/ic_forward" />
-
-                </RelativeLayout>
-
-                <View
-                    android:layout_width="match_parent"
-                    android:layout_height="1dp"
-                    android:layout_marginHorizontal="13.3dp"
-                    android:background="@color/color_88909090" />
-
-                <RelativeLayout
-                    android:id="@+id/rl_event"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:paddingVertical="16.7dp"
-                    android:paddingStart="16.7dp"
-                    android:paddingEnd="13.3dp">
-
-                    <TextView
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_centerVertical="true"
-                        android:fontFamily="@font/gmarket_sans_bold"
-                        android:text="이벤트"
-                        android:textColor="@color/color_eeeeee"
-                        android:textSize="14.7sp" />
-
-                    <ImageView
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_alignParentEnd="true"
-                        android:layout_centerVertical="true"
-                        android:contentDescription="@null"
-                        android:src="@drawable/ic_forward" />
-
-                </RelativeLayout>
-
-                <View
-                    android:layout_width="match_parent"
-                    android:layout_height="1dp"
-                    android:layout_marginHorizontal="13.3dp"
-                    android:background="@color/color_88909090" />
-
                 <RelativeLayout
                     android:id="@+id/rl_notification_settings"
                     android:layout_width="match_parent"
@@ -119,15 +53,18 @@
                         android:src="@drawable/ic_forward" />
 
                 </RelativeLayout>
-            </LinearLayout>
+
+                <View
+                    android:id="@+id/divider_content_settings"
+                    android:layout_width="match_parent"
+                    android:layout_height="1dp"
+                    android:layout_marginHorizontal="13.3dp"
+                    android:background="@color/color_88909090" />
 
                 <RelativeLayout
                     android:id="@+id/rl_content_settings"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                android:layout_marginHorizontal="13.3dp"
-                android:layout_marginTop="13.3dp"
-                android:background="@drawable/bg_round_corner_6_7_222222"
                     android:paddingVertical="16.7dp"
                     android:paddingStart="16.7dp"
                     android:paddingEnd="13.3dp">
@@ -149,6 +86,7 @@
                         android:contentDescription="@null"
                         android:src="@drawable/ic_forward" />
                 </RelativeLayout>
+            </LinearLayout>
 
             <LinearLayout
                 android:layout_width="match_parent"

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

@@ -41,7 +41,7 @@
                 android:layout_height="wrap_content"
                 android:layout_marginHorizontal="24dp"
                 android:contentDescription="@null"
-                android:src="@drawable/ic_can_circle" />
+                android:src="@drawable/ic_can" />
 
             <ImageView
                 android:id="@+id/iv_storage"

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

@@ -2,7 +2,8 @@
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="match_parent"
+    android:background="@color/color_131313">
 
     <RelativeLayout
         android:id="@+id/main_toolbar"
@@ -43,7 +44,7 @@
                 android:layout_height="wrap_content"
                 android:layout_marginHorizontal="24dp"
                 android:contentDescription="@null"
-                android:src="@drawable/ic_can_circle" />
+                android:src="@drawable/ic_can" />
 
             <ImageView
                 android:id="@+id/iv_message"

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

@@ -4,38 +4,78 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/black">
+    android:background="@color/color_131313">
 
-    <RelativeLayout
+    <!-- Header -->
-        android:id="@+id/rl_toolbar"
+    <LinearLayout
+        android:id="@+id/ll_header"
         android:layout_width="0dp"
-        android:layout_height="50dp"
+        android:layout_height="wrap_content"
-        android:paddingStart="13.3dp"
+        android:gravity="center_vertical"
-        android:paddingEnd="33.3dp"
+        android:orientation="horizontal"
+        android:paddingHorizontal="24dp"
+        android:paddingVertical="20dp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent">
 
+        <!-- Logo -->
+        <ImageView
+            android:id="@+id/iv_logo"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:contentDescription="@null"
+            android:scaleType="fitStart"
+            android:src="@drawable/img_text_logo" />
+
+        <View
+            android:layout_width="0dp"
+            android:layout_height="1dp"
+            android:layout_weight="1" />
+
+        <!-- Settings Icon -->
+        <ImageView
+            android:id="@+id/iv_settings"
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            android:contentDescription="@null"
+            android:src="@drawable/ic_settings" />
+    </LinearLayout>
+
+    <!-- Update Banner -->
+    <LinearLayout
+        android:id="@+id/ll_update_banner"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:background="#000000"
+        android:gravity="center_vertical"
+        android:orientation="horizontal"
+        android:paddingHorizontal="24dp"
+        android:paddingVertical="6dp"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/ll_header">
+
+        <TextView
+            android:id="@+id/tv_update_title"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_weight="1"
+            android:fontFamily="@font/pretendard_regular"
+            android:textColor="#B0BEC5"
+            android:textSize="16sp"
+            tools:text="[업데이트] 1.23.0 버전 업데이트" />
+
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_centerVertical="true"
+            android:layout_marginEnd="2dp"
-            android:fontFamily="@font/gmarket_sans_bold"
+            android:fontFamily="@font/pretendard_regular"
-            android:text="마이 페이지"
+            android:text="자세히"
-            android:textColor="@color/color_eeeeee"
+            android:textColor="#B0BEC5"
-            android:textSize="18.3sp"
+            android:textSize="16sp"
-            tools:ignore="RelativeOverlap" />
+            app:drawableEndCompat="@drawable/ic_arrow_right" />
-
+    </LinearLayout>
-        <ImageView
-            android:id="@+id/iv_settings"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_alignParentEnd="true"
-            android:layout_centerVertical="true"
-            android:contentDescription="@null"
-            android:src="@drawable/ic_settings"
-            android:visibility="gone" />
-    </RelativeLayout>
 
     <androidx.core.widget.NestedScrollView
         android:layout_width="0dp"
@@ -43,227 +83,115 @@
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/rl_toolbar">
+        app:layout_constraintTop_toBottomOf="@id/ll_update_banner">
 
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:orientation="vertical"
-            android:paddingHorizontal="13.3dp"
+            android:paddingHorizontal="24dp"
-            android:paddingTop="6.7dp"
+            android:paddingVertical="32dp">
-            android:paddingBottom="40dp">
 
             <LinearLayout
                 android:id="@+id/ll_profile_login_container"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
+                android:layout_marginBottom="32dp"
                 android:background="@drawable/bg_round_corner_16_7_222222"
                 android:gravity="center"
-                android:paddingVertical="24dp">
+                android:paddingVertical="12dp">
 
                 <TextView
                     android:id="@+id/tv_login"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    android:drawablePadding="6dp"
+                    android:fontFamily="@font/pretendard_bold"
-                    android:fontFamily="@font/gmarket_sans_medium"
                     android:gravity="center_vertical"
-                    android:text="Login"
+                    android:text="LOGIN"
-                    android:textSize="32sp"
+                    android:textColor="#777777"
-                    app:drawableStartCompat="@drawable/ic_logo_circle_gray" />
+                    android:textSize="32sp" />
 
             </LinearLayout>
 
-            <LinearLayout
+            <RelativeLayout
-                android:id="@+id/ll_profile_container"
+                android:id="@+id/rl_profile_container"
-                android:layout_width="match_parent"
+                android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:background="@drawable/bg_round_corner_16_7_222222"
+                android:layout_marginBottom="32dp"
                 android:gravity="center_vertical"
-                android:padding="20dp"
+                android:orientation="horizontal"
                 android:visibility="gone">
 
                 <ImageView
                     android:id="@+id/iv_profile"
-                    android:layout_width="90dp"
+                    android:layout_width="64dp"
-                    android:layout_height="90dp"
+                    android:layout_height="64dp"
-                    android:adjustViewBounds="true"
+                    android:layout_centerVertical="true"
                     android:contentDescription="@null"
                     android:scaleType="centerCrop" />
 
-                <LinearLayout
+                <!-- Nickname -->
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:layout_marginStart="13.3dp"
-                    android:orientation="vertical">
-
-                    <RelativeLayout
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content">
-
                 <TextView
                     android:id="@+id/tv_nickname"
-                            android:layout_width="wrap_content"
+                    android:layout_width="0dp"
                     android:layout_height="wrap_content"
-                            android:layout_alignParentStart="true"
+                    android:layout_centerVertical="true"
-                            android:layout_marginEnd="13.3dp"
+                    android:layout_marginHorizontal="20dp"
-                            android:layout_toStartOf="@+id/iv_edit"
+                    android:layout_toStartOf="@+id/tv_edit_profile"
+                    android:layout_toEndOf="@+id/iv_profile"
                     android:ellipsize="end"
-                            android:fontFamily="@font/gmarket_sans_bold"
+                    android:fontFamily="@font/pretendard_bold"
-                            android:maxLines="2"
+                    android:maxLines="1"
-                            android:textColor="@color/color_eeeeee"
+                    android:textColor="#FFFFFF"
-                            android:textSize="20sp"
+                    android:textSize="18sp"
-                            tools:ignore="RelativeOverlap"
+                    tools:text="Voice on 123456" />
-                            tools:text="닉네임" />
 
-                        <ImageView
+                <!-- Edit Profile Button -->
-                            android:id="@+id/iv_edit"
+                <TextView
+                    android:id="@+id/tv_edit_profile"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:layout_alignParentEnd="true"
-                            android:contentDescription="@null"
+                    android:layout_centerVertical="true"
-                            android:src="@drawable/ic_myinfo_edit" />
+                    android:background="@drawable/bg_round_corner_999_263238"
-
+                    android:fontFamily="@font/pretendard_regular"
+                    android:paddingHorizontal="12dp"
+                    android:paddingVertical="6dp"
+                    android:text="프로필 수정"
+                    android:textColor="#FFFFFF"
+                    android:textSize="14sp" />
             </RelativeLayout>
 
+            <!-- Can/Point Section -->
             <LinearLayout
+                android:id="@+id/ll_can_point_container"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                        android:layout_marginTop="13.3dp"
+                android:layout_marginBottom="32dp"
-                        android:gravity="end"
+                android:background="@drawable/bg_round_corner_16_263238"
-                        android:orientation="horizontal">
+                android:orientation="vertical">
-
-                        <ImageView
-                            android:id="@+id/iv_website"
-                            android:layout_width="wrap_content"
-                            android:layout_height="wrap_content"
-                            android:layout_marginEnd="10dp"
-                            android:contentDescription="@null"
-                            android:src="@drawable/ic_website_circle"
-                            android:visibility="gone" />
-
-                        <ImageView
-                            android:id="@+id/iv_blog"
-                            android:layout_width="wrap_content"
-                            android:layout_height="wrap_content"
-                            android:layout_marginEnd="10dp"
-                            android:contentDescription="@null"
-                            android:src="@drawable/ic_blog_circle"
-                            android:visibility="gone" />
-
-                        <ImageView
-                            android:id="@+id/iv_instagram"
-                            android:layout_width="wrap_content"
-                            android:layout_height="wrap_content"
-                            android:layout_marginEnd="10dp"
-                            android:contentDescription="@null"
-                            android:src="@drawable/ic_instagram_circle"
-                            android:visibility="gone" />
-
-                        <ImageView
-                            android:id="@+id/iv_youtube"
-                            android:layout_width="wrap_content"
-                            android:layout_height="wrap_content"
-                            android:contentDescription="@null"
-                            android:src="@drawable/ic_youtube_circle"
-                            android:visibility="gone" />
-                    </LinearLayout>
-
-                </LinearLayout>
-            </LinearLayout>
-
-            <TextView
-                android:id="@+id/tv_my_channel"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_marginTop="26.7dp"
-                android:background="@drawable/bg_round_corner_6_7_3bb9f1"
-                android:fontFamily="@font/gmarket_sans_bold"
-                android:gravity="center"
-                android:paddingVertical="13.3dp"
-                android:text="내 채널 보기"
-                android:textColor="@color/color_eeeeee"
-                android:textSize="15.3sp"
-                android:visibility="gone" />
-
-            <LinearLayout
-                android:id="@+id/ll_following_member_list_container"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_marginTop="26.7dp"
-                android:visibility="gone">
-
-                <TextView
-                    android:id="@+id/tv_following_list"
-                    android:layout_width="0dp"
-                    android:layout_height="wrap_content"
-                    android:layout_weight="1"
-                    android:background="@drawable/bg_round_corner_6_7_13181b_3bb9f1"
-                    android:fontFamily="@font/gmarket_sans_bold"
-                    android:gravity="center"
-                    android:paddingVertical="13.3dp"
-                    android:text="팔로잉 리스트"
-                    android:textColor="@color/color_3bb9f1"
-                    android:textSize="14.7sp" />
-
-                <TextView
-                    android:id="@+id/tv_block_member_list"
-                    android:layout_width="0dp"
-                    android:layout_height="wrap_content"
-                    android:layout_marginStart="10.7dp"
-                    android:layout_weight="1"
-                    android:background="@drawable/bg_round_corner_6_7_13181b_3bb9f1"
-                    android:fontFamily="@font/gmarket_sans_bold"
-                    android:gravity="center"
-                    android:paddingVertical="13.3dp"
-                    android:text="차단 리스트"
-                    android:textColor="@color/color_3bb9f1"
-                    android:textSize="14.7sp" />
-            </LinearLayout>
 
+                <!-- Can Section -->
                 <RelativeLayout
-                android:id="@+id/rl_can"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                android:layout_marginTop="26.7dp"
+                    android:gravity="center_vertical"
-                android:background="@drawable/bg_round_corner_6_7_13181b"
+                    android:orientation="horizontal"
-                android:paddingHorizontal="13.3dp"
+                    android:padding="14dp">
-                android:paddingVertical="10dp">
 
-                <LinearLayout
+                    <TextView
-                    android:id="@+id/ll_total_can"
+                        android:id="@+id/tv_can_amount"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:layout_centerVertical="true"
-                    android:orientation="horizontal"
+                        android:drawablePadding="8dp"
-                    tools:ignore="RelativeOverlap">
+                        android:fontFamily="@font/pretendard_bold"
-
+                        android:textColor="#FFFFFF"
-                    <TextView
+                        android:textSize="18sp"
-                        android:id="@+id/tv_total_can"
+                        app:drawableEndCompat="@drawable/ic_arrow_right"
-                        android:layout_width="wrap_content"
+                        app:drawableStartCompat="@drawable/ic_can"
-                        android:layout_height="wrap_content"
+                        tools:ignore="RelativeOverlap"
-                        android:fontFamily="@font/gmarket_sans_bold"
+                        tools:text="230,000" />
-                        android:gravity="center"
-                        android:textColor="@color/color_eeeeee"
-                        android:textSize="16sp"
-                        tools:text="23,000" />
-
-                    <ImageView
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_marginStart="5.3dp"
-                        android:layout_marginEnd="2.7dp"
-                        android:contentDescription="@null"
-                        android:gravity="center"
-                        android:src="@drawable/ic_can" />
-
-                    <ImageView
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:contentDescription="@null"
-                        android:gravity="center"
-                        android:src="@drawable/ic_forward" />
-                </LinearLayout>
 
                     <TextView
                         android:id="@+id/tv_charge_can"
@@ -271,293 +199,196 @@
                         android:layout_height="wrap_content"
                         android:layout_alignParentEnd="true"
                         android:layout_centerVertical="true"
-                    android:background="@drawable/bg_round_corner_16_7_transparent_b38fff"
+                        android:background="@drawable/bg_round_corner_999_3bb9f1"
-                    android:drawablePadding="3.7dp"
+                        android:fontFamily="@font/pretendard_bold"
-                    android:fontFamily="@font/gmarket_sans_bold"
+                        android:paddingHorizontal="16dp"
-                    android:gravity="center_vertical"
+                        android:paddingVertical="10dp"
-                    android:paddingHorizontal="11.3dp"
+                        android:text="캔 충전"
-                    android:paddingVertical="7dp"
+                        android:textColor="#FFFFFF"
-                    android:text="충전"
+                        android:textSize="14sp"
-                    android:textColor="@color/color_b38fff"
+                        android:visibility="invisible" />
-                    android:textSize="12sp"
-                    app:drawableStartCompat="@drawable/ic_coin_w" />
                 </RelativeLayout>
 
+                <!-- Point Section -->
                 <RelativeLayout
-                android:id="@+id/rl_point"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                android:layout_marginTop="13.3dp"
-                android:background="@drawable/bg_round_corner_6_7_13181b"
-                android:paddingHorizontal="13.3dp"
-                android:paddingVertical="16.7dp">
-
-                <LinearLayout
-                    android:id="@+id/ll_total_point"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_centerVertical="true"
                     android:gravity="center_vertical"
                     android:orientation="horizontal"
-                    tools:ignore="RelativeOverlap">
+                    android:padding="14dp">
 
                     <TextView
-                        android:id="@+id/tv_total_point"
+                        android:id="@+id/tv_point_amount"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
-                        android:fontFamily="@font/gmarket_sans_bold"
+                        android:layout_centerVertical="true"
-                        android:gravity="center"
+                        android:drawablePadding="8dp"
-                        android:textColor="@color/color_eeeeee"
+                        android:fontFamily="@font/pretendard_bold"
-                        android:textSize="16sp"
+                        android:textColor="#FFFFFF"
-                        tools:text="23,000" />
+                        android:textSize="18sp"
+                        app:drawableEndCompat="@drawable/ic_arrow_right"
+                        app:drawableStartCompat="@drawable/ic_point"
+                        tools:ignore="RelativeOverlap"
+                        tools:text="230,000" />
 
-                    <ImageView
+                    <TextView
+                        android:id="@+id/btn_point_reward"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
-                        android:layout_marginStart="5.3dp"
+                        android:layout_alignParentEnd="true"
-                        android:layout_marginEnd="2.7dp"
+                        android:layout_centerVertical="true"
-                        android:contentDescription="@null"
+                        android:background="@drawable/bg_round_corner_999_fc8f0f"
-                        android:gravity="center"
+                        android:fontFamily="@font/pretendard_bold"
-                        android:src="@drawable/ic_point" />
+                        android:paddingHorizontal="16dp"
+                        android:paddingVertical="10dp"
+                        android:text="포인트 리워드"
+                        android:textColor="#FFFFFF"
+                        android:textSize="14sp"
+                        android:visibility="invisible" />
 
-                    <ImageView
+                </RelativeLayout>
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:contentDescription="@null"
-                        android:gravity="center"
-                        android:src="@drawable/ic_forward" />
             </LinearLayout>
-            </RelativeLayout>
-
-            <RelativeLayout
-                android:id="@+id/rl_alarm"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_marginTop="13.3dp"
-                android:background="@drawable/bg_round_corner_6_7_13181b"
-                android:paddingHorizontal="13.3dp"
-                android:paddingVertical="20dp"
-                android:visibility="gone">
-
-                <TextView
-                    android:id="@+id/tv_alarm"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_centerVertical="true"
-                    android:layout_marginEnd="5.3dp"
-                    android:fontFamily="@font/gmarket_sans_bold"
-                    android:gravity="center"
-                    android:text="보이스 모닝콜 등록"
-                    android:textColor="@color/color_eeeeee"
-                    android:textSize="16sp" />
-
-                <ImageView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_centerVertical="true"
-                    android:layout_toEndOf="@+id/tv_alarm"
-                    android:contentDescription="@null"
-                    android:src="@drawable/ic_alarm_clock_72" />
-
-                <ImageView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_alignParentEnd="true"
-                    android:contentDescription="@null"
-                    android:src="@drawable/ic_forward" />
-            </RelativeLayout>
-
-            <RelativeLayout
-                android:id="@+id/rl_coupon"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_marginTop="13.3dp"
-                android:background="@drawable/bg_round_corner_6_7_13181b"
-                android:paddingHorizontal="13.3dp"
-                android:paddingVertical="20dp"
-                android:visibility="gone">
-
-                <TextView
-                    android:id="@+id/tv_coupon"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_centerVertical="true"
-                    android:layout_marginEnd="5.3dp"
-                    android:fontFamily="@font/gmarket_sans_bold"
-                    android:gravity="center"
-                    android:text="쿠폰 등록"
-                    android:textColor="@color/color_eeeeee"
-                    android:textSize="16sp" />
-
-                <ImageView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_centerVertical="true"
-                    android:layout_toEndOf="@+id/tv_coupon"
-                    android:contentDescription="@null"
-                    android:src="@drawable/ic_coupon" />
-
-                <ImageView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_alignParentEnd="true"
-                    android:contentDescription="@null"
-                    android:src="@drawable/ic_forward" />
-            </RelativeLayout>
 
+            <!-- Function Buttons Grid -->
             <LinearLayout
-                android:id="@+id/ll_locker_container"
+                android:id="@+id/ll_function_button_grid"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_marginTop="40dp"
+                android:layout_marginBottom="32dp"
                 android:orientation="vertical"
                 android:visibility="gone">
 
-                <TextView
+                <!-- First Row -->
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:fontFamily="@font/gmarket_sans_bold"
-                    android:text="내 보관함"
-                    android:textColor="@color/color_eeeeee"
-                    android:textSize="18.3sp" />
-
                 <LinearLayout
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:layout_marginTop="13.3dp"
+                    android:layout_marginBottom="16dp"
+                    android:baselineAligned="false"
+                    android:orientation="horizontal">
+
+                    <include
+                        android:id="@+id/btn_storage"
+                        layout="@layout/item_function_button"
+                        android:layout_width="0dp"
+                        android:layout_height="wrap_content"
+                        android:layout_marginEnd="8dp"
+                        android:layout_weight="1" />
+
+                    <include
+                        android:id="@+id/btn_block_list"
+                        layout="@layout/item_function_button"
+                        android:layout_width="0dp"
+                        android:layout_height="wrap_content"
+                        android:layout_marginHorizontal="8dp"
+                        android:layout_weight="1" />
+
+                    <include
+                        android:id="@+id/btn_coupon"
+                        layout="@layout/item_function_button"
+                        android:layout_width="0dp"
+                        android:layout_height="wrap_content"
+                        android:layout_marginHorizontal="8dp"
+                        android:layout_weight="1" />
+
+                    <include
+                        android:id="@+id/btn_morning_call"
+                        layout="@layout/item_function_button"
+                        android:layout_width="0dp"
+                        android:layout_height="wrap_content"
+                        android:layout_marginStart="8dp"
+                        android:layout_weight="1" />
+                </LinearLayout>
+
+                <!-- Second Row -->
+                <LinearLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:baselineAligned="false"
+                    android:orientation="horizontal">
+
+                    <include
+                        android:id="@+id/btn_notice"
+                        layout="@layout/item_function_button"
+                        android:layout_width="0dp"
+                        android:layout_height="wrap_content"
+                        android:layout_marginEnd="8dp"
+                        android:layout_weight="1" />
+
+                    <include
+                        android:id="@+id/btn_event"
+                        layout="@layout/item_function_button"
+                        android:layout_width="0dp"
+                        android:layout_height="wrap_content"
+                        android:layout_marginHorizontal="8dp"
+                        android:layout_weight="1" />
+
+                    <include
+                        android:id="@+id/btn_customer_service"
+                        layout="@layout/item_function_button"
+                        android:layout_width="0dp"
+                        android:layout_height="wrap_content"
+                        android:layout_marginHorizontal="8dp"
+                        android:layout_weight="1" />
+
+                    <include
+                        android:id="@+id/btn_identity_verification"
+                        layout="@layout/item_function_button"
+                        android:layout_width="0dp"
+                        android:layout_height="wrap_content"
+                        android:layout_marginStart="8dp"
+                        android:layout_weight="1" />
+                </LinearLayout>
+            </LinearLayout>
+
+            <ImageView
+                android:id="@+id/iv_introduce_voiceon"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center"
+                android:contentDescription="@null"
+                android:src="@drawable/img_introduce_voiceon" />
+
+            <!-- Recent Content Section -->
+            <LinearLayout
+                android:id="@+id/ll_recent_content"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="32dp"
+                android:orientation="vertical"
+                android:visibility="gone">
+
+                <!-- Title -->
+                <LinearLayout
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginBottom="14dp"
                     android:orientation="horizontal">
 
                     <TextView
-                        android:id="@+id/tv_order_list"
+                        android:layout_width="wrap_content"
-                        android:layout_width="0dp"
                         android:layout_height="wrap_content"
-                        android:layout_weight="1"
+                        android:fontFamily="@font/pretendard_bold"
-                        android:background="@drawable/bg_round_corner_6_7_13181b_3bb9f1"
+                        android:text="최근 들은 "
-                        android:fontFamily="@font/gmarket_sans_bold"
+                        android:textColor="#B0BEC5"
-                        android:gravity="center"
+                        android:textSize="16sp" />
-                        android:paddingVertical="13.3dp"
-                        android:text="구매목록"
-                        android:textColor="@color/color_3bb9f1"
-                        android:textSize="14.7sp" />
 
                     <TextView
-                        android:id="@+id/tv_playlist"
+                        android:id="@+id/tv_recent_count"
-                        android:layout_width="0dp"
+                        android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
-                        android:layout_marginStart="10.7dp"
+                        android:fontFamily="@font/pretendard_bold"
-                        android:layout_weight="1"
+                        android:textColor="#FDC118"
-                        android:background="@drawable/bg_round_corner_6_7_13181b_3bb9f1"
+                        android:textSize="16sp"
-                        android:fontFamily="@font/gmarket_sans_bold"
+                        tools:text="5" />
-                        android:gravity="center"
-                        android:paddingVertical="13.3dp"
-                        android:text="재생목록"
-                        android:textColor="@color/color_3bb9f1"
-                        android:textSize="14.7sp" />
-                </LinearLayout>
                 </LinearLayout>
 
-            <LinearLayout
+                <androidx.recyclerview.widget.RecyclerView
-                android:id="@+id/ll_reservation_status_container"
+                    android:id="@+id/rv_recent_content"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                android:layout_marginTop="40dp"
+                    android:clipToPadding="false"
-                android:orientation="vertical"
+                    android:paddingHorizontal="24dp" />
-                android:visibility="gone">
-
-                <TextView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:fontFamily="@font/gmarket_sans_bold"
-                    android:text="예약현황"
-                    android:textColor="@color/color_eeeeee"
-                    android:textSize="18.3sp" />
-
-                <LinearLayout
-                    android:id="@+id/ll_reservation_live"
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:layout_marginTop="13.3dp"
-                    android:background="@drawable/bg_round_corner_6_7_13181b_3bb9f1"
-                    android:gravity="center"
-                    android:paddingVertical="13.3dp">
-
-                    <ImageView
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:contentDescription="@null"
-                        android:src="@drawable/ic_tabbar_live_selected" />
-
-                    <TextView
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:layout_marginStart="6.7dp"
-                        android:layout_marginEnd="4dp"
-                        android:fontFamily="@font/gmarket_sans_bold"
-                        android:text="라이브"
-                        android:textColor="@color/color_3bb9f1"
-                        android:textSize="14.7sp" />
-
-                    <TextView
-                        android:id="@+id/tv_reservation_live"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:fontFamily="@font/gmarket_sans_medium"
-                        android:textColor="@color/color_3bb9f1"
-                        android:textSize="14.7sp"
-                        tools:text="3" />
             </LinearLayout>
         </LinearLayout>
-
-            <RelativeLayout
-                android:id="@+id/rl_service_center"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_marginTop="40dp"
-                android:background="@drawable/bg_round_corner_6_7_13181b"
-                android:paddingHorizontal="13.3dp"
-                android:paddingVertical="20dp">
-
-                <TextView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:drawablePadding="13.7dp"
-                    android:fontFamily="@font/gmarket_sans_bold"
-                    android:gravity="center"
-                    android:text="보이스온 고객센터"
-                    android:textColor="@color/color_eeeeee"
-                    android:textSize="15.3sp"
-                    app:drawableStartCompat="@drawable/ic_headphones" />
-
-                <ImageView
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_alignParentEnd="true"
-                    android:contentDescription="@null"
-                    android:src="@drawable/ic_forward" />
-
-            </RelativeLayout>
-
-            <TextView
-                android:id="@+id/tv_auth"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_marginTop="40dp"
-                android:background="@drawable/bg_round_corner_6_7_004b6c"
-                android:fontFamily="@font/gmarket_sans_bold"
-                android:paddingHorizontal="13.3dp"
-                android:paddingVertical="20dp"
-                android:text="본인인증"
-                android:textColor="@color/color_eeeeee"
-                android:textSize="15.3sp"
-                android:visibility="gone" />
-
-            <ImageView
-                android:id="@+id/iv_how_to_use"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_marginTop="21.3dp"
-                android:contentDescription="@null"
-                android:src="@drawable/img_how_to_use" />
-        </LinearLayout>
     </androidx.core.widget.NestedScrollView>
 </androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="0dp"
+    android:layout_height="wrap_content"
+    android:layout_weight="1"
+    android:gravity="center"
+    android:orientation="vertical">
+
+    <FrameLayout
+        android:layout_width="76dp"
+        android:layout_height="76dp"
+        android:background="@drawable/bg_round_corner_16_15202f">
+
+        <ImageView
+            android:id="@+id/iv_function_icon"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:contentDescription="@null"
+            android:scaleType="centerInside" />
+    </FrameLayout>
+
+    <TextView
+        android:id="@+id/tv_function_title"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="12dp"
+        android:fontFamily="@font/pretendard_regular"
+        android:gravity="center"
+        android:textColor="#FFFFFF"
+        android:textSize="14sp" />
+</LinearLayout>

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

@@ -126,7 +126,7 @@
                     android:layout_height="16dp"
                     android:layout_marginEnd="2dp"
                     android:contentDescription="@null"
-                    android:src="@drawable/ic_can_circle" />
+                    android:src="@drawable/ic_can" />
 
                 <TextView
                     android:id="@+id/tv_can"

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

@@ -205,7 +205,7 @@
                 android:layout_height="16dp"
                 android:layout_marginEnd="2dp"
                 android:contentDescription="@null"
-                android:src="@drawable/ic_can_circle" />
+                android:src="@drawable/ic_can" />
 
             <TextView
                 android:id="@+id/tv_can"

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

@@ -188,7 +188,7 @@
             android:layout_height="16dp"
             android:layout_marginEnd="2dp"
             android:contentDescription="@null"
-            android:src="@drawable/ic_can_circle" />
+            android:src="@drawable/ic_can" />
 
         <TextView
             android:id="@+id/tv_can"