내 프로필에서 영상을 올리고, 공개로 돌립니다
/me 의 「내 영상」 알약 줄 오른쪽에 업로드를 달았습니다. 파일을 고르면 종목을 묻고, 고르는 순간 올라갑니다 — 계약 3-6절의 세 단계(upload-url → S3 직접 PUT → POST /videos)를 그대로 씁니다.
영상 분석 화면에 이미 있던 그 코드를 복사하지 않았습니다. lib/uploadClip.ts 로 빼서 두 화면이 같은 것을 부릅니다 — 두 벌로 두면 계약이 바뀔 때 한쪽만 고쳐집니다. 종목 목록도 lib/sports.ts 로 같이 뺐습니다.
미리 거르는 것을 형식·용량으로 좁혔습니다
처음에는 길이(60초)와 해상도까지 브라우저에서 막으려 했는데, 계약을 다시 읽고 바꿨습니다. upload-url 이 422 로 튕기는 것은 형식과 용량뿐이고 그 둘은 아무 데도 안 남습니다 — 그래서 미리 막는 편이 낫습니다. 반대로 길이·해상도는 서버가 reject_reason 으로 남겨야 하는 것이고(SFR-001 이 규격 검사를 두는 이유가 그것입니다), 화면이 가로채면 그 사유가 사라집니다.
「업로드 영상」 갈래가 아직 안 채워집니다
계약의 POST /videos 는 규격을 통과한 클립에 늘 분석을 겁니다. 프로필은 analysis_job_id 로 두 갈래를 가르므로, 그대로 두면 올린 것이 전부 「분석 영상」으로 갑니다. 등록 본문에 analyze: false 를 실어 보내되 — 🔴 화면은 보낸 뜻이 아니라 돌아온 응답을 믿습니다. 백엔드가 그 필드를 모르고 분석을 걸면 화면도 정직하게 「분석 영상」에 넣습니다. 거짓말하지 않으려고 그렇게 짰고, 덕분에 이게 없어도 화면은 안 깨집니다.
→ 미결 「분석을 걸지 않고 올리기만 할 방법이 없습니다」 (담당 정어진)
공개/비공개는 아직 이 브라우저에만 남습니다
업로드 갈래의 영상에 공개 토글을 달았습니다. 켤 때 제목과 한 줄 설명을 묻고, 공개한 것은 홈에서 내리면 나오는 영상 모음 맨 앞에 붙습니다.
⚠️ 계약에 클립의 공개 여부가 없어서 localStorage 에 둡니다. 다른 기기에서도, 남에게도 안 보입니다 — 화면에도 그렇게 적어 두었습니다. 숨기면 다른 기기에서 안 보일 때 고장으로 읽힙니다.
남의 영상까지 나오려면 넷이 필요합니다: 공개 여부 · 공개 클립 목록 · 재생용 주소 · 제목/설명. 그때까지 이 자리에 늘어나는 것은 내 것뿐입니다.
→ 미결 「클립에 공개 여부가 없어 영상 모음을 서버로 못 옮깁니다」 (담당 정어진)
데인 것
userEvent.upload는accept를 실제로 거릅니다.accept="video/mp4,..."로 좁혀 두면 webm 을 고르는 시험이 아예 안 돕니다. 실제 브라우저에서도 파일 고르기 창의 거름망은 바꿀 수 있으므로accept는 힌트일 뿐입니다 — 진짜 관문은checkClip이고, 그래서video/*로 열어 두었습니다.- 이 jsdom 조합은
window.localStorage를 안 깔아 줍니다. URL 은http://localhost:3000/로 멀쩡한데도undefined입니다(실측). 시험만 다른 세상이 되지 않게vitest.setup.ts에서 메모리 저장소를 세웠습니다 — 있으면 안 건드립니다. - 저장소는 그릴 때 읽으면 안 됩니다. 서버에는 그 값이 없어서 서버가 그린 첫 화면과 브라우저가 그린 것이 갈립니다. 붙은 뒤에 한 번 읽습니다.
- 🔴
.ss-profile-tabs는CardEditor도 씁니다. 업로드를 붙이려고 줄을 하나로 감싸고 들고 남 연출의 선택자를 그 줄로 옮겼더니, 왼쪽 칸 카드 꾸미기의 알약 줄에서 연출이 통째로 사라졌습니다. 눈으로는 안 보이고querySelector가 왼쪽 것을 먼저 집는 바람에 실측에서 잡혔습니다 — 감싼 줄에는 연출을 걸지 않고 원래 선택자를 두되.ss-profile-upload만 같은 목록에 넣는 것이 맞습니다. - 🔴 선택자 목록에 한 줄 끼워 넣을 때 접두사를 빠뜨리면 조용히 늘 걸립니다. 나갈 때 규칙(
.ss-profile[data-leaving='true'] …)에.ss-profile-upload,만 넣었더니 나가는 연출이 항상 켜져 단추가 28px 위에 떠 있었습니다(실측). 화면은 멀쩡해 보였고 시험도 다 통과했습니다 — 좌표를 재서야 알았습니다. 'use client'는 import 보다 위여야 합니다. 자동 치환으로 import 를 파일 맨 앞에 넣었다가 지시자가 죽었습니다 — 빌드는 통과하고 lint 경고 한 줄만 났습니다.
확인
시험 315개 통과(새로 26개) · tsc --noEmit 깨끗 · next build 통과 · 로컬에서 데모 계정으로 /me 를 받아 업로드 자리가 실제로 그려지는 것까지 봤습니다.
⚠️ 업로드 자체는 로컬에서 끝까지 못 돌렸습니다 — 이 환경에서 BACKEND_BASE_URL 이 도달하지 않습니다(배포 문서의 그 문제). USE_MOCK=1 이라 목록도 mock 입니다.