리포트 화면 React key 중복 버그 + 스크롤 등장 애니메이션

세션 막대 키 충돌

ReportScreen의 세션 막대 리스트가 "Encountered two children with the same key" 에러를 냈다. bars.map이 time+title 문자열을 key로 쓰고 있었는데, 아젠다의 "라이브러리에서 가져오기" 기능이 세션 라이브러리(3개)를 순환 참조하는 구조라 4번째 클릭부터 같은 시간+제목 조합이 다시 들어가면서 키가 충돌했다. bars에 세션의 실제 id를 담아 key로 교체하고, "가져오기"를 5번 클릭해 강제 재현한 뒤 콘솔 에러가 사라지는 걸 확인했다.

스크롤 등장 애니메이션

Reveal.tsx를 신설했다. IntersectionObserver로 섹션이 뷰포트에 들어오면 한 번만 페이드+상승시키고 곧바로 disconnect한다 — 스크롤을 오가거나 리사이즈해도 재발동하거나 깜빡이지 않는다.

opacity·transform만 움직여서 리플로우가 없고, 이동 거리는 고정 px만 써서 화면 회전·리사이즈 중에 걸려도 어색하게 튀지 않는다. 전체를 @media (prefers-reduced-motion: no-preference) 안에 둬서, 그 설정을 끈 사용자에게는 애니메이션 자체가 없고 요소가 처음부터 완전히 보이도록 했다 — 숨겼다가 못 보여주는 사고를 원천 차단하는 방식.

히어로는 로드 시 CSS 키프레임으로 스태거시키고, 아래 섹션들은 섹션당 1개씩 <Reveal>로 묶어서 관찰자 개수를 적게(~10개) 유지했다. 헤드리스 브라우저로 히어로 완료 시점 opacity, 스크롤 전/후 opacity, 리사이즈 후 상태 유지, reduced-motion에서 즉시 표시까지 네 가지를 수치로 확인했다.

덧붙여 히어로 눈썹 라벨 "Portfolio · Solo project"를 "Portfolio"로 줄였다 — 이 시점부터 실제로는 팀원과 함께하는 2인 협업이었기 때문에.