[Feat/#26] 행사 목록 화면 구현

[leegain1]

#️⃣연관된 이슈

• Closes 행사 목록 화면 구현 #26

🎯 해결하려는 문제가 무엇인가요?

Bottom Nav "행사" 탭에 대응하는 목록 화면이 없어서 탭을 눌러도 갈 곳이 없었다. Figma "행사"(nodeId 1243:70854)를 /events 라우트로 구현한다.

❓ 왜 해결해야 하나요?

• 4개 탭 중 홈·빌릴게만 화면이 있어서 나머지 탭은 라우트 미매칭 상태다.
• 행사 화면은 빌릴게와 헤더·토글·필터·리스트 구조가 거의 1:1이라, 여기서 공통 요소를 제대로 빼두지 않으면 게시판 화면에서 세 번째로 같은 코드를 또 쓰게 된다.

⭐ 어떻게 해결했나요?

• FilterChipGroup 공용화: 행사 상태 필터 칩을 get_design_context로 열어보니 원본이 1016:55355 — 빌릴게 카테고리 필터와 동일한 Stream 로컬 칩이었다. 두 화면이 같은 칩을 쓰는 게 확인돼 components/ui/로 올리고 BililgeCategoryFilter는 상수 + 호출만 남겼다(52줄 → 31줄).
• ScreenHeader에 toolbar 슬롯 추가: Figma Top Navigation/Resource/Contents(h=88)는 Navigation(056) + Tool(5688, 세그먼트 토글) 구조이고, WDS TopNavigation에 이미 대응하는 toolbar prop("Area attached below the navigation")이 있다. 그래서 행사/신청내역 토글을 화면 본문이 아니라 헤더로 넘겼다.
• EventCard: 모집중/모집예정/모집종료 3종. 뱃지는 WDS ContentBadge, CTA는 WDS Button(size="small").
• 모집 상태가 목데이터에 있어서 필터 칩이 실제로 목록을 걸러낸다.

뷰

🧩 이 PR의 한계 & 트레이드오프

• 신청내역 탭은 placeholder만 있다 (백엔드 API 없음).
• "신청하기" 버튼에 클릭 핸들러가 없다 (API 연결 전).
• 썸네일은 Figma에서도 raw #d9d9d9 이미지 슬롯이라 단색 placeholder로 뒀다. 전용 토큰(--color-thumbnail-placeholder)에 "실 API 붙으면 사라질 자리"라고 주석을 남겼다.
• 빌릴게는 아직 대여/반납 토글을 화면 본문에 그린다. 이 PR에서 행사만 toolbar로 옮겨서 두 화면 방식이 갈렸다 — 인접 코드 임의 수정을 피하려고 후속으로 미뤘다(AGENTS.md 작업 원칙).

⛓️ 기존 기능에 미치는 영향

• 빌릴게 화면의 카테고리 필터가 FilterChipGroup을 쓰도록 바뀌었다. 렌더링 결과가 동일한지 실측으로 확인했다.
• ScreenLayout의 Bottom Nav 행사 탭 경로를 /event → /events로 고쳤다(용어 사전 코드 용어 events).
• ScreenHeader의 toolbar는 선택 prop이라 기존 화면(홈·빌릴게)에 영향 없다.

🔀 Edge Case & 실패 시나리오

• 필터 결과가 0건이면 "해당하는 행사가 없어요"를 보여준다. 지금 목데이터로는 안 나오지만 상태가 하나뿐인 데이터가 오면 발생한다.
• 게시판 탭(/board)은 여전히 라우트가 없어서 누르면 빈 화면이 된다 — 이 PR 범위 밖이지만 [Feat/#21] 빌릴게 페이지 목록 화면 구현 #22 리뷰에 남겨둔 사항이다.

📋 검토한 대안과 선택 이유

• 토글을 화면 본문에 두는 안(빌릴게 선례): 채택하지 않았다. WDS가 toolbar 슬롯을 이미 갖고 있어서 우리가 새 패턴을 만드는 게 아니고, 본문에 두면 헤더 고정 영역 밖이라 스크롤 경계가 화면마다 달라진다. component-convention.md §3의 "새 헤더 패턴이 필요하면 ScreenHeader부터 확장한다"와도 맞다.
• EventStatusBadge 래퍼 컴포넌트: 만들려다 뺐다. ContentBadge의 color="accent"|"neutral" 분기가 Figma의 상태별 배경 처리(accent는 8% 오퍼시티, neutral은 fill.normal)와 그대로 1:1이라, 상태 → 토큰 매핑 상수만으로 충분했다.
• CTA에 sx 색 보정: 불필요했다. WDS Button의 &[aria-disabled='true'] 색(interaction.disable + label.assistive)이 Figma 비활성 스펙과 정확히 같아서 disabled prop만 줬다. (빌릴게 카드 버튼은 sx 보정이 필요했던 것과 대조됨)

💬 리뷰 포인트

• [r] Figma 대비 남은 차이 2건이 있는데 둘 다 이 화면이 원인이 아닙니다. ① WDS TopNavigation의 Navigation 행이 64px인데 Figma는 56px(빌릴게 헤더도 실측 64px) ② 필터 칩 높이가 35px인데 Figma는 32px(빌릴게에서 그대로 가져온 값). 누적 11px 밀립니다. ScreenHeader/FilterChipGroup 차원의 결정이 필요해 이번 범위에서 뺐는데, 별도 이슈로 잡을지 봐주세요.
• [c] 빌릴게 토글도 toolbar로 옮겨서 두 화면 방식을 맞출지 판단 부탁드립니다.
• [a] BottomNavValue는 event(단수)인데 라우트는 /events입니다. 탭 식별자라 그대로 뒀는데 통일하는 게 나을지요.