| # | 영역 | 필드 | 타입 | 옵션 값 / 제약사항 | 입력 예시 |
|---|
| A · B · C — 전역 헤더/사이드 신규 필드(v2.11, v2.12) |
| A | 사이드 메뉴 | 접기/펼치기 토글(☰) | button | 로고 우측에 배치. 클릭 시 사이드 폭 200px↔56px 전환, 펼침 상태를 브라우저 localStorage에 저장(로그인 계정에는 저장 안 함 — 다크모드 토글과 동일 정책) | "☰" 클릭 → 접힘 |
| A | 사이드 메뉴(접힘) | 아이콘 전용 메뉴 | readonly(반응형) | 라벨 텍스트 숨김, 아이콘만 노출. hover 시 툴팁으로 라벨 노출. v2.31 기존에 한글 1글자(“추”·“즐”·“인”)로 그려져 있어 아이콘 세트가 정의되지 않은 상태였음 — 자리표시자 글리프 + title 툴팁으로 교체하고, 실제 아이콘은 디자인 단계에서 확정 | "🏠"만 표시, hover 시 "홈" 툴팁 |
| B | 전역 헤더 | 계정 모드 전환 신규 v2.11 | segmented button(도네이터/크리에이터) | §08 계정설정과 동일 컴포넌트 — 도네이터가 기본값. 비로그인 상태에서는 "로그인" 버튼으로 대체(이 화면은 비로그인 기준이라 도네이터가 기본 활성으로 시각화) | "크리에이터" 선택 → /studio로 이동(최초 시 등록 절차) |
| B | 전역 헤더 | 메인 컬러 미리보기 보완(고충실도 목업 동기) | swatch 단일선택 × 7 | §08 계정설정의 메인 컬러 프리셋(기본 골드 + 6종)을 헤더에서 그대로 미리보고 즉시 전환하는 단축 UI. 로그인 여부와 무관하게 동작하며(비로그인도 미리보기 가능), 선택 즉시 전체 UI 색상 변수가 바뀌고 브라우저 localStorage에 저장(다크모드 토글과 동일 정책 — 로그인 계정에는 저장 안 함). 프리셋마다 라이트/다크 테마별로 다른 색상 값을 매핑 | "딥블루" 선택 → 강조색 전체 전환 |
| B | 전역 헤더 | 알림벨 보완(고충실도 목업 동기) | badge(readonly) + 클릭 시 이동 | 미읽음 알림 수 표시(0~99, 99 초과 시 "99+" 축약), 클릭 시 notification-center.html로 이동. 비로그인 상태에서는 로그인 버튼 뒤로 숨김(로그인 사용자만 노출) | "3" |
| C | 사이드 메뉴(접힘 예시) | 본문 영역 확장 | readonly(레이아웃 자동 재계산) | 사이드가 좁아진 만큼 라이브 카드 그리드 컬럼 폭이 넓어짐(컬럼 수는 4열 고정) | 사이드 200px→56px, 본문 +144px |
| 1 · 상단 프로모션 배너 |
| 1 | 상단 프로모션 배너 | 카드 구성 정정 v2.64 | grid(5칸 고정, 운영자 등록) | 정정 v2.64 — 캐러셀(자동 전환 슬라이드)이 아니라 5칸을 고정 그리드로 항상 동시 노출합니다(전환 대기 없음). 카드당 아이콘(선택)+제목+부제+하단 메타 텍스트(강조색), 카드 클릭 시 지정 URL로 이동. 5칸이 폭을 균등 분할해 항상 꽉 채웁니다 | "이번 주 전역 랭킹은?" · "치지직·SOOP에서 넘어오셨다면" |
| 1 | 상단 프로모션 배너 | 파트너 배지 이미지 신규 v2.64 | image upload(운영자 등록, 선택) | 소속사·협찬 카드에 한해 카드 우측에 정방형 배지 이미지 추가(52×52, 라운드 코너). 텍스트만 있는 카드는 이미지 생략 가능 | "boss-company.jpg" 52×52 |
| 2 | 플랫폼 필터 | 플랫폼 뱃지 | checkbox 다중선택 × 4 | SOOP · 치지직 · YouTube · Twitch — 기본 전체 미선택(=필터 없음, 전체 노출), 다중 선택 시 OR 조건 | [SOOP, 치지직] 선택 → 두 플랫폼만 |
| 2 | 정렬 | 정렬 기준 | select 단일 | 시청자순(기본) · 최신순(방송 시작 시각 내림차순) | "시청자순" |
| 3 | 카테고리 필터 신규 | 카테고리 칩 | chip 단일선택 2단 | 정정 v2.57 — 대분류 줄 / 소분류 줄 2단이다. "전체" + 현재 방송중인 크리에이터가 태깅한 소분류와 그 부모 대분류만 동적 노출(creator_categories 기준, 크리에이터당 최대 3개). 대분류 칩을 고르면 그 아래 소분류 전부가 대상이다. 오프라인 크리에이터만 있는 카테고리는 칩 자체가 사라짐. 고정 목록이 아니다 — broadcast_categories 를 읽으므로 운영 중에 소분류가 늘면 배포 없이 칩이 늘어난다 | "스포츠" 선택 → 테니스·축구·골프 방송이 모두 남음 / "테니스" 선택 → 테니스만 |
| 4 | 관심 카테고리 라이브 신규 | 내 관심 카테고리 | readonly(요약) + 편집 링크 | 지정한 관심 카테고리 목록 표시(최대 5개), "편집" 클릭 시 홈에서 바로 모달 오픈(페이지 이탈 없음) | "게임, 음악" |
| 4 | 관심 카테고리 라이브 | 매칭 카드 목록 | card row(가로 스크롤, readonly) | 정정 v2.58 — donor_favorite_categories(대분류면 그 자식까지 펼침)와 creator_categories가 1개 이상 겹치고 is_live=true인 크리에이터만, 최대 12개 | 게임·음악 겹치는 라이브 3건 |
| 4 | 관심 카테고리 라이브 | 대체 상태 | readonly(조건부 문구+버튼) | 비로그인 = 로그인 유도 배너, 로그인+미설정 = 설정 버튼(클릭 시 동일 모달 오픈)으로 섹션 전체가 대체됨 | "관심 카테고리를 설정해보세요" |
| 관심 카테고리 설정 — 모달 |
| — | 설정 모달 | 카테고리 다중선택 | chip 다중선택(토글) | 정정 v2.57 — broadcast_categories 에서 읽는다(고정 26종이 아니다). 최대 5개 — 6번째 선택 시 chip 비활성화. 크리에이터와 달리 대분류도 고를 수 있다 — 도너는 "스포츠 전체"가 자연스럽다. 대분류를 고르면 그 아래 소분류 전부와 겹치는 것으로 매칭한다 | "스포츠"(대분류) + "작곡"(소분류) 혼용 선택 |
| — | 설정 모달 | 선택 개수 | readonly(자동 계산) | "N / 5 선택됨" | "2 / 5 선택됨" |
| — | 설정 모달 | 저장 / 취소 | button × 2 | 저장 시 donor_favorite_categories 갱신 후 모달 닫힘, 홈 화면 관심 카테고리 라이브 섹션 즉시 갱신 | "저장" 클릭 |
| — | 진입 경로 | 내정보(/me)에서도 설정 가능 | readonly note | 동일한 설정 UI를 /me 관심 카테고리 설정 화면에서도 그대로 재사용(모달 대신 전체 화면일 수 있음, 화면은 §01과 동일 컴포넌트) | "/me → 관심 카테고리 설정" |
| 5 | 라이브 카드 그리드 | 그리드 레이아웃 | readonly(반응형) | 데스크톱 4열 · 태블릿 2열 · 모바일 1열, 페이지당 24개, 무한 스크롤 | 24개 로드 → 스크롤 시 +24개 |
| 5 | 카드 — LIVE 뱃지 | 상태 표시 | readonly(시스템 계산) | 연동 채널 중 1개 이상 방송 송출 중이면 “LIVE” 표시, 아니면 최근 연결 플랫폼 뱃지만 노출 | "LIVE" 또는 "YouTube"(오프라인) |
| 5 | 카드 — 시청자수 | 시청자 합산 | number(자동 집계) | 연동 플랫폼 시청자수 합산, 1,000단위 콤마, 10,000 이상은 만 단위 축약(소수 1자리). v2.28 원천 creator_channels.viewer_count — 카드의 썸네일·방송제목도 같은 테이블(thumbnail_url · stream_title), 이름은 creators.display_name | "1.2만", "890" |
| 5 | 카드 — 방송 제목 | 제목 텍스트 | text(readonly, 원본 플랫폼값 그대로) | 최대 2줄(약 40자) 노출, 초과 시 말줄임(…) | "오늘은 롤 랭크 갑니다" |
| 5 | 카드 — 프로필 이미지 신규 | 크리에이터명·제목 좌측 아바타 | image(readonly, 원형) | 원천 creators.profile_image_url(§00 v2.28 신설) — 미등록 시 플레이스홀더 아이콘으로 대체 | 32×32 원형 썸네일 |
| 5 | 카드 — 카테고리/태그 신규 | 제목 하단 칩 목록 | chip readonly(카테고리 1개 강조 + 해시태그 0~N개) | 카테고리는 creators.categories(§03 카테고리 필터와 동일 소스) 중 대표 1개를 실선 칩으로 표시 — 항상 노출. 태그는 연동 플랫폼(SOOP·치지직·YouTube·Twitch)이 방송에 붙인 해시태그를 API로 가져올 수 있는 경우에만 옅은 칩으로 이어서 노출하고, 제공하지 않는 플랫폼·미설정 방송이면 태그 칩 자체를 생략(카테고리만 남음). 아직 별도 저장 컬럼은 없어 소스 필드는 §00에 추가 필요 | "게임 #롤 #랭크" 또는 카테고리만 "저스트채팅" |
| — | 좌측 내비게이션 | 메뉴 링크 | link × 9(고정 라벨) | 홈 · 추천라이브 · 즐겨찾기 · 인벤토리 · 내정보 · 전역랭킹 · 포인트샵 · 굿즈샵 · 고객센터 — 라벨 수정 불가 | "홈"(현재 활성) |
| — | 추천 라이브 뱃지 | 안읽음 카운트 | number(readonly) | 0~99, 99 초과 시 "99+"로 축약 | "12", "99+" |
| — | 검색바 | 크리에이터 검색 | text | 닉네임/아이디 부분일치, 1~30자, 자모 단위 자동완성(가정) | "루나" → "루나스타" 등 자동완성 |
| — | 다크모드 토글 | 테마 전환 | boolean | 기본값은 OS 시스템 설정을 따름, 수동 변경 시 브라우저 localStorage에 저장(로그인 계정에는 저장 안 함) | false(라이트) / true(다크) |