MSG-606 feat: [모바일] 영상 업로드 진입 화면 리디자인 — 격자 히어로·위치 카드·확보 타일·AI 한 줄 안내

[Ss0Mae]

개요

사용자 지적(2026-09-25): "영상 업로드 화면 UI/UX가 구리다". 앱스토어 상위 앱 촬영 진입 패턴을 조사해 Figma에 A/B/C 3안을 그렸고, 네이티브 카메라·갤러리 구조를 유지하는 A-2로 확정. Figma: 제안 — 영상 업로드 리디자인 (2026-09-25) 페이지 node 16175:358.

변경 (화면만, 로직 무변경)

• upload-screen.tsx — 안내 박스 2개(Toast)·검은 배너·"위치 태그" 라벨+Chip → 격자 히어로 + 확보 타일 2개 + 파일 제약 캡션 + AI 한 줄 안내. 갤러리/카메라 핸들러·검증·분석 전환·실패 문구 표시는 그대로.
• upload-hero.tsx (신규, 화면 로컬) — 연파랑 스테이지 6×4 격자 + primary 카메라 칸 + 떠 있는 위치 카드("지금 여기" pill · 역지오코딩 주소 · "이 격자에 기록돼요", 행사 귀속이면 "행사 위치에 기록돼요").
• upload-source-tile.tsx (신규) — 카메라(primary)·갤러리(soft) 타일, 접근성 라벨/힌트.
• 색·모서리·간격 전부 토큰(primary/10·surface·rounded-xl/lg·shadow-modal), 아이콘 lucide Camera/Images/Sparkles/MapPin.
• nose.baseline.json — upload 화면이 속한 가족만 교체(신규 0).

검증

항목	결과
typecheck · lint · format:check · check:duplication	통과
iOS 시뮬레이터(Metro, 부산 서면 좌표) fillmap://upload	렌더 확인 — 아래 스크린샷
타일 탭 → 네이티브 카메라/갤러리	핸들러 동일(코드 무변경)
codex review (--base develop --scope branch)	지적 없음

리뷰 반영

• 행사 귀속 업로드 pill "행사 현장"(GPS 아님) · 격자 accessibilityElementsHidden(iOS) · 아이콘 색 semantic.primary · 카메라 칸 52px 돌출(사용자 요청)

📸 스크린샷

Figma A-2 시안	iOS 시뮬레이터 구현 (부산 서면 좌표, 리뷰 반영 후)

🤖 Generated with Claude Code

[claude]

Claude finished @Ss0Mae's task in 5m 35s —— View job

---

코드 리뷰 완료

• 컨텍스트 파악 (PR 설명, 변경 파일 목록 확인)
• upload-hero.tsx 리뷰
• upload-source-tile.tsx 리뷰
• upload-screen.tsx 리뷰
• nose.baseline.json 변경 확인
• 인라인 코멘트 작성
• 요약 코멘트 게시 (gh pr comment)

전체 요약은 이 코멘트에 게시했고, upload-hero.tsx에 🟡 인라인 코멘트 1건(링크)을 남겼습니다.

한 줄 요약: 로직은 무변경이고 토큰·접근성 처리가 꼼꼼한 리디자인입니다. 다만 행사 귀속 업로드 시 위치 카드 pill 문구 "지금 여기"가 sublabel과 달리 분기되지 않아 실제 위치가 아닌데도 "지금 여기"라고 단정하는 불일치를 발견해 인라인으로 수정안을 제시했습니다. 나머지는 참고용 사소한 제안입니다.
· 브랜치

[github-actions]

React Doctor found no new issues. 🎉

_{Reviewed by React Doctor for commit c700792.}

[claude]

코드 리뷰 요약 — MSG-606 영상 업로드 화면 리디자인

리뷰 대상: upload-hero.tsx(신규) · upload-source-tile.tsx(신규) · upload-screen.tsx(수정) · nose.baseline.json. diff뿐 아니라 use-upload-location.ts, location-label.ts, event-upload-target.ts, button.tsx 등 관련 코드까지 Read로 확인했습니다.

👍 잘한 점

• PR 설명대로 로직(권한 요청·검증·router.replace 분석 전환)은 전혀 건드리지 않고 화면 마크업만 교체 — 리뷰 범위가 명확하고 회귀 위험이 낮습니다.
• 색·라운드·그림자·아이콘 전부 기존 디자인 토큰(primary/10, shadow-modal, rounded-xl 등)만 사용, 신규 하드코딩 색상 없음.
• UploadHero의 장식용 격자에 importantForAccessibility="no-hide-descendants"를 걸어 스크린리더 노이즈를 막고, 위치 카드만 accessible + 결합 라벨로 남긴 접근성 설계가 꼼꼼합니다.
• UploadSourceTile이 화면 로컬 컴포넌트로 적절히 분리되어 있고 accessibilityRole/Label/Hint를 갖춤.
• nose.baseline.json은 upload/profile 등 실제로 변경 영향을 받은 파일 묶음만 갱신된 것으로 확인했고, PR 설명과 일치합니다.

🟡 권장 수정 (인라인 코멘트 참고)

• upload-hero.tsx 56–69행: 위치 카드의 pill 문구 "지금 여기"가 항상 고정인데, upload-screen.tsx는 eventTarget 유무에 따라 바로 아래 sublabel을 "이 격자에 기록돼요" / "행사 위치에 기록돼요"로 분기합니다. event-upload-target.ts를 보면 행사 귀속 업로드는 좌표를 안 보내고 {행사명}·{위치명}을 라벨로 쓰는 경로라 실제 GPS 위치가 아닐 수 있는데, pill과 접근성 라벨은 여전히 "지금 여기"라고 단정합니다. 변경 전 UI는 중립적인 "위치 태그"라 문제가 없었는데, 이번 리디자인에서 새로 생긴 불일치로 보입니다. pillLabel prop을 추가해 sublabel과 같은 기준으로 분기하는 것을 제안합니다 (인라인 코멘트에 수정 예시 코드 첨부). 확실하지 않은 부분: 행사 귀속 진입이 항상 현장에서만 가능한 플로우라면 "지금 여기"가 틀린 표현이 아닐 수 있습니다 — 기획 의도 확인이 필요합니다.

🟢 사소한 제안

• upload-screen.tsx의 두 UploadSourceTile 호출이 아이콘 색만 다르고 구조가 거의 동일합니다. 지금 규모(2개)에서는 인라인이 오히려 읽기 쉬워 반드시 추상화할 필요는 없다고 봅니다만, 타일 종류가 늘어나면 배열 매핑을 고려할 만합니다.
• UploadHero의 HERO_GRID 채움 패턴은 주석("camera는 (2,3) 한 칸")과 실제 배열이 지금은 일치하지만, 향후 배열만 수정하고 주석을 안 고치면 어긋날 수 있는 구조입니다. 큰 문제는 아닙니다.

검토했지만 문제없다고 판단한 부분

• 버튼 연타 방지(디바운스) 부재는 기존 Button 컴포넌트에도 없던 동작이라 이번 PR의 회귀가 아닙니다.
• formatUploadLocationLabel이 region 데이터 로딩 전엔 "현재 위치"로 폴백해 빈 문자열/undefined 렌더 위험은 없습니다.
• 보안·XSS 관련 이슈 없음(모바일 RN, 외부 입력 렌더 없음).

인라인 코멘트 1건을 남겼습니다. 나머지는 참고용 제안입니다.

🤖 Generated with Claude Code

[claude]

Claude finished @Ss0Mae's task in 3m 38s —— View job

---

코드 리뷰 완료

• 컨텍스트 파악 (PR 설명, 이전 리뷰 코멘트, 변경 파일 목록 확인)
• upload-hero.tsx 리뷰 (Read로 전체 확인)
• upload-source-tile.tsx 리뷰
• upload-screen.tsx 리뷰 (diff + 주변 코드)
• nose.baseline.json 변경 확인
• 인라인 코멘트 작성 (🟡 1, 🟢 1)
• 요약 코멘트 게시 (gh pr comment)

전체 요약은 이 코멘트에 게시했습니다.

한 줄 요약: 이전 리뷰의 "지금 여기" pill 지적은 pillLabel prop으로 정확히 반영됐습니다(재확인 완료). 이번엔 upload-hero.tsx의 장식 격자 접근성 숨김 처리(importantForAccessibility)가 iOS에서는 효과가 없는 Android 전용 prop이라는 점을 🟡로, 아이콘 색 하드코딩 중복을 🟢로 인라인 지적했습니다. 🔴 반드시 수정할 이슈는 없습니다.
· 브랜치

[claude]

코드 리뷰 요약 — MSG-606 영상 업로드 화면 리디자인 (재검토, HEAD 340d2c4)

이전 리뷰에서 지적한 "행사 귀속 업로드 시 위치 카드 pill이 항상 '지금 여기'로 고정" 문제는 0446ca6 커밋에서 pillLabel prop을 추가해 정확히 제안대로 수정됐습니다 (upload-screen.tsx에서 eventTarget === null ? "지금 여기" : "행사 현장"로 분기, sublabel과 일관). 재확인 결과 이상 없습니다.

전체 diff(upload-hero.tsx, upload-source-tile.tsx, upload-screen.tsx, nose.baseline.json)를 다시 Read로 정독하고, 연관 로직 파일(event-upload-target.ts, use-upload-location.ts, upload-flow-store.ts)까지 확인했습니다.

👍 잘한 점

• 이전 리뷰 피드백을 정확히 반영 — pillLabel prop 기본값 "지금 여기"로 하위 호환 유지하면서 행사 귀속 케이스만 분기, accessibilityLabel도 동일 기준으로 갱신.
• PR 설명대로 로직(권한 요청·검증·router.replace 분석 전환)은 전혀 건드리지 않고 화면 마크업만 교체 — 회귀 위험이 낮음.
• 색·라운드·그림자 전부 기존 디자인 토큰만 사용, 신규 하드코딩 색상 없음(아래 🟢 제외).
• UploadSourceTile이 화면 로컬 컴포넌트로 적절히 분리, accessibilityRole/Label/Hint 갖춤.
• nose.baseline.json은 upload 화면이 속한 가족만 갱신된 것으로 확인, PR 설명과 일치.

🟡 권장 수정 (인라인 코멘트)

• upload-hero.tsx 47–50행: 장식용 격자를 스크린리더에서 숨기려고 쓴 importantForAccessibility="no-hide-descendants"는 RN 공식 문서 기준 Android 전용 prop입니다. iOS에서 같은 의도를 살리려면 accessibilityElementsHidden이 필요합니다. 같은 패턴을 쓰는 login-hero.tsx는 히어로 전체를 accessible 래퍼로 감싸 양쪽 플랫폼을 다 커버하는데, 이 컴포넌트는 그렇지 않습니다. 지금은 격자 칸에 Text/명시적 라벨이 없어 체감 증상은 없어 보이지만(추측 — VoiceOver 직접 검증은 못했습니다), 주석이 밝힌 "그림이라 낭독 안 함" 의도를 iOS에서도 보장하려면 accessibilityElementsHidden 추가를 권장합니다.

🟢 사소한 제안 (인라인 코멘트)

• upload-screen.tsx 132·152행: palette["blue-500"]가 primary 토큰(packages/design-tokens/src/colors.ts:63)과 값이 동일한데 원시 팔레트를 직접 참조합니다. 꼭 고칠 필요는 없지만 시맨틱 토큰으로 통일하면 향후 primary 색상 변경 시 드리프트를 막을 수 있습니다.
• (이전 리뷰에서 이미 언급) 타일 2개 인라인 반복, HERO_GRID 주석-배열 동기화는 지금 규모에서 문제없다고 판단 — 변경 없음.

검토했지만 문제없다고 판단한 부분

• EventUploadTarget의 eventTarget: EventUploadTarget | null 타입과 eventTarget === null 분기 일치 확인.
• useUploadLocation의 resolveMapCenter가 총함수(never rejects)라 별도 에러 처리 불필요 — 기존과 동일.
• 버튼 연타 방지(디바운스) 부재는 기존 Button/Pressable에도 없던 동작이라 이번 PR의 회귀 아님.
• 보안·XSS 관련 이슈 없음(모바일 RN, 외부 입력 렌더 없음).

인라인 코멘트 2건(🟡 1, 🟢 1)을 남겼습니다. 🔴 반드시 수정할 이슈는 발견하지 못했습니다.

[claude]

Claude finished @Ss0Mae's task in 3m 36s —— View job

---

코드 리뷰 완료

• 컨텍스트 파악 (PR 설명, 이전 리뷰 코멘트 2건, 최신 커밋 c700792 확인)
• 최신 커밋(c700792)이 이전 리뷰 지적을 실제로 반영했는지 재확인
• upload-hero.tsx 전체 재검토
• upload-source-tile.tsx 재검토
• upload-screen.tsx 재검토
• nose.baseline.json 변경 확인 (develop 대비 대조)
• 인라인 코멘트 작성 (신규 이슈 없어 생략)
• 요약 코멘트 게시 (gh pr comment)

한 줄 요약: 이전 세 차례 리뷰(pill 문구, iOS 접근성 숨김 prop, 색상 하드코딩)에서 지적한 사항 모두 최신 커밋 c700792에서 정확히 반영됐습니다. 카메라 칸 52px 돌출(size-13 + -m-1)도 native.ts의 기존 spacing step으로 실제 생성되는 클래스임을 확인했고, shadow-fab 토큰도 유효합니다. 🔴/🟡 신규 이슈는 발견하지 못했습니다. 전체 리뷰 내용은 요약 코멘트 참고.
· 브랜치

[claude]

코드 리뷰 요약 — MSG-606 영상 업로드 화면 리디자인 (재검토, HEAD c700792)

이전 두 차례 리뷰에서 지적한 사항이 이번 커밋(c700792 "리뷰 반영 — iOS 접근성 숨김 prop 추가, 아이콘 색 semantic.primary, 카메라 칸 52px 돌출")에서 어떻게 반영됐는지 diff(340d2c4..c700792)와 관련 파일(upload-hero.tsx, upload-screen.tsx, upload-source-tile.tsx, nose.baseline.json, packages/design-tokens/src/colors.ts, packages/tailwind-preset/native.ts)를 Read로 직접 확인했습니다.

✅ 이전 지적 반영 확인

• iOS 접근성 숨김 (🟡, 2번째 리뷰): upload-hero.tsx:50-53에서 장식 격자 View에 importantForAccessibility="no-hide-descendants"와 accessibilityElementsHidden을 함께 걸어 Android/iOS 양쪽 다 커버하도록 고쳤습니다 — login-hero.tsx 패턴과 동일한 의도. 정확한 수정입니다.
• 하드코딩 색상 (🟢, 2번째 리뷰): upload-screen.tsx:132, 152의 palette["blue-500"]를 semantic.primary로 교체. packages/design-tokens/src/colors.ts에서 semantic.primary = palette["blue-500"]로 값이 동일함을 재확인했습니다 — 드리프트 방지 목적에 맞게 정확히 반영됐습니다.
• "지금 여기" pill 문구 (🟡, 1번째 리뷰): 이전 라운드에서 이미 pillLabel prop으로 반영된 것을 재확인 — 이번 커밋에서도 그대로 유지되고 있습니다.

👍 이번 커밋에서 새로 만진 부분 검증

• 카메라 칸 52px 돌출 (upload-hero.tsx:26-28): size-13(52px)에 -m-1(음수 마진)로 행 높이(44px) 기여분을 유지하는 방식입니다. packages/tailwind-preset/native.ts의 nativeSpacingSteps에 13(→52px, n*4px 규칙)이 이미 등록돼 있어(다른 소비처 — 온보딩 TopBar) 클래스가 실제로 생성됨을 확인했습니다. z-10으로 인접 셀 위에 그려지는 것도 의도된 겹침 효과와 일치합니다. shadow-fab 토큰도 packages/design-tokens/src/shadows.ts에 정의돼 있어 유효합니다.
• nose.baseline.json: profile-screen.tsx ↔ upload-screen.tsx 전체 파일 중복 그룹이 develop에 이미 존재하던 것(end_line만 165→169로 갱신)임을 origin/develop 버전과 대조해 확인했습니다. PR 설명대로 신규 중복 없이 upload 가족만 재해시된 것으로 보입니다.

🔴 / 🟡 신규 이슈

없음. 세 차례 리뷰에 걸쳐 지적된 항목이 모두 정확히 반영됐고, 이번 라운드에서 새로 도입된 코드(카메라 칸 크기·아이콘 색)에서도 로직 오류·타입 안전성·성능·가독성·보안 관점에서 문제를 찾지 못했습니다.

검토했지만 문제없다고 판단한 부분

• location-label.ts의 formatUploadLocationLabel 폴백("현재 위치")은 이번 커밋에서 변경되지 않았고 기존 리뷰에서 이미 확인된 그대로입니다.
• upload-hero.tsx/upload-source-tile.tsx는 화면 로컬 순수 프레젠테이션 컴포넌트라 login-hero.tsx 등 기존 히어로 컴포넌트와 동일하게 별도 유닛 테스트가 없는 것이 이 레포 컨벤션과 일치합니다(로직 레이어는 upload/model, upload/api에 테스트 다수 존재).

인라인 코멘트는 추가하지 않았습니다 — 새로 발견된 문제가 없습니다.

🤖 Generated with Claude Code