小田急テーマに次停車駅案内バナーを追加

[TinyKitten]

Summary

• 小田急テーマかつタブレット表示で、直近の区間に通過駅がある場合に「○○のつぎは○○にとまります」バナーをLineBoardEastの下部に表示
• useNextStation/useAfterNextStationの既存hookを活用
• TransfersHeadingの埼京線テーマと同じLinearGradientスタイルを流用

Test plan

• 小田急テーマ+タブレットで快速急行など通過駅のある種別を選択し、バナーが表示されることを確認
• 各駅停車など通過駅がない場合にバナーが表示されないことを確認
• 小田急テーマ以外ではバナーが表示されないことを確認
• スマートフォン表示ではバナーが表示されないことを確認

🤖 Generated with Claude Code

Summary by CodeRabbit

• 新機能
  • タブレット等の特定表示環境で、画面下部に進行方向の次駅・次々駅の駅名を表示するバナーが追加されました（日本語表記）。
• Tests
  • テスト環境で次駅情報を明示的に未設定とするモックを導入し、レンダリング挙動の安定化を図りました。

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8405ed46-5f9f-4f2d-a32f-67eaa38928dd

📥 Commits

Reviewing files that changed from the base of the PR and between 6d8236d and 4206cb7.

📒 Files selected for processing (2)

• src/components/LineBoardEast.test.tsx
• src/components/LineBoardEast.tsx

---

📝 Walkthrough

Walkthrough

LineBoardEastにuseNextStation/useAfterNextStationを組み込み、isOdakyu/isTablet/通過駅の有無と駅名で下部に次駅バナー（LinearGradient + Heading）を条件表示する処理を追加。テストで両フックのJestモックを明示的に追加した。

Changes

Cohort / File(s)	Summary
LineBoardEast component src/components/LineBoardEast.tsx	useNextStationとuseAfterNextStationを利用してhasPassStationとshowNextStopBannerをメモ化。表示条件成立時に下部にLinearGradient＋Headingで次/次々駅名を結合して表示するオーバーレイを追加。既存の駅セル描画ロジックは変更なし。
Tests / Mocks src/components/LineBoardEast.test.tsx	~/hooks/useAfterNextStationと~/hooks/useNextStationを明示的にJestモック化し、それぞれundefinedを返すように設定（テストケース自体は追加していない）。

Sequence Diagram(s)

sequenceDiagram
    participant UI as LineBoardEast(Component)
    participant Hook1 as useNextStation(Hook)
    participant Hook2 as useAfterNextStation(Hook)
    participant UIComp as Heading/LinearGradient

    UI->>Hook1: nextStationを取得
    Hook1-->>UI: nextStation または undefined
    UI->>Hook2: afterNextStationを取得
    Hook2-->>UI: afterNextStation または undefined
    UI->>UI: hasPassStation/isOdakyu/isTablet を評価
    alt showNextStopBanner == true
        UI->>UIComp: 下部バナーをレンダリング（Heading + LinearGradient）
    else
        UI-->>UI: バナーを描画しない
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

次の駅見つけたウサギだよ🐇
フックをつまんで、名前を二つ並べたよ
ほらグラデでふわり、道が光るよ✨
タブレット越しにも小さな看板ぴょん
進め、次へ、もっと遠くへ

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	PRのタイトルは、小田急テーマに次停車駅案内バナーを追加するという変更内容を明確かつ簡潔に表現しており、changsetの主要な変更を正確に反映しています。
Description check	✅ Passed	PRの説明には概要、変更内容、テスト計画が記載されていますが、公式テンプレートの「変更の種類」セクションにチェックが入っておらず、「npm run typecheck が通ること」のチェックボックスが未チェックです。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/odakyu-next-stop-banner

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

src/components/LineBoardEast.tsx (1)

557-569: アクセシビリティの改善を検討

バナーにアクセシビリティ属性が設定されていません。スクリーンリーダー対応として、accessibilityLabelやaccessibilityRoleの追加を検討してください。

♿ アクセシビリティ属性の追加案

       {showNextStopBanner ? (
         <LinearGradient
           colors={['white', '#ccc', '#ccc', 'white']}
           start={[0, 1]}
           end={[1, 0]}
           locations={[0, 0.1, 0.9, 1]}
           style={localStyles.nextStopBanner}
+          accessible
+          accessibilityRole="text"
+          accessibilityLabel={`${nextStation?.name}のつぎは${afterNextStation?.name}にとまります`}
         >
           <Heading style={localStyles.nextStopBannerText}>
             {`${nextStation?.name}のつぎは${afterNextStation?.name}にとまります`}
           </Heading>
         </LinearGradient>
       ) : null}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/LineBoardEast.tsx` around lines 557 - 569, The next-stop
banner rendered when showNextStopBanner is true (the LinearGradient element
styled by localStyles.nextStopBanner and its Heading child) lacks accessibility
attributes; update the LinearGradient (or its wrapper) to include
accessibilityRole (e.g., "header" or "banner"), an accessibilityLabel that reads
the composed text using nextStation?.name and afterNextStation?.name, and set
accessible={true} so screen readers announce the content; ensure the Heading
does not duplicate announcements (use accessibilityElementsHidden or
accessibilityLabel on Heading as appropriate).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/LineBoardEast.tsx`:
- Around line 557-569: The next-stop banner rendered when showNextStopBanner is
true (the LinearGradient element styled by localStyles.nextStopBanner and its
Heading child) lacks accessibility attributes; update the LinearGradient (or its
wrapper) to include accessibilityRole (e.g., "header" or "banner"), an
accessibilityLabel that reads the composed text using nextStation?.name and
afterNextStation?.name, and set accessible={true} so screen readers announce the
content; ensure the Heading does not duplicate announcements (use
accessibilityElementsHidden or accessibilityLabel on Heading as appropriate).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ff02e07f-f2f6-4560-a5bf-2c94426b974d

📥 Commits

Reviewing files that changed from the base of the PR and between 211d2ad and 6d8236d.

📒 Files selected for processing (1)

• src/components/LineBoardEast.tsx