마이페이지 메인 - UI, Api 적용

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

@@ -10,6 +10,7 @@ import kr.co.vividnext.sodalive.live.LiveViewModel
 import kr.co.vividnext.sodalive.live.recommend.LiveRecommendApi
 import kr.co.vividnext.sodalive.live.recommend.LiveRecommendRepository
 import kr.co.vividnext.sodalive.main.MainViewModel
+import kr.co.vividnext.sodalive.mypage.MyPageViewModel
 import kr.co.vividnext.sodalive.network.TokenAuthenticator
 import kr.co.vividnext.sodalive.settings.event.EventApi
 import kr.co.vividnext.sodalive.settings.event.EventRepository
@@ -77,6 +78,7 @@ class AppDI(private val context: Context, isDebugMode: Boolean) {
         viewModel { FindPasswordViewModel(get()) }
         viewModel { MainViewModel(get()) }
         viewModel { LiveViewModel(get(), get(), get()) }
+        viewModel { MyPageViewModel(get()) }
     }
 
     private val repositoryModule = module {

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

@@ -1,7 +1,131 @@
 package kr.co.vividnext.sodalive.mypage
 
+import android.annotation.SuppressLint
+import android.content.Intent
+import android.net.Uri
+import android.os.Bundle
+import android.view.View
+import android.webkit.URLUtil
+import android.widget.Toast
+import coil.load
+import coil.transform.CircleCropTransformation
+import kr.co.vividnext.sodalive.R
 import kr.co.vividnext.sodalive.base.BaseFragment
+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.extensions.moneyFormat
+import kr.co.vividnext.sodalive.settings.notification.MemberRole
+import org.koin.android.ext.android.inject
 
 class MyPageFragment : BaseFragment<FragmentMyBinding>(FragmentMyBinding::inflate) {
+
+    private val viewModel: MyPageViewModel by inject()
+
+    private lateinit var loadingDialog: LoadingDialog
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+        loadingDialog = LoadingDialog(requireActivity(), layoutInflater)
+
+        setupView()
+        bindData()
+    }
+
+    override fun onStart() {
+        super.onStart()
+        viewModel.getUserInfo()
+    }
+
+    private fun setupView() {
+        binding.ivSettings.setOnClickListener {}
+
+        binding.ivEdit.setOnClickListener {}
+
+        binding.tvTotalCoin.setOnClickListener {}
+
+        binding.tvChargeCoin.setOnClickListener {}
+
+        binding.llReservationSuda.setOnClickListener {}
+
+        binding.rlServiceCenter.setOnClickListener {}
+
+        binding.tvAuth.setOnClickListener {}
+
+        if (SharedPreferenceManager.role == MemberRole.CREATOR.name) {
+            binding.tvMyChannel.visibility = View.VISIBLE
+            binding.tvMyChannel.setOnClickListener {}
+        } else {
+            binding.tvMyChannel.visibility = View.GONE
+        }
+    }
+
+    @SuppressLint("SetTextI18n")
+    private fun bindData() {
+        viewModel.toastLiveData.observe(viewLifecycleOwner) {
+            it?.let { Toast.makeText(requireContext(), it, Toast.LENGTH_LONG).show() }
+        }
+
+        viewModel.isLoading.observe(viewLifecycleOwner) {
+            if (it) {
+                loadingDialog.show(screenWidth)
+            } else {
+                loadingDialog.dismiss()
+            }
+        }
+
+        viewModel.myPageLiveData.observe(viewLifecycleOwner) {
+            if (it.isAuth) {
+                binding.tvAuth.visibility = View.GONE
+            } else {
+                binding.tvAuth.visibility = View.VISIBLE
+            }
+
+            binding.ivProfile.load(it.profileUrl) {
+                crossfade(true)
+                placeholder(R.drawable.bg_placeholder)
+                transformations(CircleCropTransformation())
+            }
+            binding.tvNickname.text = it.nickname
+
+            if (it.websiteUrl.isNullOrBlank() || !URLUtil.isValidUrl(it.websiteUrl)) {
+                binding.ivWebsite.visibility = View.GONE
+            } 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)) {
+                binding.ivBlog.visibility = View.GONE
+            } else {
+                binding.ivBlog.visibility = View.VISIBLE
+                binding.ivBlog.setOnClickListener { _ ->
+                    startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(it.blogUrl)))
+                }
+            }
+
+            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.tvTotalCoin.text = "${(it.chargeCoin + it.rewardCoin).moneyFormat()} 캔"
+            binding.tvReservationSuda.text = "${it.sudaReservationCount}"
+        }
+    }
 }

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

@@ -0,0 +1,19 @@
+package kr.co.vividnext.sodalive.mypage
+
+import com.google.gson.annotations.SerializedName
+
+data class MyPageResponse(
+    @SerializedName("nickname") val nickname: String,
+    @SerializedName("profileUrl") val profileUrl: String,
+    @SerializedName("chargeCoin") val chargeCoin: Int,
+    @SerializedName("rewardCoin") val rewardCoin: Int,
+    @SerializedName("youtubeUrl") val youtubeUrl: String?,
+    @SerializedName("instagramUrl") val instagramUrl: String?,
+    @SerializedName("websiteUrl") val websiteUrl: String?,
+    @SerializedName("blogUrl") val blogUrl: String?,
+    @SerializedName("sudaReservationCount") val sudaReservationCount: Int,
+    @SerializedName("counselingReservationCount") val counselingReservationCount: Int,
+    @SerializedName("likeCount") val likeCount: Int,
+    @SerializedName("reviewCount") val reviewCount: Int,
+    @SerializedName("isAuth") val isAuth: Boolean,
+)

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

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

app/src/main/java/kr/co/vividnext/sodalive/user/UserApi.kt

@@ -3,6 +3,7 @@ package kr.co.vividnext.sodalive.user
 import io.reactivex.rxjava3.core.Single
 import kr.co.vividnext.sodalive.common.ApiResponse
 import kr.co.vividnext.sodalive.main.PushTokenUpdateRequest
+import kr.co.vividnext.sodalive.mypage.MyPageResponse
 import kr.co.vividnext.sodalive.settings.notification.GetMemberInfoResponse
 import kr.co.vividnext.sodalive.settings.notification.UpdateNotificationSettingRequest
 import kr.co.vividnext.sodalive.user.find_password.ForgotPasswordRequest
@@ -17,6 +18,7 @@ import retrofit2.http.Multipart
 import retrofit2.http.POST
 import retrofit2.http.PUT
 import retrofit2.http.Part
+import retrofit2.http.Query
 
 interface UserApi {
     @POST("/member/login")
@@ -48,4 +50,10 @@ interface UserApi {
         @Body request: PushTokenUpdateRequest,
         @Header("Authorization") authHeader: String
     ): Single<ApiResponse<Any>>
+
+    @GET("/member/mypage")
+    fun getMyPage(
+        @Query("container") container: String = "aos",
+        @Header("Authorization") authHeader: String
+    ): Single<ApiResponse<MyPageResponse>>
 }

app/src/main/java/kr/co/vividnext/sodalive/user/UserRepository.kt

@@ -1,6 +1,9 @@
 package kr.co.vividnext.sodalive.user
 
+import io.reactivex.rxjava3.core.Single
+import kr.co.vividnext.sodalive.common.ApiResponse
 import kr.co.vividnext.sodalive.main.PushTokenUpdateRequest
+import kr.co.vividnext.sodalive.mypage.MyPageResponse
 import kr.co.vividnext.sodalive.settings.notification.UpdateNotificationSettingRequest
 import kr.co.vividnext.sodalive.user.find_password.ForgotPasswordRequest
 import kr.co.vividnext.sodalive.user.login.LoginRequest
@@ -28,4 +31,8 @@ class UserRepository(private val userApi: UserApi) {
     ) = userApi.updatePushToken(request, authHeader = token)
 
     fun getMemberInfo(token: String) = userApi.getMemberInfo(authHeader = token)
+
+    fun getMyPage(token: String): Single<ApiResponse<MyPageResponse>> {
+        return userApi.getMyPage(authHeader = token)
+    }
 }

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

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

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

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/color_352953" />
+    <corners android:radius="6.7dp" />
+    <stroke
+        android:width="1dp"
+        android:color="@color/color_9970ff" />
+</shape>

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

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

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

@@ -1,16 +1,336 @@
 <?xml version="1.0" encoding="utf-8"?>
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="match_parent"
+    android:background="@color/black">
 
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:text="마이페이지"
+    <RelativeLayout
+        android:id="@+id/rl_toolbar"
+        android:layout_width="0dp"
+        android:layout_height="50dp"
+        android:paddingStart="13.3dp"
+        android:paddingEnd="33.3dp"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent">
+
+        <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="18.3sp"
+            tools:ignore="RelativeOverlap" />
+
+        <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" />
+    </RelativeLayout>
+
+    <androidx.core.widget.NestedScrollView
+        android:layout_width="0dp"
+        android:layout_height="0dp"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toBottomOf="@+id/rl_toolbar">
 
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical"
+            android:paddingHorizontal="13.3dp"
+            android:paddingTop="6.7dp"
+            android:paddingBottom="40dp">
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:background="@drawable/bg_round_corner_16_7_222222"
+                android:gravity="center_vertical"
+                android:padding="20dp">
+
+                <ImageView
+                    android:id="@+id/iv_profile"
+                    android:layout_width="90dp"
+                    android:layout_height="90dp"
+                    android:adjustViewBounds="true"
+                    android:contentDescription="@null"
+                    android:scaleType="centerCrop" />
+
+                <LinearLayout
+                    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_height="wrap_content"
+                            android:layout_alignParentStart="true"
+                            android:layout_marginEnd="13.3dp"
+                            android:layout_toStartOf="@+id/iv_edit"
+                            android:ellipsize="end"
+                            android:fontFamily="@font/gmarket_sans_bold"
+                            android:maxLines="2"
+                            android:textColor="@color/color_eeeeee"
+                            android:textSize="20sp"
+                            tools:ignore="RelativeOverlap"
+                            tools:text="닉네임" />
+
+                        <ImageView
+                            android:id="@+id/iv_edit"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_alignParentEnd="true"
+                            android:contentDescription="@null"
+                            android:src="@drawable/ic_myinfo_edit" />
+
+                    </RelativeLayout>
+
+                    <LinearLayout
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:layout_marginTop="13.3dp"
+                        android:gravity="end"
+                        android:orientation="horizontal">
+
+                        <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" />
+
+                        <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" />
+
+                        <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" />
+
+                        <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" />
+                    </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_352953_9970ff"
+                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" />
+
+            <RelativeLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="26.7dp"
+                android:background="@drawable/bg_round_corner_16_7_222222"
+                android:padding="13.3dp">
+
+                <TextView
+                    android:id="@+id/tv_total_coin"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_centerVertical="true"
+                    android:drawablePadding="6.7dp"
+                    android:fontFamily="@font/gmarket_sans_bold"
+                    android:gravity="center"
+                    android:textColor="@color/color_eeeeee"
+                    android:textSize="18.3sp"
+                    app:drawableEndCompat="@drawable/ic_forward"
+                    app:drawableStartCompat="@drawable/ic_coin_w"
+                    tools:ignore="RelativeOverlap"
+                    tools:text="23,000 코인" />
+
+                <TextView
+                    android:id="@+id/tv_charge_coin"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_alignParentEnd="true"
+                    android:layout_centerVertical="true"
+                    android:background="@drawable/bg_round_corner_16_7_fdca2f"
+                    android:drawablePadding="7dp"
+                    android:fontFamily="@font/gmarket_sans_bold"
+                    android:gravity="center_vertical"
+                    android:minHeight="33.3dp"
+                    android:paddingStart="9dp"
+                    android:paddingEnd="15dp"
+                    android:text="충전"
+                    android:textColor="@color/black"
+                    android:textSize="12sp"
+                    app:drawableStartCompat="@drawable/ic_coin_w" />
+            </RelativeLayout>
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="40dp"
+                android:orientation="vertical">
+
+                <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_suda"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="13.3dp"
+                    android:background="@drawable/bg_round_corner_6_7_352953_9970ff"
+                    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_medium"
+                        android:text="라이브"
+                        android:textColor="@color/color_eeeeee"
+                        android:textSize="14.7sp" />
+
+                    <TextView
+                        android:id="@+id/tv_reservation_suda"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:fontFamily="@font/gmarket_sans_medium"
+                        android:textColor="@color/color_9970ff"
+                        android:textSize="14.7sp"
+                        tools:text="3" />
+                </LinearLayout>
+            </LinearLayout>
+
+            <LinearLayout
+                android:id="@+id/ll_order_list"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="40dp"
+                android:orientation="vertical"
+                android:visibility="gone">
+
+                <RelativeLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content">
+
+                    <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="18sp" />
+
+                    <TextView
+                        android:id="@+id/tv_all_order_list"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_alignParentEnd="true"
+                        android:layout_centerVertical="true"
+                        android:fontFamily="@font/gmarket_sans_medium"
+                        android:text="전체보기"
+                        android:textColor="@color/color_bbbbbb"
+                        android:textSize="11sp" />
+                </RelativeLayout>
+
+                <androidx.recyclerview.widget.RecyclerView
+                    android:id="@+id/rv_order_list"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="26.7dp" />
+
+            </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_664aab"
+                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_664aab"
+                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" />
+        </LinearLayout>
+    </androidx.core.widget.NestedScrollView>
 </androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/values/colors.xml

@@ -21,6 +21,9 @@
     <color name="color_533d89">#533D89</color>
     <color name="color_643bc8">#643BC8</color>
     <color name="color_881609">#881609</color>
+    <color name="color_fdca2f">#fdca2f</color>
+    <color name="color_352953">#352953</color>
+    <color name="color_664aab">#664aab</color>
 
     <color name="color_b3909090">#B3909090</color>
     <color name="color_88909090">#88909090</color>