[Refactor/#23] 화면 헤더를 ScreenHeader 하나로 통합

[xeoxxn]

#️⃣연관된 이슈

• Closes 화면 헤더(Top Navigation) 통합 컴포넌트 #23

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

화면마다 TopNavigation을 직접 새로 조립하던 걸, Figma에서 실제로 확인되는 Top Navigation 패턴(타이틀 정렬, leading/trailing 아이콘 조합, 게시판류의 토글형 2단 타이틀 등)을 props로 고를 수 있는 ScreenHeader 하나로 통합한다.

❓ 왜 해결해야 하나요?

화면마다 손으로 조립하면 트레일링 아이콘 조합, variant 선택, 타이포그래피(글자 크기)가 화면 수만큼 반복되고 어긋나기 쉽다 — 실제로 이전 세션에서 Bottom Nav 라벨 폰트 크기가 Figma 값과 다르게 굳어있던 사례가 있었다. 디자인 자체를 바꾸는 게 아니라, 이미 있는 WDS TopNavigation을 얇게 감싸는 지점을 하나로 모으는 리팩토링이다.

⭐ 어떻게 해결했나요?

• ScreenHeader props를 variant("display"/"normal") + title(문자열 또는 { options, activeIndex, onChange } 토글) + leading/trailing(ReactNode)로 재설계
• variant="display"(기본값)에서는 leading을 아예 타입으로 막음 — discriminated union으로 variant="normal"일 때만 leading을 받게 해서, WDS TopNavigation이 display일 때 leading/trailing 포지셔닝 스타일을 안 주는 문제(topNavigationLeftIconStyle/RightIconStyle, style.js 확인)를 타입 레벨에서 막았다
• 게시판류의 "공지 | 열린피드백" 같은 토글 타이틀은 title을 객체로 넘기면 Typography variant="title3" weight="bold" + 활성(semantic.label.strong)/비활성(semantic.label.disable) 색 분기로 렌더링
• 기존 호출부(HomeScreen, BililgeListScreen)는 트레일링 아이콘(검색·알림)을 이제 직접 넘기도록 마이그레이션 — 화면에 보이는 결과는 동일

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

• search variant(타이틀 자리가 검색 필드로 바뀌는 패턴)는 범위에서 뺐다 — 지금 실제로 쓰는 화면이 없고, 검색 화면을 만들 때 다시 판단하는 게 맞다고 봄(docs/plans/unified-screen-header.md 참고, 로컬 전용 문서라 이 PR에는 안 올라감).
• 게시판/행사 등 아직 라우트로 안 만든 화면에서 실제로 이 컴포넌트를 써보진 않았다 — 토글 타이틀 분기는 빌릴게 헤더에 임시로 꽂아 렌더링까지만 확인하고 되돌렸다.

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

홈/빌릴게 화면 헤더 렌더링 결과는 동일(스크린샷 비교 확인). 두 화면 모두 트레일링 아이콘을 직접 넘기도록 호출부가 바뀌었다.

🔀 Edge Case & 실패 시나리오

variant="display"에서 leading을 넘기려고 하면 타입 에러로 막힌다(런타임 경고가 아니라 컴파일 타임에 막음).

📋 검토한 대안과 선택 이유

• preset="list"|"modal"|"search" 같은 프리셋형 API도 고려했으나, 화면이 아직 4~5개뿐이라 미리 추상화할 근거가 부족하다고 판단해 variant/title/leading/trailing을 그대로 노출하는 조합형으로 결정했다(기존 컨벤션 — WDS variant를 유니온 타입으로 그대로 노출 — 과도 더 맞음).

💬 리뷰 포인트

• [c] discriminated union으로 leading 제약을 표현한 방식이 과하지 않은지, 더 간단한 방법이 있을지 의견 부탁드립니다.