공지 쇼케이스

이 페이지는 공지/알림의 실제 프런트엔드 렌더링을 확인하기 위한 쇼케이스다.
실제 빌드 후에는 이 페이지 하나에서 전역 배너, 섹션 안내, 모달형 공지, 인라인 카드형 공지를 동시에 확인할 수 있어야 한다.

확인 포인트는 다음과 같다.

• 상단 전역 배너가 모든 페이지 종류에서 보이는가
• 섹션 전용 sticky 안내가 실제 탐색 흐름을 방해하지 않는가
• 모달형 공지가 닫기/숨기기 동작 이후 다시 뜨지 않는가
• 인라인 카드형 공지가 본문 흐름과 자연스럽게 이어지는가
• 이미지, CTA, 보조 CTA, 캡션이 언어별로 교체되는가
• 여러 공지가 동시에 활성화되어도 모두 렌더링되는가
• 모바일에서 이미지가 과도하게 커지지 않고 버튼이 잘 접히는가

이 페이지는 announcementProfile = "showcase" 프런트매터만으로 동작한다.
운영 중에는 아래 샘플이 실제 화면에 어떻게 쌓이는지 먼저 보고, 필요할 때만 enabled 값을 끄거나 켜서 조정하면 된다.

실제 렌더링에서 기대되는 모양

1. 전역 배너

• 상단 영역에 가장 먼저 붙는다.
• 모든 언어에서 같은 구조를 유지하고, 문구만 언어별 오버라이드가 바뀐다.
• 닫기 후에는 각 공지의 storageKey 별로 다시 제어된다.

2. 섹션 안내

• theme-upgrade-lab 계열 콘텐츠에서만 보여야 한다.
• 본문을 압박하지 않고 카드처럼 자연스럽게 붙어야 한다.
• 긴 안내문이 들어와도 모바일에서 글자가 깨지면 안 된다.

3. 모달형 공지

• showModal() 에 의존하지 않고도 안전하게 렌더링되어야 한다.
• dismiss 후에는 다시 보이지 않아야 한다.
• 한 페이지에 다른 공지가 함께 있어도 서로 간섭하면 안 된다.

4. 인라인 카드형 공지

• 본문 중간에 들어가도 문맥이 끊기지 않아야 한다.
• 이미지와 CTA 가 함께 있어도 레이아웃이 무너지면 안 된다.
• 카드 안의 이미지가 화면을 다 차지하지 않아야 한다.

검토 메모

닫기 정책은 세션, 영구 숨김, 시간 제한 중 하나로 고를 수 있다. 이 페이지에서는 모달과 인라인 카드가 announcementProfile = "showcase" 만으로 동작한다. 실제 운영에서는 taxonomy 전용이나 페이지 타입 전용 샘플도 같은 구조로 추가할 수 있다.

이 페이지에서 함께 확인할 것

• _index.toml 의 itemLimit = 0 설정이 실제로 “전부 노출” 로 해석되는가
• announcement.css 와 theme-vars/80-announcement.css 만 바꿔도 카드 톤과 버튼 위계가 바뀌는가
• announcement.js 가 별도 파일로 동작하며, 닫기/숨김 상태를 공지별로 분리하는가
• /ko/ 뿐 아니라 /en/, /jp/, /cn/ 에서도 동일한 구조가 유지되는가
• 비활성화된 taxonomy 예시를 켜면 분류/항목 페이지에서만 노출되는가

이번 패스에서 확인할 변경점

• priority 는 낮은 숫자가 먼저 렌더링된다.
• itemLimit 이 0 이거나 비어 있으면 전체 노출된다.
• 닫기 버튼은 현재 세션 동안만 숨기고, 24시간 동안 숨기기 는 TTL 로 저장된다.
• 버튼 클릭은 직접 바인딩 방식으로 안정성을 높였다.