feat(creator): 오디오 탭 fragment 골격을 추가한다

app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/audio/CreatorChannelAudioFragment.kt

@@ -0,0 +1,154 @@
+package kr.co.vividnext.sodalive.v2.creator.channel.audio
+
+import android.os.Bundle
+import android.text.SpannableString
+import android.text.Spanned
+import android.text.style.ForegroundColorSpan
+import android.view.View
+import androidx.core.content.ContextCompat
+import androidx.core.view.isVisible
+import androidx.recyclerview.widget.LinearLayoutManager
+import kr.co.vividnext.sodalive.R
+import kr.co.vividnext.sodalive.base.BaseFragment
+import kr.co.vividnext.sodalive.databinding.FragmentCreatorChannelAudioBinding
+import kr.co.vividnext.sodalive.extensions.moneyFormat
+import kr.co.vividnext.sodalive.v2.creator.channel.audio.model.CreatorChannelAudioRateUiModel
+import kr.co.vividnext.sodalive.v2.creator.channel.model.toLabelResId
+import org.koin.androidx.viewmodel.ext.android.viewModel
+
+class CreatorChannelAudioFragment : BaseFragment<FragmentCreatorChannelAudioBinding>(
+    FragmentCreatorChannelAudioBinding::inflate
+) {
+
+    private val viewModel: CreatorChannelAudioViewModel by viewModel()
+    private val creatorId: Long by lazy { arguments?.getLong(ARG_CREATOR_ID) ?: 0L }
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+        bindLoading()
+        setupAudioList()
+        setupClickListeners()
+        observeViewModel()
+        if (creatorId > 0L) {
+            viewModel.loadAudio(creatorId, isOwner = false)
+        }
+    }
+
+    override fun onDestroyView() {
+        binding.rvCreatorChannelAudioContents.adapter = null
+        super.onDestroyView()
+    }
+
+    private fun setupAudioList() = with(binding.rvCreatorChannelAudioContents) {
+        layoutManager = LinearLayoutManager(requireContext())
+    }
+
+    private fun setupClickListeners() = with(binding) {
+        ivCreatorChannelAudioSort.setImageResource(R.drawable.ic_new_sort)
+        btnCreatorChannelAudioRetry.setOnClickListener {
+            viewModel.retryAudio()
+        }
+    }
+
+    private fun observeViewModel() {
+        viewModel.audioStateLiveData.observe(viewLifecycleOwner) { state ->
+            when (state) {
+                CreatorChannelAudioUiState.Loading -> bindLoading()
+                CreatorChannelAudioUiState.Empty -> bindEmpty()
+                is CreatorChannelAudioUiState.Error -> bindError(state)
+                is CreatorChannelAudioUiState.Content -> bindContent(state)
+            }
+        }
+    }
+
+    private fun bindLoading() = with(binding) {
+        viewCreatorChannelAudioThemeTabs.root.isVisible = false
+        layoutCreatorChannelAudioSortBar.isVisible = false
+        layoutCreatorChannelAudioRateCard.isVisible = false
+        rvCreatorChannelAudioContents.isVisible = false
+        layoutCreatorChannelAudioEmpty.isVisible = false
+        tvCreatorChannelAudioErrorMessage.isVisible = false
+        btnCreatorChannelAudioRetry.isVisible = false
+    }
+
+    private fun bindEmpty() = with(binding) {
+        viewCreatorChannelAudioThemeTabs.root.isVisible = false
+        layoutCreatorChannelAudioSortBar.isVisible = false
+        layoutCreatorChannelAudioRateCard.isVisible = false
+        rvCreatorChannelAudioContents.isVisible = false
+        layoutCreatorChannelAudioEmpty.isVisible = true
+        tvCreatorChannelAudioErrorMessage.isVisible = false
+        btnCreatorChannelAudioRetry.isVisible = false
+    }
+
+    private fun bindError(state: CreatorChannelAudioUiState.Error) = with(binding) {
+        viewCreatorChannelAudioThemeTabs.root.isVisible = false
+        layoutCreatorChannelAudioSortBar.isVisible = false
+        layoutCreatorChannelAudioRateCard.isVisible = false
+        rvCreatorChannelAudioContents.isVisible = false
+        layoutCreatorChannelAudioEmpty.isVisible = false
+        tvCreatorChannelAudioErrorMessage.isVisible = true
+        tvCreatorChannelAudioErrorMessage.text = state.message ?: getString(R.string.creator_channel_audio_error_message)
+        btnCreatorChannelAudioRetry.isVisible = true
+    }
+
+    private fun bindContent(state: CreatorChannelAudioUiState.Content) = with(binding) {
+        viewCreatorChannelAudioThemeTabs.root.isVisible = true
+        viewCreatorChannelAudioThemeTabs.root.setMenus(
+            menus = state.themes.map { it.title },
+            selectedIndex = state.themes.indexOfFirst { it.isSelected }.coerceAtLeast(0)
+        )
+        layoutCreatorChannelAudioSortBar.isVisible = true
+        tvCreatorChannelAudioTotalCount.text = state.audioContentCount.moneyFormat()
+        tvCreatorChannelAudioSortLabel.setText(state.selectedSort.toLabelResId())
+        bindRate(state.rate)
+        rvCreatorChannelAudioContents.isVisible = true
+        layoutCreatorChannelAudioEmpty.isVisible = false
+        tvCreatorChannelAudioErrorMessage.isVisible = false
+        btnCreatorChannelAudioRetry.isVisible = false
+    }
+
+    private fun bindRate(rate: CreatorChannelAudioRateUiModel?) = with(binding) {
+        layoutCreatorChannelAudioRateCard.isVisible = rate != null
+        if (rate == null) return@with
+
+        val ratePercentText = rate.ratePercent.toInt().toString()
+        val rateMessage = getString(
+            R.string.creator_channel_audio_owned_rate_message,
+            ratePercentText
+        )
+        tvCreatorChannelAudioRateMessage.text = rateMessage.highlightRatePercent(ratePercentText)
+        tvCreatorChannelAudioRateCount.text = getString(
+            R.string.creator_channel_audio_owned_rate_count,
+            rate.purchasedCount.moneyFormat(),
+            rate.paidCount.moneyFormat()
+        )
+        viewCreatorChannelAudioRateFill.pivotX = 0f
+        viewCreatorChannelAudioRateFill.scaleX = (rate.ratePercent / 100.0).toFloat().coerceIn(0f, 1f)
+    }
+
+    private fun String.highlightRatePercent(ratePercentText: String): SpannableString {
+        val spannable = SpannableString(this)
+        val target = "$ratePercentText%"
+        val start = indexOf(target)
+        if (start < 0) return spannable
+
+        spannable.setSpan(
+            ForegroundColorSpan(ContextCompat.getColor(requireContext(), R.color.soda_400)),
+            start,
+            start + target.length,
+            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+        )
+        return spannable
+    }
+
+    companion object {
+        private const val ARG_CREATOR_ID: String = "arg_creator_id"
+
+        fun newInstance(creatorId: Long): CreatorChannelAudioFragment {
+            return CreatorChannelAudioFragment().apply {
+                arguments = Bundle().apply { putLong(ARG_CREATOR_ID, creatorId) }
+            }
+        }
+    }
+}

app/src/test/java/kr/co/vividnext/sodalive/v2/creator/channel/audio/CreatorChannelAudioFragmentLayoutTest.kt

@@ -0,0 +1,161 @@
+package kr.co.vividnext.sodalive.v2.creator.channel.audio
+
+import android.app.Application
+import android.content.Context
+import android.view.LayoutInflater
+import android.view.View
+import android.widget.ImageView
+import android.widget.TextView
+import androidx.recyclerview.widget.RecyclerView
+import androidx.test.core.app.ApplicationProvider
+import kr.co.vividnext.sodalive.R
+import kr.co.vividnext.sodalive.v2.widget.CapsuleTabBarView
+import org.junit.Assert.assertEquals
+import org.junit.Assert.assertNotNull
+import org.junit.Assert.assertSame
+import org.junit.Assert.assertTrue
+import org.junit.Test
+import org.junit.runner.RunWith
+import org.robolectric.RobolectricTestRunner
+import org.robolectric.annotation.Config
+import java.io.File
+
+@RunWith(RobolectricTestRunner::class)
+@Config(sdk = [28], application = Application::class)
+class CreatorChannelAudioFragmentLayoutTest {
+
+    @Test
+    fun `오디오 fragment layout은 theme sort rate list empty error retry를 제공한다`() {
+        val root = inflateView(R.layout.fragment_creator_channel_audio)
+        val layout = projectFile("app/src/main/res/layout/fragment_creator_channel_audio.xml").readText()
+
+        val tabBar = requireNotNull(root.findViewById<CapsuleTabBarView>(R.id.view_creator_channel_audio_theme_tabs))
+        val sortBar = requireNotNull(root.findViewById<View>(R.id.layout_creator_channel_audio_sort_bar))
+        val rateCard = requireNotNull(root.findViewById<View>(R.id.layout_creator_channel_audio_rate_card))
+        val audioList = requireNotNull(root.findViewById<RecyclerView>(R.id.rv_creator_channel_audio_contents))
+        val emptyContainer = requireNotNull(root.findViewById<View>(R.id.layout_creator_channel_audio_empty))
+        val emptyMessage = requireNotNull(root.findViewById<TextView>(R.id.tv_creator_channel_audio_empty_message))
+        val errorMessage = requireNotNull(root.findViewById<TextView>(R.id.tv_creator_channel_audio_error_message))
+        val retryButton = requireNotNull(root.findViewById<TextView>(R.id.btn_creator_channel_audio_retry))
+
+        assertSame(root, tabBar.parent)
+        assertSame(root, sortBar.parent)
+        assertSame(root, rateCard.parent)
+        assertSame(root, audioList.parent)
+        assertSame(root, emptyContainer.parent)
+        assertSame(emptyContainer, emptyMessage.parent)
+        assertSame(root, errorMessage.parent)
+        assertSame(root, retryButton.parent)
+        assertEquals(false, audioList.clipToPadding)
+        assertTrue(layout.contains("android:background=\"@color/black\""))
+        assertTrue(layout.contains("layout=\"@layout/view_capsule_tab_bar\""))
+        assertTrue(layout.contains("android:layout_height=\"52dp\""))
+        assertTrue(layout.contains("android:layout_marginHorizontal=\"@dimen/spacing_14\""))
+        assertTrue(layout.contains("android:text=\"@string/creator_channel_audio_empty_message\""))
+        assertTrue(layout.contains("android:text=\"@string/creator_channel_audio_error_message\""))
+        assertTrue(layout.contains("tools:listitem=\"@layout/item_creator_channel_audio_content\""))
+    }
+
+    @Test
+    fun `오디오 sort bar는 전체 count 정렬 label sort icon을 제공한다`() {
+        val root = inflateView(R.layout.fragment_creator_channel_audio)
+        val sortBar = requireNotNull(root.findViewById<View>(R.id.layout_creator_channel_audio_sort_bar))
+
+        assertNotNull(sortBar.findViewById<TextView>(R.id.tv_creator_channel_audio_total_label))
+        assertNotNull(sortBar.findViewById<TextView>(R.id.tv_creator_channel_audio_total_count))
+        assertNotNull(sortBar.findViewById<View>(R.id.layout_creator_channel_audio_sort_button))
+        assertNotNull(sortBar.findViewById<TextView>(R.id.tv_creator_channel_audio_sort_label))
+        assertNotNull(sortBar.findViewById<ImageView>(R.id.iv_creator_channel_audio_sort))
+    }
+
+    @Test
+    fun `오디오 소장률 카드는 percent count track fill 영역을 제공한다`() {
+        val root = inflateView(R.layout.fragment_creator_channel_audio)
+        val rateCard = requireNotNull(root.findViewById<View>(R.id.layout_creator_channel_audio_rate_card))
+
+        assertNotNull(rateCard.findViewById<TextView>(R.id.tv_creator_channel_audio_rate_message))
+        assertNotNull(rateCard.findViewById<TextView>(R.id.tv_creator_channel_audio_rate_count))
+        assertNotNull(rateCard.findViewById<View>(R.id.view_creator_channel_audio_rate_track))
+        assertNotNull(rateCard.findViewById<View>(R.id.view_creator_channel_audio_rate_fill))
+    }
+
+    @Test
+    fun `오디오 콘텐츠 item layout은 88dp thumbnail title secondary action 영역을 제공한다`() {
+        val item = inflateView(R.layout.item_creator_channel_audio_content)
+        val itemLayout = projectFile("app/src/main/res/layout/item_creator_channel_audio_content.xml").readText()
+        val adapter = projectFile(
+            "app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/live/ui/CreatorChannelLiveReplayAdapter.kt"
+        ).readText()
+        val thumbnail = requireNotNull(item.findViewById<View>(R.id.layout_creator_channel_audio_content_thumbnail))
+
+        assertNotNull(item.findViewById<ImageView>(R.id.iv_creator_channel_audio_content_thumbnail))
+        assertNotNull(item.findViewById<ImageView>(R.id.iv_creator_channel_audio_content_adult_badge))
+        assertNotNull(item.findViewById<ImageView>(R.id.iv_creator_channel_audio_content_original_tag))
+        assertNotNull(item.findViewById<ImageView>(R.id.iv_creator_channel_audio_content_first_tag))
+        assertNotNull(item.findViewById<ImageView>(R.id.iv_creator_channel_audio_content_point_tag))
+        assertNotNull(item.findViewById<TextView>(R.id.tv_creator_channel_audio_content_free_tag))
+        assertNotNull(item.findViewById<TextView>(R.id.tv_creator_channel_audio_content_title))
+        assertNotNull(item.findViewById<TextView>(R.id.tv_creator_channel_audio_content_secondary_text))
+        assertNotNull(item.findViewById<View>(R.id.layout_creator_channel_audio_content_action))
+        assertNotNull(item.findViewById<ImageView>(R.id.iv_creator_channel_audio_content_play))
+        assertNotNull(item.findViewById<ImageView>(R.id.iv_creator_channel_audio_content_can))
+        assertNotNull(item.findViewById<View>(R.id.layout_creator_channel_audio_content_action_text))
+        assertNotNull(item.findViewById<TextView>(R.id.tv_creator_channel_audio_content_action_text))
+        assertEquals(dp(88), thumbnail.layoutParams.width)
+        assertEquals(dp(88), thumbnail.layoutParams.height)
+        assertTrue(itemLayout.contains("android:id=\"@+id/tv_creator_channel_audio_content_secondary_text\""))
+        assertTrue(itemLayout.contains("@drawable/bg_audio_content_card_thumbnail"))
+        assertTrue(adapter.contains("ItemCreatorChannelAudioContentBinding"))
+        assertTrue(adapter.contains("layoutCreatorChannelAudioContentThumbnail.clipToOutline = true"))
+    }
+
+    @Test
+    fun `오디오 fragment source는 skeleton observer retry visibility branches를 포함한다`() {
+        val fragment = projectFile(
+            "app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/audio/CreatorChannelAudioFragment.kt"
+        ).readText()
+
+        assertTrue(fragment.contains("BaseFragment<FragmentCreatorChannelAudioBinding>"))
+        assertTrue(fragment.contains("FragmentCreatorChannelAudioBinding::inflate"))
+        assertTrue(fragment.contains("private val viewModel: CreatorChannelAudioViewModel by viewModel()"))
+        assertTrue(fragment.contains("fun newInstance(creatorId: Long): CreatorChannelAudioFragment"))
+        assertTrue(fragment.contains("arguments = Bundle().apply { putLong(ARG_CREATOR_ID, creatorId) }"))
+        assertTrue(fragment.contains("viewModel.audioStateLiveData.observe(viewLifecycleOwner)"))
+        assertTrue(fragment.contains("CreatorChannelAudioUiState.Loading -> bindLoading()"))
+        assertTrue(fragment.contains("CreatorChannelAudioUiState.Empty -> bindEmpty()"))
+        assertTrue(fragment.contains("is CreatorChannelAudioUiState.Error -> bindError(state)"))
+        assertTrue(fragment.contains("is CreatorChannelAudioUiState.Content -> bindContent(state)"))
+        assertTrue(fragment.contains("viewModel.retryAudio()"))
+        assertTrue(fragment.contains("viewCreatorChannelAudioThemeTabs.root.isVisible = false"))
+        assertTrue(fragment.contains("viewCreatorChannelAudioThemeTabs.root.setMenus"))
+        assertTrue(fragment.contains("layoutCreatorChannelAudioSortBar.isVisible = false"))
+        assertTrue(fragment.contains("layoutCreatorChannelAudioRateCard.isVisible = false"))
+        assertTrue(fragment.contains("rvCreatorChannelAudioContents.isVisible = false"))
+        assertTrue(fragment.contains("layoutCreatorChannelAudioEmpty.isVisible = true"))
+        assertTrue(fragment.contains("tvCreatorChannelAudioErrorMessage.isVisible = true"))
+        assertTrue(fragment.contains("btnCreatorChannelAudioRetry.isVisible = true"))
+        assertTrue(fragment.contains("tvCreatorChannelAudioTotalCount.text = state.audioContentCount.moneyFormat()"))
+        assertTrue(fragment.contains("tvCreatorChannelAudioSortLabel.setText(state.selectedSort.toLabelResId())"))
+        assertTrue(fragment.contains("bindRate(state.rate)"))
+        assertTrue(fragment.contains("tvCreatorChannelAudioRateMessage.text"))
+        assertTrue(fragment.contains("ForegroundColorSpan"))
+        assertTrue(fragment.contains("R.string.creator_channel_audio_owned_rate_count"))
+        assertTrue(fragment.contains("viewCreatorChannelAudioRateFill.pivotX = 0f"))
+    }
+
+    private fun inflateView(layoutResId: Int): View {
+        val context = ApplicationProvider.getApplicationContext<Context>()
+        return LayoutInflater.from(context).inflate(layoutResId, null, false)
+    }
+
+    private fun dp(value: Int): Int {
+        val context = ApplicationProvider.getApplicationContext<Context>()
+        return (value * context.resources.displayMetrics.density).toInt()
+    }
+
+    private fun projectFile(relativePath: String): File {
+        val candidates = listOf(File(relativePath), File("../$relativePath"))
+        return candidates.firstOrNull { it.exists() }
+            ?: error("Project file not found: $relativePath")
+    }
+}

docs/20260619_크리에이터_채널_오디오_탭/plan-task.md

@@ -355,12 +355,18 @@
   - 검증 기록:
     - 2026-06-19 탐색 결과 `CreatorChannelLiveSortPopup`과 `view_creator_channel_live_sort_menu.xml`은 class/layout/id/test가 live 전용 이름에 강하게 묶여 있고, Phase 3 mapper 구현에는 즉시 필요하지 않음을 확인했다.
     - 2026-06-19 Phase 3에서는 sort popup 공통 rename/move를 실제 코드에 적용하지 않았다. 후속 재사용 검토 결과 오디오 Sort-bar에서 동일 UI/동작을 사용하므로 Phase 5에서 `CreatorChannelSortPopup` 공통 이름으로 rename/move해 적용한다.
+    - 2026-06-19 Task 3.3 재작업 요청에 따라 완료 체크를 해제했다. 실제 sort popup 공통 rename/move를 적용하고 리뷰/검증 완료 후 다시 체크한다.
+    - 2026-06-19 RED 확인: `CreatorChannelLiveFragmentLayoutTest`, `CreatorChannelLiveMapperTest`를 공통 sort 이름 기준으로 먼저 갱신한 뒤 `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.live.CreatorChannelLiveFragmentLayoutTest"`를 실행했고, `view_creator_channel_sort_menu`, `layout_creator_channel_sort_options`, 공통 `toLabelResId()` 미존재로 `:app:compileDebugUnitTestKotlin` 실패를 확인했다.
+    - 2026-06-19 `CreatorChannelLiveSortPopup`을 `CreatorChannelSortPopup`으로 `creator/channel/ui`에 move/rename하고, `view_creator_channel_sort_menu.xml`, `bg_creator_channel_sort_popup.xml`, `bg_creator_channel_sort_selected.xml`, 공통 sort option UI model/mapping을 추가했다. `CreatorChannelLiveFragment`는 공통 popup과 `creator/channel/model/toLabelResId()`를 사용하도록 갱신했다.
+    - 2026-06-19 GREEN 확인: `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.live.CreatorChannelLiveFragmentLayoutTest"`, `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.live.CreatorChannelLiveMapperTest"`, `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.audio.CreatorChannelAudioMapperTest"` 실행 결과 모두 BUILD SUCCESSFUL.
+    - 2026-06-19 stale 참조 확인: `rg -n "CreatorChannelLiveSortPopup|view_creator_channel_live_sort_menu|layout_creator_channel_live_sort_options|tv_creator_channel_live_sort_option_sample|bg_creator_channel_live_sort" app/src/main app/src/test` 실행 결과 app production/test 코드에 잔여 참조가 없음을 확인했다.
+    - 2026-06-19 리뷰 게이트에서 지적된 문서 체크 미반영 blocker를 수정하고, Task 3.3을 다시 완료 체크했다.
 
 ---
 
 ### Phase 4: 오디오 탭 레이아웃과 Fragment 구성
 
-- [ ] **Task 4.1: Fragment layout RED 테스트 작성**
+- [x] **Task 4.1: Fragment layout RED 테스트 작성**
   - 생성:
     - `app/src/test/java/kr/co/vividnext/sodalive/v2/creator/channel/audio/CreatorChannelAudioFragmentLayoutTest.kt`
   - 테스트 케이스:
@@ -373,8 +379,10 @@
     - `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.audio.CreatorChannelAudioFragmentLayoutTest"`
   - 기대 결과:
     - layout 미구현 상태에서 RED 실패한다.
+  - 검증 기록:
+    - 2026-06-19 `CreatorChannelAudioFragmentLayoutTest`를 먼저 추가하고 production 변경 전 `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.audio.CreatorChannelAudioFragmentLayoutTest"`를 실행했다. `fragment_creator_channel_audio`, 오디오 section id, `item_creator_channel_audio_content` 리소스가 없어 `:app:compileDebugUnitTestKotlin`에서 RED 실패를 확인했다.
 
-- [ ] **Task 4.2: `fragment_creator_channel_audio.xml` 작성**
+- [x] **Task 4.2: `fragment_creator_channel_audio.xml` 작성**
   - 생성:
     - `app/src/main/res/layout/fragment_creator_channel_audio.xml`
   - 수정:
@@ -391,8 +399,15 @@
     - `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.audio.CreatorChannelAudioFragmentLayoutTest"`
   - 기대 결과:
     - 리소스 merge와 layout 테스트가 PASS한다.
+  - 검증 기록:
+    - 2026-06-19 `fragment_creator_channel_audio.xml`에 black background, `@layout/view_capsule_tab_bar` include, 52dp sort bar, 14dp margin 소장률 card, RecyclerView, empty/error/retry 영역을 추가했다. `values`, `values-en`, `values-ja`에 오디오 empty/error/upload/total/rate 문자열을 추가했다.
+    - 2026-06-19 `./gradlew :app:mergeDebugResources` 실행 결과 BUILD SUCCESSFUL.
+    - 2026-06-19 `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.audio.CreatorChannelAudioFragmentLayoutTest"` 실행 결과 BUILD SUCCESSFUL.
+    - 2026-06-19 리뷰 지적 반영: Figma `290:9029` 기준과 다르던 소장률 card를 한 줄 문장형 `전체 오디오의 n%를 소장하고 있어요.`, 우측 `purchased/paid개`, 14dp padding, 4dp progress 구조로 수정했다. Figma `290:8965` 기준 empty/error 중앙 정렬을 위해 empty container와 error message에 parent 상하 constraint를 추가했다.
+    - 2026-06-19 RED 확인: `CreatorChannelAudioFragmentLayoutTest`에 소장률 card/empty 중앙 정렬 기대값을 추가한 뒤 `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.audio.CreatorChannelAudioFragmentLayoutTest"` 실행 결과 기존 Fragment가 `tvCreatorChannelAudioRateMessage`를 사용하지 않아 실패했다.
+    - 2026-06-19 GREEN 확인: 소장률 card layout, rate message/count binding, `%` 부분 `soda_400` 강조 span, 다국어 문자열을 수정한 뒤 `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.audio.CreatorChannelAudioFragmentLayoutTest"` 실행 결과 BUILD SUCCESSFUL.
 
-- [ ] **Task 4.3: 라이브 다시듣기 item layout을 공통 오디오 콘텐츠 item layout으로 rename**
+- [x] **Task 4.3: 라이브 다시듣기 item layout을 공통 오디오 콘텐츠 item layout으로 rename**
   - rename:
     - `app/src/main/res/layout/item_creator_channel_live_replay.xml` → `app/src/main/res/layout/item_creator_channel_audio_content.xml`
   - 작업:
@@ -407,8 +422,14 @@
     - `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.live.CreatorChannelLiveFragmentLayoutTest"`
   - 기대 결과:
     - 공통 item layout test와 기존 라이브 다시듣기 layout test가 모두 PASS한다.
+  - 검증 기록:
+    - 2026-06-19 `item_creator_channel_live_replay.xml`을 `item_creator_channel_audio_content.xml`로 rename하고 id prefix를 `creator_channel_audio_content`로 변경했다. `duration` TextView는 `secondary_text`로 rename했다.
+    - 2026-06-19 `CreatorChannelLiveReplayAdapter`는 `ItemCreatorChannelAudioContentBinding`과 신규 id를 사용하도록 갱신했고, `fragment_creator_channel_live.xml`의 `tools:listitem`과 live layout test 기대값도 공통 item 이름으로 갱신했다.
+    - 2026-06-19 `./gradlew :app:mergeDebugResources` 실행 결과 BUILD SUCCESSFUL.
+    - 2026-06-19 `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.audio.CreatorChannelAudioFragmentLayoutTest"` 실행 결과 BUILD SUCCESSFUL.
+    - 2026-06-19 `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.live.CreatorChannelLiveFragmentLayoutTest"` 실행 결과 BUILD SUCCESSFUL.
 
-- [ ] **Task 4.4: `CreatorChannelAudioFragment` 골격 구현**
+- [x] **Task 4.4: `CreatorChannelAudioFragment` 골격 구현**
   - 생성:
     - `app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/audio/CreatorChannelAudioFragment.kt`
   - 작업:
@@ -422,6 +443,11 @@
     - `./gradlew :app:compileDebugKotlin`
   - 기대 결과:
     - Fragment 골격이 컴파일된다.
+  - 검증 기록:
+    - 2026-06-19 `CreatorChannelAudioFragment` 골격을 추가했다. `BaseFragment<FragmentCreatorChannelAudioBinding>`, Koin `by viewModel()`, `newInstance(creatorId)`, `audioStateLiveData` observer, Loading/Empty/Error/Content visibility 분기, retryAudio 연결, Content의 sort count/label 및 rate text/progress bind를 포함했다. Phase 5/6 범위인 theme click, sort popup, adapter bind, pager 연결, pagination 연결은 구현하지 않았다.
+    - 2026-06-19 `./gradlew :app:compileDebugKotlin` 실행 결과 BUILD SUCCESSFUL.
+    - 2026-06-19 리뷰 지적 반영으로 `CreatorChannelAudioFragment.bindRate()`에서 소장률 문장과 count를 분리하고, 문장 내 `%` 구간에 `ForegroundColorSpan`으로 `soda_400` 강조를 적용했다.
+    - 2026-06-19 Phase 4 코드 리뷰 중 progress fill이 왼쪽 기준으로 채워져야 하는 회귀 조건을 확인했고, `viewCreatorChannelAudioRateFill.pivotX = 0f` source 검증을 `CreatorChannelAudioFragmentLayoutTest`에 추가했다. 기존 구현이 이미 조건을 만족해 테스트는 BUILD SUCCESSFUL.
 
 ---
 
@@ -634,3 +660,5 @@
 - 2026-06-19 Phase 3 코드 리뷰 재검증으로 `CreatorChannelAudioMappers.kt`, `CreatorChannelAudioUiModels.kt`, `CreatorChannelAudioViewModel.kt`, `CreatorChannelAudioMapperTest.kt`, `CreatorChannelAudioViewModelTest.kt`를 확인했다. 응답 `themeId` fallback 정규화가 theme UI, rate UI, `Content.selectedThemeId`, ViewModel private `selectedThemeId`, 후속 정렬 요청에 일관되게 반영되어 추가 수정 이슈는 발견하지 않았다.
 - 2026-06-19 Phase 3 코드 리뷰 재검증으로 `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.audio.CreatorChannelAudioMapperTest"`, `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.audio.CreatorChannelAudioViewModelTest"`, `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.audio.CreatorChannelAudioPaginationTest"` 실행 결과 모두 BUILD SUCCESSFUL. 최초 샌드박스 실행은 `~/.gradle` wrapper lock 파일 접근 권한으로 실패해 승인 후 재실행했다.
 - 2026-06-19 Phase 3 코드 리뷰 재검증으로 `git diff --check` 실행 결과 whitespace error 없음.
+- 2026-06-19 Phase 4 코드 리뷰로 `CreatorChannelAudioFragment.kt`, `fragment_creator_channel_audio.xml`, `item_creator_channel_audio_content.xml`, `CreatorChannelSortPopup.kt`, `CreatorChannelSortModels.kt`, 오디오/라이브 layout test 변경을 확인했다. Phase 4 범위에서 추가 blocker는 발견하지 않았다.
+- 2026-06-19 Phase 4 검증으로 `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.audio.CreatorChannelAudioFragmentLayoutTest"`, `./gradlew :app:testDebugUnitTest --tests "kr.co.vividnext.sodalive.v2.creator.channel.live.CreatorChannelLiveFragmentLayoutTest"`, `./gradlew :app:mergeDebugResources`, `./gradlew :app:compileDebugKotlin`, `./gradlew :app:ktlintCheck`, `git diff --check` 실행 결과 모두 BUILD SUCCESSFUL 또는 whitespace error 없음.