아카이빙 목록·상세·현장 사진 화면 구현

[LSJ102510]

어떤 기능인가요?

아카이빙 목록 화면(Figma 1276:95397)과 거기서 이어지는 화면들을 구현합니다. 목록(연도 필터 + 2열 사진 카드) → 상세(1526:171215) → 현장 사진 목록(1434:59294) → 사진 뷰어(1526:171364)로 이어지고, 모두 Bottom Nav가 없는 화면입니다.

📝 작업 상세 내용

목록 화면

• /archives 라우트 추가 및 ArchivesListScreen 연결
• Top Navigation 구성 (뒤로가기 · 검색 아이콘 버튼)
• ArchivesYearFilter 연도 필터 칩 구현
  • 최근 연도(2026/2025/2024) 칩 + ~2023 드롭다운 (WDS Menu)
  • 이전 연도를 고르면 칩 라벨이 고른 연도로 바뀜
  • 연도별 API가 없어 아직은 선택 상태만 표시
  • 최근 연도 칩은 빌릴게·행사와 공용인 components/ui/FilterChipGroup.tsx를 재사용 (드롭다운 트리거만 로컬)
• ArchivesPhotoCard 사진 카드 컴포넌트화
  • Figma Left/Right variant를 size(small/medium/large) 높이 하나로 통합
  • 하단 그라데이션 오버레이 + 제목/날짜 표시 (텍스트는 WDS Typography)
• 2열 매스너리 레이아웃 (왼쪽 Large/Medium, 오른쪽 Small/Large 번갈아 배치)
• 앨범 목데이터(archivesItems.ts) 및 샘플 이미지 추가
• 사진 카드 그라데이션용 색상 토큰 추가 (gradient-overlay)
• wds-component-usage.md에 아카이빙 화면 WDS 컴포넌트 매핑 추가

상세 화면 (카드 클릭)

• /archives/:archiveId 라우트 추가
• ScreenHeader에 floating variant 추가 (타이틀 없이 대표 사진 위에 겹치는 투명 헤더)
• 대표 사진 + 상단 그라데이션(hero-overlay 토큰), 흰 뒤로가기·공유 버튼
• 제목 / 일시 · 장소 · 담당 부서
• 활동 내용 · 현장 사진 · 관련 페이지 섹션 (ArchivesDetailSection, 섹션 아이콘 asset 커밋)
• ArchivesPhotoGrid — 3칸까지 노출, 더 있으면 마지막 칸에 "N장 더보기" 오버레이

현장 사진 목록 · 뷰어

• /archives/:archiveId/photos — 2열 정사각형 그리드
• /archives/:archiveId/photos/:photoIndex — 사진 뷰어
  • 가로 scroll-snap + snap-always로 한 번에 한 장씩만 넘어감
  • 흐린 배경, 닫기 버튼, WDS PageCounter 카운터

이번 범위에서 뺀 것

• 검색 · 공유 버튼, 관련 페이지 링크 동작 (연결할 화면/URL 없음)
• 상세 · 현장 사진 데이터는 archiveId와 무관한 목업 하나
• ScreenLayout의 hasBottomNav 옵션은 직접 만들지 않고, main에 이미 들어온 라우트 handle 방식(handle: { hasBottomNav: false })을 사용

📁 참고 자료 (선택)

• Figma 아카이빙 목록: 1276:95397
• 이전 연도 드롭다운: 1529:172165
• 아카이빙 상세: 1526:171215
• 현장 사진 목록: 1434:59294
• 사진 뷰어: 1526:171364