feat: 내 노래 기록·칭호 상세·자동 재생 상태 개선 by aryu1217 · Pull Request #58 · Queuing-org/frontend

aryu1217 · 2026-08-31T12:24:14Z

변경 내용

내 노래 탭에 USER_REQUESTED이면서 현재 사용자 공개 slug와 일치하는 지난 신청곡을 표시합니다.
내 노래도 지난 곡 → 본인 현재곡 → 본인 대기곡 시간축과 상·하단 페이지네이션을 사용하고, 지난 곡 카드를 회색 배경으로 표시합니다.
설정 프로필의 네이티브 칭호 select를 접근성 있는 portal 리스트박스로 교체하고 획득률·획득 조건 tooltip을 제공합니다.
두 badge GET 응답의 acquisitionRate 숫자·숫자 문자열을 공용 mapper에서 number | null로 정규화합니다.
획득 칭호만 굵게 보이던 규칙을 제거해 칭호 목록 글자 굵기를 주변 입력과 통일했습니다.
room playback의 currentEntry.status.playbackOrigin이 AUTOMATIC_REPLAY이면 현재곡 카드를 숨기고 3개 막대가 움직이는 현재 자동 재생 중입니다 상태를 표시합니다.
자동 순환 중에도 지난 곡과 대기곡은 유지하며, 내 노래 탭에는 자동 순환 상태를 노출하지 않습니다.

변경 이유

전체 탭에만 노출되던 내 재생 기록을 개인 시간축에서도 확인하고 자동재생·타인 기록이 개인 목록에 섞이지 않게 하기 위함입니다.
설정에서 대표 칭호를 고를 때 희소도와 획득 조건을 마우스와 키보드 사용자 모두 확인하고, 목록 타이포도 일관되게 보기 위함입니다.
자동 순환 재생을 사용자 신청 현재곡처럼 오인하지 않도록 재생 출처에 맞는 전용 상태를 제공하기 위함입니다.

영향 범위

검증

검증 결과 및 재현 방법:

자동 재생 targeted Vitest: 5 files / 35 tests passed
전체 테스트: 152 files / 649 tests passed
lint, production build, git diff --check passed
fresh read-only QA: blocker 없음
연결 가능한 browser가 없어 실제 화면 캡처 QA는 수행하지 못했습니다.

리뷰 포인트

개인 history가 playbackOrigin=USER_REQUESTED와 addedByUserSlug 일치를 모두 요구하는지 확인해주세요.
두 badge GET이 같은 acquisitionRate mapper를 사용하면서 공개 프로필 조회 조건과 화면을 바꾸지 않는지 확인해주세요.
칭호 listbox의 키보드 조작과 tooltip 좌우 전환, 글자 굵기 일관성이 유지되는지 확인해주세요.
자동 순환 현재곡만 카드에서 빠지고 지난 곡·대기곡·수동 현재곡 동작은 유지되는지 확인해주세요.
같은 현재곡의 TRACK_STARTED 캐시 갱신에서 REST로 받은 playback origin이 보존되는지 확인해주세요.

기능별 커밋

33edd14 feat(queue): 내 노래 재생 기록 노출
49e0ac3 feat(settings): 칭호 획득 상세 선택기를 추가
f3e0cc9 fix(settings): 칭호 선택기 글자 굵기를 맞춤
cca2f0d feat(queue): 자동 순환 재생 상태를 표시
1e9a386, c9ca8b9, ea9b57e: 자동 재생 아이콘 크기와 목록 중앙 정렬 후속 교정

위험 및 후속 작업

실제 로그인 데이터와 스크린리더에서 칭호 portal 관계, viewport 좌우 전환, 긴 설명 wrapping은 수동 확인이 필요합니다.
실제 backend 자동 순환 응답과 패널 높이별 자동 재생 상태 중앙 정렬은 브라우저 통합 확인이 필요합니다.

추적 정보

Linked issue: 없음
Execution plans:
- docs/exec-plans/active/2026-08-31-bidirectional-queue-scroll/
- docs/exec-plans/active/2026-09-01-settings-badge-tooltip/
- docs/exec-plans/active/2026-09-01-automatic-replay-state/
Selected skills: queuing-feature-delivery, queuing-orchestrator, queuing-api-boundary, queuing-ui-flow, frontend-architecture-guardrails, queuing-qa-reviewer, browser:control-in-app-browser
QA result: pass

화면 변경

내 노래 탭에 지난 신청곡과 본인 현재곡이 추가되고 지난 곡 카드가 회색 배경으로 표시됩니다.
설정 칭호 선택기에 두 줄 상세 tooltip을 제공하고 획득 여부와 무관하게 글자 굵기를 통일했습니다.
자동 순환 재생 중에는 현재곡 카드 대신 파란색 3-bar 애니메이션과 현재 자동 재생 중입니다 상태가 표시됩니다.
수동 스크린샷은 browser 미연결로 첨부하지 못했습니다.

vercel · 2026-08-31T12:24:20Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
queuing	Ready	Preview	Sep 1, 2026 3:32am UTC

coderabbitai · 2026-08-31T12:24:22Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 920130ab-b6b7-40cd-b4ac-926e536cd168

📥 Commits

Reviewing files that changed from the base of the PR and between 9eb3084 and ea9b57e.

📒 Files selected for processing (50)

docs/exec-plans/active/2026-08-31-bidirectional-queue-scroll/api-contract.md
docs/exec-plans/active/2026-08-31-bidirectional-queue-scroll/delivery-state.md
docs/exec-plans/active/2026-08-31-bidirectional-queue-scroll/plan.md
docs/exec-plans/active/2026-08-31-bidirectional-queue-scroll/qa-report.md
docs/exec-plans/active/2026-08-31-bidirectional-queue-scroll/ui-flow.md
docs/exec-plans/active/2026-09-01-automatic-replay-state/api-contract.md
docs/exec-plans/active/2026-09-01-automatic-replay-state/delivery-state.md
docs/exec-plans/active/2026-09-01-automatic-replay-state/plan.md
docs/exec-plans/active/2026-09-01-automatic-replay-state/qa-report.md
docs/exec-plans/active/2026-09-01-automatic-replay-state/review-findings.md
docs/exec-plans/active/2026-09-01-automatic-replay-state/ui-flow.md
docs/exec-plans/active/2026-09-01-settings-badge-tooltip/api-contract.md
docs/exec-plans/active/2026-09-01-settings-badge-tooltip/change-summary.md
docs/exec-plans/active/2026-09-01-settings-badge-tooltip/delivery-state.md
docs/exec-plans/active/2026-09-01-settings-badge-tooltip/plan.md
docs/exec-plans/active/2026-09-01-settings-badge-tooltip/qa-report.md
docs/exec-plans/active/2026-09-01-settings-badge-tooltip/ui-flow.md
docs/exec-plans/active/README.md
src/features/badge/api/badges.test.ts
src/features/badge/api/fetchMyBadges.ts
src/features/badge/api/fetchPublicUserBadges.ts
src/features/badge/model/mapUserBadgeList.ts
src/features/badge/model/types.ts
src/features/playlist/api/roomReads.test.ts
src/features/playlist/model/types.ts
src/features/playlist/model/useRoomQueueHistory.test.tsx
src/features/room/page/model/roomRealtimeEvents.test.ts
src/features/room/page/model/roomRealtimeEvents.ts
src/features/room/queue/hooks/useRoomQueuePanel.test.tsx
src/features/room/queue/hooks/useRoomQueuePanel.ts
src/features/room/queue/model/roomQueue.test.ts
src/features/room/queue/model/roomQueue.ts
src/features/room/queue/ui/RoomQueueCard.module.css
src/features/room/queue/ui/RoomQueueHistoryCard.tsx
src/features/room/queue/ui/RoomQueueListSection.module.css
src/features/room/queue/ui/RoomQueueListSection.test.tsx
src/features/room/queue/ui/RoomQueueListSection.tsx
src/features/room/queue/ui/RoomQueuePanel.module.css
src/features/room/queue/ui/RoomQueuePanel.tsx
src/features/room/queue/ui/RoomQueuePanelView.test.tsx
src/features/room/queue/ui/RoomQueuePanelView.tsx
src/features/room/queue/ui/RoomQueueVirtualization.test.tsx
src/features/room/queue/ui/useQueueBidirectionalScroll.test.tsx
src/features/room/queue/ui/useQueueBidirectionalScroll.ts
src/features/settings/ui/ProfileSettingsTab.module.css
src/features/settings/ui/ProfileSettingsTab.test.tsx
src/features/settings/ui/ProfileSettingsTab.tsx
src/features/settings/ui/components/BadgeSelect.module.css
src/features/settings/ui/components/BadgeSelect.tsx
src/features/settings/ui/components/ProfileSettingsForm.tsx

📝 Walkthrough

Walkthrough

큐의 재생 출처와 내 노래 필터를 갱신하고, 자동 재생 상태와 양방향 history 탐색을 확장했습니다. 또한 칭호 응답 정규화와 portal 기반 접근성 선택기 및 tooltip을 추가했습니다.

Changes

큐 탐색 및 자동 재생

Layer / File(s)	Summary
재생 출처 계약과 모델 `src/features/playlist/model/types.ts`, `src/features/room/page/model/roomRealtimeEvents.ts`, `src/features/playlist/api/roomReads.test.ts`	`playbackOrigin`과 `startOffsetMs`를 도입하고 `TRACK_STARTED` 갱신에서 기존 origin을 보존합니다.
내 노래 history 필터 `src/features/room/queue/model/roomQueue.ts`, `src/features/room/queue/hooks/useRoomQueuePanel.ts`, `src/features/room/queue/hooks/*.test.tsx`	로그인 사용자의 공개 slug와 `USER_REQUESTED` origin이 일치하는 history만 표시합니다. 비로그인 mine 탭에서는 history 조회와 cached history를 차단합니다.
양방향 history 탐색 `src/features/room/queue/ui/useQueueBidirectionalScroll.ts`, `src/features/room/queue/ui/useQueueBidirectionalScroll.test.tsx`, `src/features/room/queue/ui/RoomQueuePanelView.tsx`	모든 탭에서 anchor와 retry를 처리합니다. 상단 scroll과 위쪽 wheel 입력으로 이전 history 페이지를 요청합니다.
자동 재생 상태 렌더링 `src/features/room/queue/ui/RoomQueueListSection.tsx`, `src/features/room/queue/ui/RoomQueueListSection.module.css`, `src/features/room/queue/ui/RoomQueuePanel*.tsx`	`AUTOMATIC_REPLAY` 현재곡을 카드 대신 상태 UI로 표시합니다. history와 pending queue를 유지하고 reduced-motion 및 `100cqh` 레이아웃을 지원합니다.

설정 칭호 선택기

Layer / File(s)	Summary
칭호 API 응답 정규화 `src/features/badge/model/`, `src/features/badge/api/fetch.ts`, `src/features/badge/api/badges.test.ts`	`acquisitionRate`를 0~100 범위의 유한한 숫자 또는 `null`로 정규화합니다. 내 칭호와 공개 칭호 조회가 공용 mapper를 사용합니다.
Portal listbox와 tooltip `src/features/settings/ui/components/BadgeSelect.*`	native select를 대체하는 combobox/listbox를 추가했습니다. keyboard, pointer, ARIA, viewport 경계, portal tooltip을 처리합니다.
설정 폼 통합과 검증 `src/features/settings/ui/components/ProfileSettingsForm.tsx`, `src/features/settings/ui/ProfileSettingsTab.*`	설정 폼이 `UserBadge[]`를 사용하고 BadgeSelect를 렌더링합니다. 선택, 해제, tooltip, disabled, keyboard, fallback 동작을 검증합니다.

Estimated code review effort: 4 (Complex) | ~60 minutes

Sequence Diagram(s)

자동 재생 상태 흐름

sequenceDiagram
  participant PlaybackAPI
  participant RealtimeCache
  participant useRoomQueuePanel
  participant RoomQueuePanelView
  participant RoomQueueListSection
  PlaybackAPI->>useRoomQueuePanel: currentEntry.status.playbackOrigin
  RealtimeCache->>RealtimeCache: 기존 playbackOrigin 보존
  useRoomQueuePanel->>RoomQueuePanelView: isAutomaticReplayActive
  RoomQueuePanelView->>RoomQueueListSection: 자동 재생 상태 전달
  RoomQueueListSection->>RoomQueueListSection: 상태 UI 렌더링

칭호 선택 흐름

sequenceDiagram
  participant ProfileSettingsTab
  participant BadgeAPI
  participant mapUserBadgeList
  participant BadgeSelect
  ProfileSettingsTab->>BadgeAPI: badge 목록 조회
  BadgeAPI->>mapUserBadgeList: 원시 acquisitionRate 전달
  mapUserBadgeList-->>ProfileSettingsTab: 정규화된 UserBadge[]
  ProfileSettingsTab->>BadgeSelect: 옵션과 선택값 전달
  BadgeSelect-->>ProfileSettingsTab: 선택한 badgeCode 전달

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch dev

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

chatgpt-codex-connector · 2026-09-01T03:37:23Z

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-09-01T03:38:38.053177Z	`ea9b57e`	Draft marked ready

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

feat(queue): 내 노래 재생 기록 노출

33edd14

docs(delivery): 내 노래 기록 게시 상태 갱신

633daf6

vercel Bot deployed to Preview August 31, 2026 12:26 View deployment

feat(settings): 칭호 획득 상세 선택기를 추가

49e0ac3

vercel Bot deployed to Preview September 1, 2026 01:45 View deployment

aryu1217 changed the title ~~feat: 내 노래에 재생 기록 노출~~ feat: 내 노래 재생 기록과 칭호 획득 상세 제공 Sep 1, 2026

docs(delivery): 칭호 상세 게시 상태를 기록

11bfb56

vercel Bot deployed to Preview September 1, 2026 01:54 View deployment

aryu1217 added 2 commits September 1, 2026 11:10

fix(settings): 칭호 선택기 글자 굵기를 맞춤

f3e0cc9

feat(queue): 자동 순환 재생 상태를 표시

cca2f0d

vercel Bot deployed to Preview September 1, 2026 02:12 View deployment

aryu1217 changed the title ~~feat: 내 노래 재생 기록과 칭호 획득 상세 제공~~ feat: 내 노래 기록·칭호 상세·자동 재생 상태 개선 Sep 1, 2026

docs(delivery): 자동 재생 상태 게시 결과를 기록

6e7f060

vercel Bot deployed to Preview September 1, 2026 02:13 View deployment

fix(queue): 자동 재생 상태 크기와 정렬을 맞춤

1e9a386

vercel Bot deployed to Preview September 1, 2026 02:29 View deployment

fix(queue): 자동 재생 상태를 목록 중앙에 배치

c9ca8b9

vercel Bot deployed to Preview September 1, 2026 03:14 View deployment

fix(queue): 자동 재생 상태를 뷰포트 중앙에 배치

ea9b57e

vercel Bot deployed to Preview September 1, 2026 03:32 View deployment

aryu1217 marked this pull request as ready for review September 1, 2026 03:37

aryu1217 merged commit 2927fff into main Sep 1, 2026
3 of 4 checks passed

aryu1217 changed the title ~~feat: 내 노래 기록·칭호 상세·자동 재생 상태 개선~~ feat: 내 노래 기록·칭호 상세·자동 재생 및 UI 후속 개선 Sep 1, 2026

aryu1217 changed the title ~~feat: 내 노래 기록·칭호 상세·자동 재생 및 UI 후속 개선~~ feat: 내 노래 기록·칭호 상세·자동 재생 상태 개선 Sep 1, 2026

Navigation Menu

feat: 내 노래 기록·칭호 상세·자동 재생 상태 개선 - #58

feat: 내 노래 기록·칭호 상세·자동 재생 상태 개선#58
aryu1217 merged 10 commits into
mainfrom
dev

aryu1217 commented Aug 31, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Aug 31, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Aug 31, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram(s)

자동 재생 상태 흐름

칭호 선택 흐름

Uh oh!

Uh oh!

chatgpt-codex-connector Bot commented Sep 1, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

aryu1217 commented Aug 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

변경 내용

변경 이유

영향 범위

검증

리뷰 포인트

기능별 커밋

위험 및 후속 작업

추적 정보

화면 변경

Uh oh!

vercel Bot commented Aug 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Aug 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

자동 재생 상태 흐름

칭호 선택 흐름

Uh oh!

Uh oh!

chatgpt-codex-connector Bot commented Sep 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codex Review Summary

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

aryu1217 commented Aug 31, 2026 •

edited

Loading

vercel Bot commented Aug 31, 2026 •

edited

Loading

coderabbitai Bot commented Aug 31, 2026 •

edited

Loading

chatgpt-codex-connector Bot commented Sep 1, 2026 •

edited

Loading