feat(creator): 정렬 팝업을 적용한다

docs/20260703_크리에이터_채널_라이브_탭/prd.md

@@ -19,7 +19,7 @@ Figma 참조:
 - 현재 크리에이터 채널 공통 shell은 홈 탭 중심으로 구현되어 있고, `라이브` 탭의 실제 목록 API, 정렬, 페이지네이션이 연결되어 있지 않다.
 - 라이브 탭은 홈 탭의 현재 진행 중인 라이브 UI를 재사용해야 하지만, 라이브 다시듣기 목록은 가격, 포인트 사용 가능, 19금, 소장중, 대여중 상태를 함께 표시해야 하므로 별도 item 요구사항이 필요하다.
 - sort-bar는 라이브 탭 전용이 아니라 다른 탭에서도 같은 형태로 재사용될 수 있어 채널 공통 컴포넌트 경계가 필요하다.
-- 정렬 선택 UI는 Figma에 anchored context menu 형태가 있으나, 모바일 하단 접근성과 옵션 확장성을 고려해 앱 구현 방식 결정이 필요하다.
+- 정렬 선택 UI는 기존 BottomSheet에서 Figma와 같은 anchored context popup 형태로 변경해야 한다.
 - 본인 채널의 라이브 탭에서는 하단에 고정된 `라이브 시작하기` CTA가 필요하며, 일반 사용자 채널 진입과 표시 조건이 달라야 한다.
 
 ## 3. Goals
@@ -28,7 +28,8 @@ Figma 참조:
 - 기본 정렬은 `LATEST`로 호출하고, 서버 응답의 `sort`를 현재 선택 정렬 상태로 반영한다.
 - sort-bar는 `SodaLive/Sources/V2/CreatorChannel/Components/**` 아래에 생성해 라이브 탭 외 다른 탭에서도 재사용할 수 있게 한다.
 - 정렬 문구는 `I18n`에 ko/en/ja 다국어로 추가한다.
-- 정렬 선택 UI는 BottomSheet 방식을 채택한다.
+- sort-bar는 전체 개수가 `0` 이상으로 내려오면 `전체 23` 형식으로 개수를 표시한다.
+- 정렬 선택 UI는 Figma와 같은 context popup 방식을 채택한다.
 - 현재 진행 중인 라이브는 크리에이터 채널 홈의 `CreatorChannelCurrentLiveSection` UI를 재사용한다.
 - 라이브 다시듣기 item은 Figma 기준으로 썸네일, 제목, duration, 가격/포인트/무료/19금/소장중/대여중 상태를 표시한다.
 - `hasNext == true`이면 스크롤 하단 진입 시 현재 응답의 `page + 1` 페이지를 추가 조회한다.
@@ -140,25 +141,26 @@ enum ContentSort: String, Decodable, CaseIterable {
 ### 7.3 Sort-bar
 - 생성 위치: `SodaLive/Sources/V2/CreatorChannel/Components/**`
 - sort-bar는 현재 정렬명과 아래 방향 아이콘을 표시한다.
+- `totalCount`가 `0` 이상이면 sort-bar 좌측에 `전체 {totalCount}`를 표시한다.
+- `totalCount`가 `nil`이거나 음수이면 전체 개수 영역은 숨긴다.
 - Figma 기준 높이는 `52pt`, 좌우 horizontal padding은 기존 `SodaSpacing` 토큰으로 맞춘다.
 - 정렬명은 `I18n`에 추가한다.
 - sort-bar는 다른 탭에서도 재사용 가능하도록 `selectedSort`, `availableSorts`, `onTapSort` 같은 일반화된 입력을 받는다.
 - 이번 범위에서는 Figma의 `리스트형` view mode 옵션은 사용하지 않는다.
 
 ### 7.4 정렬 선택 UI
-- 정렬 선택 UI는 BottomSheet 방식으로 구현한다.
-- 선택 사유:
-  - 모바일 한 손 조작에서 화면 하단 sheet가 우측 상단 anchored menu보다 터치 접근성이 좋다.
-  - 정렬 옵션이 4개이고 이후 탭별 옵션 추가 가능성이 있어 sheet가 선택 영역과 dismiss 동작을 안정적으로 제공한다.
-  - iOS/Material 계열 최신 모바일 앱에서 필터/정렬 같은 목록 제어는 sheet 패턴이 일반적이며, context menu는 짧은 보조 action에 더 적합하다.
-- 정렬 sheet 항목:
+- 정렬 선택 UI는 Figma `290:9041`처럼 sort-bar 우측 정렬 버튼 아래에 붙는 context popup으로 구현한다.
+- popup은 `Color.gray700` 1pt border, `14pt` corner radius, `Color.gray900` 기본 배경을 사용한다.
+- 선택된 항목은 `Color.gray800` 배경으로 표시한다.
+- popup 밖을 터치하거나 항목을 선택하면 닫힌다.
+- 정렬 popup 항목:
   - `LATEST`: 최신순
   - `POPULAR`: 인기순
   - `PRICE_HIGH`: 가격 높은 순
   - `PRICE_LOW`: 가격 낮은 순
 - Figma `290:9041`에는 `추천순`이 있으나 API `ContentSort`에 없으므로 구현하지 않는다.
 - 현재 선택된 sort는 시각적으로 선택 상태를 표시한다.
-- sort item 터치 시 sheet를 닫고 첫 페이지를 재조회한다.
+- sort item 터치 시 popup을 닫고 첫 페이지를 재조회한다.
 
 ### 7.5 현재 진행 중인 라이브
 - `currentLive != nil`이면 sort-bar 아래 또는 Figma 배치 기준 위치에 현재 진행 중인 라이브 UI를 표시한다.
@@ -212,7 +214,7 @@ enum ContentSort: String, Decodable, CaseIterable {
 - sort-bar는 tab-bar 아래에 붙어 보이고, 목록 콘텐츠와 겹치지 않아야 한다.
 - Empty 상태에서는 sort-bar와 list가 보이지 않아야 한다.
 - 다시듣기 item의 썸네일, 제목, 가격/상태 영역은 긴 제목과 다국어 문구에서도 겹치지 않아야 한다.
-- BottomSheet는 dim 또는 drag/dismiss 동작이 기존 앱 sheet 패턴과 일관되어야 한다.
+- context popup은 sort-bar 우측 버튼 아래에 겹치지 않게 표시되고, 목록 콘텐츠 위에 떠야 한다.
 - 로딩 중에는 기존 목록을 과도하게 흔들지 않고, 첫 페이지 로딩과 추가 페이지 로딩 상태를 구분한다. 목록 교체와 append는 조회 성공 시에만 수행한다.
 
 ## 9. Technical Constraints
@@ -229,7 +231,7 @@ enum ContentSort: String, Decodable, CaseIterable {
 - 라이브 탭 선택 시 `GET /api/v2/creator-channels/{creatorId}/live?page={page}&size={size}&sort={sort}`가 호출된다.
 - 기본 sort는 `LATEST`이며 sort-bar에는 `최신순`이 표시된다.
 - 최초 요청은 `page=0`, `size=20`으로 호출된다.
-- sort-bar 터치 시 BottomSheet가 표시되고 `LATEST`, `POPULAR`, `PRICE_HIGH`, `PRICE_LOW` 4개 옵션만 보인다.
+- sort-bar 터치 시 context popup이 표시되고 `LATEST`, `POPULAR`, `PRICE_HIGH`, `PRICE_LOW` 4개 옵션만 보인다.
 - 정렬 변경 시 첫 페이지부터 다시 조회되고, 조회 성공 시에만 목록이 새 정렬 결과로 교체된다.
 - `currentLive != nil`이면 홈 탭과 동일한 현재 라이브 UI가 라이브 탭에 표시된다.
 - `currentLive == nil`이고 `liveReplayContentCount == 0`이면 sort-bar/list 없이 `크리에이터가 라이브를 준비중입니다.\n기대해 주세요!` Empty 문구만 표시된다.
@@ -242,7 +244,7 @@ enum ContentSort: String, Decodable, CaseIterable {
 - `xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" -configuration Debug build`가 성공한다.
 
 ## 11. Decisions
-- 정렬 메뉴 표시는 BottomSheet 방식을 채택한다.
+- 정렬 메뉴 표시는 sort-bar 우측 버튼 아래 anchored context popup 방식을 채택한다.
 - 첫 페이지의 `page` 시작값은 `0`으로 한다.
 - 요청 `size` 기본값은 `20`으로 한다.
 - Figma 정렬 메뉴 예시에 있는 `추천순`은 API enum에 없으므로 제외한다.