Skip to content

design: 유튜브 에디토리얼 리디자인#75

Merged
bbbang105 merged 1 commit intodevfrom
feature/youtube-editorial-redesign
Apr 21, 2026
Merged

design: 유튜브 에디토리얼 리디자인#75
bbbang105 merged 1 commit intodevfrom
feature/youtube-editorial-redesign

Conversation

@bbbang105
Copy link
Copy Markdown
Owner

Summary

  • 유튜브 페이지 UI/UX를 피드와 동일한 에디토리얼 톤으로 리디자인 (Scope B — 비주얼 + 필터바 구조)
  • YoutubeCard 를 3종으로 분할: magazine grid (Feed 모바일 + Saved) / hairline list (Feed 데스크탑) / compact row (Collect)
  • YoutubeFilterBar 신규 — 태그 em-dash 세그먼트 → 상태/기간칩 + 액션 → 검색 → 즐겨찾기 (피드 필터바 구조와 정렬)
  • YoutubeSourceBar compact trigger 모드 추가로 Feed 탭에서도 채널 관리 다이얼로그 접근
  • 스켈레톤 탭 인식, 에디토리얼 빈 상태, 정렬 바 제거
  • 스와이프 액션 피드+유튜브 완전 제거 (use-swipe-action.ts 삭제)

Review fixes (2 P0/P1 자동 리뷰 → 반영)

  • P0 handleToggleBookmark unbookmark 실패 시 pinnedItems 롤백 누락 → snapshot 캡처 후 복원
  • P1 YoutubeListRow<textarea><button> 내부에 중첩 (HTML 유효성 + AT) → InlineNote를 button 밖으로 재배치, pl-[160px] 로 텍스트 컬럼 정렬
  • P1 useCardClickHandlersuseCallback 미사용으로 memo 무력화 → 래핑
  • P1 YoutubeCompactRow 체크박스 래퍼 터치 타겟 44px 미달 → min-h/w-[44px] 추가

스킵: P0-2 (unmount race — React 18 suppressed), P1-4/P1-5 (nitpick), 보안 P1 (aria-label SSR injection — React attribute escaping 정상 작동, false alarm).

Test plan

  • Feed 탭 모바일: 1~2 col 잡지 그리드 (썸 16:10, font-display 제목, oneLiner 2-line)
  • Feed 탭 데스크탑: 헤어라인 리스트 행 (140x90 썸, font-display text-xl)
  • Saved 탭: 3-col pinned + 마소너리 레이아웃
  • Collect 탭: 컴팩트 행 + 체크박스 좌측
  • 필터바: 태그 em-dash 세그먼트 + 상태/기간 + 검색 + 즐겨찾기
  • Feed 탭 [Select][+][Sources] action 슬롯
  • Collect 탭 [Select][Sources] action 슬롯 + 기간칩 + Collect 버튼
  • 에디토리얼 빈 상태 (mono eyebrow + font-display)
  • 북마크 토글 → Saved 탭 pinnedItems 정합성
  • 일괄 삭제 / 일괄 안읽음 / 일괄 요약 (Create 탭)
  • URL 직접 추가 (AddUrlDialog)
  • 스와이프 제스처 피드/유튜브 모두 없음 (확인)

🤖 Generated with Claude Code

- YoutubeCard 3분할: magazine(Feed 모바일+Saved) / hairline list(Feed 데스크탑) / compact row(Collect)
- YoutubeFilterBar 신규: 태그 em-dash → 상태·기간+actions → 검색 → 즐겨찾기
- YoutubeSourceBar compact trigger (Feed/Collect 양쪽 액션 슬롯)
- 스켈레톤 탭 인식, 에디토리얼 빈 상태, 정렬 바 제거
- feed-card 스와이프 코드 제거 + use-swipe-action.ts 삭제
- handleToggleBookmark unbookmark 실패 시 pinnedItems 롤백 복원 (P0 fix)
- YoutubeListRow InlineNote를 button 밖으로 재배치 (textarea in button 제거)
- useCardClickHandlers useCallback 래핑으로 memo 정상화

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 21, 2026

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

Project Deployment Actions Updated (UTC)
forme Ready Ready Preview, Comment Apr 21, 2026 7:01am

@bbbang105 bbbang105 added the 🚨 fix 버그 수정 / 에러 해결 label Apr 21, 2026
@bbbang105 bbbang105 merged commit 6325877 into dev Apr 21, 2026
8 checks passed
@bbbang105 bbbang105 deleted the feature/youtube-editorial-redesign branch April 21, 2026 07:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🚨 fix 버그 수정 / 에러 해결

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant