feat: 노래 신청 검색·친구 UI·방 닉네임 실시간 반영 개선 by aryu1217 · Pull Request #62 · Queuing-org/frontend

aryu1217 · 2026-09-08T12:41:51Z

변경 내용·이유

노래 신청 검색

빈 입력 포커스에서 자주 신청한 음악 최대 8개, 제목 입력에서 300ms 디바운스 YouTube 결과 최대 8개 표시.
선택 시 URL만 채우고 선정 이유 유지. 신청은 기존 큐잉 버튼으로 진행.
로그인 계정별 캐시, AbortSignal, 한글 조합, URL/잘못된 URL 구분, 로딩·빈 결과·quota/429 안내 처리.
입력 아래 portal 목록, 키보드 선택·Escape/Tab·바깥 클릭, 공통 OverflowMarquee와 reduced-motion 지원.
로그아웃·탈퇴 시 진행 중 me 조회 취소 후 개인 검색 캐시 정리. 지연 응답이 이전 계정을 복원하는 경합 수정.

큐 중복

개인 큐만 현재 entryId를 걸러내지 않던 원인 수정.
모든 로딩 페이지에서 현재 entryId만 제외하고 같은 영상의 별도 신청 항목과 서버 대기 곡 수 유지.

친구 UI·상태

확인 가능한 공개 방은 {방 이름} 참여 중, 그 외 확인된 온라인/오프라인 문구 복원. 상태 정보가 없으면 추측하지 않음.
상태 문구 regular 12px, 방 참여 #3B82F6 적용.
프로필 기본 300×431px·축소 240×344.8px. 공통 패널의 contentPadding="none"으로 패딩 소유권 정리, 넘치는 내용은 스크롤 접근.

닉네임 실시간 반영

기존 방 구독에서 ROOM_PARTICIPANT_NICKNAME_CHANGED 검증·처리. 다른 방/잘못된 payload/중복·역순 이벤트 무시.
참가자 전체 페이지·본인 고정 행·현재 신청자·개인/전체 큐·방장·열린 프로필·본인 캐시 즉시 보정.
취소/재검증과 이후 캐시 성공 응답 보정으로 늦은 조회가 옛 이름을 복원하지 않도록 처리.
기존·추가 로딩 채팅은 표시 단계에서 최신 이름 적용. 서버 원문·내용·삭제 상태·식별자·scrollToLatestKey 유지.
닉네임 보정은 방 세션 범위로 유지하고 퇴장 시 정리. 소켓 추가 없음.

영향 범위

검증

npm run lint
npm test -- --maxWorkers=4 — 160개 파일·713개 테스트 통과.
npm run build
실패·로딩·빈 상태 및 계정 전환 자동 테스트
실제 브라우저 시각·터치 검증 — 브라우저 연결 목록이 비어 실행 불가.
검색 debounce/IME·취소·역순 응답·계정 전환·선택·Escape·SoundCloud·quota 회귀 검증.
닉네임 전체 페이지·지연 조회·역순 이벤트·기존/추가 chat·구독 유지·재연결 보정 유지·퇴장 정리 검증.
최종 lint·713개 테스트·단독 build 통과. 중간 동시 실행 타임아웃과 재검증 결과는 qa-report.md에 기록.

기능별 커밋

d1205c6 개인 큐 현재 곡 중복 제거 및 회귀 테스트.
357562c 친구 상태·프로필 크기·패딩 소유권 및 테스트.
782fc42 검색 콤보박스·계정 캐시·공통 marquee 및 테스트.
3cf2641 닉네임 실시간 캐시/채팅 투영 및 회귀 테스트.

리뷰 포인트·남은 제한

브라우저 연결 후 작은 화면 목록 높이·터치 선택·프로필 하단 접근·실제 채팅 스크롤 위치 확인 필요.
서버 REST 응답에는 닉네임 버전이 없어 재연결 중 누락된 더 최신 이벤트와 오래된 응답을 완전히 구분할 수 없음. 세션에서 수신한 최신 이벤트를 우선함.
API 계약은 Queuing-org/backend main Controller/DTO로 확인. 실계정 API/소켓 수동 검증 미실행.

추적 정보

Execution plan: docs/exec-plans/active/2026-09-08-track-search-realtime/
Selected skills: queuing-feature-delivery, queuing-orchestrator, queuing-api-boundary, queuing-ui-flow, frontend-architecture-guardrails, queuing-qa-reviewer, queuing-incident-curator, browser:control-in-app-browser
QA result: pass — 독립 reviewer의 ArrowUp·계정 종료 경합 지적 수정 및 재검토 완료. 수동 검증 제한은 위에 명시.

Summary by CodeRabbit

새로운 기능
- 곡 제목 검색 또는 YouTube 링크 입력으로 곡을 빠르게 찾고 신청할 수 있습니다.
- 방 참여자의 닉네임 변경이 참가자 목록, 큐, 재생 화면과 채팅에 실시간 반영됩니다.
- 팔로우 카드에 방 참여 여부와 온라인 상태가 표시됩니다.
개선 사항
- 개인 큐에서 현재 재생 중인 항목만 정확히 제외합니다.
- 프로필 모달의 표시 영역과 버튼 배치가 개선되었습니다.
- 긴 곡 제목의 marquee 표시와 reduced-motion 환경을 지원합니다.
버그 수정
- 로그아웃·탈퇴 직후 이전 계정 정보가 다시 표시되는 문제를 해결했습니다.

vercel · 2026-09-08T12:41:57Z

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

Project	Deployment	Actions	Updated
queuing	Ready	Preview	Sep 8, 2026 12:42pm UTC

coderabbitai · 2026-09-08T12:42:02Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: eadb2eb9-d333-40a1-aebe-c53c13b91671

📥 Commits

Reviewing files that changed from the base of the PR and between b7d680a and 4fc80ee.

📒 Files selected for processing (55)

.agents/skills/queuing-qa-reviewer/SKILL.md
ARCHITECTURE.md
docs/agent-harness/incidents/2026-09-08-account-exit-late-response.md
docs/exec-plans/active/2026-09-08-track-search-realtime/api-contract.md
docs/exec-plans/active/2026-09-08-track-search-realtime/change-summary.md
docs/exec-plans/active/2026-09-08-track-search-realtime/delivery-state.md
docs/exec-plans/active/2026-09-08-track-search-realtime/handoff.md
docs/exec-plans/active/2026-09-08-track-search-realtime/plan.md
docs/exec-plans/active/2026-09-08-track-search-realtime/qa-report.md
docs/exec-plans/active/2026-09-08-track-search-realtime/ui-flow.md
docs/exec-plans/active/README.md
src/features/auth/logout/model/useLogout.ts
src/features/follow/ui/FollowPresenceCard.test.tsx
src/features/follow/ui/FollowPresenceCard.tsx
src/features/follow/ui/FollowProfileModal.module.css
src/features/follow/ui/FollowProfileModal.test.tsx
src/features/follow/ui/FollowProfileModal.tsx
src/features/follow/ui/FollowUserCard.module.css
src/features/follow/ui/FollowUserCard.tsx
src/features/playlist/add-track/hooks/useAddTrackAction.ts
src/features/playlist/add-track/ui/AddTrackFormFields.test.tsx
src/features/playlist/add-track/ui/AddTrackFormFields.tsx
src/features/playlist/add-track/ui/TrackSearchInput.module.css
src/features/playlist/add-track/ui/TrackSearchInput.test.tsx
src/features/playlist/add-track/ui/TrackSearchInput.tsx
src/features/playlist/api/fetchTrackSuggestions.test.ts
src/features/playlist/api/fetchTrackSuggestions.ts
src/features/playlist/model/trackSuggestionKeys.ts
src/features/playlist/model/trackSuggestions.test.ts
src/features/playlist/model/trackSuggestions.ts
src/features/playlist/model/useTrackSuggestions.ts
src/features/room/current-requester/ui/CurrentRequesterCard.tsx
src/features/room/model/RoomNicknamesContext.ts
src/features/room/model/roomParticipantNicknames.test.ts
src/features/room/model/roomParticipantNicknames.ts
src/features/room/page/hooks/useRoomParticipantNicknames.ts
src/features/room/page/hooks/useRoomRealtimeEvents.test.tsx
src/features/room/page/hooks/useRoomRealtimeEvents.ts
src/features/room/page/ui/RoomPlaybackScreen.test.tsx
src/features/room/page/ui/RoomPlaybackScreen.tsx
src/features/room/profile/ui/RoomProfilePanel.tsx
src/features/room/queue/hooks/useRoomQueuePanel.test.tsx
src/features/room/queue/hooks/useRoomQueuePanel.ts
src/features/room/queue/ui/RoomQueueCard.tsx
src/features/room/queue/ui/RoomQueueHistoryCard.tsx
src/features/room/queue/ui/RoomQueueVirtualization.test.tsx
src/features/user/profile/hooks/useAccountExit.test.tsx
src/features/user/profile/hooks/useWithdrawMe.ts
src/features/user/session/api/me.ts
src/features/user/session/hooks/useMe.ts
src/shared/ui/floating-panel/FloatingPanelShell.module.css
src/shared/ui/floating-panel/FloatingPanelShell.tsx
src/shared/ui/overflow-marquee/OverflowMarquee.module.css
src/shared/ui/overflow-marquee/OverflowMarquee.test.tsx
src/shared/ui/overflow-marquee/OverflowMarquee.tsx

📝 Walkthrough

Walkthrough

트랙 검색 입력, 제안 API와 캐시를 추가했습니다. 방 닉네임 이벤트를 캐시와 표시 영역에 투영합니다. 로그아웃과 탈퇴에서 지연된 identity 응답을 차단합니다. 친구 상태, 프로필 레이아웃, 공통 marquee 동작을 갱신했습니다.

Changes

트랙 검색 및 큐잉 통합

Layer / File(s)	Summary
트랙 제안 계약과 검색 입력 `src/features/playlist/model/`, `src/features/playlist/api/`, `src/features/playlist/add-track/ui/TrackSearchInput.*`	입력 분류, YouTube 검색, frequent 트랙 조회, 계정별 캐시, 디바운스, IME, 키보드 탐색, 오류 처리를 추가했습니다.
큐잉 입력과 캐시 갱신 `src/features/playlist/add-track/`, `src/features/room/page/hooks/useRoomRealtimeEvents.`	기존 URL 입력을 `TrackSearchInput`으로 교체했습니다. 트랙 신청과 재생 상태 변경 시 frequent 제안 캐시를 갱신합니다.

방 닉네임 세션

Layer / File(s)	Summary
방 닉네임 세션과 캐시 투영 `src/features/room/model/`, `src/features/room/page/hooks/`, `src/features/room/page/ui/RoomPlaybackScreen.tsx`, `src/features/room/profile/ui/RoomProfilePanel.tsx`	닉네임 이벤트를 검증하고 참가자, 큐, 재생, 방 메타데이터, 프로필, `me` 캐시와 채팅 표시 이름에 적용합니다. 재연결 중에는 유지하고 명시적 leave에서 삭제합니다.

친구 상태와 공통 UI

Layer / File(s)	Summary
친구 상태와 프로필 레이아웃 `src/features/follow/ui/*`	친구 카드에 방 참여, 온라인, 오프라인 상태 문구를 표시합니다. 프로필 패널의 높이, 세로 스크롤, 버튼 레이아웃을 조정합니다.
공통 marquee와 패널 프레젠테이션 `src/shared/ui/overflow-marquee/`, `src/shared/ui/floating-panel/`, `src/features/room/queue/ui/`, `src/features/room/current-requester/ui/`	`OverflowMarquee`를 shared UI 경로에서 사용합니다. reduced-motion, overflow 스크롤, 선택적 포커스 동작을 추가합니다. 패널 콘텐츠 패딩 선택도 추가합니다.

계정 종료 캐시

Layer / File(s)	Summary
계정 종료와 지연 identity 응답 차단 `src/features/auth/logout/model/useLogout.ts`, `src/features/user/profile/hooks/`, `src/features/user/session/`	로그아웃과 탈퇴 전에 `me` 쿼리를 취소합니다. `AbortSignal`을 Axios 요청에 전달합니다. `me`와 트랙 제안 캐시를 정리합니다.

실행 계획 및 검증 기록

Layer / File(s)	Summary
실행 계획과 검증 기록 `ARCHITECTURE.md`, `docs/agent-harness/incidents/`, `docs/exec-plans/active/`, `.agents/skills/*`	검색 계약, 닉네임 소유권, 계정 종료 경합, QA 절차와 검증 결과를 문서화했습니다.

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

Severity of issue fixed: Medium

Sequence Diagram(s)

트랙 검색 흐름

sequenceDiagram
  participant TrackSearchInput
  participant useTrackSuggestions
  participant fetchTrackSuggestions
  participant YouTubeAPI
  TrackSearchInput->>useTrackSuggestions: 입력값과 열림 상태 전달
  useTrackSuggestions->>fetchTrackSuggestions: 디바운스된 검색 요청
  fetchTrackSuggestions->>YouTubeAPI: YouTube 영상 검색 요청
  YouTubeAPI-->>fetchTrackSuggestions: 최대 8개 결과 반환
  fetchTrackSuggestions-->>useTrackSuggestions: 제안 목록 반환
  useTrackSuggestions-->>TrackSearchInput: 제안 목록과 상태 반환

방 닉네임 투영 흐름

sequenceDiagram
  participant RoomWebSocket
  participant useRoomRealtimeEvents
  participant createRoomNicknameSession
  participant QueryCache
  participant RoomPlaybackScreen
  RoomWebSocket->>useRoomRealtimeEvents: ROOM_PARTICIPANT_NICKNAME_CHANGED 전달
  useRoomRealtimeEvents->>createRoomNicknameSession: 이벤트 검증 및 수락
  createRoomNicknameSession->>QueryCache: 관련 캐시 패치
  createRoomNicknameSession-->>RoomPlaybackScreen: 닉네임 맵 갱신
  RoomPlaybackScreen->>RoomPlaybackScreen: 채팅 표시 이름 적용

✨ 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

Warning

Some tools did not complete. Review the errors below.

🔧 SkillSpector (2.9.5)

SkillSpector batch scan produced no output

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.

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-08T12:50:05Z

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-08T12:51:45.496709Z	`4fc80ee`	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.

aryu1217 added 5 commits September 8, 2026 21:35

fix(room): 개인 큐에서 현재 신청 항목 중복을 제거

d1205c6

fix(follow): 친구 상태 문구와 프로필 패널 크기를 복원

357562c

feat(playlist): 자주 신청한 음악과 제목 검색 콤보박스를 추가

782fc42

fix(room): 닉네임 이벤트를 큐와 프로필 및 기존 채팅에 반영

3cf2641

docs(delivery): 음악 검색과 실시간 표시 통합 QA를 기록

dba6fc4

docs(delivery): 통합 개선 Draft PR 62 전달 상태를 기록

4fc80ee

vercel Bot deployed to Preview September 8, 2026 12:42 View deployment

aryu1217 marked this pull request as ready for review September 8, 2026 12:49

aryu1217 merged commit fb897ab into main Sep 8, 2026
3 of 4 checks passed

Navigation Menu

feat: 노래 신청 검색·친구 UI·방 닉네임 실시간 반영 개선 - #62

feat: 노래 신청 검색·친구 UI·방 닉네임 실시간 반영 개선#62
aryu1217 merged 6 commits into
mainfrom
dev

aryu1217 commented Sep 8, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Sep 8, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Sep 8, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram(s)

트랙 검색 흐름

방 닉네임 투영 흐름

Uh oh!

Uh oh!

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

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

aryu1217 commented Sep 8, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

변경 내용·이유

노래 신청 검색

큐 중복

친구 UI·상태

닉네임 실시간 반영

영향 범위

검증

기능별 커밋

리뷰 포인트·남은 제한

추적 정보

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Uh oh!

coderabbitai Bot commented Sep 8, 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 8, 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 Sep 8, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented Sep 8, 2026 •

edited

Loading

coderabbitai Bot commented Sep 8, 2026 •

edited

Loading

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

edited

Loading