로브(Lovv) UI/UX 가이드

문서 버전: v0.2

문서 상태: 초안 (Draft)

기준 문서: ../01_requirements/01_requirements.md, ../02_service_flow/02_service_flow.md, ../06_technical_spec/06_technical_spec.md, ../07_api_spec/07_api_spec.md

색상 기준: 저장소 루트 color-map.md

관련 산출물: ../95_aha_moment/plan-detail.md, ../95_aha_moment/plan-detail-wireframe.html

0. 범위와 원칙

이 문서는 화면 구성, 인터랙션 흐름, 컴포넌트 규칙, 디자인 토큰, 접근성 기준을 정의한다. 화면·상태 정의는 기술 명세서(06_technical_spec)의 프론트엔드 정의와 모순되지 않게 작성한다. 색상은 color-map.md를 단일 기준으로 삼는다.

현재 버전은 저장 일정 상세(PLAN DETAIL) 화면을 우선 정리한다. 다른 화면(온보딩, 지도, 챗봇, 마이페이지 목록 등)은 후속 버전에서 같은 구조로 추가한다.

1. 색상·디자인 토큰

핵심 팔레트는 color-map.md를 따른다.

화면용 보조 토큰(가독성 보정): 카드 배경 #FFFFFF, 경계선 #E7D9CC, 통찰형 이유 박스 #FCEFE6, 이동시간 칩 #EAF3EE(녹색 계열), 날씨 칩 #E7F0F3(청색 계열), 클룩 링크 #E7DCF2(보라 계열). 보조 토큰은 핵심 팔레트와 충돌하지 않는 범위에서만 사용하고, 텍스트 대비를 Dark Charcoal 기준으로 확보한다.

2. 저장 일정 상세 (PLAN DETAIL) 화면

마이페이지에서 저장 일정을 클릭하거나, 일정 생성 직후 진입하는 결과 화면. 설계 배경과 데이터는 ../95_aha_moment/plan-detail.md를 따른다.

2.1 레이아웃

데스크톱은 상단 헤더(전폭) + 본문 2단(중앙 일정 흐름 1fr / 우측 일정 액션 300px). 860px 이하에서는 1단으로 접는다.

• 헤더(소도시 소개). PLAN DETAIL 이름표, 도시명, 배지(테마칩 · 기간 · "AI 추천 여행 코스" · "선택하신 N월"), 한 문단 요약.
• 중앙(일정 흐름). §2.2의 Day 탭 + 지도 + 접이식 타임라인.
• 우측(일정 액션). 분위기 피드백(긍정 4종 + "관심 없어요"), 좋아요(저장 토글), 마이페이지에 저장, 채팅으로 돌아가기, 마이페이지로 이동. 데스크톱에서 sticky.

2.2 중앙 일정 흐름 — 긴 스크롤 해소 (필수 규칙)

저장 일정을 펼치면 모든 일자·카드가 한 번에 노출돼 세로 스크롤이 과도하게 길어지는 문제를 점진적 노출(progressive disclosure)로 해소한다.

• Day 탭으로 일자 분할. 한 번에 한 일자만 렌더한다. 상단 일자 탭(1일차/2일차/…, 각 탭에 일자 테마 라벨)으로 전환한다. 당일치기 등 단일 일자는 탭을 생략한다.
• 카드 기본 접힘. 타임라인 카드는 기본적으로 요약 한 줄(시간대 · 장소명 · "다음 장소까지 N분")만 표시한다. 탭하면 한 줄 설명 · 통찰형 추천 이유 · 외부 링크가 펼쳐진다.
• 전체 펼치기/접기 토글. 현재 일자의 모든 카드를 일괄 펼치거나 접는다(기본값: 접힘).
• 지도 + 점선 동선. 일자별 지도에 그날 장소를 방문 순서 번호 마커로 찍고, 순서대로 점선으로 잇는다. 마커 사이에 구간 이동시간 라벨을 둔다. 좌표 없는 항목(식사 자유 선택 등)은 마커를 만들지 않는다.
• 마커 ↔ 카드 양방향 연동. 마커 탭 → 해당 카드 펼침·강조, 카드 펼침 → 대응 마커 강조.

2.3 컴포넌트 규칙

• 일자 탭. 활성 탭은 Main Orange 배경. 비활성은 흰 배경·경계선. 탭 아래 보조 텍스트로 일자 테마를 1줄 표기.
• 지도 마커. 물방울형 번호 마커. 기본 Main Orange, 선택(active) 시 Muted Brown + 확대 + 상위 레이어. 마커는 카드/시트 등 상위 UI를 가리지 않도록 레이어 순서를 둔다.
• 점선 동선. 마커를 방문 순서대로 연결하는 대시 라인. 선 두께는 지도 확대와 무관하게 일정하게 유지한다.
• 타임라인 카드. 좌측 번호 레일(원형 번호 + 세로 연결선) + 본문 카드. 식사 등 보조 블록의 번호는 톤다운 색으로 구분.
• 이동시간 칩. 녹색 계열. 값이 없으면 칩과 줄을 숨긴다(0분 노출 금지).
• 통찰형 이유 박스. "왜 여기 · 통찰형" 라벨 + 장소·순서·시간대 근거 1문장. generic 묘사 금지, 근거 없으면 미생성(plan-detail.md §4).
• 외부 링크. 지도/검색은 기본 링크, 투어·체험·입장권은 클룩(Klook) 딥링크(보라 계열). 죽은 링크는 숨긴다.
• 날씨 칩. 선택하신 달 월별 경향을 일자별로 표기. 우천 가능 달이면 실내 대안 1줄.

2.4 인터랙션·상태

• 기본 진입 상태. 1일차 탭 활성, 모든 카드 접힘, 지도에 1일차 동선 표시.
• 펼침/접힘. 카드 헤더(또는 셰브론) 탭으로 토글. 셰브론은 펼침 시 180° 회전.
• 일자 전환. 탭 변경 시 활성 마커/펼침 상태를 초기화하고 해당 일자 지도·카드로 갱신.
• 빈 데이터 처리. 이동시간·날씨·딥링크·좌표가 없으면 해당 요소를 숨긴다(빈 값·0분·죽은 링크 노출 금지). 실패·timeout 등 폴백은 plan-detail.md §11을 따른다.

2.5 접근성

• 탭·마커·카드 헤더·링크는 키보드 포커스와 활성화(Enter/Space)를 지원한다.
• 마커는 텍스트 대안(장소명·순서)을 제공하고, 색상만으로 활성 상태를 구분하지 않는다(확대·테두리 등 형태 단서 병행).
• 본문 텍스트는 Dark Charcoal 기준으로 배경 대비를 확보한다. 이동시간/클룩 등 색상 칩도 대비 기준을 만족시킨다.

3. 관리자 콘솔 권한 승인 화면

admin_web 관리자 콘솔에는 권한 승인 탭을 둔다. 이 탭은 역할·지역 부여·회수와 월간 여행지 대량 게시 같은 고위험 변경 요청을 조회하고, 허용된 역할에게만 요청 생성 또는 승인·거절 액션을 제공한다.

3.1 탭과 badge

• 로그인 직후 GET /api/v1/admin/high-risk-requests?status=pending&limit=50으로 pending 목록을 eager loading한다.
• 목록 조회와 pending count badge 로딩은 MFA 없이 role union 권한만으로 수행한다.
• pending count가 50건 이상이면 badge는 50+로 표시한다.
• R-ADMIN 또는 R-SUPER-ADMIN 중 하나라도 활성인 사용자는 권한 승인 탭을 볼 수 있다.

3.2 역할별 액션 노출

역할이 여러 개인 사용자는 role union 기준으로 탭과 액션을 연다. 단, 승인·거절은 backend의 R-SUPER-ADMIN 검증, 자기 요청 거부, 최근 TOTP 세션 검증을 최종 기준으로 삼는다.

3.3 Decision-time MFA 모달

• 승인·거절 버튼 클릭 후 backend가 ADMIN_MFA_REQUIRED, ADMIN_MFA_TOTP_REQUIRED, ADMIN_MFA_ENROLLMENT_REQUIRED, ADMIN_MFA_LOCKED를 반환하면 MFA 모달 또는 상태별 안내를 표시한다.
• TOTP 입력 모달은 /api/v1/admin/security/mfa/verify를 먼저 호출해 세션을 만든 뒤, 원래 approve/reject 요청을 재시도한다.
• approve/reject 요청 본문에는 TOTP code를 넣지 않는다.
• recovery code는 복구 플로우에서만 제공하고, 고위험 승인 수단으로 노출하지 않는다.
• SUPER_ADMIN_REQUIRED는 MFA 모달이 아니라 권한 부족 오류로 표시한다.

3.4 개발 preview

VITE_LOVV_USE_SAMPLE_DATA=true 개발 preview가 제공되는 경우, 샘플 pending 목록과 badge는 레이아웃·상태 확인용으로만 사용한다. 샘플 모드는 실제 권한 판정, 실제 MFA 인증, 실제 승인·거절 결과로 해석하지 않는다.

4. 변경 이력