feat: paginate notice ticker by browser width instead of per sentence

Sentence-per-page left wide screens underfilled. Pack each notice's text
into width-fitting pages, measured against the ticker's actual rendered
width via canvas measureText, so a notice fills one line on desktop and
only splits into rotating pages when it overflows on narrow screens.
Repaginate on resize (debounced 150ms). Falls back to title + sentence
splitting when the width can't be measured.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: JaeRyoungKa

src/main.js

@@ -10,7 +10,7 @@ import {
   toIsoDate
 } from "./utils/time.js";
 import { resolveServiceDay, getResolvedDay } from "./utils/serviceDay.js";
-import { buildNoticePages } from "./utils/noticeTicker.js";
+import { buildNoticePages, createTickerFit } from "./utils/noticeTicker.js";
 import { getStopShortName } from "./utils/stopLabels.js";
 import { escapeHtml, matchesQuery, highlightMatch } from "./utils/search.js";
 import { getCompositionFallback } from "./utils/imeSearch.js";
@@ -175,6 +175,8 @@ let noticeTickerTimer = null;
 let noticeTickerIndex = 0;
 let noticeTickerFadeTimer = null;
 let noticeTickerSwapTimer = null;
+let noticeTickerResizeBound = false;
+let noticeTickerResizeTimer = null;
 
 function localizeRoute(route) {
   return getLocalizedText(route, state.locale, "name");
@@ -723,6 +725,13 @@ function renderNotices() {
 function renderNoticeTicker() {
   const ticker = document.querySelector("#noticeTicker");
   if (!ticker) return;
+  if (!noticeTickerResizeBound) {
+    noticeTickerResizeBound = true;
+    window.addEventListener("resize", () => {
+      clearTimeout(noticeTickerResizeTimer);
+      noticeTickerResizeTimer = setTimeout(renderNoticeTicker, 150);
+    });
+  }
   const flashNoticeSection = () => {
     const target = document.querySelector("#notice");
     if (!target) return;
@@ -770,7 +779,7 @@ function renderNoticeTicker() {
     return;
   }
 
-  const pages = buildNoticePages(visible, state.locale === LOCALES.EN);
+  const pages = buildNoticePages(visible, state.locale === LOCALES.EN, createTickerFit(ticker));
 
   const goNoticeSection = () => {
     const target = document.querySelector("#notice");

src/route.js

@@ -10,7 +10,7 @@ import {
   toIsoDate
 } from "./utils/time.js";
 import { getResolvedDay } from "./utils/serviceDay.js";
-import { buildNoticePages } from "./utils/noticeTicker.js";
+import { buildNoticePages, createTickerFit } from "./utils/noticeTicker.js";
 import { getStopShortName } from "./utils/stopLabels.js";
 import { escapeHtml, matchesQuery, highlightMatch } from "./utils/search.js";
 import { getCompositionFallback } from "./utils/imeSearch.js";
@@ -66,6 +66,8 @@ let noticeTickerTimer = null;
 let noticeTickerIndex = 0;
 let noticeTickerFadeTimer = null;
 let noticeTickerSwapTimer = null;
+let noticeTickerResizeBound = false;
+let noticeTickerResizeTimer = null;
 
 function localizeRoute(route) {
   return getLocalizedText(route, state.locale, "name");
@@ -101,6 +103,14 @@ function renderNoticeTicker() {
   const ticker = document.querySelector("#noticeTicker");
   if (!ticker) return;
 
+  if (!noticeTickerResizeBound) {
+    noticeTickerResizeBound = true;
+    window.addEventListener("resize", () => {
+      clearTimeout(noticeTickerResizeTimer);
+      noticeTickerResizeTimer = setTimeout(renderNoticeTicker, 150);
+    });
+  }
+
   if (noticeTickerTimer) {
     clearInterval(noticeTickerTimer);
     noticeTickerTimer = null;
@@ -138,7 +148,7 @@ function renderNoticeTicker() {
     return;
   }
 
-  const pages = buildNoticePages(visible, state.locale === LOCALES.EN);
+  const pages = buildNoticePages(visible, state.locale === LOCALES.EN, createTickerFit(ticker));
 
   const draw = (withFade = false) => {
     const text = pages[noticeTickerIndex % pages.length];

src/utils/noticeTicker.js

@@ -1,21 +1,65 @@
 // 상단 공지 티커에서 쓸 '페이지' 배열을 만든다.
-// 각 공지는 "[태그] 제목" 페이지 + 본문을 문장 단위로 나눈 페이지들로 분해된다.
-// 티커는 이 페이지들을 일정 시간마다 한 줄씩 위로 올려 보여주므로,
-// 공지가 길어도 잘리지 않고 문장이 순서대로 전부 노출된다.
-// 짧은 공지(본문 없음)는 제목 한 페이지로 끝난다.
-export function buildNoticePages(notices, isEn) {
+//
+// fit(측정 정보)이 주어지면 각 공지 텍스트를 브라우저에서 실제로 보이는 폭에 맞춰
+// 단어 단위로 최대한 채워 끊는다. 넓은 화면에서는 공지 하나가 한 페이지에 다 들어가고,
+// 좁은 화면에서는 여러 페이지로 나뉘어 순환한다.
+// fit이 없으면(측정 불가) 제목 + 본문 문장 단위로 폴백한다.
+export function buildNoticePages(notices, isEn, fit = null) {
   const pages = [];
   for (const notice of notices) {
     const tag = isEn ? notice.tagEn || notice.tag || "Notice" : notice.tag || "공지";
     const title = isEn ? notice.titleEn || notice.title : notice.title;
     const body = isEn ? notice.bodyEn || notice.body || "" : notice.body || "";
-    pages.push(`[${tag}] ${title}`);
-    // 문장 끝(. ! ? 。) 뒤 공백을 기준으로 본문을 문장 단위로 분해.
-    const sentences = body
-      .split(/(?<=[.!?。])\s+/)
-      .map((s) => s.trim())
-      .filter(Boolean);
-    for (const sentence of sentences) pages.push(sentence);
+    const full = `[${tag}] ${title}${body ? ` - ${body}` : ""}`.trim();
+    if (fit && fit.availWidth > 0 && typeof fit.measure === "function") {
+      wrapToWidth(full, fit, pages);
+    } else {
+      pages.push(`[${tag}] ${title}`);
+      for (const sentence of splitSentences(body)) pages.push(sentence);
+    }
   }
   return pages;
 }
+
+// 문장 끝(. ! ? 。) 뒤 공백을 기준으로 본문을 문장 단위로 분해 (폴백용).
+function splitSentences(body) {
+  return body
+    .split(/(?<=[.!?。])\s+/)
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
+// 단어를 순서대로 채우다 availWidth를 넘기면 새 페이지로 넘긴다.
+function wrapToWidth(text, fit, out) {
+  const words = text.split(/\s+/).filter(Boolean);
+  let line = "";
+  for (const word of words) {
+    const candidate = line ? `${line} ${word}` : word;
+    if (line && fit.measure(candidate) > fit.availWidth) {
+      out.push(line);
+      line = word;
+    } else {
+      line = candidate;
+    }
+  }
+  if (line) out.push(line);
+}
+
+// 티커 엘리먼트의 현재 렌더 폭·폰트를 재서 buildNoticePages에 넘길 fit 객체를 만든다.
+// 폭을 못 재면(숨김/미마운트) null 을 반환해 문장 단위 폴백을 타게 한다.
+export function createTickerFit(el) {
+  if (!el || typeof document === "undefined" || typeof getComputedStyle !== "function") return null;
+  const cs = getComputedStyle(el);
+  const availWidth =
+    el.clientWidth -
+    parseFloat(cs.paddingLeft || "0") -
+    parseFloat(cs.paddingRight || "0") -
+    2; // 소수점/자간 오차 여유
+  if (!(availWidth > 0)) return null;
+  const canvas =
+    createTickerFit._canvas || (createTickerFit._canvas = document.createElement("canvas"));
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  ctx.font = `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
+  return { availWidth, measure: (text) => ctx.measureText(text).width };
+}