6.2 KiB
6.2 KiB
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개만 표시한다(Figma567:17662).cancelButtonTitle이 있으면 취소+확인 버튼 2개를 동일 너비로 표시한다(Figma567: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
- 없음.
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