klaus/sodalive-android
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
main
sodalive-android/docs/20260708_V2_공통_모달창/prd.md

14 KiB
Raw Permalink Blame History

PRD: V2 공통 모달창

1. Overview

V2 화면 어디서든 사용할 수 있는 Figma 기반 신규 공통 모달창(V2ModalDialog)을 제공한다. 기존 SodaDialog처럼 title/desc/버튼 title/버튼 action을 호출부에서 조정할 수 있고, 버튼 1개(확인)와 버튼 2개(취소+확인) 구성을 모두 지원한다.

2. Problem

  • 기존 SodaDialog(kr.co.vividnext.sodalive.base.SodaDialog)는 레거시 디자인(dialog_soda.xml) 기반이라 V2 Figma 모달 디자인과 시각적으로 다르다.
  • 레거시 코드는 직접 수정하지 않는 저장소 원칙에 따라 SodaDialog를 고쳐 V2 디자인을 적용할 수 없다.
  • V2 신규 화면들이 공통으로 사용할 Figma 기준 모달 컴포넌트가 아직 없다.

3. Goals

  • Figma 567:17662(버튼 1개), 567:17666(버튼 2개) 기준의 모달 UI를 구현한다.
  • SodaDialog와 동일하게 어떤 Activity에서도 생성해 표시할 수 있는 범용 클래스를 제공한다.
  • title, desc, confirm 버튼 title/action, cancel 버튼 title/action을 생성자 파라미터로 조정할 수 있다.
  • cancel 버튼 title이 비어 있으면 버튼 1개(확인만) 구성으로 표시한다.
  • 버튼 터치 시 모달을 닫고 전달받은 action을 실행한다.

4. Non-Goals

  • 기존 SodaDialog와 레거시 dialog_soda.xml은 수정하지 않는다.
  • 기존 SodaDialog 사용처를 신규 모달로 교체하는 마이그레이션은 이번 범위가 아니다.
  • Figma 컴포넌트의 우측 상단 close icon 변형(hasClose=true)은 두 예시 모두 사용하지 않으므로 이번 범위에서 구현하지 않는다.
  • 입력 필드, 이미지, 리스트 등 커스텀 콘텐츠 영역은 지원하지 않는다.
  • 버튼 3개 이상 구성은 지원하지 않는다.

5. Target Users

  • V2 화면에서 확인/취소 모달이 필요한 SodaLive Android 사용자.
  • kr.co.vividnext.sodalive.v2 하위 기능을 구현/유지보수하는 Android 개발자.

6. User Stories

  • 개발자는 V2 화면에서 title/desc/버튼 문구/버튼 action만 전달해 Figma 디자인 모달을 띄우고 싶다.
  • 개발자는 확인 버튼만 있는 안내 모달과 취소+확인 버튼이 있는 확인 모달을 같은 클래스로 사용하고 싶다.
  • 사용자는 확인 버튼을 눌러 동작을 실행하거나 취소 버튼을 눌러 모달을 닫고 싶다.

7. Core Features

V2 Modal Component

Figma 기반 V2 공통 모달 클래스를 제공한다.

Requirements

  • 신규 클래스는 kr.co.vividnext.sodalive.v2.components.modal.V2ModalDialog로 작성한다.
  • SodaDialog와 동일한 사용 방식(생성자에 파라미터 전달 후 show(width))을 따른다.
  • 생성자 파라미터: activity, layoutInflater, title, desc, confirmButtonTitle, confirmButtonClick, cancelButtonTitle(기본값 ""), cancelButtonClick(기본값 null).
  • cancelButtonTitle이 blank이면 취소 버튼을 숨기고 확인 버튼 1개만 표시한다(Figma 567:17662).
  • cancelButtonTitle이 있으면 취소+확인 버튼 2개를 동일 너비로 표시한다(Figma 567:17666).
  • 버튼 터치 시 모달을 dismiss한 뒤 전달받은 click action을 실행한다.
  • 모달 외부 터치/back으로 닫히지 않도록 setCancelable(false)로 설정한다.
  • dialog window 배경은 투명 처리하고 layout 배경으로 둥근 모서리를 표현한다.

Edge Cases

  • cancelButtonTitle이 공백 문자열이면 blank로 판단해 버튼 1개 구성으로 표시한다.
  • cancelButtonClick이 null이어도 취소 버튼 터치 시 모달은 닫힌다.
  • desc에 줄바꿈(\n)이 포함되면 여러 줄로 가운데 정렬 표시한다.
  • 긴 title/desc도 잘리지 않고 word-break로 줄바꿈된다.

V2 Modal UI (Figma)

Figma 디자인 그대로 layout을 구성한다.

Requirements

  • 컨테이너: 배경 gray_900(#202020), corner radius 14dp.
  • title 영역: 높이 64dp, 텍스트 20sp Bold, white, 가운데 정렬.
  • desc 영역: 패딩 20dp, 텍스트 16sp Regular, white, 가운데 정렬, line spacing 1.45 기준.
  • 버튼 영역: 좌우 패딩 20dp, 상하 패딩 14dp, 버튼 간 간격 8dp.
  • 버튼: 내부 패딩 14dp, radius 100dp(capsule), 텍스트 18sp Medium.
  • 확인 버튼 텍스트 색상은 soda_400(#00BDF7), 취소 버튼 텍스트 색상은 white.
  • 버튼 2개일 때 두 버튼은 1:1 비율로 영역을 나눈다.

Edge Cases

  • title이 빈 문자열이어도 layout이 깨지지 않는다.
  • 좁은 화면 폭에서도 버튼 문구가 잘리지 않는다.

8. UX / UI Expectations

  • 모달 폭은 기존 SodaDialog.show(width)와 동일하게 화면 폭 기준(width - 26.7dp)으로 표시한다.
  • 버튼 터치에 즉시 반응하고 중복 실행이 발생하지 않는다(dismiss 후 action 실행).
  • Figma 두 변형(버튼 1개/2개)의 layout 구조와 색상이 실제 화면에 반영된다.

9. Technical Constraints

  • Android XML View/ViewBinding 기반으로 구현한다.
  • 신규 코드는 kr.co.vividnext.sodalive.v2.components.modal 하위에 작성한다.
  • 레거시 SodaDialog, dialog_soda.xml은 수정하지 않는다.
  • 색상은 기존 리소스 gray_900, soda_400, white를 재사용한다.
  • AlertDialog 기반으로 구현하고, 추가 라이브러리를 도입하지 않는다.

10. Metrics

  • 기능 완료 기준: title/desc/버튼 title/버튼 action을 조정해 버튼 1개/2개 모달을 표시할 수 있다.
  • UI 완료 기준: Figma 567:17662, 567:17666의 layout 구조, 색상, 버튼 구성이 구현 화면에 반영된다.
  • 자동 검증 기준: cancel title blank 시 버튼 1개 구성, 버튼 클릭 시 dismiss 후 action 실행, layout의 색상/구조 계약을 source/resource 테스트로 확인한다.

11. Open Questions

  • 없음.

12. Addendum: V2 사용처 dialog_v2_modal 적용 조사

2026-07-08 후속 요청 범위는 구현 없이 kr.co.vividnext.sodalive.v2 하위에서 modal/dialog 계열을 사용하는 위치를 찾고, 이후 dialog_v2_modal 기반 V2ModalDialog로 바꿀 대상을 문서화하는 것이다.

추가 Problem

  • V2ModalDialog와 dialog_v2_modal.xml은 구현되어 있지만, V2 화면 일부는 여전히 레거시 SodaDialog, 기본 AlertDialog.Builder, 레거시 report/payment/password dialog를 호출한다.
  • V2 화면의 확인/취소형 모달이 서로 다른 layout과 스타일을 사용하면 V2 디자인 일관성이 깨진다.
  • 레거시 다이얼로그 클래스 자체는 다른 레거시 화면에서도 사용되므로, 저장소 원칙상 레거시 파일을 직접 수정하지 않고 V2 호출부에서 대체해야 한다.

추가 Goals

  • V2 패키지 안의 확인/취소형 모달은 V2ModalDialog를 사용해 dialog_v2_modal 디자인을 적용한다.
  • title/desc/confirm/cancel만 필요한 사용처는 우선 교체 대상으로 삼는다.
  • 입력 필드, 라디오 목록, 이미지, 토글, BottomSheet, PopupWindow 등 V2ModalDialog의 현재 API로 표현할 수 없는 UI는 직접 교체하지 않고 별도 설계 대상으로 분리한다.
  • 후속 구현 시 기존 문자열, confirm/cancel 콜백, show(width) 폭 계산, dismiss 후 action 실행 흐름을 유지한다.

추가 Non-Goals

  • 이번 조사 단계에서는 Kotlin/XML 구현을 변경하지 않는다.
  • kr.co.vividnext.sodalive.base.SodaDialog, kr.co.vividnext.sodalive.report.*Dialog, kr.co.vividnext.sodalive.live.room.*Dialog 같은 레거시 공용 클래스를 직접 수정하지 않는다.
  • LoadingDialog, Toast, 정렬/더보기용 PopupWindow, 메뉴성 BottomSheet는 확인형 모달 교체 범위에서 제외한다.
  • 입력/라디오/이미지/토글 UI를 V2ModalDialog에 무리하게 넣기 위한 API 확장은 이번 문서 단계에서 결정하지 않는다.

바로 교체 가능한 후보

아래 항목은 title/desc/확인/취소 콜백 구조라 현 V2ModalDialog로 직접 교체할 수 있다.

  • app/src/main/java/kr/co/vividnext/sodalive/v2/main/MainV2LoginGuard.kt:49
    • 현재: SodaDialog
    • 용도: 성인 인증 필요 안내
    • 후속 변경: V2ModalDialog로 교체하고 Gravity import 제거 확인
  • app/src/main/java/kr/co/vividnext/sodalive/v2/live/onair/HomeOnAirLiveActivity.kt:186
    • 현재: SodaDialog
    • 용도: 성인 인증 필요 안내
    • 후속 변경: V2ModalDialog로 교체하고 Gravity import 제거 확인
  • app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/CreatorChannelActivity.kt:386
    • 현재: AlertDialog.Builder
    • 용도: 사용자 차단 확인
    • 후속 변경: setTitle/setMessage/positive/negative 버튼을 V2ModalDialog의 title/desc/confirm/cancel로 매핑
  • app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/CreatorChannelActivity.kt:403
    • 현재: ProfileReportDialog
    • 용도: 프로필 사진 신고 확인
    • 후속 변경: dialog_profile_report_title, dialog_profile_report_notice, report_button, cancel을 V2ModalDialog로 매핑
  • app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/CreatorChannelActivity.kt:607
    • 현재: SodaDialog
    • 용도: FanTalk 삭제 확인
    • 후속 변경: 기존 삭제 confirm 콜백 유지
  • app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/CreatorChannelActivity.kt:643
    • 현재: SodaDialog
    • 용도: 커뮤니티 게시글 삭제 확인
    • 후속 변경: 기존 삭제 confirm 콜백 유지
  • app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/CreatorChannelActivity.kt:980
    • 현재: SodaDialog
    • 용도: 성인 인증 필요 안내
    • 후속 변경: V2ModalDialog로 교체하고 Gravity import 제거 확인
  • app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/fantalk/write/CreatorChannelFanTalkWriteActivity.kt:124
    • 현재: SodaDialog
    • 용도: 글 작성 취소/이탈 확인
    • 후속 변경: V2ModalDialog로 교체하고 Gravity import 제거 확인

추가 설계가 필요한 후보

아래 항목은 dialog/modal 계열이지만 현 V2ModalDialog API가 제공하지 않는 입력, 라디오, 이미지, 토글, BottomSheet 동작을 포함한다. dialog_v2_modal 적용 여부는 별도 V2 전용 컴포넌트 또는 V2ModalDialog API 확장 결정을 먼저 해야 한다.

  • app/src/main/java/kr/co/vividnext/sodalive/v2/main/MainV2Activity.kt:162, :530
    • NotificationSettingsDialog: 알림 토글 3개가 필요하다.
    • EventPopupDialogFragment: 이미지형 이벤트 BottomSheet다.
  • app/src/main/java/kr/co/vividnext/sodalive/v2/live/onair/HomeOnAirLiveActivity.kt:243, :280
    • LiveRoomPasswordDialog: 비밀번호 입력과 금액 표시가 필요하다.
    • LivePaymentDialog: 유료 라이브 결제 확인이며, 시작/현재 시각 안내 영역이 조건부로 표시된다.
  • app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/CreatorChannelActivity.kt:397, :898
    • UserReportDialog: 신고 사유 RadioGroup 선택값이 필요하다.
    • LiveRoomDonationDialog: 후원 금액/메시지/비밀 여부/충전 이동이 필요한 BottomSheet다.
  • app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/fantalk/CreatorChannelFanTalkFragment.kt:162
    • CheersReportDialog: 신고 사유 RadioGroup 선택값이 필요하다.
  • app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/CreatorChannelLiveCoordinator.kt:101, :142, :151, :195, :235, :250
    • LiveRoomPasswordDialog: 비밀번호 입력이 필요하다.
    • LivePaymentDialog: 결제 확인과 조건부 시간 안내가 필요하다.
    • LiveCancelDialog: 취소 사유 입력이 필요하다.
  • app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/CreatorChannelMoreBottomSheet.kt
    • BottomSheetDialogFragment 기반 더보기 메뉴다.
  • app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/ui/CreatorChannelSortPopup.kt
    • PopupWindow 기반 정렬 메뉴다.
  • app/src/main/java/kr/co/vividnext/sodalive/v2/creator/channel/fantalk/ui/CreatorChannelFanTalkMorePopup.kt
    • PopupWindow 기반 FanTalk 더보기 메뉴다.

테스트 영향

  • app/src/test/java/kr/co/vividnext/sodalive/v2/main/MainV2LoginGuardSourceTest.kt:20은 현재 SodaDialog( 문자열을 기대하므로 후속 구현 시 V2ModalDialog( 기대값으로 갱신해야 한다.
  • app/src/test/java/kr/co/vividnext/sodalive/v2/creator/channel/CreatorChannelActivitySourceTest.kt:602, :1374는 현재 SodaDialog( 문자열을 기대하므로 후속 구현 시 V2ModalDialog( 또는 더 구체적인 V2 모달 계약으로 갱신해야 한다.
  • app/src/test/java/kr/co/vividnext/sodalive/v2/creator/channel/fantalk/write/CreatorChannelFanTalkWriteSourceTest.kt는 showCancelConfirmDialog() 흐름만 확인하므로 직접 문자열 기대 변경은 필요하지 않을 가능성이 높다.

추가 Open Questions

  • dialog_v2_modal 적용 범위를 현 V2ModalDialog가 표현 가능한 확인/취소형 모달로 제한할지, report/password/payment/donation 같은 커스텀 콘텐츠 다이얼로그까지 V2 전용 컴포넌트로 확장할지 결정이 필요하다.
  • LivePaymentDialog의 시작/현재 시각 안내 영역을 V2 모달 디자인 안에서 보존해야 하는지, 단순 desc로 축약해도 되는지 결정이 필요하다.
  • BottomSheet와 PopupWindow 메뉴는 dialog_v2_modal 적용 대상에서 제외하는 것이 자연스럽지만, 디자인 정책상 V2 전용 메뉴 컴포넌트가 필요한지 별도 확인이 필요하다.

Figma 참조

  • 버튼 1개: https://www.figma.com/design/HmN1yNdJ3EIpqknFL0Hkab/-%EA%B3%B5%EC%9C%A0%EC%9A%A9-%EB%B3%B4%EC%9D%B4%EC%8A%A4%EC%98%A8-UI-UX-%EA%B8%B0%ED%9A%8D%EB%AC%B8%EC%84%9C?node-id=567-17662&m=dev
  • 버튼 2개: https://www.figma.com/design/HmN1yNdJ3EIpqknFL0Hkab/-%EA%B3%B5%EC%9C%A0%EC%9A%A9-%EB%B3%B4%EC%9D%B4%EC%8A%A4%EC%98%A8-UI-UX-%EA%B8%B0%ED%9A%8D%EB%AC%B8%EC%84%9C?node-id=567-17666&m=dev