From 750bc0c9c88578f88d9c6e62354d84234ae04c08 Mon Sep 17 00:00:00 2001 From: tkrmagid Date: Tue, 29 Sep 2026 14:14:51 +0900 Subject: [PATCH] =?UTF-8?q?docs(page):=20=ED=99=94=EB=A9=B4=C2=B7=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=A0=95=EB=A6=AC=20=EB=AC=B8=EC=84=9C=EB=A5=BC=20?= =?UTF-8?q?=ED=98=84=EC=9E=AC=20UI=20=EA=B8=B0=EC=A4=80=EC=9C=BC=EB=A1=9C?= =?UTF-8?q?=20=EC=A0=95=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 검색 결과를 그리드 카드에서 리스트 행으로 바꾸고 대기열 접기/펴기를 추가한 뒤에도 문서에 이전 표현이 남아 있어 실제 동작과 어긋났다. 코드와 대조해 네 곳을 고쳤다. - 5-1 SEARCH_RESULT: "곡 카드" -> "곡 리스트 행(번호·썸네일·제목/아티스트·재생시간)" - 5-1 대기열 패널: 화면 크기별 기본값과 여는 방법을 명시 (넓은 화면=기본 펼침·재생바 우측 버튼으로 접기, 좁은 화면=기본 접힘·FAB/재생바 버튼으로 열기) - 5-2 본문 버튼: "곡 카드(카드 전체가 버튼)" -> "곡 행(행 전체가 버튼)", 재생 아이콘이 넓은 화면에선 hover 시 번호 자리에, 좁은 화면에선 썸네일에 상시 노출되는 점 추가 - 5-2 재생바 목록 아이콘: 한 줄로 뭉뚱그려 "좁은 화면 전용"이라 적혀 있던 것을 좁은 화면(슬라이드 패널 열기)과 넓은 화면(우측 컬럼 접기/펴기, 펼침 시 초록 표시)으로 분리 - 5-3 재생시간 표기: "검색 결과 카드" -> "검색 결과 행 오른쪽" 문서만 변경이라 코드/배포 산출물은 그대로다. --- page/README.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/page/README.md b/page/README.md index e3e8ef1..f7eca69 100644 --- a/page/README.md +++ b/page/README.md @@ -93,8 +93,8 @@ site: "bot-site" 구독 → serverId 일치하는 것만 EventSource(SSE)로 브 | 로그인 전 | 첫 방문 | 중앙 로그인 카드 | 디스코드 로그인. 사이드바/대기열/재생바는 렌더링하지 않는다 | | `SERVER_LIST` | 로그인 직후, 홈 버튼, "다른 서버 선택" | 봇이 있는 내 서버 카드 목록 | 서버 선택. 서버를 고르기 전에는 검색·재생이 잠겨 있다 | | `SERVER_DETAIL` | 서버 카드 클릭 | 서버 이름/아이콘, 사용 안내 배너, 서버 ID·내 권한 | 검색 시작점. 좌측에 조작 중인 서버 표시 | -| `SEARCH_RESULT` | 검색창에 입력 후 Enter | Spotify / YouTube Music / YouTube 영상 3개 구역의 곡 카드 | 곡을 눌러 대기열에 추가 | -| 대기열 패널 | (넓은 화면) 항상 우측 고정 · (좁은 화면) 우하단 초록 버튼·재생바 목록 버튼 | "지금 재생 중" + "다음 재생 목록" | 순서 변경, 삭제, 특정 곡부터 재생 | +| `SEARCH_RESULT` | 검색창에 입력 후 Enter | Spotify / YouTube Music / YouTube 영상 3개 구역의 곡 리스트 행(번호·썸네일·제목/아티스트·재생시간) | 행을 눌러 대기열에 추가 | +| 대기열 패널 | (넓은 화면) 기본 펼침, 재생바 우측 대기열 버튼으로 접기/펴기 · (좁은 화면) 기본 접힘, 우하단 초록 버튼·재생바 목록 버튼으로 열기 | "지금 재생 중" + "다음 재생 목록" | 순서 변경, 삭제, 특정 곡부터 재생 | ### 5-2. 버튼·조작 동작 정리 @@ -104,14 +104,15 @@ site: "bot-site" 구독 → serverId 일치하는 것만 EventSource(SSE)로 브 | 상단 | 검색창 | Enter 로 검색 실행 → `SEARCH_RESULT` | 로그아웃·서버 미선택 시 잠금(안내 문구가 상황별로 바뀜) | | 상단 | 프로필/로그아웃 | 세션 종료 | — | | 본문 | 서버 카드 | 서버 선택 → 서버 상세 | — | -| 본문 | 곡 카드(카드 전체가 버튼) | `POST /api/player/play` → 대기열 추가. 성공/실패를 토스트로 알림 | 서버 미선택·미로그인 | +| 본문 | 곡 행(행 전체가 버튼) | `POST /api/player/play` → 대기열 추가. 성공/실패를 토스트로 알림. 넓은 화면은 hover 시 번호 자리에 재생 아이콘이, 좁은 화면은 썸네일에 재생 아이콘이 항상 보인다 | 서버 미선택·미로그인 | | 재생바 | 재생/일시정지 | `POST /api/player/pause` (낙관적 UI, 실패 시 롤백) | 봇 세션 없음/재생 중 아님 | | 재생바 | 다음 곡 | `POST /api/player/skip` | 〃 | | 재생바 | 이전 곡 | 미지원(봇 API 에 없음). 이유를 툴팁으로 표시하고 비활성 | 항상 | | 재생바 | 진행바 | 드래그/클릭으로 탐색 → `POST /api/player/seek`. 좁은 화면에서는 재생바 상단에 전체 폭으로 배치 | 〃 | | 재생바 | 스피커 아이콘 | 음소거/해제 토글(해제 시 직전 볼륨 복원) | 〃 | | 재생바 | 볼륨 슬라이더 | 드래그 중에는 화면만, 손을 뗄 때 `POST /api/player/volume` 1회 전송 | 〃 | -| 재생바 | 목록 아이콘 | 대기열 패널 열기/닫기(좁은 화면 전용) | — | +| 재생바 | 목록 아이콘(컨트롤 옆, 좁은 화면) | 대기열 슬라이드 패널 열기/닫기 | — | +| 재생바 | 목록 아이콘(우측 볼륨 옆, 넓은 화면) | 우측 대기열 컬럼 접기/펴기. 펼쳐져 있으면 초록색으로 표시 | — | | 대기열 | 곡(제목 영역) | 그 곡부터 재생. 앞선 곡들은 대기열에서 빠진다 | 첫 곡은 이미 다음 곡이라 동작 없음 | | 대기열 | ▲ ▼ | 한 칸씩 순서 이동 → `POST /api/queue/set` (좁은 화면 전용, 드래그 대체) | 맨 위/맨 아래 | | 대기열 | 휴지통 | 해당 곡 제거 → `POST /api/queue/remove` (`encoded` 동봉해 엉뚱한 곡 삭제 방지) | — | @@ -131,7 +132,7 @@ site: "bot-site" 구독 → serverId 일치하는 것만 EventSource(SSE)로 브 | 대기열 곡 클릭 → 그 곡부터 재생 | 없음 | 지원(앞 곡들은 빠짐 — 스포티파이 대기열과 동일) | | 스피커 아이콘 클릭 = 음소거 | 장식 아이콘 | 토글 버튼 | | 키보드 단축키(Space/M/화살표) | 없음 | 지원 | -| 재생시간 표기 | 없음 | 검색 결과 카드에 표시 | +| 재생시간 표기 | 없음 | 검색 결과 행 오른쪽에 표시 | | 터치 조작 크기(44px 내외) | 재생 32px·삭제 24px·진행바 1px | 44~48px, 진행바 히트영역 확대 | | hover 없이도 조작 가능 | 삭제·재생 버튼이 hover 시에만 노출 | 상시 노출 |