편집창에 트랙 구간을 보여주는 바를 둔다

[Jang990]

Closes #61

이전

이후

무엇을 바꿨나

• 편집을 열면 시각 칸 위에 구간 바가 보인다. 바가 덮는 시간은 이전 트랙이 끝나는 곳부터 다음 트랙이 시작하는 곳까지고, 양쪽에 그 길이의 10%를 여유로 붙인다. 여유가 없으면 끝을 당기지 않은 이웃 옆에서 트랙이 바의 가장자리에 붙어, 그쪽으로 움직일 수 있다는 것이 보이지 않는다.
• 영상 전체가 아니라 이웃 사이만 그린다. 전체를 그리면 세 시간짜리 영상에서 사 분짜리 트랙이 2%가 되어 미세한 이동이 화면에서 사라진다.
• 바의 범위는 편집을 열 때 한 번 정하고 닫을 때까지 바꾸지 않는다. 칸을 고칠 때마다 눈금이 함께 움직이면 칠해진 구간이 제자리에 있는 것처럼 보인다.
• 끝 칸이 비어 있으면 다음 트랙이 시작하는 곳까지 칠한다. 칸의 뜻("다음 트랙까지")을 그대로 그린 것이다.
• 영상 길이를 모르면(라이브) 바를 그리지 않는다. 편집은 지금까지처럼 된다.
• 편집에 쓰는 부품을 src/ui/parts/edit/로 모았다. manifest.json의 web_accessible_resources에 그 폴더를 더했다 — 없으면 동적 import가 런타임에 막힌다.

바를 눌러도 아무 일도 일어나지 않는다. 재생 위치 표시와 클릭 이동은 다음 이슈다.

화면

확인

• npm test 209개 통과
• npm run test:e2e 86개 통과

미확인

1. chrome://extensions에서 확장을 새로고침하고, 타임라인 댓글이 있는 영상에서 트랙의 ✎를 누른다.
2. 바의 양 끝에 적힌 시각이 앞뒤 트랙과 맞는지, 칠해진 구간이 이 트랙 자리에 놓이는지 본다.
3. 시작·끝 칸을 직접 고치고 ±버튼도 눌러, 칠해진 구간이 따라 움직이는지 본다.
4. 사이드바가 좁을 때 바와 양 끝 글씨가 겹치거나 넘치지 않는지 본다.
5. 다크 테마에서 바와 칠해진 구간이 구별되는지 본다.
6. 라이브 방송에서 편집을 열면 바 없이 지금까지처럼 되는지 본다.

🤖 Generated with Claude Code

https://claude.ai/code/session_01VYnZe2mLShC1zKWnAhJxLQ