design: 유튜브 콘텐츠 에디토리얼 리디자인 (PR-B)#71
Merged
Merged
Conversation
PR #58에서 유튜브 chrome(탭/필터/소스바)만 리디자인했고, 카드 콘텐츠 / 상세 페이지 / 마크다운 / 수집 진행은 여전히 프라이머리 색상 pill + sans 타이포를 쓰고 있었음. Phase 3 에디토리얼 톤(크림 + 번트 오렌지 + Instrument Serif italic + mono uppercase + em-dash)로 통일. ## youtube-card - 태그 칩 (emerald/blue/violet/pink/amber pill) → mono em-dash uppercase 텍스트 (피드 chrome과 동일 패턴) - "설명 기반" amber pill → mono "— desc" - "요약 중..." primary pill → mono "summarizing" + 작은 펄스 도트 - 키워드 텍스트 italic + 타이트 색상 - Inline note: bg-muted/50 박스 → 왼쪽 hairline + italic 노트패드 스타일 - Inline note 에디터: primary 버튼 → mono "save/cancel" ## /youtube/[id] 상세 페이지 - 제목 text-xl font-bold → font-display text-3xl (Instrument Serif italic, Korean은 Noto Serif KR 업라이트) - 돌아가기 링크 → mono "back" - 메타데이터 → mono uppercase eyebrow (channel — date — desc-based) - 키워드 primary pill → mono em-dash 텍스트 chip row + 상단 hairline - One-liner blockquote → ember left-border + display serif pull quote - "YouTube에서 보기" 버튼 → mono uppercase "watch on youtube" + hairline 구분선 ## markdown-renderer - prose 스타일 Phase 3 맞춤: - headings → font-display tracking-tight - links → ember underline hairline - inline code → hairline chip - pre → rounded-sm hairline border - blockquote → ember pull quote (display serif italic) - table → hairline + mono uppercase thead ## collect-progress - emerald/amber direct 색상 → semantic 토큰 (success/destructive/warning) - 상태 라벨 한글 sans → mono uppercase (connecting/collecting/complete/error) - 완료 요약: sans bold → font-display 새 영상 N건 - 프로그레스 바 rounded-full bg-muted → hairline (h-[2px]) - 결과 리스트: 아이콘 크기 다운 + mono em-dash suffix - Summary: sans → mono em-dash (sources N — ok M — fail K) - 닫기 버튼 → mono "close" ## 불변 - 카드 상호작용 (북마크/핀/삭제/클릭/노트 편집) 동작 모두 동일 - SSE 수집 핸들링 / 상태 전이 / AbortController 정리 모두 동일 - 254 tests 통과, typecheck / lint 통과 Co-Authored-By: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
PR #58에서 유튜브 chrome(탭/필터/소스바)만 리디자인됐고, 카드 콘텐츠·상세 페이지·마크다운 렌더러·수집 진행은 여전히 구버전. Phase 3 에디토리얼 톤으로 통일.
변경
youtube-card
/youtube/[id] 상세 페이지
markdown-renderer
collect-progress
불변
Test plan
Follow-up
PR-C (TipTap 노트 chrome), PR-D (공통 base interface), PR-E (컴포넌트 완전 분리) 예정.
🤖 Generated with Claude Code