feat(page): 주요 음악 서비스 관행에 맞춰 조작 보완 + 화면·버튼 동작 문서화

화면별 사용 흐름과 버튼 동작을 전수 정리한 뒤, 스포티파이 웹 플레이어·유튜브 뮤직·애플 뮤직에서
공통으로 쓰이는 관행과 대조해 빠져 있던 것을 채웠다.

추가/변경:
- 스피커 아이콘을 장식에서 음소거 토글 버튼으로(해제 시 직전 볼륨 복원). 세 서비스 공통 동작.
- 키보드 단축키: Space 재생/일시정지, M 음소거, 좌우 5초 탐색, Ctrl/Cmd+오른쪽 다음 곡.
  입력창에 포커스가 있으면 가로채지 않는다.
- 대기열 맨 위에 "지금 재생 중" 블록 추가. 재생바가 이미 폴링하는 값을 위로 올려 공유하므로
  같은 API 를 두 번 호출하지 않는다.
- 대기열의 곡을 누르면 그 곡부터 재생. 봇에 점프 액션이 없어 queue/set 으로 대상 곡부터 남긴 뒤
  skip 하는 방식이며, 건너뛴 곡이 빠지는 것까지 스포티파이 대기열과 동일하다.
- 검색 결과 카드에 재생시간 표기(같은 제목의 짧은 클립과 원곡 구분에 필요).

문서(page/README.md 5-1~5-3):
- 화면(ViewMode)별 진입 경로·보이는 것·할 수 있는 일 표
- 버튼/조작별 동작·호출 API·비활성 조건 전수 표
- 타 서비스 관행 대비 개선 항목과 미지원 항목(이전 곡·반복 재생: 봇 API 한계) 명시

검증: tsc 통과, lint 에러 0. 브라우저에서 음소거 토글(볼륨 0↔60 복원), Space 로 재생↔일시정지 전환,
"지금 재생 중" 표시, 대기열 곡의 "…부터 재생" 동작, 재생시간 표기를 실제 렌더링으로 확인.
This commit is contained in:
2026-09-29 14:05:38 +09:00
parent 4021862c51
commit 2b7a91774d
5 changed files with 257 additions and 23 deletions

View File

@@ -7,6 +7,13 @@ import { ViewMode } from "@/app/page";
import { useToast } from "@/components/ToastProvider";
import type { DiscordServer, SearchTrack, SearchResults } from "@/types/music";
/** ms -> m:ss (검색 결과 재생시간 표기용) */
function formatDuration(ms?: number) {
if (!ms || Number.isNaN(ms)) return "";
const total = Math.floor(ms / 1000);
return `${Math.floor(total / 60)}:${(total % 60).toString().padStart(2, "0")}`;
}
interface MainContentProps {
viewMode: ViewMode;
setViewMode: (mode: ViewMode) => void;
@@ -211,7 +218,13 @@ export default function MainContent({
</span>
</span>
<span className="block truncate text-sm font-medium text-white">{track.title}</span>
<span className="block truncate text-xs text-neutral-400">{track.artist}</span>
<span className="flex items-center justify-between gap-2 text-xs text-neutral-400">
<span className="truncate">{track.artist}</span>
{/* 재생시간 표기는 어느 음악 서비스에나 있는 정보다(같은 제목의 짧은 클립/전체 곡 구분에 필요). */}
{track.duration ? (
<span className="flex-shrink-0 tabular-nums text-neutral-500">{formatDuration(track.duration)}</span>
) : null}
</span>
</button>
);