Skip to content

fix: 유튜브 재생목록 신청 연결 - #60

Merged
aryu1217 merged 5 commits into
mainfrom
dev
Sep 2, 2026
Merged

aryu1217 merged 5 commits into
mainfrom
dev

Conversation

@aryu1217

@aryu1217 aryu1217 commented Sep 2, 2026 •

Copy link
Copy Markdown
Member

변경 내용

  • YouTube URL의 list 파라미터를 감지하면 현재 영상만 추가와 재생목록 노래도 함께 추가 중 하나를 명시적으로 선택하게 합니다.
  • 선택에 따라 재생목록은 전체 URL과 youtubePlaylist: true, 단일 영상은 현재 영상 ID와 youtubePlaylist: false를 STOMP payload로 전달합니다.
  • 잘못된 재생목록 URL은 단일 영상으로 조용히 폴백하지 않고 입력 오류로 처리하며, 신청 입력 안내에 재생목록 지원을 반영합니다.
  • 순수 /playlist?list=... URL은 현재 영상 선택을 비활성화하고 재생목록 노래 추가를 직접 선택해야 제출됩니다.

변경 이유

  • 기존 프론트는 watch?v=...&list=...에서 v만 추출해 backend에 전달했기 때문에 재생목록 링크도 현재 영상 한 곡으로 처리됐습니다.
  • backend QueueVideoRequest는 youtubePlaylist: true일 때 videoId 필드에 list가 포함된 전체 URL을 받도록 구현돼 있어 해당 계약에 맞춰 연결합니다.
  • 재생목록 링크가 곧바로 여러 곡 추가로 이어지지 않도록 추가 범위를 사용자 의사로 확정합니다.

영향 범위

  • UI / 사용자 흐름
  • API 요청·응답 계약
  • React Query 캐시
  • WebSocket / 실시간 상태
  • 인증 / 보안
  • 문서 / 개발 도구

검증

  • npm run lint
  • npm run test
  • npm run build
  • 관련 수동 시나리오 확인
  • 실패·로딩·빈 상태 확인

검증 결과 및 재현 방법:

  • targeted Vitest: 5 files / 39 tests pass
  • full Vitest: 155 files / 688 tests pass
  • lint, production build, git diff --check pass
  • structured QA pass, blocker 없음
  • 선택 전 제출 차단, 현재 영상/재생목록 payload 분기, 순수 재생목록의 단일 선택 비활성화, URL 변경 시 선택 초기화를 자동 테스트로 확인했습니다.

리뷰 포인트

  • watch?v=...&list=...에서 사용자가 현재 영상 또는 재생목록 노래 추가를 선택할 수 있는지 확인해 주세요.
  • 범위 선택 전에는 STOMP 요청이 전송되지 않고, 선택 결과에 따라 ID/전체 URL과 youtubePlaylist가 일치하는지 확인해 주세요.
  • list가 비었거나 backend가 지원하지 않는 path면 단일 영상으로 폴백하지 않는 정책을 확인해 주세요.
  • 실제 STOMP body가 backend QueueVideoRequest.youtubePlaylist 계약과 일치하는지 확인해 주세요.

기능별 커밋

  • d0915a2 fix(playlist): 유튜브 재생목록 신청을 백엔드에 전달 — URL 판별, payload 직렬화, UI 안내 및 회귀 테스트
  • 59dc90a docs(delivery): 재생목록 신청 검증 결과를 기록 — 실행 계획과 QA 증거
  • 5b21b8c fix(playlist): 재생목록 추가 범위를 확인 — 사용자 선택 UI, 제출 검증, 순수 재생목록 제약 및 회귀 테스트
  • 6406851 docs(delivery): 재생목록 선택 QA를 기록 — 후속 리뷰 finding과 전체 검증 결과

위험 및 후속 작업

  • 실제 backend와 YouTube API를 연결한 E2E는 수행하지 않았습니다.
  • watch&list=...처럼 query 시작 문자인 ?가 없는 비표준 URL과 /shorts/...?...list=...는 지원하지 않습니다.

추적 정보

  • Linked issue: 없음
  • Execution plan: docs/exec-plans/active/2026-09-02-youtube-playlist-import/plan.md
  • Selected skills: queuing-feature-delivery, queuing-pr-review-cycle, queuing-api-boundary, queuing-ui-flow, frontend-architecture-guardrails, queuing-qa-reviewer
  • QA result: pass

Summary by CodeRabbit

  • 새 기능

    • YouTube 영상뿐 아니라 재생목록 URL도 입력할 수 있습니다.
    • 재생목록 감지 시 현재 영상만 추가하거나 재생목록의 노래를 함께 추가하는 옵션을 선택할 수 있습니다.
    • 현재 영상이 없는 재생목록은 재생목록 전체 추가만 선택할 수 있습니다.
    • URL 변경이나 입력 초기화 시 이전 선택이 자동으로 해제됩니다.
    • 잘못된 URL과 선택 누락에 대한 안내가 개선되었습니다.
  • 버그 수정

    • 선택하지 않은 재생목록 범위로 요청이 전송되지 않도록 수정했습니다.

@vercel

vercel Bot commented Sep 2, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
queuing Ready Ready Preview Sep 2, 2026 12:13pm UTC

@coderabbitai

coderabbitai Bot commented Sep 2, 2026 •

Copy link
Copy Markdown

Review Change Stack

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: 2325d692-144e-41e2-933a-148bdd0a9209

📥 Commits

Reviewing files that changed from the base of the PR and between c663694 and 6406851.

📒 Files selected for processing (19)
  • docs/exec-plans/active/2026-09-02-youtube-playlist-import/delivery-state.md
  • docs/exec-plans/active/2026-09-02-youtube-playlist-import/plan.md
  • docs/exec-plans/active/2026-09-02-youtube-playlist-import/qa-report.md
  • docs/exec-plans/active/2026-09-02-youtube-playlist-import/review-findings.md
  • docs/exec-plans/active/README.md
  • src/features/playlist/add-track/hooks/useAddTrackAction.test.tsx
  • src/features/playlist/add-track/hooks/useAddTrackAction.ts
  • src/features/playlist/add-track/hooks/useAddTrackForm.test.tsx
  • src/features/playlist/add-track/hooks/useAddTrackForm.ts
  • src/features/playlist/add-track/model/extractYouTubeVideoId.ts
  • src/features/playlist/add-track/model/parseYouTubeQueueSource.test.ts
  • src/features/playlist/add-track/model/parseYouTubeQueueSource.ts
  • src/features/playlist/add-track/ui/AddTrackAction.tsx
  • src/features/playlist/add-track/ui/AddTrackFormFields.test.tsx
  • src/features/playlist/add-track/ui/AddTrackFormFields.tsx
  • src/features/playlist/add-track/ui/AddTrackModal.module.css
  • src/features/playlist/add-track/ui/AddTrackModalView.tsx
  • src/features/playlist/api/websocket/publishAddTrack.test.ts
  • src/features/playlist/api/websocket/publishAddTrack.ts

📝 Walkthrough

Walkthrough

YouTube 영상 및 재생목록 URL을 구분하는 파서와 요청 모델을 추가했습니다. 재생목록 입력에는 추가 범위 선택 UI를 제공하며, 선택 결과를 youtubePlaylist payload로 WebSocket에 전달합니다. 관련 테스트와 실행 계획 문서를 추가했습니다.

Changes

YouTube 재생목록 가져오기

Layer / File(s) Summary
YouTube 입력 파싱 및 요청 모델
src/features/playlist/add-track/model/*
YouTube URL을 영상 또는 재생목록으로 분류합니다. queueMode에 따라 YouTubeQueueRequest를 생성합니다. 잘못된 URL과 순수 재생목록 URL의 단일 영상 선택을 거부합니다.
폼 상태 및 제출 처리
src/features/playlist/add-track/hooks/*
폼이 queueSource, queueMode, queueRequest를 관리합니다. 범위를 선택하지 않으면 제출을 중단하고 queueMode 오류를 표시합니다. 관련 제출 및 상태 테스트를 추가했습니다.
재생목록 범위 선택 UI
src/features/playlist/add-track/ui/*
재생목록 감지 시 현재 영상과 전체 재생목록 라디오 옵션을 표시합니다. 현재 영상이 없으면 단일 영상 옵션을 비활성화합니다. 접근성 속성과 반응형 스타일을 추가했습니다.
WebSocket 계약 및 실행 계획 기록
src/features/playlist/api/websocket/*, docs/exec-plans/active/*
publishAddTrack payload에 youtubePlaylist를 추가했습니다. WebSocket 발행 테스트와 기능 범위, QA 결과, 배송 상태 문서를 추가했습니다.

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

Sequence Diagram(s)

sequenceDiagram
  participant 사용자
  participant AddTrackForm
  participant useAddTrackAction
  participant publishAddTrack
  사용자->>AddTrackForm: 영상 또는 재생목록 URL 입력
  AddTrackForm->>AddTrackForm: queueMode 선택
  AddTrackForm->>useAddTrackAction: queueRequest 제출
  useAddTrackAction->>publishAddTrack: videoId, youtubePlaylist, story 전달
Loading
✨ 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.

@aryu1217
aryu1217 marked this pull request as ready for review September 2, 2026 12:16
@aryu1217
aryu1217 merged commit b84dbb0 into main Sep 2, 2026
3 of 4 checks passed
@chatgpt-codex-connector

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

Copy link
Copy Markdown

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-02T12:18:10.170903Z 6406851 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.

This branch was successfully deployed

1 active deployment
Preview — 6406851e Deployed Sep 2, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant